jpzwarte

    <style>
      dna-page-header[stuck],
      dna-tab-bar[stuck] {
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
        // Make sure the shadow does not bleed at the top
        clip-path: inset(0 0 -10px 0);
      }
    </style>
    <dna-page-header ${sticky()} heading="Hello world!"></dna-page-header>
    <dna-tab-bar ${sticky({ stuckTo: 'dna-page-header' })}>

jpzwarte

import type { StoryObj } from '@storybook/web-components';
import type { RouterLocation } from '@vaadin/router';
import { html } from 'lit';
import { rest } from 'msw';
import { absenceNotices } from '../../data-mocks.js';
import './register.js';

export default {
  title: 'Absence/Pages/Details',
  render: ({ id }: { id: string }) =>

jpzwarte

❯ yarn start
Installing Script Dependencies...
Task readiness up to dev
🟡 install > 🟡 compile > 🟡 sandbox > 🔊 dev

🔄 install > 🟡 compile > 🟡 sandbox > 🔊 dev


> yarn install
✅ install > 🔄 compile > 🟡 sandbox > 🔊 dev

jpzwarte

import type { PropertyValues, ReactiveElement } from 'lit';
import type { Constructor, FormControlInterface } from '@open-wc/form-control';
import { FormControlMixin as OwcFormControlMixin } from '@open-wc/form-control';

export interface FormControl extends FormControlInterface {
  labels: Set<WeakRef<Node>>;
}

let nextUniqueId = 0;

jpzwarte

function managerEntries(entry = []) {
  return [...entry, require.resolve('./register')];
}

module.exports = { managerEntries };

jpzwarte

export type DateParts = { year: string; month: string; day: string };

export function getLocalizedDateParts(locale: string): DateParts {
  const rtf = new Intl.RelativeTimeFormat(locale),
    result: DateParts = { year: '', month: '', day: '' };

  ['year', 'month', 'day'].forEach(part => {
    const parts = rtf.formatToParts(-1, `${part}s` as Intl.RelativeTimeFormatUnit),
      index = parts.findIndex(({ unit }) => unit === part),
      value = parts[index + 1].value;

jpzwarte

module.exports = {
  root: true,
  env: {
    browser: true
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json']
  },

jpzwarte

PoC scoped custom element registries in Angular

1. Render the AppComponent as a custom element

export class AppModule {
  ngDoBootstrap(): void {
    customElements.define('mg-root', createCustomIvyElement(AppComponent));
  }
}

jpzwarte

import { IconRegistry } from '@dna/core/icon';
import { faArrowsH, faArrowsV } from '@fortawesome/pro-regular-svg-icons';
import { styled } from '@storybook/theming';
import React, { FunctionComponent } from 'react';

IconRegistry.addIcons(faArrowsH, faArrowsV);

export interface ComponentSizeProps {
  children?: JSX.Element;
  height?: string;

jpzwarte

import { ListKeyController, ListKeyControllerOption } from './list-key-controller';

export interface FocusableOption extends ListKeyControllerOption {
  /** Focuses the `FocusableOption`. */
  focus(): void;
}

export class FocusKeyController<T> extends ListKeyController<FocusableOption & T> {
  setActiveItem(index: number): void {
    super.setActiveItem(index);