@lion/ui 0.25.0 → 0.26.0

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@lion/ui",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -845,6 +845,60 @@
             "events": [{ "name": "user-input-changed", "type": "Event" }]
           }
         },
+        {
+          "name": "my-input-amount",
+          "description": "\n\n---\n\n\n### **Events:**\n - **user-selected-date-changed**\n\n### **Methods:**\n - **initCentralDate()** - This exposes an interface for datepickers that want to\nreinitialize when calendar is opened",
+          "doc-url": "",
+          "attributes": [],
+          "events": [
+            { "name": "user-selected-date-changed", "type": "CustomEvent" }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "centralDate",
+                "description": "The date that\n1. determines the currently visible month\n2. will be focused when the month grid gets focused by the keyboard",
+                "type": "Date"
+              },
+              { "name": "dayPreprocessor" },
+              {
+                "name": "disableDates",
+                "description": "Disable certain dates"
+              },
+              {
+                "name": "firstDayOfWeek",
+                "description": "Weekday that will be displayed in first column of month grid.\n0: sunday, 1: monday, 2: tuesday, 3: wednesday , 4: thursday, 5: friday, 6: saturday\nDefault is 0",
+                "type": "number"
+              },
+              { "name": "focusedDate" },
+              {
+                "name": "locale",
+                "description": "Different locale for this component scope",
+                "type": "string"
+              },
+              {
+                "name": "maxDate",
+                "description": "Maximum date. All dates after will be disabled"
+              },
+              {
+                "name": "minDate",
+                "description": "Minimum date. All dates before will be disabled"
+              },
+              {
+                "name": "selectedDate",
+                "description": "The selected date, usually synchronized with datepicker-input\nNot to be confused with the focused date (therefore not necessarily in active month view)"
+              },
+              {
+                "name": "weekdayHeaderNotation",
+                "description": "Weekday header notation, based on Intl DatetimeFormat:\n- 'long' (e.g., Thursday)\n- 'short' (e.g., Thu)\n- 'narrow' (e.g., T).\nDefault is 'short'",
+                "type": "string"
+              }
+            ],
+            "events": [
+              { "name": "user-selected-date-changed", "type": "CustomEvent" }
+            ]
+          }
+        },
         {
           "name": "lion-input-amount",
           "description": "`LionInputAmount` is a class for an amount custom form element (`<lion-input-amount>`).\n\n---\n\n\n### **Events:**\n - **user-input-changed**\n\n### **Methods:**\n - **clear()** - Clears modelValue.\nInteraction states are not cleared (use resetInteractionState for this)\n- **reset()** - Resets modelValue to initial value.\nInteraction states are cleared\n\n",
@@ -932,6 +986,137 @@
             "events": [{ "name": "user-input-changed", "type": "Event" }]
           }
         },
+        {
+          "name": "tagName",
+          "description": "\n\n---\n\n\n### **Events:**\n - **opened-changed**\n- **user-input-changed**\n\n### **Methods:**\n - **clear()** - Clears modelValue.\nInteraction states are not cleared (use resetInteractionState for this)\n- **close()** - Hides the overlay\n- **open()** - Shows the overlay\n- **repositionOverlay()** - Sometimes it's needed to recompute Popper position of an overlay, for instance when we have\nan opened combobox and the surrounding context changes (the space consumed by the textbox\nincreases vertically)\n- **reset()** - Resets modelValue to initial value.\nInteraction states are cleared\n- **toggle()** - Toggles the overlay\n\n\n\n\n\n\n\n\n\n\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "opened",
+              "description": "If you add the opened attribute a dialog will be opened on page load. The invoker can be left out\nin case the user does not need to be able to reopen the dialog.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "calendar-heading",
+              "description": "The heading to be added on top of the calendar overlay.\nNaming chosen from an Application Developer perspective.\nFor a Subclasser 'calendarOverlayHeading' would be more appropriate.",
+              "value": { "type": "string" }
+            },
+            { "name": "modelValue", "value": { "type": "string" } },
+            {
+              "name": "readonly",
+              "description": "A Boolean attribute which, if present, indicates that the user should not be able to edit\nthe value of the input. The difference between disabled and readonly is that read-only\ncontrols can still function, whereas disabled controls generally do not function as\ncontrols until they are enabled.\n\n(From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            { "name": "opened-changed", "type": "CustomEvent" },
+            { "name": "user-input-changed", "type": "Event" }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "calendarHeading",
+                "description": "The heading to be added on top of the calendar overlay.\nNaming chosen from an Application Developer perspective.\nFor a Subclasser 'calendarOverlayHeading' would be more appropriate.",
+                "type": "string"
+              },
+              {
+                "name": "config",
+                "description": "Configure the many options of the `OverlayController`",
+                "type": "Partial<OverlayConfig>"
+              },
+              { "name": "formatter" },
+              { "name": "modelValue" },
+              {
+                "name": "opened",
+                "description": "If you add the opened attribute a dialog will be opened on page load. The invoker can be left out\nin case the user does not need to be able to reopen the dialog.",
+                "type": "boolean"
+              },
+              { "name": "parser" },
+              { "name": "placeholder", "type": "string" },
+              {
+                "name": "readOnly",
+                "description": "A Boolean attribute which, if present, indicates that the user should not be able to edit\nthe value of the input. The difference between disabled and readonly is that read-only\ncontrols can still function, whereas disabled controls generally do not function as\ncontrols until they are enabled.\n\n(From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)",
+                "type": "boolean"
+              },
+              { "name": "slots" },
+              { "name": "type", "type": "string" }
+            ],
+            "events": [
+              { "name": "opened-changed", "type": "CustomEvent" },
+              { "name": "user-input-changed", "type": "Event" }
+            ]
+          }
+        },
+        {
+          "name": "my-input-amount",
+          "description": "\n\n---\n\n\n### **Events:**\n - **user-selected-date-changed**\n\n### **Methods:**\n - **initCentralDate()** - This exposes an interface for datepickers that want to\nreinitialize when calendar is opened",
+          "doc-url": "",
+          "attributes": [],
+          "events": [
+            { "name": "user-selected-date-changed", "type": "CustomEvent" }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "centralDate",
+                "description": "The date that\n1. determines the currently visible month\n2. will be focused when the month grid gets focused by the keyboard",
+                "type": "Date"
+              },
+              { "name": "dayPreprocessor" },
+              {
+                "name": "disableDates",
+                "description": "Disable certain dates"
+              },
+              {
+                "name": "firstDayOfWeek",
+                "description": "Weekday that will be displayed in first column of month grid.\n0: sunday, 1: monday, 2: tuesday, 3: wednesday , 4: thursday, 5: friday, 6: saturday\nDefault is 0",
+                "type": "number"
+              },
+              { "name": "focusedDate" },
+              {
+                "name": "locale",
+                "description": "Different locale for this component scope",
+                "type": "string"
+              },
+              {
+                "name": "maxDate",
+                "description": "Maximum date. All dates after will be disabled"
+              },
+              {
+                "name": "minDate",
+                "description": "Minimum date. All dates before will be disabled"
+              },
+              {
+                "name": "selectedDate",
+                "description": "The selected date, usually synchronized with datepicker-input\nNot to be confused with the focused date (therefore not necessarily in active month view)"
+              },
+              {
+                "name": "weekdayHeaderNotation",
+                "description": "Weekday header notation, based on Intl DatetimeFormat:\n- 'long' (e.g., Thursday)\n- 'short' (e.g., Thu)\n- 'narrow' (e.g., T).\nDefault is 'short'",
+                "type": "string"
+              }
+            ],
+            "events": [
+              { "name": "user-selected-date-changed", "type": "CustomEvent" }
+            ]
+          }
+        },
+        {
+          "name": "my-calendar-overlay-frame",
+          "description": "\n\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "lion-input-datepicker",
           "description": "\n\n---\n\n\n### **Events:**\n - **opened-changed**\n- **user-input-changed**\n\n### **Methods:**\n - **clear()** - Clears modelValue.\nInteraction states are not cleared (use resetInteractionState for this)\n- **close()** - Hides the overlay\n- **open()** - Shows the overlay\n- **repositionOverlay()** - Sometimes it's needed to recompute Popper position of an overlay, for instance when we have\nan opened combobox and the surrounding context changes (the space consumed by the textbox\nincreases vertically)\n- **reset()** - Resets modelValue to initial value.\nInteraction states are cleared\n- **toggle()** - Toggles the overlay\n\n\n\n\n\n\n\n\n\n\n",
@@ -2017,6 +2202,20 @@
             ]
           }
         },
+        {
+          "name": "tagName",
+          "description": "\n\n---\n\n\n### **Events:**\n - **user-input-changed**\n\n### **Methods:**\n - **clear()** - Clears modelValue.\nInteraction states are not cleared (use resetInteractionState for this)\n- **reset()** - Resets modelValue to initial value.\nInteraction states are cleared\n\n\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [{ "name": "user-input-changed", "type": "Event" }],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              { "name": "slots" }
+            ],
+            "events": [{ "name": "user-input-changed", "type": "Event" }]
+          }
+        },
         {
           "name": "lion-switch",
           "description": "\n\n---\n\n\n### **Events:**\n - **user-input-changed**\n\n### **Methods:**\n - **clear()** - Clears modelValue.\nInteraction states are not cleared (use resetInteractionState for this)\n- **reset()** - Resets modelValue to initial value.\nInteraction states are cleared\n\n\n",
@@ -2165,6 +2364,25 @@
             "events": [{ "name": "opened-changed", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "test-router",
+          "description": "\n\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "path", "value": { "type": "string", "default": "''" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "path", "type": "string" },
+              {
+                "name": "routingMap",
+                "type": "{ [path: string]: HTMLElement }"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wrapperTagName",
           "description": "\n\n---\n\n\n### **Methods:**\n - **defineScopedElement(tagName: _string_, classToBeRegistered: _typeof HTMLElement_)** - Defines a scoped element.",

package/components/button/test/demos.screenshots-test.js

@@ -1,100 +0,0 @@
-// @ts-nocheck
-/* globals capture getStoryPage */
-
-const selector = 'lion-button';
-describe('buttons-button', () => {
-  it('main', async () => {
-    const id = 'buttons-button--main';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('main-hovered', async () => {
-    const id = 'buttons-button--main';
-    const page = await getStoryPage(id);
-    await page.hover(selector);
-    await capture({
-      selector,
-      id: `${id}-hovered`,
-      page,
-    });
-  });
-  it('main-focused', async () => {
-    const id = 'buttons-button--main';
-    const page = await getStoryPage(id);
-    await page.focus(selector);
-    await capture({
-      selector,
-      id: `${id}-focused`,
-      page,
-    });
-  });
-  it('handler', async () => {
-    const id = 'buttons-button--handler';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('icon-button', async () => {
-    const id = 'buttons-button--icon-button';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('icon-only', async () => {
-    const id = 'buttons-button--icon-only';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('icon-only-hovered', async () => {
-    const id = 'buttons-button--icon-only';
-    const page = await getStoryPage(id);
-    await page.hover(selector);
-    await capture({
-      selector,
-      id: `${id}-hovered`,
-      page,
-    });
-  });
-  it('icon-only-focused', async () => {
-    const id = 'buttons-button--icon-only';
-    const page = await getStoryPage(id);
-    await page.focus(selector);
-    await capture({
-      selector,
-      id: `${id}-focused`,
-      page,
-    });
-  });
-  it('disabled', async () => {
-    const id = 'buttons-button--disabled';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('within-form', async () => {
-    const id = 'buttons-button--within-form';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-});

package/components/calendar/test/demos.screenshots-test.js

@@ -1,118 +0,0 @@
-// @ts-nocheck
-/* globals capture getStoryPage */
-
-const selector = 'lion-calendar';
-describe('others-calendar', () => {
-  it('main', async () => {
-    const id = 'others-calendar--main';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('selected-date', async () => {
-    const id = 'others-calendar--selected-date';
-    const page = await getStoryPage(id);
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('central-date', async () => {
-    const id = 'others-calendar--central-date';
-    const page = await getStoryPage(id, {
-      command: 'Emulation.setVirtualTimePolicy',
-      parameters: {
-        policy: 'advance',
-        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
-      },
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('controlling-focus', async () => {
-    const id = 'others-calendar--controlling-focus';
-    const page = await getStoryPage(id, {
-      command: 'Emulation.setVirtualTimePolicy',
-      parameters: {
-        policy: 'advance',
-        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
-      },
-    });
-    await page.waitForSelector('button');
-    await page.evaluate(() => {
-      document.querySelector('button').click();
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('providing-lower-limit', async () => {
-    const id = 'others-calendar--providing-lower-limit';
-    const page = await getStoryPage(id, {
-      command: 'Emulation.setVirtualTimePolicy',
-      parameters: {
-        policy: 'advance',
-        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
-      },
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('providing-higher-limit', async () => {
-    const id = 'others-calendar--providing-higher-limit';
-    const page = await getStoryPage(id, {
-      command: 'Emulation.setVirtualTimePolicy',
-      parameters: {
-        policy: 'advance',
-        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
-      },
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('disabled-dates', async () => {
-    const id = 'others-calendar--disabled-dates';
-    const page = await getStoryPage(id, {
-      command: 'Emulation.setVirtualTimePolicy',
-      parameters: {
-        policy: 'advance',
-        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
-      },
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-  it('combined-disabled-datess', async () => {
-    const id = 'others-calendar--combined-disabled-dates';
-    const page = await getStoryPage(id, {
-      command: 'Emulation.setVirtualTimePolicy',
-      parameters: {
-        policy: 'advance',
-        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
-      },
-    });
-    await capture({
-      selector,
-      id,
-      page,
-    });
-  });
-});

package/components/input-file/test/lion-selected-file-list.test.js

@@ -1,199 +0,0 @@
-import '@lion/ui/define/lion-selected-file-list.js';
-import { expect, fixture as _fixture, html, oneEvent } from '@open-wc/testing';
-import sinon from 'sinon';
-
-/**
- * @typedef {import('../src/LionSelectedFileList.js').LionSelectedFileList} LionSelectedFileList
- * @typedef {import('../types/input-file.js').InputFile} InputFile
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture =
-  /** @type {(arg: TemplateResult|string) => Promise<LionSelectedFileList>} */
-  _fixture;
-describe('lion-selected-file-list', () => {
-  /**
-   * @type {Partial<InputFile>}
-   */
-  const fileSuccess = {
-    name: 'foo.txt',
-    status: 'SUCCESS',
-    downloadUrl: '#foo',
-    systemFile: {
-      name: 'foo.txt',
-      type: 'text/plain',
-      size: 1000,
-      status: 'SUCCESS',
-    },
-    response: {
-      name: 'foo',
-      type: 'text/plain',
-      size: 1000,
-      status: 'SUCCESS',
-    },
-  };
-
-  /**
-   * @type {Partial<InputFile>}
-   */
-  const fileLoading = {
-    status: 'LOADING',
-    systemFile: {
-      name: 'bar.txt',
-      type: 'text/plain',
-      size: 100,
-      status: 'LOADING',
-    },
-  };
-
-  /**
-   * @type {Partial<InputFile>}
-   */
-  const fileFail = {
-    systemFile: {
-      name: 'foobar.txt',
-      type: 'text/plain',
-      size: 1000,
-      status: 'FAIL',
-    },
-    status: 'FAIL',
-    validationFeedback: [
-      {
-        message: 'foobar',
-        type: 'error',
-      },
-    ],
-  };
-  it('when empty show nothing', async () => {
-    const el = await fixture(html`<lion-selected-file-list></lion-selected-file-list>`);
-    expect(el.children.length).to.equal(0);
-  });
-  it('can have 1 item', async () => {
-    const el = await fixture(html`
-      <lion-selected-file-list .fileList="${[fileSuccess]}"></lion-selected-file-list>
-    `);
-    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
-    expect(fileItems?.length).to.equal(1);
-  });
-  it('shows a list when multiple', async () => {
-    const el = await fixture(html`
-      <lion-selected-file-list
-        .fileList="${[fileSuccess, fileLoading]}"
-        .multiple="${true}"
-      ></lion-selected-file-list>
-    `);
-    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
-    expect(fileItems?.length).to.equal(2);
-    const fileList = el.shadowRoot?.querySelector('.selected__list');
-    expect(fileList?.tagName).to.equal('UL');
-  });
-  it('displays an anchor when status="SUCCESS" and a downloadUrl is available', async () => {
-    const el = await fixture(html`
-      <lion-selected-file-list
-        .fileList="${[fileSuccess, fileLoading, fileFail]}"
-        .multiple="${true}"
-      ></lion-selected-file-list>
-    `);
-    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
-    // @ts-ignore
-    expect(fileItems[0].querySelector('.selected__list__item__label__link')).to.exist;
-    // @ts-ignore
-    expect(fileItems[1].querySelector('.selected__list__item__label__link')).to.not.exist;
-    // @ts-ignore
-    expect(fileItems[2].querySelector('.selected__list__item__label__link')).to.not.exist;
-  });
-  it('displays a feedback message when status="FAIL"', async () => {
-    const el = await fixture(html`
-      <lion-selected-file-list .fileList="${[fileFail]}"></lion-selected-file-list>
-    `);
-    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
-    const feedback = fileItems ? fileItems[0].querySelector('lion-validation-feedback') : undefined;
-
-    // @ts-ignore
-    expect(feedback).to.exist;
-    expect(el.shadowRoot?.textContent).to.include('foobar');
-  });
-  it('should call removeFile method on click of remove button', async () => {
-    const el = await fixture(html`
-      <lion-selected-file-list .fileList="${[fileSuccess, fileLoading]}"></lion-selected-file-list>
-    `);
-
-    /**
-     * @type {HTMLButtonElement | null | undefined}
-     */
-    const removeButton = el.shadowRoot?.querySelector('.selected__list__item__remove-button');
-    const removeFileSpy = sinon.spy(el, /** @type {keyof LionSelectedFileList} */ '_removeFile');
-    removeButton?.click();
-    expect(removeFileSpy).have.been.calledOnce;
-    removeFileSpy.restore();
-  });
-  it('should fire file-remove-requested event with removed file data', async () => {
-    const el = await fixture(html`
-      <lion-selected-file-list .fileList="${[fileSuccess, fileLoading]}"></lion-selected-file-list>
-    `);
-
-    /**
-     * @type {Partial<InputFile>}
-     */
-    const removedFile = {
-      name: el.fileList[0].name,
-      status: el.fileList[0].status,
-      systemFile: {
-        name: el.fileList[0].name,
-      },
-      response: {
-        name: el.fileList[0].name,
-        status: el.fileList[0].status,
-      },
-    };
-    setTimeout(() => {
-      // @ts-ignore ignore file typing
-      el._removeFile(removedFile);
-    });
-    const removeFileEvent = await oneEvent(el, 'file-remove-requested');
-    expect(removeFileEvent).to.exist;
-    expect(removeFileEvent.detail.removedFile).to.deep.equal({
-      name: 'foo.txt',
-      status: 'SUCCESS',
-      systemFile: {
-        name: 'foo.txt',
-      },
-      response: {
-        name: 'foo.txt',
-        status: 'SUCCESS',
-      },
-    });
-    expect(removeFileEvent.detail.status).to.deep.equal('SUCCESS');
-    expect(removeFileEvent.detail.uploadResponse).to.deep.equal({
-      name: 'foo.txt',
-      status: 'SUCCESS',
-    });
-  });
-  describe('Accessibility', async () => {
-    it('is accessible', async () => {
-      const el = await fixture(
-        html`<lion-selected-file-list
-          .fileList="${[fileSuccess, fileLoading, fileFail]}"
-        ></lion-selected-file-list>`,
-      );
-      await expect(el).to.be.accessible();
-    });
-    it(`adds aria-live="polite" to the feedback slot on focus, aria-live="assertive" to the feedback slot on blur,
-        so error messages appearing on blur will be read before those of the next input`, async () => {
-      const el = await fixture(html`
-        <lion-selected-file-list .fileList="${[fileFail]}"></lion-selected-file-list>
-      `);
-      const fileFeedback = el?.shadowRoot?.querySelectorAll('[id^="file-feedback"]')[0];
-      const removeButton =
-        /** @type {HTMLButtonElement} */
-        el.shadowRoot?.querySelector('.selected__list__item__remove-button');
-      // @ts-ignore
-      expect(fileFeedback.getAttribute('aria-live')).to.equal('assertive');
-      removeButton?.focus();
-      // @ts-ignore
-      expect(fileFeedback.getAttribute('aria-live')).to.equal('polite');
-      removeButton?.blur();
-      // @ts-ignore
-      expect(fileFeedback.getAttribute('aria-live')).to.equal('assertive');
-    });
-  });
-});