@lion/ui 0.0.1 → 0.0.3

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

@@ -1,14 +1,21 @@
 import sinon from 'sinon';
-import { defineCE, expect, fixture } from '@open-wc/testing';
+import { defineCE, expect, fixture, unsafeStatic, html } from '@open-wc/testing';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { SlotMixin } from '@lion/ui/core.js';
-import { LitElement, html } from 'lit';
+import { LitElement } from 'lit';
 
+const mockedRenderTarget = document.createElement('div');
 function mockScopedRegistry() {
+  const outputObj = { createElementCallCount: 0 };
   // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = () => {};
+  ShadowRoot.prototype.createElement = () => {
+    outputObj.createElementCallCount += 1;
+    // Return an element that lit can use as render target
+    return mockedRenderTarget;
+  };
   // @ts-expect-error wait for browser support
   window.CustomElementRegistry = class {};
+  return outputObj;
 }
 
 function unMockScopedRegistry() {
@@ -211,13 +218,12 @@ describe('SlotMixin', () => {
     expect(slot.tagName).to.equal('SPAN');
   });
 
-  // TODO: @Thijs is this still needed?
-  it.skip('supports scoped elements when polyfill loaded', async () => {
-    mockScopedRegistry();
+  it('supports scoped elements when polyfill loaded', async () => {
+    const outputObj = mockScopedRegistry();
 
     class ScopedEl extends LitElement {}
 
-    const tag = defineCE(
+    const tagName = defineCE(
       class extends ScopedElementsMixin(SlotMixin(LitElement)) {
         static get scopedElements() {
           return {
@@ -240,16 +246,10 @@ describe('SlotMixin', () => {
       },
     );
 
-    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');
+    const tag = unsafeStatic(tagName);
+    await fixture(html`<${tag}></${tag}>`);
+
+    expect(outputObj.createElementCallCount).to.equal(1);
 
     unMockScopedRegistry();
   });
@@ -257,7 +257,7 @@ describe('SlotMixin', () => {
   it('does not scope elements when polyfill not loaded', async () => {
     class ScopedEl extends LitElement {}
 
-    const tag = defineCE(
+    const tagName = defineCE(
       class extends ScopedElementsMixin(SlotMixin(LitElement)) {
         static get scopedElements() {
           return {
@@ -280,10 +280,17 @@ describe('SlotMixin', () => {
       },
     );
 
+    const renderTarget = document.createElement('div');
+    const el = document.createElement(tagName);
+
+    // We don't use fixture, so we limit the amount of calls to document.createElement
     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;
+    document.body.appendChild(renderTarget);
+    renderTarget.appendChild(el);
+
+    expect(docSpy.callCount).to.equal(2);
+
+    document.body.removeChild(renderTarget);
     docSpy.restore();
   });
 });

package/components/drawer/src/LionDrawer.js

@@ -0,0 +1,217 @@
+import { html } from 'lit';
+import { LionCollapsible } from '@lion/ui/collapsible.js';
+import { drawerStyle } from './drawerStyle.js';
+
+const EVENT = {
+  TRANSITION_END: 'transitionend',
+  TRANSITION_START: 'transitionstart',
+};
+
+export class LionDrawer extends LionCollapsible {
+  static get properties() {
+    return {
+      transitioning: {
+        type: Boolean,
+        reflect: true,
+      },
+      opened: {
+        type: Boolean,
+        reflect: true,
+      },
+      position: {
+        type: String,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    /** @private */
+    this.__toggle = () => {
+      this.opened = !this.opened;
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.hasAttribute('position')) {
+      this.position = 'left';
+    }
+
+    if (this._contentNode) {
+      this._contentNode.style.setProperty('display', '');
+    }
+
+    this.__setBoundaries();
+  }
+
+  /**
+   * Update aria labels on state change.
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('opened')) {
+      this._openedChanged();
+    }
+  }
+
+  static get styles() {
+    return [drawerStyle];
+  }
+
+  __setBoundaries() {
+    const host = this.shadowRoot?.host;
+
+    if (this.position === 'top') {
+      this.minHeight = host ? getComputedStyle(host).getPropertyValue('--min-height') : '0px';
+      this.maxHeight = host ? getComputedStyle(host).getPropertyValue('--max-height') : '0px';
+      this.minWidth = '0px';
+      this.maxWidth = 'none';
+    } else {
+      this.minWidth = host ? getComputedStyle(host).getPropertyValue('--min-width') : '0px';
+      this.maxWidth = host ? getComputedStyle(host).getPropertyValue('--max-width') : '0px';
+      this.minHeight = 'auto';
+      this.maxHeight = 'fit-content';
+    }
+
+    setTimeout(() => {
+      const prop = this.position === 'top' ? 'width' : 'height';
+
+      if (this.__contentNode) {
+        this.__contentNode.style.setProperty(prop, '');
+      }
+    });
+  }
+
+  /**
+   * Setter for position property, available values are 'top', 'left' and 'right'
+   * @param {String} position
+   */
+  set position(position) {
+    const stale = this.position;
+    this._position = position;
+    this.setAttribute('position', position);
+
+    this.__setBoundaries();
+    this.requestUpdate('position', stale);
+  }
+
+  get position() {
+    return this._position ?? 'left';
+  }
+
+  /**
+   * Trigger show animation and wait for transition to be finished.
+   * @param {Object} options - element node and its options
+   * @param {HTMLElement} options.contentNode
+   * @override
+   */
+  async _showAnimation({ contentNode }) {
+    const min = this.position === 'top' ? this.minHeight : this.minWidth;
+    const max = this.position === 'top' ? this.maxHeight : this.maxWidth;
+    const prop = this.position === 'top' ? 'height' : 'width';
+
+    contentNode.style.setProperty(prop, /** @type {string} */ (min));
+    await new Promise(resolve => requestAnimationFrame(() => resolve(true)));
+    contentNode.style.setProperty(prop, /** @type {string} */ (max));
+    await this._waitForTransition({ contentNode });
+  }
+
+  /**
+   * Trigger hide animation and wait for transition to be finished.
+   * @param {Object} options - element node and its options
+   * @param {HTMLElement} options.contentNode
+   * @override
+   */
+  async _hideAnimation({ contentNode }) {
+    if (
+      ((this.position === 'left' || this.position === 'right') &&
+        this._contentWidth === this.minWidth) ||
+      (this.position === 'top' && this._contentHeight === this.minHeight)
+    ) {
+      return;
+    }
+
+    const min = this.position === 'top' ? this.minHeight : this.minWidth;
+    const prop = this.position === 'top' ? 'height' : 'width';
+
+    contentNode.style.setProperty(prop, /** @type {string} */ (min));
+    await this._waitForTransition({ contentNode });
+  }
+
+  /**
+   *  Wait until the transition event is finished.
+   * @param {Object} options - element node and its options
+   * @param {HTMLElement} options.contentNode
+   * @returns {Promise<void>} transition event
+   */
+  _waitForTransition({ contentNode }) {
+    return new Promise(resolve => {
+      const transitionStarted = () => {
+        contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
+        this.transitioning = true;
+      };
+      contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
+
+      const transitionEnded = () => {
+        contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
+        this.transitioning = false;
+        resolve();
+      };
+      contentNode.addEventListener(EVENT.TRANSITION_END, transitionEnded);
+    });
+  }
+
+  /**
+   * @protected
+   */
+  get __contentNode() {
+    return /** @type {HTMLElement} */ (this.shadowRoot?.querySelector('.container'));
+  }
+
+  get _contentWidth() {
+    const size = this.__contentNode?.getBoundingClientRect().width || 0;
+    return `${size}px`;
+  }
+
+  get _contentHeight() {
+    const size = this.__contentNode?.getBoundingClientRect().height || 0;
+    return `${size}px`;
+  }
+
+  _openedChanged() {
+    this._updateContentSize();
+    if (this._invokerNode) {
+      this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+    }
+
+    this.dispatchEvent(new CustomEvent('opened-changed'));
+  }
+
+  async _updateContentSize() {
+    if (this.__contentNode) {
+      if (this.opened) {
+        await this._showAnimation({ contentNode: this.__contentNode });
+      } else {
+        await this._hideAnimation({ contentNode: this.__contentNode });
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="headline-container">
+          <slot name="invoker"></slot>
+          <slot name="headline"></slot>
+        </div>
+        <div class="content-container">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/components/drawer/src/drawerStyle.js

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+
+export const drawerStyle = css`
+  :host {
+    display: block;
+    height: 100%;
+    --min-width: 72px;
+    --max-width: 320px;
+    --min-height: auto;
+    --max-height: fit-content;
+    --start-width: var(--min-width);
+    --start-height: 100%;
+    --transition-property: width;
+  }
+
+  :host([position='top']) {
+    width: 100%;
+    --min-width: 0px;
+    --max-width: none;
+    --min-height: 50px;
+    --max-height: 200px;
+    --start-width: 100%;
+    --start-height: var(--min-height);
+    --transition-property: height;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    width: var(--start-width);
+    height: var(--start-height);
+    min-width: var(--min-width);
+    max-width: var(--max-width);
+    min-height: var(--min-height);
+    max-height: var(--max-height);
+    overflow: hidden;
+    box-sizing: border-box;
+    transition: var(--transition-property) 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  .headline-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  :host([position='right']) .headline-container {
+    flex-direction: row-reverse;
+  }
+
+  .content-container {
+    overflow: hidden;
+    flex-grow: 1;
+  }
+
+  ::slotted([slot='content']) {
+    width: var(--max-width);
+  }
+`;

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

@@ -0,0 +1,109 @@
+import { expect, fixture as _fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '@lion/ui/define/lion-drawer.js';
+
+/**
+ * @typedef {import('../src/LionDrawer.js').LionDrawer} LionDrawer
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDrawer>} */ (_fixture);
+
+const template = html`
+  <lion-drawer>
+    <button slot="invoker">Open</button>
+    <p slot="headline">Headline</p>
+    <div slot="content" class="drawer">This is the content of the drawer</div>
+  </lion-drawer>
+`;
+
+describe('<lion-drawer>', () => {
+  describe('Drawer', () => {
+    it('sets position to "left" by default', async () => {
+      const drawer = await fixture(template);
+      expect(drawer.position).to.equal('left');
+    });
+
+    it('has [position] attribute which serves as styling hook', async () => {
+      const drawer = await fixture(template);
+      expect(drawer).to.have.attribute('position').equal('left');
+    });
+
+    it('sets the minimum and maximum width when position=left', async () => {
+      const drawer = await fixture(template);
+      const minWidth = getComputedStyle(drawer).getPropertyValue('--min-width');
+      const maxWidth = getComputedStyle(drawer).getPropertyValue('--max-width');
+
+      expect(drawer.minWidth).to.equal(minWidth);
+      expect(drawer.maxWidth).to.equal(maxWidth);
+    });
+
+    it('sets the minimum and maximum width when position=right', async () => {
+      const drawer = await fixture(template);
+      drawer.position = 'right';
+      await drawer.updateComplete;
+
+      const minWidth = getComputedStyle(drawer).getPropertyValue('--min-width');
+      const maxWidth = getComputedStyle(drawer).getPropertyValue('--max-width');
+
+      expect(drawer.minWidth).to.equal(minWidth);
+      expect(drawer.maxWidth).to.equal(maxWidth);
+    });
+
+    it('sets the minimum and maximum height when position=top', async () => {
+      const drawer = await fixture(template);
+      drawer.position = 'top';
+      await drawer.updateComplete;
+
+      const minHeight = getComputedStyle(drawer).getPropertyValue('--min-height');
+      const maxHeight = getComputedStyle(drawer).getPropertyValue('--max-height');
+
+      expect(drawer.minHeight).to.equal(minHeight);
+      expect(drawer.maxHeight).to.equal(maxHeight);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('[collapsed] is a11y AXE accessible', async () => {
+      const drawer = await fixture(template);
+      await expect(drawer).to.be.accessible();
+    });
+
+    it('[opened] is a11y AXE accessible', async () => {
+      const drawer = await fixture(template);
+      drawer.opened = true;
+      await expect(drawer).to.be.accessible();
+    });
+
+    describe('Invoker', () => {
+      it('links id of content items to invoker via [aria-controls]', async () => {
+        const drawerElement = await fixture(template);
+        const invoker = drawerElement.querySelector('[slot=invoker]');
+        const content = drawerElement.querySelector('[slot=content]');
+        expect(invoker?.getAttribute('aria-controls')).to.equal(content?.id);
+      });
+
+      it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
+        const drawerElement = await fixture(template);
+        const invoker = drawerElement.querySelector('[slot=invoker]');
+        expect(invoker).to.have.attribute('aria-expanded', 'false');
+      });
+
+      it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
+        const drawerElement = await fixture(template);
+        const invoker = drawerElement.querySelector('[slot=invoker]');
+        drawerElement.opened = true;
+        await drawerElement.updateComplete;
+        expect(invoker).to.have.attribute('aria-expanded', 'true');
+      });
+    });
+
+    describe('Contents', () => {
+      it('adds aria-labelledby referring to invoker id', async () => {
+        const drawerElement = await fixture(template);
+        const invoker = drawerElement.querySelector('[slot=invoker]');
+        const content = drawerElement.querySelector('[slot=content]');
+        expect(content).to.have.attribute('aria-labelledby', invoker?.id);
+      });
+    });
+  });
+});

package/components/localize/src/number/parseNumber.js

@@ -1,56 +1,35 @@
 import { getDecimalSeparator } from './getDecimalSeparator.js';
 
-/**
- * @param {string} value to evaluate
- * @return {boolean} true if value equal . or ,
- */
-function isDecimalSeparator(value) {
-  return value === '.' || value === ',';
-}
-
 /**
  * Determines the best possible parsing mode.
  *
- * - If there is only one separator (withLocale)
- * - 1,23 => xxx1.23 (heuristic)
- * - else parse mode depends mostly on the last 4 chars
- * - 1234 => xxx1234 (heuristic)
- * - [space]123 => xxx123 (heuristic)
- * - ,123 => unclear
- *   - if 1.000,123 (we find a different separator) => 1000.123 (heuristic)
- *   - if 1,000,123 (we find only same separators) => 1000123 (unparseable)
- *   - if 100,123 (we find no more separators) => unclear
- *     - if en => 100123 (withLocale)
- *     - if nl => 100.123 (withLocale)
- *
- * See also {@link parseAmount}
+ * It has 3 "methods" of returning numbers
+ * - 'unparseable': becomes just numbers
+ * - 'withLocale': result depends on given or global locale
+ * - 'heuristic': result depends on considering separators
  *
  * @example
- * getParseMode('1.234') => 'withLocale'
+ * parseNumber('1.234.567'); // method: unparseable => 1234567
+ * parseNumber('1.234'); // method: withLocale => depending on locale 1234 or 1.234
+ * parseNumber('1.234,56'); // method: heuristic => 1234.56
+ * parseNumber('1 234.56'); // method: heuristic => 1234.56
+ * parseNumber('1,234.56'); // method: heuristic => 1234.56
  *
  * @param {string} value Clean number (only [0-9 ,.]) to be parsed
+ * @param {object} options
+ * @param {string?} [options.mode] auto|pasted
  * @return {string} unparseable|withLocale|heuristic
  */
 function getParseMode(value, { mode = 'auto' } = {}) {
   const separators = value.match(/[., ]/g);
 
-  if (mode === 'auto' && separators && separators.length === 1) {
+  if (!separators || (mode === 'auto' && separators.length === 1)) {
     return 'withLocale';
   }
-
-  if (value.length > 4) {
-    const charAtLastSeparatorPosition = value[value.length - 4];
-    if (isDecimalSeparator(charAtLastSeparatorPosition)) {
-      const firstPart = value.substring(0, value.length - 4);
-      const otherSeparators = firstPart.match(/[., ]/g);
-      if (otherSeparators) {
-        const lastSeparator = charAtLastSeparatorPosition;
-        return otherSeparators.indexOf(lastSeparator) === -1 ? 'heuristic' : 'unparseable';
-      }
-      return 'withLocale';
-    }
+  if (separators.length === 1 || separators[0] !== separators[separators.length - 1]) {
+    return 'heuristic';
   }
-  return 'heuristic';
+  return 'unparseable';
 }
 
 /**

package/components/localize/test/number/parseNumber.test.js

@@ -72,19 +72,10 @@ describe('parseNumber()', () => {
     expect(parseNumber('123456.78', { mode: 'pasted' })).to.equal(123456.78);
   });
 
-  it('detects separators heuristically when there are 2 same ones e.g. 1.234.56', () => {
-    expect(parseNumber('1.234.5')).to.equal(1234.5);
-    expect(parseNumber('1,234,5')).to.equal(1234.5);
-
-    expect(parseNumber('1.234.56')).to.equal(1234.56);
-    expect(parseNumber('1,234,56')).to.equal(1234.56);
+  it('detects separators unparseable when there are 2 same ones e.g. 1.234.56', () => {
+    expect(parseNumber('1.234.56')).to.equal(123456);
+    expect(parseNumber('1,234,56')).to.equal(123456);
     expect(parseNumber('1 234 56')).to.equal(123456);
-
-    expect(parseNumber('1.234.5678')).to.equal(1234.5678);
-    expect(parseNumber('1,234,5678')).to.equal(1234.5678);
-
-    expect(parseNumber('1.234.56789')).to.equal(1234.56789);
-    expect(parseNumber('1,234,56789')).to.equal(1234.56789);
   });
 
   it('uses locale to parse amount if there is only one separator e.g. 1.234', () => {