@lion/ui 0.0.1

package/components/combobox/types/SelectionDisplay.ts

@@ -0,0 +1,6 @@
+import { LionCombobox } from '../src/LionCombobox.js';
+
+export interface SelectionDisplay extends HTMLElement {
+  comboboxElement: LionCombobox;
+  onComboboxElementUpdated: Function;
+}

package/components/core/src/DisabledMixin.js

@@ -0,0 +1,77 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+/**
+ * @typedef {import('../types/DisabledMixinTypes.js').DisabledMixin} DisabledMixin
+ */
+
+/**
+ * @type {DisabledMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
+ */
+const DisabledMixinImplementation = superclass =>
+  // eslint-disable-next-line no-shadow
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  class extends superclass {
+    static get properties() {
+      return {
+        disabled: {
+          type: Boolean,
+          reflect: true,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+      /** @protected */
+      this._requestedToBeDisabled = false;
+      /** @private */
+      this.__isUserSettingDisabled = true;
+      /** @private */
+      this.__restoreDisabledTo = false;
+      this.disabled = false;
+    }
+
+    makeRequestToBeDisabled() {
+      if (this._requestedToBeDisabled === false) {
+        this._requestedToBeDisabled = true;
+        this.__restoreDisabledTo = this.disabled;
+        this.__internalSetDisabled(true);
+      }
+    }
+
+    retractRequestToBeDisabled() {
+      if (this._requestedToBeDisabled === true) {
+        this._requestedToBeDisabled = false;
+        this.__internalSetDisabled(this.__restoreDisabledTo);
+      }
+    }
+
+    /**
+     * @param {boolean} value
+     * @private
+     */
+    __internalSetDisabled(value) {
+      this.__isUserSettingDisabled = false;
+      this.disabled = value;
+      this.__isUserSettingDisabled = true;
+    }
+
+    /**
+     * @param {PropertyKey} name
+     * @param {?} oldValue
+     */
+    requestUpdate(name, oldValue) {
+      super.requestUpdate(name, oldValue);
+      if (name === 'disabled') {
+        if (this.__isUserSettingDisabled) {
+          this.__restoreDisabledTo = this.disabled;
+        }
+        if (this.disabled === false && this._requestedToBeDisabled === true) {
+          this.__internalSetDisabled(true);
+        }
+      }
+    }
+  };
+
+export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);

package/components/core/src/DisabledWithTabIndexMixin.js

@@ -0,0 +1,99 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { DisabledMixin } from './DisabledMixin.js';
+
+/**
+ * @typedef {import('../types/DisabledWithTabIndexMixinTypes.js').DisabledWithTabIndexMixin} DisabledWithTabIndexMixin
+ */
+
+/**
+ * @type {DisabledWithTabIndexMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
+ */
+const DisabledWithTabIndexMixinImplementation = superclass =>
+  // eslint-disable-next-line no-shadow
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  class extends DisabledMixin(superclass) {
+    static get properties() {
+      return {
+        // we use a property here as if we use the native tabIndex we can not set a default value
+        // in the constructor as it synchronously sets the attribute which is not allowed in the
+        // constructor phase
+        tabIndex: {
+          type: Number,
+          reflect: true,
+          attribute: 'tabindex',
+        },
+      };
+    }
+
+    constructor() {
+      super();
+      /** @private */
+      this.__isUserSettingTabIndex = true;
+      /** @private */
+      this.__restoreTabIndexTo = 0;
+      this.__internalSetTabIndex(0);
+    }
+
+    makeRequestToBeDisabled() {
+      super.makeRequestToBeDisabled();
+      if (this._requestedToBeDisabled === false && this.tabIndex != null) {
+        this.__restoreTabIndexTo = this.tabIndex;
+      }
+    }
+
+    retractRequestToBeDisabled() {
+      super.retractRequestToBeDisabled();
+      if (this._requestedToBeDisabled === true) {
+        this.__internalSetTabIndex(this.__restoreTabIndexTo);
+      }
+    }
+
+    /**
+     * @param {number} value
+     * @private
+     */
+    __internalSetTabIndex(value) {
+      this.__isUserSettingTabIndex = false;
+      this.tabIndex = value;
+      this.__isUserSettingTabIndex = true;
+    }
+
+    /**
+     * @param {PropertyKey} name
+     * @param {?} oldValue
+     */
+    requestUpdate(name, oldValue) {
+      super.requestUpdate(name, oldValue);
+
+      if (name === 'disabled') {
+        if (this.disabled) {
+          this.__internalSetTabIndex(-1);
+        } else {
+          this.__internalSetTabIndex(this.__restoreTabIndexTo);
+        }
+      }
+
+      if (name === 'tabIndex') {
+        if (this.__isUserSettingTabIndex && this.tabIndex != null) {
+          this.__restoreTabIndexTo = this.tabIndex;
+        }
+
+        if (this.tabIndex !== -1 && this._requestedToBeDisabled === true) {
+          this.__internalSetTabIndex(-1);
+        }
+      }
+    }
+
+    /** @param {import('lit-element').PropertyValues } changedProperties */
+    firstUpdated(changedProperties) {
+      super.firstUpdated(changedProperties);
+      // for ShadyDom the timing is a little different and we need to make sure
+      // the tabindex gets correctly updated here
+      if (this.disabled) {
+        this.__internalSetTabIndex(-1);
+      }
+    }
+  };
+
+export const DisabledWithTabIndexMixin = dedupeMixin(DisabledWithTabIndexMixinImplementation);

package/components/core/src/EventTargetShim.js

@@ -0,0 +1,33 @@
+export class EventTargetShim {
+  constructor() {
+    const delegate = document.createDocumentFragment();
+
+    /**
+     *
+     * @param {string} type
+     * @param {EventListener} listener
+     * @param {Object} [opts]
+     */
+    const delegatedAddEventListener = (type, listener, opts) =>
+      delegate.addEventListener(type, listener, opts);
+
+    /**
+     * @param {string} type
+     * @param {EventListener} listener
+     * @param {Object} [opts]
+     */
+    const delegatedRemoveEventListener = (type, listener, opts) =>
+      delegate.removeEventListener(type, listener, opts);
+
+    /**
+     * @param {Event|CustomEvent} event
+     */
+    const delegatedDispatchEvent = event => delegate.dispatchEvent(event);
+
+    this.addEventListener = delegatedAddEventListener;
+
+    this.removeEventListener = delegatedRemoveEventListener;
+
+    this.dispatchEvent = delegatedDispatchEvent;
+  }
+}

package/components/core/src/ScopedStylesController.js

@@ -0,0 +1,53 @@
+import { unsafeCSS, css } from 'lit';
+
+/**
+ * @typedef {import('lit').ReactiveControllerHost} ReactiveControllerHost
+ * @typedef {import('lit').ReactiveController} ReactiveController
+ * @implements {ReactiveController}
+ */
+export class ScopedStylesController {
+  /**
+   * @param {import('lit').CSSResult} scope
+   * @return {import('lit').CSSResultGroup}
+   */
+  // eslint-disable-next-line no-unused-vars
+  static scopedStyles(scope) {
+    return css``;
+  }
+
+  /**
+   * @param {ReactiveControllerHost & import('lit').LitElement} host
+   */
+  constructor(host) {
+    (this.host = host).addController(this);
+    // Perhaps use constructable stylesheets instead once Safari supports replace(Sync) methods
+    this.__styleTag = document.createElement('style');
+    this.scopedClass = `${this.host.localName}-${Math.floor(Math.random() * 10000)}`;
+  }
+
+  hostConnected() {
+    this.host.classList.add(this.scopedClass);
+    this.__setupStyleTag();
+  }
+
+  hostDisconnected() {
+    this.__teardownStyleTag();
+  }
+
+  __setupStyleTag() {
+    // Make it win from other elements on the page.
+    // TODO: consider adding an id here to always win, since we are simulating shadow dom
+    // behavior here.
+    const highSpecifictyScope = `${this.scopedClass}.${this.scopedClass}`;
+    this.__styleTag.textContent = /** @type {typeof ScopedStylesController} */ (
+      this.host.constructor
+    )
+      .scopedStyles(unsafeCSS(highSpecifictyScope))
+      .toString();
+    this.host.insertBefore(this.__styleTag, this.host.childNodes[0]);
+  }
+
+  __teardownStyleTag() {
+    this.host.removeChild(this.__styleTag);
+  }
+}

package/components/core/src/SlotMixin.js

@@ -0,0 +1,104 @@
+/* eslint-disable class-methods-use-this */
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { render } from 'lit';
+import { isTemplateResult } from 'lit/directive-helpers.js';
+
+/**
+ * @typedef {import('../types/SlotMixinTypes.js').SlotMixin} SlotMixin
+ * @typedef {import('../types/SlotMixinTypes.js').SlotsMap} SlotsMap
+ * @typedef {import('lit').LitElement} LitElement
+ */
+
+/**
+ * @type {SlotMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<LitElement>} superclass
+ */
+const SlotMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  class SlotMixin extends superclass {
+    /**
+     * @return {SlotsMap}
+     */
+    get slots() {
+      return {};
+    }
+
+    constructor() {
+      super();
+      /** @private */
+      this.__privateSlots = new Set(null);
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this._connectSlotMixin();
+    }
+
+    /**
+     * @private
+     * @param {import('lit').TemplateResult} template
+     */
+    __renderAsNodes(template) {
+      // @ts-expect-error wait for browser support
+      const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
+      const registryRoot = supportsScopedRegistry ? this.shadowRoot : document;
+      // @ts-expect-error wait for browser support
+      const tempRenderTarget = registryRoot.createElement('div');
+      // Providing all options breaks Safari; keep host and creationScope
+      const { creationScope, host } = this.renderOptions;
+      render(template, tempRenderTarget, { creationScope, host });
+      return Array.from(tempRenderTarget.childNodes);
+    }
+
+    /**
+     * @protected
+     */
+    _connectSlotMixin() {
+      if (!this.__isConnectedSlotMixin) {
+        Object.keys(this.slots).forEach(slotName => {
+          const hasSlottableFromUser =
+            slotName === ''
+              ? // for default slot (''), we can't use el.slot because polyfill for IE11
+                // will do .querySelector('[slot=]') which produces a fatal error
+                // therefore we check if there's children that do not have a slot attr
+                Array.from(this.children).find(el => !el.hasAttribute('slot'))
+              : Array.from(this.children).find(el => el.slot === slotName);
+
+          if (!hasSlottableFromUser) {
+            const slotContent = this.slots[slotName]();
+            /** @type {Node[]} */
+            let nodes = [];
+
+            if (isTemplateResult(slotContent)) {
+              nodes = this.__renderAsNodes(slotContent);
+            } else if (!Array.isArray(slotContent)) {
+              nodes = [/** @type {Node} */ (slotContent)];
+            }
+
+            nodes.forEach(node => {
+              if (!(node instanceof Node)) {
+                return;
+              }
+              if (node instanceof Element && slotName !== '') {
+                node.setAttribute('slot', slotName);
+              }
+              this.appendChild(node);
+              this.__privateSlots.add(slotName);
+            });
+          }
+        });
+        this.__isConnectedSlotMixin = true;
+      }
+    }
+
+    /**
+     * @param {string} slotName Name of the slot
+     * @return {boolean} true if given slot name been created by SlotMixin
+     * @protected
+     */
+    _isPrivateSlot(slotName) {
+      return this.__privateSlots.has(slotName);
+    }
+  };
+
+export const SlotMixin = dedupeMixin(SlotMixinImplementation);

package/components/core/src/browserDetection.js

@@ -0,0 +1,39 @@
+/**
+ * From https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
+ * @param {string} [flavor]
+ */
+function checkChrome(flavor = 'google-chrome') {
+  const isChromium = /** @type {window & { chrome?: boolean}} */ (window).chrome;
+  if (flavor === 'chromium') {
+    return isChromium;
+  }
+  const winNav = window.navigator;
+  const vendorName = winNav.vendor;
+  const isOpera = typeof (/** @type {window & { opr?: boolean}} */ (window).opr) !== 'undefined';
+  const isIEedge = winNav.userAgent.indexOf('Edge') > -1;
+  const isIOSChrome = winNav.userAgent.match('CriOS');
+
+  if (flavor === 'ios') {
+    return isIOSChrome;
+  }
+
+  if (flavor === 'google-chrome') {
+    return (
+      isChromium !== null &&
+      typeof isChromium !== 'undefined' &&
+      vendorName === 'Google Inc.' &&
+      isOpera === false &&
+      isIEedge === false
+    );
+  }
+
+  return undefined;
+}
+
+export const browserDetection = {
+  isIE11: /Trident/.test(window.navigator.userAgent),
+  isChrome: checkChrome(),
+  isIOSChrome: checkChrome('ios'),
+  isChromium: checkChrome('chromium'),
+  isMac: navigator.appVersion.indexOf('Mac') !== -1,
+};

package/components/core/src/uuid.js

@@ -0,0 +1,9 @@
+/**
+ * Generates random unique identifier (for dom elements)
+ * @param {string} prefix
+ * @return {string} unique id
+ */
+export function uuid(prefix = '') {
+  const elementName = prefix.length > 0 ? `${prefix}-` : '';
+  return `${elementName}${Math.random().toString(36).substr(2, 10)}`;
+}

package/components/core/test/DisabledMixin.test.js

@@ -0,0 +1,87 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { LitElement } from 'lit';
+import { DisabledMixin } from '@lion/ui/core.js';
+
+describe('DisabledMixin', () => {
+  class CanBeDisabled extends DisabledMixin(LitElement) {}
+  before(() => {
+    customElements.define('can-be-disabled', CanBeDisabled);
+  });
+
+  it('reflects disabled to attribute', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    expect(el.hasAttribute('disabled')).to.be.false;
+    el.makeRequestToBeDisabled();
+    el.disabled = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('can be requested to be disabled', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    el.makeRequestToBeDisabled();
+    expect(el.disabled).to.be.true;
+    await el.updateComplete;
+    expect(el.hasAttribute('disabled')).to.be.true;
+  });
+
+  it('will not allow to become enabled after makeRequestToBeDisabled()', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    el.makeRequestToBeDisabled();
+    expect(el.disabled).to.be.true;
+
+    el.disabled = false;
+    expect(el.disabled).to.be.true;
+  });
+
+  it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled disabled></can-be-disabled>`)
+    );
+    el.makeRequestToBeDisabled();
+    el.retractRequestToBeDisabled();
+    expect(el.disabled).to.be.true;
+  });
+
+  it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    el.makeRequestToBeDisabled();
+    expect(el.disabled).to.be.true;
+    el.retractRequestToBeDisabled();
+    expect(el.disabled).to.be.false;
+  });
+
+  it('may allow multiple calls to makeRequestToBeDisabled()', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    el.makeRequestToBeDisabled();
+    el.makeRequestToBeDisabled();
+    el.retractRequestToBeDisabled();
+    expect(el.disabled).to.be.false;
+  });
+
+  it('will restore last state after retractRequestToBeDisabled()', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    el.makeRequestToBeDisabled();
+    el.disabled = true;
+    el.retractRequestToBeDisabled();
+    expect(el.disabled).to.be.true;
+
+    el.makeRequestToBeDisabled();
+    el.disabled = false;
+    el.retractRequestToBeDisabled();
+    expect(el.disabled).to.be.false;
+  });
+});

package/components/core/test/DisabledWithTabIndexMixin.test.js

@@ -0,0 +1,116 @@
+/* eslint-disable lit-a11y/tabindex-no-positive */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { LitElement } from 'lit';
+import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
+
+describe('DisabledWithTabIndexMixin', () => {
+  class WithTabIndex extends DisabledWithTabIndexMixin(LitElement) {}
+  before(() => {
+    customElements.define('can-be-disabled-with-tab-index', WithTabIndex);
+  });
+
+  it('has an initial tabIndex of 0', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `)
+    );
+    expect(el.tabIndex).to.equal(0);
+    expect(el.getAttribute('tabindex')).to.equal('0');
+  });
+
+  it('sets tabIndex to -1 if disabled', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `)
+    );
+    el.disabled = true;
+    expect(el.tabIndex).to.equal(-1);
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  it('disabled does not override user provided tabindex', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html`
+        <can-be-disabled-with-tab-index tabindex="5" disabled></can-be-disabled-with-tab-index>
+      `)
+    );
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+    el.disabled = false;
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('5');
+  });
+
+  it('can be disabled imperatively', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html`
+        <can-be-disabled-with-tab-index disabled></can-be-disabled-with-tab-index>
+      `)
+    );
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+
+    el.disabled = false;
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('0');
+    expect(el.hasAttribute('disabled')).to.equal(false);
+
+    el.disabled = true;
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+    expect(el.hasAttribute('disabled')).to.equal(true);
+  });
+
+  it('will not allow to change tabIndex after makeRequestToBeDisabled()', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html` <can-be-disabled-with-tab-index></can-be-disabled-with-tab-index> `)
+    );
+    el.makeRequestToBeDisabled();
+
+    el.tabIndex = 5;
+    expect(el.tabIndex).to.equal(-1);
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  it('will restore last tabIndex after retractRequestToBeDisabled()', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html`
+        <can-be-disabled-with-tab-index tabindex="5"></can-be-disabled-with-tab-index>
+      `)
+    );
+    el.makeRequestToBeDisabled();
+    expect(el.tabIndex).to.equal(-1);
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+    el.retractRequestToBeDisabled();
+    expect(el.tabIndex).to.equal(5);
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('5');
+
+    el.makeRequestToBeDisabled();
+    el.tabIndex = 12;
+    el.retractRequestToBeDisabled();
+    expect(el.tabIndex).to.equal(12);
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('12');
+
+    el.makeRequestToBeDisabled();
+    el.tabIndex = 13;
+    el.tabIndex = 14;
+    el.retractRequestToBeDisabled();
+    expect(el.tabIndex).to.equal(14);
+    await el.updateComplete;
+    expect(el.getAttribute('tabindex')).to.equal('14');
+  });
+
+  it('may allow multiple calls to retractRequestToBeDisabled', async () => {
+    const el = /** @type {WithTabIndex} */ (
+      await fixture(html`
+        <can-be-disabled-with-tab-index disabled></can-be-disabled-with-tab-index>
+      `)
+    );
+    el.retractRequestToBeDisabled();
+    el.retractRequestToBeDisabled();
+    expect(el.disabled).to.be.true;
+    expect(el.tabIndex).to.be.equal(-1);
+  });
+});

package/components/core/test/EventTargetShim.test.js

@@ -0,0 +1,41 @@
+import { expect } from '@open-wc/testing';
+import sinon from 'sinon';
+import { EventTargetShim } from '@lion/ui/core.js';
+
+describe('EventTargetShim', () => {
+  class NonElementClass extends EventTargetShim {}
+
+  it('implements "addEventListener"', async () => {
+    const nonElementClass = new NonElementClass();
+    const cb = sinon.spy();
+
+    nonElementClass.addEventListener('my-event', cb);
+    expect(cb).to.not.have.been.called;
+    nonElementClass.dispatchEvent(new Event('my-event'));
+    expect(cb).to.have.been.called;
+  });
+
+  it('implements "removeEventListener"', async () => {
+    const nonElementClass = new NonElementClass();
+    const cb = sinon.spy();
+
+    nonElementClass.addEventListener('my-event', cb);
+    expect(cb).to.not.have.been.called;
+    nonElementClass.dispatchEvent(new Event('my-event'));
+    expect(cb).to.have.been.calledOnce;
+
+    nonElementClass.removeEventListener('my-event', cb);
+    nonElementClass.dispatchEvent(new Event('my-event'));
+    expect(cb).to.have.been.calledOnce;
+  });
+
+  it('implements "dispatchEvent"', async () => {
+    const nonElementClass = new NonElementClass();
+    const cb = sinon.spy();
+
+    nonElementClass.addEventListener('my-event', cb);
+    expect(cb).to.not.have.been.called;
+    nonElementClass.dispatchEvent(new Event('my-event'));
+    expect(cb).to.have.been.called;
+  });
+});