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 { convertMenuPositionToConnectedPositions, MenuPositionValue } from './menu-position';
import { ConnectedPosition } from '@angular/cdk/overlay';

interface TestPosition {
  side: MenuPositionValue,
  align: MenuPositionValue,
  positions: ConnectedPosition[]
}

const POSITIONS: TestPosition[] = [

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

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

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

import { defineCustomElements } from "../dist/esm/loader";

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']
  },