@lion/ui 0.0.1

package/components/core/test/ScopedStylesController.test.js

@@ -0,0 +1,75 @@
+import { expect, fixture } from '@open-wc/testing';
+// import { html as _html } from 'lit/static-html.js';
+import { LitElement, css, html } from 'lit';
+import { ScopedStylesController } from '@lion/ui/core.js';
+
+describe('ScopedStylesMixin', () => {
+  class Scoped extends LitElement {
+    /**
+     * @param {import('lit').CSSResult} scope
+     * @returns {import('lit').CSSResultGroup}
+     */
+    static scopedStyles(scope) {
+      return css`
+        .${scope} .test {
+          color: #fff000;
+        }
+      `;
+    }
+
+    constructor() {
+      super();
+      this.scopedStylesController = new ScopedStylesController(this);
+    }
+
+    render() {
+      return html` <p class="test">Some Text</p> `;
+    }
+
+    createRenderRoot() {
+      return this;
+    }
+  }
+
+  before(() => {
+    customElements.define('scoped-el', Scoped);
+  });
+
+  it('contains the scoped css class for the slotted input style', async () => {
+    const el = /** @type {Scoped & ScopedStylesController} */ (
+      await fixture(html`<scoped-el></scoped-el>`)
+    );
+    expect(el.classList.contains(el.scopedStylesController.scopedClass)).to.equal(true);
+  });
+
+  it('adds a style tag as the first child which contains a class selector to the element', async () => {
+    const el = /** @type {Scoped & ScopedStylesController} */ (
+      await fixture(html` <scoped-el></scoped-el> `)
+    );
+    expect(el.children[0].tagName).to.equal('STYLE');
+    expect(el.children[0].innerHTML).to.contain(el.scopedStylesController.scopedClass);
+  });
+
+  it('the scoped styles are applied correctly to the DOM elements', async () => {
+    const el = /** @type {Scoped & ScopedStylesController} */ (
+      await fixture(html`<scoped-el></scoped-el>`)
+    );
+    const testText = /** @type {HTMLElement} */ (el.querySelector('.test'));
+    const cl = Array.from(el.classList);
+    expect(cl.find(item => item.startsWith('scoped-el-'))).to.not.be.undefined;
+    expect(getComputedStyle(testText).getPropertyValue('color')).to.equal('rgb(255, 240, 0)');
+  });
+
+  it('does cleanup of the style tag when moving or deleting the el', async () => {
+    const wrapper = await fixture(`
+      <div></div>
+    `);
+    const wrapper2 = await fixture(`
+      <div></div>
+    `);
+    const el = document.createElement('scoped-el');
+    wrapper.appendChild(el);
+    wrapper2.appendChild(el);
+    expect(el.children[1]).to.be.undefined;
+  });
+});

package/components/core/test/SlotMixin.test.js

@@ -0,0 +1,289 @@
+import sinon from 'sinon';
+import { defineCE, expect, fixture } from '@open-wc/testing';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { SlotMixin } from '@lion/ui/core.js';
+import { LitElement, html } from 'lit';
+
+function mockScopedRegistry() {
+  // @ts-expect-error wait for browser support
+  ShadowRoot.prototype.createElement = () => {};
+  // @ts-expect-error wait for browser support
+  window.CustomElementRegistry = class {};
+}
+
+function unMockScopedRegistry() {
+  // @ts-expect-error wait for browser support
+  delete ShadowRoot.prototype.createElement;
+  // @ts-expect-error wait for browser support
+  delete window.CustomElementRegistry;
+}
+
+describe('SlotMixin', () => {
+  it('inserts provided element into lightdom and sets slot', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            feedback: () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    expect(el.children[0].slot).to.equal('feedback');
+  });
+
+  it("supports unnamed slot with ''", async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            '': () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    expect(el.children[0].slot).to.equal('');
+    expect(el.children[0]).dom.to.equal('<div></div>');
+  });
+
+  it('supports unnamed slot in conjunction with named slots', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            foo: () => document.createElement('a'),
+            '': () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    expect(el.children[0].slot).to.equal('foo');
+    expect(el.children[1].slot).to.equal('');
+    expect(el.children[0]).dom.to.equal('<a slot="foo"></a>');
+    expect(el.children[1]).dom.to.equal('<div></div>');
+  });
+
+  it('does not override user provided slots', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            feedback: () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}><p slot="feedback">user-content</p></${tag}>`);
+    expect(el.children[0].tagName).to.equal('P');
+    expect(/** @type HTMLParagraphElement */ (el.children[0]).innerText).to.equal('user-content');
+  });
+
+  it('does add when user provided slots are not direct children', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            content: () => document.createElement('div'),
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}><p><span slot="content">user-content</span></p></${tag}>`);
+    const slot = /** @type HTMLDivElement */ (
+      Array.from(el.children).find(elm => elm.slot === 'content')
+    );
+    expect(slot.tagName).to.equal('DIV');
+    expect(slot.innerText).to.equal('');
+  });
+
+  it('supports complex dom trees as element', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        constructor() {
+          super();
+          this.foo = 'bar';
+        }
+
+        get slots() {
+          return {
+            ...super.slots,
+            feedback: () => {
+              const el = document.createElement('div');
+              el.setAttribute('foo', this.foo);
+              const subEl = document.createElement('p');
+              subEl.innerText = 'cat';
+              el.appendChild(subEl);
+              return el;
+            },
+          };
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    expect(el.children[0].slot).to.equal('feedback');
+    expect(el.children[0].getAttribute('foo')).to.equal('bar');
+    expect(/** @type HTMLParagraphElement */ (el.children[0].children[0]).innerText).to.equal(
+      'cat',
+    );
+  });
+
+  it('supports conditional slots', async () => {
+    let renderSlot = true;
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            conditional: () => {
+              if (renderSlot) {
+                const el = document.createElement('div');
+                el.id = 'someSlot';
+                return el;
+              }
+              return undefined;
+            },
+          };
+        }
+      },
+    );
+    const elSlot = await fixture(`<${tag}><${tag}>`);
+    expect(elSlot.querySelector('#someSlot')).to.exist;
+    renderSlot = false;
+    const elNoSlot = await fixture(`<${tag}><${tag}>`);
+    expect(elNoSlot.querySelector('#someSlot')).to.not.exist;
+  });
+
+  it("allows to check which slots have been created via this._isPrivateSlot('slotname')", async () => {
+    let renderSlot = true;
+    class SlotPrivateText extends SlotMixin(LitElement) {
+      get slots() {
+        return {
+          ...super.slots,
+          conditional: () => (renderSlot ? document.createElement('div') : undefined),
+        };
+      }
+
+      didCreateConditionalSlot() {
+        return this._isPrivateSlot('conditional');
+      }
+    }
+
+    const tag = defineCE(SlotPrivateText);
+    const el = /** @type {SlotPrivateText} */ (await fixture(`<${tag}><${tag}>`));
+    expect(el.didCreateConditionalSlot()).to.be.true;
+    const elUserSlot = /** @type {SlotPrivateText} */ (
+      await fixture(`<${tag}><p slot="conditional">foo</p><${tag}>`)
+    );
+    expect(elUserSlot.didCreateConditionalSlot()).to.be.false;
+    renderSlot = false;
+    const elNoSlot = /** @type {SlotPrivateText} */ (await fixture(`<${tag}><${tag}>`));
+    expect(elNoSlot.didCreateConditionalSlot()).to.be.false;
+  });
+
+  it('supports templates', async () => {
+    const tag = defineCE(
+      class extends SlotMixin(LitElement) {
+        get slots() {
+          return {
+            ...super.slots,
+            template: () => html`<span>text</span>`,
+          };
+        }
+
+        render() {
+          return html`<slot name="template"></slot>`;
+        }
+      },
+    );
+    const el = await fixture(`<${tag}></${tag}>`);
+    const slot = /** @type HTMLSpanElement */ (
+      Array.from(el.children).find(elm => elm.slot === 'template')
+    );
+    expect(slot.slot).to.equal('template');
+    expect(slot.tagName).to.equal('SPAN');
+  });
+
+  // TODO: @Thijs is this still needed?
+  it.skip('supports scoped elements when polyfill loaded', async () => {
+    mockScopedRegistry();
+
+    class ScopedEl extends LitElement {}
+
+    const tag = defineCE(
+      class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+        static get scopedElements() {
+          return {
+            // @ts-expect-error
+            ...super.scopedElements,
+            'scoped-el': ScopedEl,
+          };
+        }
+
+        get slots() {
+          return {
+            ...super.slots,
+            template: () => html`<scoped-el></scoped-el>`,
+          };
+        }
+
+        render() {
+          return html`<slot name="template"></slot>`;
+        }
+      },
+    );
+
+    let error = '';
+    try {
+      // @ts-ignore
+      await fixture(html`<${tag}></${tag}>`, { scopedElements: true });
+    } catch (e) {
+      // @ts-ignore
+      error = e.toString();
+    }
+    // it throws when it uses our temp mock (error is browser specific, so we check overlapping part)
+    expect(error).to.include('.importNode is not a function');
+
+    unMockScopedRegistry();
+  });
+
+  it('does not scope elements when polyfill not loaded', async () => {
+    class ScopedEl extends LitElement {}
+
+    const tag = defineCE(
+      class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+        static get scopedElements() {
+          return {
+            // @ts-expect-error
+            ...super.scopedElements,
+            'scoped-el': ScopedEl,
+          };
+        }
+
+        get slots() {
+          return {
+            ...super.slots,
+            template: () => html`<scoped-el></scoped-el>`,
+          };
+        }
+
+        render() {
+          return html`<slot name="template"></slot>`;
+        }
+      },
+    );
+
+    const docSpy = sinon.spy(document, 'createElement');
+    await fixture(html`<${tag}></${tag}>`);
+    // one for the fixture, one for the scoped slot
+    expect(docSpy).to.have.been.calledTwice;
+    docSpy.restore();
+  });
+});

package/components/core/types/DisabledMixinTypes.ts

@@ -0,0 +1,25 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare class DisabledHost {
+  disabled: boolean;
+
+  /**
+   * Makes request to make the element disabled
+   */
+  public makeRequestToBeDisabled(): void;
+
+  /**
+   * Retract request to make the element disabled and restore disabled to previous
+   */
+  public retractRequestToBeDisabled(): void;
+
+  private __internalSetDisabled(value: boolean): void;
+  protected _requestedToBeDisabled: boolean;
+}
+
+export declare function DisabledMixinImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T & Constructor<DisabledHost> & Pick<typeof DisabledHost, keyof typeof DisabledHost>;
+
+export type DisabledMixin = typeof DisabledMixinImplementation;

package/components/core/types/DisabledWithTabIndexMixinTypes.ts

@@ -0,0 +1,30 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+import { DisabledHost } from './DisabledMixinTypes.js';
+export declare class DisabledWithTabIndexHost {
+  tabIndex: number;
+  /**
+   * Makes request to make the element disabled and set the tabindex
+   */
+  public makeRequestToBeDisabled(): void;
+
+  /**
+   * Retract request to make the element disabled and restore disabled and tabindex to previous
+   */
+  public retractRequestToBeDisabled(): void;
+
+  private __internalSetTabIndex(value: boolean): void;
+
+  firstUpdated(changedProperties: import('lit').PropertyValues): void;
+}
+
+export declare function DisabledWithTabIndexMixinImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<DisabledWithTabIndexHost> &
+  Pick<typeof DisabledWithTabIndexHost, keyof typeof DisabledWithTabIndexHost> &
+  Constructor<DisabledHost> &
+  Pick<typeof DisabledHost, keyof typeof DisabledHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type DisabledWithTabIndexMixin = typeof DisabledWithTabIndexMixinImplementation;

package/components/core/types/SlotMixinTypes.ts

@@ -0,0 +1,59 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { TemplateResult, LitElement } from 'lit';
+
+declare function slotFunction(): HTMLElement | Node[] | TemplateResult | undefined;
+
+export type SlotsMap = {
+  [key: string]: typeof slotFunction;
+};
+
+export declare class SlotHost {
+  /**
+   * Obtains all the slots to create
+   */
+  public get slots(): SlotsMap;
+
+  /**
+   * Starts the creation of slots
+   */
+  protected _connectSlotMixin(): void;
+
+  /**
+   * Useful to decide if a given slot should be manipulated depending on if it was auto generated
+   * or not.
+   *
+   * @param {string} slotName Name of the slot
+   * @return {boolean} true if given slot name been created by SlotMixin
+   */
+  protected _isPrivateSlot(slotName: string): boolean;
+
+  connectedCallback(): void;
+}
+
+/**
+ * # SlotMixin
+ *
+ * `SlotMixin`, when attached to the DOM it creates content for defined slots in the Light DOM.
+ * The content element is created using a factory function and is assigned a slot name from the key.
+ * Existing slot content is not overridden.
+ *
+ * The purpose is to have the default content in the Light DOM rather than hidden in Shadow DOM
+ * like default slot content works natively.
+ *
+ * @example
+ * get slots() {
+ *   return {
+ *     ...super.slots,
+ *     // appends <div slot="foo"></div> to the Light DOM of this element
+ *     foo: () => document.createElement('div'),
+ *   };
+ * }
+ */
+export declare function SlotMixinImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<SlotHost> &
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type SlotMixin = typeof SlotMixinImplementation;

package/components/dialog/src/LionDialog.js

@@ -0,0 +1,51 @@
+import { html, LitElement } from 'lit';
+import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';
+
+export class LionDialog extends OverlayMixin(LitElement) {
+  constructor() {
+    super();
+    /** @private */
+    this.__toggle = () => {
+      this.opened = !this.opened;
+    };
+  }
+
+  /**
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlayConfig() {
+    return {
+      ...withModalDialogConfig(),
+    };
+  }
+
+  /**
+   * @protected
+   */
+  _setupOpenCloseListeners() {
+    super._setupOpenCloseListeners();
+    if (this._overlayInvokerNode) {
+      this._overlayInvokerNode.addEventListener('click', this.__toggle);
+    }
+  }
+
+  /**
+   * @protected
+   */
+  _teardownOpenCloseListeners() {
+    super._teardownOpenCloseListeners();
+    if (this._overlayInvokerNode) {
+      this._overlayInvokerNode.removeEventListener('click', this.__toggle);
+    }
+  }
+
+  render() {
+    return html`
+      <slot name="invoker"></slot>
+      <div id="overlay-content-node-wrapper">
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+}

package/components/dialog/test/lion-dialog.test.js

@@ -0,0 +1,74 @@
+import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
+import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
+import '@lion/ui/define/lion-dialog.js';
+
+/**
+ * @typedef {import('../src/LionDialog.js').LionDialog} LionDialog
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ (_fixture);
+
+describe('lion-dialog', () => {
+  // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
+  // Not sure why this "bug" happens...
+  beforeEach(() => {
+    const globalRootNode = document.querySelector('.global-overlays');
+    if (globalRootNode) {
+      globalRootNode.innerHTML = '';
+    }
+  });
+
+  describe('Integration tests', () => {
+    const tagString = 'lion-dialog';
+    const tag = unsafeStatic(tagString);
+
+    runOverlayMixinSuite({
+      tagString,
+      tag,
+      suffix: ' for lion-dialog',
+    });
+  });
+
+  describe('Basic', () => {
+    it('should show content on invoker click', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>
+      `);
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      invoker.click();
+
+      expect(el.opened).to.be.true;
+    });
+
+    it('supports nested overlays', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <div slot="content">
+            open nested overlay:
+            <lion-dialog>
+              <div slot="content">Nested content</div>
+              <button slot="invoker">nested invoker button</button>
+            </lion-dialog>
+          </div>
+          <button slot="invoker">invoker button</button>
+        </lion-dialog>
+      `);
+
+      // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
+      el._overlayInvokerNode.click();
+      expect(el.opened).to.be.true;
+
+      const overlaysContainer = /** @type {HTMLElement} */ (
+        document.querySelector('.global-overlays')
+      );
+      const wrapperNode = Array.from(overlaysContainer.children)[1];
+      const nestedDialog = /** @type {LionDialog} */ (wrapperNode.querySelector('lion-dialog'));
+      // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
+      nestedDialog?._overlayInvokerNode.click();
+      expect(nestedDialog.opened).to.be.true;
+    });
+  });
+});

package/components/fieldset/src/LionFieldset.js

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import { FormGroupMixin } from '@lion/ui/form-core.js';
+
+/**
+ * @desc LionFieldset is basically a 'sub form' and can have its own nested sub forms.
+ * It mimics the native <fieldset> element in this sense, but has all the functionality of
+ * a FormControl (advanced styling, validation, interaction states etc.) Also see
+ * FormGroupMixin it depends on.
+ *
+ * LionFieldset enables the '_isFormOrFieldset' flag in FormRegistrarMixin. This makes .formElements
+ * act not only as an array, but also as an object (see FormRegistarMixin for more information).
+ * As a bonus, It can also group children having names ending with '[]'.
+ *
+ * Above will be  helpful for both forms and sub forms, which can contain sub forms as children
+ * as well and allow for a nested form structure.
+ * Contrary, other form groups (choice groups like radio-group, checkbox-group and (multi)select)
+ * don't: they should be considered 'end nodes' or 'leaves' of the form and their children/formElements
+ * cannot be accessed individually via object keys.
+ *
+ * @customElement lion-fieldset
+ */
+export class LionFieldset extends FormGroupMixin(LitElement) {
+  constructor() {
+    super();
+    /**
+     * @override FormRegistrarMixin
+     * @protected
+     */
+    this._isFormOrFieldset = true;
+    /**
+     * @type {'child' | 'choice-group' | 'fieldset'}
+     * @override FormControlMixin
+     * @protected
+     */
+    this._repropagationRole = 'fieldset';
+  }
+}

package/components/fieldset/test/lion-fieldset.test.js

@@ -0,0 +1,9 @@
+import {
+  runFormGroupMixinSuite,
+  runFormGroupMixinInputSuite,
+} from '@lion/ui/form-core-test-suites.js';
+
+import '@lion/ui/define/lion-fieldset.js';
+
+runFormGroupMixinSuite({ tagString: 'lion-fieldset' });
+runFormGroupMixinInputSuite({ tagString: 'lion-fieldset' });