@lion/ui 0.14.2 → 0.15.0

package/components/select-rich/test/lion-select-rich.test.js

@@ -6,7 +6,8 @@ import { LionOption } from '@lion/ui/listbox.js';
 import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
-import { LitElement } from 'lit';
+import '@lion/ui/define/lion-tabs.js';
+import { LitElement, nothing } from 'lit';
 import sinon from 'sinon';
 import {
   fixture as _fixture,
@@ -16,7 +17,9 @@ import {
   defineCE,
   expect,
   html,
+  waitUntil,
 } from '@open-wc/testing';
+import { cache } from 'lit/directives/cache.js';
 
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
@@ -724,6 +727,378 @@ describe('lion-select-rich', () => {
     });
   });
 
+  describe('Render from `lit` `cache`', () => {
+    describe('when `lion-option` is set by `.choiceValue` property with and no `checked` attribute', () => {
+      it('should display the second option', async () => {
+        const colours = [
+          {
+            label: 'Red',
+            value: 'red',
+          },
+          {
+            label: 'Blue',
+            value: 'blue',
+          },
+        ];
+
+        /**
+         * Note, inactive tab content is **destroyed** on every tab switch.
+         */
+        class Wrapper extends LitElement {
+          static properties = {
+            ...super.properties,
+            activeTabIndex: { type: Number },
+          };
+
+          constructor() {
+            super();
+            this.activeTabIndex = 0;
+          }
+
+          /**
+           * @param {number} index
+           */
+          changeActiveTabIndex(index) {
+            this.activeTabIndex = index;
+          }
+
+          render() {
+            const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
+            return html`
+              <lion-tabs>
+                <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
+                  Info
+                </button>
+                <p slot="panel">
+                  ${cache(
+                    this.activeTabIndex === 0
+                      ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
+                          ${colours.map(
+                            colour =>
+                              html`<lion-option .choiceValue="${colour.value}"
+                                >${colour.label}</lion-option
+                              >`,
+                          )}
+                        </lion-select-rich>`
+                      : nothing,
+                  )}
+                </p>
+                <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
+                  Work
+                </button>
+                <p slot="panel">Info page with lots of information about us.</p>
+              </lion-tabs>
+            `;
+          }
+        }
+
+        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+        const tagString = defineCE(Wrapper);
+        const wrapperTag = unsafeStatic(tagString);
+        const wrapperElement = /** @type {Wrapper} */ (
+          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
+        );
+        await wrapperElement.updateComplete;
+        const wrapperElementShadowRoot = wrapperElement.shadowRoot;
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
+        /**
+         * @returns { boolean }
+         */
+        const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
+        /**
+         * @returns { string | undefined }
+         */
+        const getSelectedColourLabel = () =>
+          getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
+        const getDialog = () =>
+          wrapperElementShadowRoot
+            ?.querySelector('lion-select-rich')
+            ?.shadowRoot?.querySelector('dialog');
+        const isDialogVisible = () =>
+          // @ts-ignore
+          getDialog()?.checkVisibility() === true &&
+          getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
+        await waitUntil(isSelectRichRendered);
+        getInvoker()?.click();
+        await waitUntil(isDialogVisible);
+        const optionBlue = /** @type { HTMLElement | undefined } */ (
+          wrapperElementShadowRoot?.querySelectorAll('lion-option')
+        )?.[1];
+        optionBlue?.click();
+        await waitUntil(() => !isDialogVisible());
+        const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
+        expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
+        getSecondButton()?.click();
+        await waitUntil(() => !isSelectRichRendered());
+        getFirstButton()?.click();
+        await waitUntil(isSelectRichRendered);
+        const selectedColourAfterTabSwitch = getSelectedColourLabel();
+        expect(selectedColourAfterTabSwitch).to.equal('Blue');
+      });
+    });
+    describe('when `lion-option` is set by `.choiceValue` property and `checked` attribute', () => {
+      it('should display the second option', async () => {
+        const colours = [
+          {
+            label: 'Red',
+            value: 'red',
+            checked: true,
+          },
+          {
+            label: 'Blue',
+            value: 'blue',
+            checked: false,
+          },
+        ];
+
+        /**
+         * Note, inactive tab content is **destroyed** on every tab switch.
+         */
+        class Wrapper extends LitElement {
+          static properties = {
+            ...super.properties,
+            activeTabIndex: { type: Number },
+          };
+
+          constructor() {
+            super();
+            this.activeTabIndex = 0;
+          }
+
+          /**
+           * @param {number} index
+           */
+          changeActiveTabIndex(index) {
+            this.activeTabIndex = index;
+          }
+
+          render() {
+            const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
+            return html`
+              <lion-tabs>
+                <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
+                  Info
+                </button>
+                <p slot="panel">
+                  ${cache(
+                    this.activeTabIndex === 0
+                      ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
+                          ${colours.map(
+                            colour =>
+                              html`<lion-option
+                                .choiceValue="${colour.value}"
+                                checked="${colour.checked || nothing}"
+                                >${colour.label}</lion-option
+                              >`,
+                          )}
+                        </lion-select-rich>`
+                      : nothing,
+                  )}
+                </p>
+                <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
+                  Work
+                </button>
+                <p slot="panel">Info page with lots of information about us.</p>
+              </lion-tabs>
+            `;
+          }
+        }
+
+        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+        const tagString = defineCE(Wrapper);
+        const wrapperTag = unsafeStatic(tagString);
+        const wrapperElement = /** @type {Wrapper} */ (
+          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
+        );
+        await wrapperElement.updateComplete;
+        const wrapperElementShadowRoot = wrapperElement.shadowRoot;
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
+        /**
+         * @returns { boolean }
+         */
+        const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
+        /**
+         * @returns { string | undefined }
+         */
+        const getSelectedColourLabel = () =>
+          getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
+        const getDialog = () =>
+          wrapperElementShadowRoot
+            ?.querySelector('lion-select-rich')
+            ?.shadowRoot?.querySelector('dialog');
+        const isDialogVisible = () =>
+          // @ts-ignore
+          getDialog()?.checkVisibility() === true &&
+          getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
+        await waitUntil(isSelectRichRendered);
+        getInvoker()?.click();
+        await waitUntil(isDialogVisible);
+        const optionBlue = /** @type { HTMLElement | undefined } */ (
+          wrapperElementShadowRoot?.querySelectorAll('lion-option')
+        )?.[1];
+        optionBlue?.click();
+        await waitUntil(() => !isDialogVisible());
+        const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
+        expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
+        getSecondButton()?.click();
+        await waitUntil(() => !isSelectRichRendered());
+        getFirstButton()?.click();
+        await waitUntil(isSelectRichRendered);
+        const selectedColourAfterTabSwitch = getSelectedColourLabel();
+        expect(selectedColourAfterTabSwitch).to.equal('Blue');
+      });
+    });
+    describe('when `lion-option` is set by `.modelValue` property', () => {
+      it('should display the second option', async () => {
+        const colours = [
+          {
+            label: 'Red',
+            value: 'red',
+            checked: true,
+          },
+          {
+            label: 'Blue',
+            value: 'blue',
+            checked: false,
+          },
+        ];
+
+        /**
+         * Note, inactive tab content is **destroyed** on every tab switch.
+         */
+        class Wrapper extends LitElement {
+          static properties = {
+            ...super.properties,
+            activeTabIndex: { type: Number },
+          };
+
+          constructor() {
+            super();
+            this.activeTabIndex = 0;
+          }
+
+          /**
+           * @param {number} index
+           */
+          changeActiveTabIndex(index) {
+            this.activeTabIndex = index;
+          }
+
+          render() {
+            const changeActiveTabIndexRef = this.changeActiveTabIndex.bind(this);
+            return html`
+              <lion-tabs>
+                <button slot="tab" class="first-button" @click=${() => changeActiveTabIndexRef(0)}>
+                  Info
+                </button>
+                <p slot="panel">
+                  ${cache(
+                    this.activeTabIndex === 0
+                      ? html`<lion-select-rich name="favoriteColor" label="Favorite color">
+                          ${colours.map(
+                            colour =>
+                              html`<lion-option
+                                @model-value-changed=${(/** @type {Event} */ ev) => {
+                                  const lionOption = /** @type {LionOption} */ (ev.target);
+                                  // eslint-disable-next-line no-param-reassign
+                                  colour.checked = lionOption.modelValue.checked;
+                                }}
+                                .modelValue=${{ value: colour.value, checked: colour.checked }}
+                                >${colour.label}</lion-option
+                              >`,
+                          )}
+                        </lion-select-rich>`
+                      : nothing,
+                  )}
+                </p>
+                <button slot="tab" class="second-button" @click=${() => changeActiveTabIndexRef(1)}>
+                  Work
+                </button>
+                <p slot="panel">Info page with lots of information about us.</p>
+              </lion-tabs>
+            `;
+          }
+        }
+
+        const wrapperFixture = /** @type {(arg: TemplateResult) => Promise<Wrapper>} */ (_fixture);
+        const tagString = defineCE(Wrapper);
+        const wrapperTag = unsafeStatic(tagString);
+        const wrapperElement = /** @type {Wrapper} */ (
+          await wrapperFixture(html`<${wrapperTag}></${wrapperTag}>`)
+        );
+        await wrapperElement.updateComplete;
+        const wrapperElementShadowRoot = wrapperElement.shadowRoot;
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getFirstButton = () => wrapperElementShadowRoot?.querySelector('.first-button');
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getSecondButton = () => wrapperElementShadowRoot?.querySelector('.second-button');
+        /**
+         * @returns { HTMLElement | null | undefined }
+         */
+        const getInvoker = () => wrapperElementShadowRoot?.querySelector('lion-select-invoker');
+        /**
+         * @returns { boolean }
+         */
+        const isSelectRichRendered = () => !!getInvoker()?.shadowRoot?.childNodes.length;
+        /**
+         * @returns { string | undefined }
+         */
+        const getSelectedColourLabel = () =>
+          getInvoker()?.shadowRoot?.querySelector('#content-wrapper')?.textContent?.trim();
+        const getDialog = () =>
+          wrapperElementShadowRoot
+            ?.querySelector('lion-select-rich')
+            ?.shadowRoot?.querySelector('dialog');
+        const isDialogVisible = () =>
+          // @ts-ignore
+          getDialog()?.checkVisibility() === true &&
+          getDialog()?.querySelector('#overlay-content-node-wrapper[data-popper-placement]');
+        await waitUntil(isSelectRichRendered);
+        getInvoker()?.click();
+        await waitUntil(isDialogVisible);
+        const optionBlue = /** @type { HTMLElement | undefined } */ (
+          wrapperElementShadowRoot?.querySelectorAll('lion-option')
+        )?.[1];
+        optionBlue?.click();
+        await waitUntil(() => !isDialogVisible());
+        const selectedColourLabelBeforeTabSwitch = getSelectedColourLabel();
+        expect(selectedColourLabelBeforeTabSwitch).to.equal('Blue');
+        getSecondButton()?.click();
+        await waitUntil(() => !isSelectRichRendered());
+        getFirstButton()?.click();
+        await waitUntil(isSelectRichRendered);
+        const selectedColourAfterTabSwitch = getSelectedColourLabel();
+        expect(selectedColourAfterTabSwitch).to.equal('Blue');
+      });
+    });
+  });
+
   describe('Teardown', () => {
     it('correctly removes event listeners when disconnected from dom', async () => {
       const el = await fixture(html`

package/custom-elements.json

@@ -98245,6 +98245,12 @@
                 "module": "components/form-core/src/LionField.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "_decrement",
+              "description": "Decrement the value based on given step or default step value is 1",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_decrementorSignTemplate",
@@ -98467,6 +98473,12 @@
                 "module": "components/form-core/src/LionField.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "_increment",
+              "description": "Increment the value based on given step or default step value is 1",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_incrementorSignTemplate",
@@ -99183,12 +99195,6 @@
                 "module": "components/form-core/src/LionField.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "__decrement",
-              "description": "Decrement the value based on given step or default step value is 1",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "__delegateReadOnly",
@@ -99400,12 +99406,6 @@
                 "module": "components/form-core/src/LionField.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "__increment",
-              "description": "Increment the value based on given step or default step value is 1",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "__initSlots",
@@ -120038,11 +120038,16 @@
           "kind": "function",
           "name": "getLocalizeManager",
           "description": "Side-effect-free alternative for `localize` (the globally shared instance of LocalizeManager).\nWhen this function is imported, no side-effect happened yet, i.e. no global instance was registered yet.\nThe side effect-free approach generates:\n- smaller, optimized bundles\n- a predictable loading order, that allows for:\n  - deduping strategies when multiple instances of the localizeManager are on a page\n  - providing a customized extension of LocalizeManager\n\nUse it like this:\n\n```js\nfunction myFunction() {\n  // note that 'localizeManager' is the same as former 'localize'\n  const localizeManager = getLocalizeManger();\n  // ...\n}\n```\n\nIn a class, we advise a shared instance:\n```js\nclass MyClass {\n  constructor() {\n    this._localizeManager = getLocalizeManger();\n  }\n  // ...\n}\n```\n\nMake sure to always call this method inside a function or class (otherwise side effects are created)\n\nDo you want to register your own LocalizeManager?\nMake sure it's registered before anyone called `getLocalizeManager()`\n\n```js\nimport { singletonManager } from 'singleton-manager';\nimport { getLocalizeManger } from '@lion/ui/localize-no-side-effects.js';\n\n// First register your own LocalizeManager (for deduping or other reasons)\nsingletonManager.set('lion/ui::localize::0.x', class MyLocalizeManager extends LocalizeManager {});\n\n// Now, all your code gets the right instance\nfunction myFuntion() {\n  const localizeManager = getLocalizeManager();\n  // ...\n}\n\nclass myClass() {\n  constructor() {\n    this._localizeManager = getLocalizeManager();\n    // ...\n  }\n}\n```",
+          "deprecated": "Use `localize` directly instead (as this is always side-effect free now)",
           "return": {
             "type": {
               "text": "LocalizeManager"
             }
           }
+        },
+        {
+          "kind": "function",
+          "name": "getLocalizeManagerLazily"
         }
       ],
       "exports": [
@@ -120050,7 +120055,7 @@
           "kind": "js",
           "name": "getLocalizeManager",
           "declaration": {
-            "name": "getLocalizeManager",
+            "name": "getLocalizeManagerLazily",
             "module": "components/localize/src/getLocalizeManager.js"
           }
         }
@@ -149469,6 +149474,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "lazifyInstantiation",
+          "declaration": {
+            "name": "lazifyInstantiation",
+            "module": "./lazifyInstantiation.js"
+          }
+        },
         {
           "kind": "js",
           "name": "SingletonManagerClass",
@@ -153148,6 +153161,35 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "../singleton-manager/src/lazifyInstantiation.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "lazifyInstantiation",
+          "parameters": [
+            {
+              "name": "registerSingleton"
+            }
+          ],
+          "description": "Lazifies the instantiation of singletons. It does so by wrapping the singleton in a Proxy, which delays\ninstantiation until one of its members gets called/set for the first time.\nThis is important in cases where a singleton needs to be overridden on an app level:\nlet's say there are two versions of",
+          "type": {
+            "text": "<T>(func: () => T) => T"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lazifyInstantiation",
+          "declaration": {
+            "name": "lazifyInstantiation",
+            "module": "../singleton-manager/src/lazifyInstantiation.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "../../node_modules/lit-html/node/directives/ref.js",

package/dist-types/components/icon/src/LionIcon.d.ts

@@ -62,7 +62,7 @@ export class LionIcon extends LitElement {
      */
     protected _renderSvg(svgObject: TemplateResult | typeof nothing): void;
     /** @protected */
-    protected get _iconManager(): any;
+    protected get _iconManager(): import("./IconManager.js").IconManager;
     /**
      * @param {string} prevIconId
      * @protected

package/dist-types/components/icon/src/LionIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionIcon.d.ts","sourceRoot":"","sources":["../../../../components/icon/src/LionIcon.js"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH;IACE;QAEI;;;WAGG;;;;QAIH;;;WAGG;;;;;;QAMH;;;WAGG;;;;;MAMN;IAED,+CA6BC;IAaD;;;OAGG;IACH,oDAA4F;IAb1F,kBAAmB;IACnB,eAAgB;IAChB;;;OAGG;IACH,cAAoB;IAqBtB,+CAEC;IASD;;;;OAIG;IACH,0FAOC;IAED;;OAEG;IACH,uFAEC;IAED,iBAAiB;IACjB,kCAOC;IAED;;;OAGG;IACH,gCAHW,cAAc,iBAAU,QASlC;IAED,iBAAiB;IAEjB,kCAEC;IAED;;;OAGG;IACH,uCAHW,MAAM,iBAyBhB;CACF;6BA9MY,OAAO,KAAK,EAAE,cAAc;0CACZ,oBAAoB,WAAY,MAAM,EAAE,KAAK,MAAM,KAAK,MAAM"}
+{"version":3,"file":"LionIcon.d.ts","sourceRoot":"","sources":["../../../../components/icon/src/LionIcon.js"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH;IACE;QAEI;;;WAGG;;;;QAIH;;;WAGG;;;;;;QAMH;;;WAGG;;;;;MAMN;IAED,+CA6BC;IAaD;;;OAGG;IACH,oDAA4F;IAb1F,kBAAmB;IACnB,eAAgB;IAChB;;;OAGG;IACH,cAAoB;IAqBtB,+CAEC;IASD;;;;OAIG;IACH,0FAOC;IAED;;OAEG;IACH,uFAEC;IAED,iBAAiB;IACjB,kCAOC;IAED;;;OAGG;IACH,gCAHW,cAAc,iBAAU,QASlC;IAED,iBAAiB;IAEjB,qEAEC;IAED;;;OAGG;IACH,uCAHW,MAAM,iBAyBhB;CACF;6BA9MY,OAAO,KAAK,EAAE,cAAc;0CACZ,oBAAoB,WAAY,MAAM,EAAE,KAAK,MAAM,KAAK,MAAM"}

package/dist-types/components/icon/src/icons.d.ts

@@ -1,2 +1,3 @@
-export const icons: any;
+export const icons: IconManager;
+import { IconManager } from "./IconManager.js";
 //# sourceMappingURL=icons.d.ts.map

package/dist-types/components/icon/src/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../components/icon/src/icons.js"],"names":[],"mappings":"AAGA,wBAAuF"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../components/icon/src/icons.js"],"names":[],"mappings":"AAeA,gCAAyD"}

package/dist-types/components/icon/test/hammer.svg.d.ts

@@ -1,3 +1,3 @@
-declare function _default(tag: (strings: TemplateStringsArray, ...expr: string[]) => string): string;
+declare const _default: import("lit-html").TemplateResult<1 | 2 | 3>;
 export default _default;
 //# sourceMappingURL=hammer.svg.d.ts.map

package/dist-types/components/icon/test/hammer.svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hammer.svg.d.ts","sourceRoot":"","sources":["../../../../components/icon/test/hammer.svg.js"],"names":[],"mappings":"AAAiG,yCAA5D,oBAAoB,WAAY,MAAM,EAAE,KAAK,MAAM,UACkR"}
+{"version":3,"file":"hammer.svg.d.ts","sourceRoot":"","sources":["../../../../components/icon/test/hammer.svg.js"],"names":[],"mappings":""}

package/dist-types/components/icon/test/heart.svg.d.ts

@@ -1,3 +1,3 @@
-declare function _default(tag: (strings: TemplateStringsArray, ...expr: string[]) => string): string;
+declare const _default: import("lit-html").TemplateResult<1 | 2 | 3>;
 export default _default;
 //# sourceMappingURL=heart.svg.d.ts.map

package/dist-types/components/icon/test/heart.svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heart.svg.d.ts","sourceRoot":"","sources":["../../../../components/icon/test/heart.svg.js"],"names":[],"mappings":"AAAiG,yCAA5D,oBAAoB,WAAY,MAAM,EAAE,KAAK,MAAM,UAC6T"}
+{"version":3,"file":"heart.svg.d.ts","sourceRoot":"","sources":["../../../../components/icon/test/heart.svg.js"],"names":[],"mappings":""}

package/dist-types/components/input-stepper/src/LionInputStepper.d.ts

@@ -36,14 +36,14 @@ export class LionInputStepper extends LionInputStepper_base {
     };
     /**
      * Increment the value based on given step or default step value is 1
-     * @private
+     * @protected
      */
-    private __increment;
+    protected _increment(): void;
     /**
      * Decrement the value based on given step or default step value is 1
-     * @private
+     * @protected
      */
-    private __decrement;
+    protected _decrement(): void;
     /**
      * @protected
      * @param {Event} ev

package/dist-types/components/input-stepper/src/LionInputStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionInputStepper.d.ts","sourceRoot":"","sources":["../../../../components/input-stepper/src/LionInputStepper.js"],"names":[],"mappings":";AAMA;;GAEG;AAEH;;;;GAIG;AACH;IACE,wFAsBC;IAED,kBAAkB;IAClB,6BAkBC;IAED,kGAGE;IAEF;;OAEG;IACH,2BAEC;IAQC,iCAAiC;IACjC,2BAAyB;IACzB,+BAA6B;IAC7B,YAAmB;IACnB,YAAmB;IACnB;;;OAGG;IACH;;MAA0B;IAC1B,aAAa;IACb;;;;MAIC;IAwKH;;;OAGG;IACH,oBAgBC;IAED;;;OAGG;IACH,oBAgBC;IA2HD;;;OAGG;IAEH,6BAHW,KAAK,QAQf;IAED;;;;;;;;;;;;OAYG;IAEH,6BAHW,KAAK,QASf;IArWD,0BAeC;IAED,6BAGC;IA0CD;;;;MAMC;IAED;;;OAGG;IACH,+BASC;IAED;;;;OAIG;IACH,yBAQC;IAED;;;OAGG;IACH,oCAeC;IAED;;OAEG;IACH,wCAoBC;IAZK,gCAA2D;IAcjE;;;;;OAKG;IACH,kBAMC;IA8CD;;;;OAIG;IACH,iCAWC;IAED;;;;OAIG;IACH,iCAWC;IAED;;;;OAIG;IACH,qCAGC;IAED;;;;OAIG;IAEH,sCAJa,SAAO,OAAO,KAAK,EAAE,cAAc,CAM/C;IAED;;;;OAIG;IAEH,sCAJa,SAAO,OAAO,KAAK,EAAE,cAAc,CAM/C;IAED;;;;OAIG;IACH,kCAHa,OAAO,KAAK,EAAE,cAAc,CAgBxC;IAED;;;;OAIG;IACH,kCAHa,OAAO,KAAK,EAAE,cAAc,CAgBxC;IAED,iBAAiB;IACjB,sEAYC;CAmCF;4BArcY,OAAO,KAAK,EAAE,aAAa"}
+{"version":3,"file":"LionInputStepper.d.ts","sourceRoot":"","sources":["../../../../components/input-stepper/src/LionInputStepper.js"],"names":[],"mappings":";AAMA;;GAEG;AAEH;;;;GAIG;AACH;IACE,wFAsBC;IAED,kBAAkB;IAClB,6BAkBC;IAED,kGAGE;IAEF;;OAEG;IACH,2BAEC;IAQC,iCAAiC;IACjC,2BAAyB;IACzB,+BAA6B;IAC7B,YAAmB;IACnB,YAAmB;IACnB;;;OAGG;IACH;;MAA0B;IAC1B,aAAa;IACb;;;;MAIC;IAwKH;;;OAGG;IACH,6BAgBC;IAED;;;OAGG;IACH,6BAgBC;IA2HD;;;OAGG;IAEH,6BAHW,KAAK,QAQf;IAED;;;;;;;;;;;;OAYG;IAEH,6BAHW,KAAK,QASf;IArWD,0BAeC;IAED,6BAGC;IA0CD;;;;MAMC;IAED;;;OAGG;IACH,+BASC;IAED;;;;OAIG;IACH,yBAQC;IAED;;;OAGG;IACH,oCAeC;IAED;;OAEG;IACH,wCAoBC;IAZK,gCAA2D;IAcjE;;;;;OAKG;IACH,kBAMC;IA8CD;;;;OAIG;IACH,iCAWC;IAED;;;;OAIG;IACH,iCAWC;IAED;;;;OAIG;IACH,qCAGC;IAED;;;;OAIG;IAEH,sCAJa,SAAO,OAAO,KAAK,EAAE,cAAc,CAM/C;IAED;;;;OAIG;IAEH,sCAJa,SAAO,OAAO,KAAK,EAAE,cAAc,CAM/C;IAED;;;;OAIG;IACH,kCAHa,OAAO,KAAK,EAAE,cAAc,CAgBxC;IAED;;;;OAIG;IACH,kCAHa,OAAO,KAAK,EAAE,cAAc,CAgBxC;IAED,iBAAiB;IACjB,sEAYC;CAmCF;4BArcY,OAAO,KAAK,EAAE,aAAa"}

package/dist-types/components/localize/src/getLocalizeManager.d.ts

@@ -1,60 +1,4 @@
-/**
- * Side-effect-free alternative for `localize` (the globally shared instance of LocalizeManager).
- * When this function is imported, no side-effect happened yet, i.e. no global instance was registered yet.
- * The side effect-free approach generates:
- * - smaller, optimized bundles
- * - a predictable loading order, that allows for:
- *   - deduping strategies when multiple instances of the localizeManager are on a page
- *   - providing a customized extension of LocalizeManager
- *
- * Use it like this:
- *
- * ```js
- * function myFunction() {
- *   // note that 'localizeManager' is the same as former 'localize'
- *   const localizeManager = getLocalizeManger();
- *   // ...
- * }
- * ```
- *
- * In a class, we advise a shared instance:
- * ```js
- * class MyClass {
- *   constructor() {
- *     this._localizeManager = getLocalizeManger();
- *   }
- *   // ...
- * }
- * ```
- *
- * Make sure to always call this method inside a function or class (otherwise side effects are created)
- *
- * Do you want to register your own LocalizeManager?
- * Make sure it's registered before anyone called `getLocalizeManager()`
- *
- * ```js
- * import { singletonManager } from 'singleton-manager';
- * import { getLocalizeManger } from '@lion/ui/localize-no-side-effects.js';
- *
- * // First register your own LocalizeManager (for deduping or other reasons)
- * singletonManager.set('lion/ui::localize::0.x', class MyLocalizeManager extends LocalizeManager {});
- *
- * // Now, all your code gets the right instance
- * function myFuntion() {
- *   const localizeManager = getLocalizeManager();
- *   // ...
- * }
- *
- * class myClass() {
- *   constructor() {
- *     this._localizeManager = getLocalizeManager();
- *     // ...
- *   }
- * }
- * ```
- *
- * @returns {LocalizeManager}
- */
-export function getLocalizeManager(): LocalizeManager;
+export { getLocalizeManagerLazily as getLocalizeManager };
+declare function getLocalizeManagerLazily(): LocalizeManager;
 import { LocalizeManager } from "./LocalizeManager.js";
 //# sourceMappingURL=getLocalizeManager.d.ts.map

package/dist-types/components/localize/src/getLocalizeManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getLocalizeManager.d.ts","sourceRoot":"","sources":["../../../../components/localize/src/getLocalizeManager.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,sCAFa,eAAe,CAc3B"}
+{"version":3,"file":"getLocalizeManager.d.ts","sourceRoot":"","sources":["../../../../components/localize/src/getLocalizeManager.js"],"names":[],"mappings":";AA2EA,6DAEC"}