@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-tabs.js

@@ -1,119 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as getCircularArrayIndex } from './utils.js';
-import { d as defineCustomElement$2 } from './swirl-tab-bar2.js';
-
-const swirlTabsCss = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}";
-
-const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.tabActivated = createEvent(this, "tabActivated", 7);
-        this.tabBarVariant = "default";
-        this.tabBarTabs = [];
-        this.tabs = [];
-        this.onActivateNextTab = () => {
-            this.activateNextTab();
-        };
-        this.onActivatePreviousTab = () => {
-            this.activatePreviousTab();
-        };
-        this.onActivateTab = (event) => {
-            this.activateTab(event.detail);
-        };
-    }
-    componentWillLoad() {
-        this.collectTabs();
-        this.updateTabBarTabs();
-    }
-    /**
-     * Activate a tab.
-     * @param tabId
-     */
-    async activateTab(tabId) {
-        if (this.activeTab === tabId) {
-            return;
-        }
-        this.activeTab = tabId;
-        this.tabs.forEach((tab) => (tab.active = false));
-        const tab = this.tabs.find((tab) => tab.tabId === tabId);
-        if (!Boolean(tab)) {
-            return;
-        }
-        tab.active = true;
-        this.tabActivated.emit(tab);
-        this.updateTabBarTabs();
-    }
-    activateNextTab() {
-        const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-        const nextIndex = getCircularArrayIndex(currentIndex + 1, this.tabs.length);
-        this.activateTab(this.tabs[nextIndex].tabId);
-        requestAnimationFrame(() => {
-            this.el.querySelector(".tabs__tab--active")?.focus();
-        });
-    }
-    activatePreviousTab() {
-        const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-        const previousIndex = getCircularArrayIndex(currentIndex - 1, this.tabs.length);
-        this.activateTab(this.tabs[previousIndex].tabId);
-        requestAnimationFrame(() => {
-            this.el.querySelector(".tabs__tab--active")?.focus();
-        });
-    }
-    collectTabs() {
-        this.tabs = Array.from(this.el.querySelectorAll("swirl-tab"));
-        if (this.tabs.length === 0) {
-            return;
-        }
-        const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
-        this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
-    }
-    updateTabBarTabs() {
-        this.tabBarTabs = this.tabs.map((tab) => ({
-            icon: tab.icon,
-            id: tab.tabId,
-            label: tab.label,
-            active: this.activeTab === tab.tabId,
-        }));
-    }
-    render() {
-        return (h(Host, { key: 'e643db828da8907ed5b71e9b3aeafb1859540b5e' }, h("div", { key: '4a2ef8f5ff1214718747f3ade1411967d00e9e6d', class: "tabs" }, h("swirl-tab-bar", { key: '91fda1ba09e5b2e7b918c27ba973142615bfba4f', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'f1f616e1a6b2ae18abe8a19bdaaba79dba9c2b2f' })));
-    }
-    get el() { return this; }
-    static get style() { return swirlTabsCss; }
-}, [6, "swirl-tabs", {
-        "initialTab": [1, "initial-tab"],
-        "label": [1],
-        "justifyTabBar": [1, "justify-tab-bar"],
-        "tabBarPaddingBlockEnd": [1, "tab-bar-padding-block-end"],
-        "tabBarPaddingBlockStart": [1, "tab-bar-padding-block-start"],
-        "tabBarPaddingInlineEnd": [1, "tab-bar-padding-inline-end"],
-        "tabBarPaddingInlineStart": [1, "tab-bar-padding-inline-start"],
-        "tabBarVariant": [1, "tab-bar-variant"],
-        "activeTab": [32],
-        "tabBarTabs": [32],
-        "activateTab": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tabs", "swirl-tab-bar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTabs$1);
-            }
-            break;
-        case "swirl-tab-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlTabs = SwirlTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTabs, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as a,createEvent as i,h as s,Host as e,transformTag as b}from"@stencil/core/internal/client";import{o as r}from"./utils.js";import{d as n}from"./swirl-tab-bar2.js";const h=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabActivated=i(this,"tabActivated",7),this.tabBarVariant="default",this.tabBarTabs=[],this.tabs=[],this.onActivateNextTab=()=>{this.activateNextTab()},this.onActivatePreviousTab=()=>{this.activatePreviousTab()},this.onActivateTab=t=>{this.activateTab(t.detail)}}componentWillLoad(){this.collectTabs(),this.updateTabBarTabs()}async activateTab(t){if(this.activeTab===t)return;this.activeTab=t,this.tabs.forEach((t=>t.active=!1));const a=this.tabs.find((a=>a.tabId===t));a&&(a.active=!0,this.tabActivated.emit(a),this.updateTabBarTabs())}activateNextTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),a=r(t+1,this.tabs.length);this.activateTab(this.tabs[a].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}activatePreviousTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),a=r(t-1,this.tabs.length);this.activateTab(this.tabs[a].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}collectTabs(){if(this.tabs=Array.from(this.el.querySelectorAll("swirl-tab")),0===this.tabs.length)return;const t=this.tabs.find((t=>t.tabId===this.initialTab));this.activateTab(t?t.tabId:this.tabs[0].tabId)}updateTabBarTabs(){this.tabBarTabs=this.tabs.map((t=>({icon:t.icon,id:t.tabId,label:t.label,active:this.activeTab===t.tabId})))}render(){return s(e,{key:"e643db828da8907ed5b71e9b3aeafb1859540b5e"},s("div",{key:"4a2ef8f5ff1214718747f3ade1411967d00e9e6d",class:"tabs"},s("swirl-tab-bar",{key:"91fda1ba09e5b2e7b918c27ba973142615bfba4f",label:this.label,onActivateNextTab:this.onActivateNextTab,onActivatePreviousTab:this.onActivatePreviousTab,onActivateTab:this.onActivateTab,tabs:this.tabBarTabs,justify:this.justifyTabBar,paddingBlockEnd:this.tabBarPaddingBlockEnd,paddingBlockStart:this.tabBarPaddingBlockStart,paddingInlineEnd:this.tabBarPaddingInlineEnd,paddingInlineStart:this.tabBarPaddingInlineStart,variant:this.tabBarVariant})),s("slot",{key:"f1f616e1a6b2ae18abe8a19bdaaba79dba9c2b2f"}))}get el(){return this}static get style(){return".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}"}},[262,"swirl-tabs",{initialTab:[1,"initial-tab"],label:[1],justifyTabBar:[1,"justify-tab-bar"],tabBarPaddingBlockEnd:[1,"tab-bar-padding-block-end"],tabBarPaddingBlockStart:[1,"tab-bar-padding-block-start"],tabBarPaddingInlineEnd:[1,"tab-bar-padding-inline-end"],tabBarPaddingInlineStart:[1,"tab-bar-padding-inline-start"],tabBarVariant:[1,"tab-bar-variant"],activeTab:[32],tabBarTabs:[32],activateTab:[64]}]),d=h,l=function(){"undefined"!=typeof customElements&&["swirl-tabs","swirl-tab-bar"].forEach((t=>{switch(t){case"swirl-tabs":customElements.get(b(t))||customElements.define(b(t),h);break;case"swirl-tab-bar":customElements.get(b(t))||n()}}))};export{d as SwirlTabs,l as defineCustomElement}

package/dist/components/swirl-tag.js

@@ -1,6 +1 @@
-import { S as SwirlTag$1, d as defineCustomElement$1 } from './swirl-tag2.js';
-
-const SwirlTag = SwirlTag$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTag, defineCustomElement };
+import{S as s,d as o}from"./swirl-tag2.js";const r=s,t=o;export{r as SwirlTag,t as defineCustomElement}

package/dist/components/swirl-tag2.js

@@ -1,84 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-
-const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
-
-const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.removeTag = createEvent(this, "remove", 7);
-        this.iconPosition = "start";
-        this.intent = "default";
-        this.size = "m";
-        this.removalButtonLabel = "Remove";
-        this.variant = "default";
-        this.onRemove = (event) => {
-            this.removeTag?.emit(event);
-        };
-    }
-    componentDidLoad() {
-        this.forceIconProps();
-    }
-    componentWillLoad() {
-        this.forceVariant();
-    }
-    componentDidRender() {
-        this.forceIconProps();
-    }
-    forceIconProps() {
-        const icon = this.iconEl?.children[0];
-        icon?.setAttribute("size", "16");
-    }
-    forceVariant() {
-        if (Boolean(this.bordered)) {
-            console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.');
-            this.variant = "outline";
-        }
-    }
-    render() {
-        const className = classNames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
-        return (h(Host, { key: '31e81a17decfcb629da2aadd602ab3885f28e9d9' }, h("span", { key: '37ca68bf8d46b677e457c817185444d4600b622a', class: className, part: "tag" }, this.icon && (h("span", { key: '634b28092772482c1a93e3cbfa4d7e5f855c8ab2', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '65c1ce66fb4460767f2b84d13d0f6c3bf3af1a92', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '08bbf5e8cf6750392db278c488ab39e373c1b1a2', size: 16 }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlTagCss; }
-}, [1, "swirl-tag", {
-        "hideLabel": [4, "hide-label"],
-        "icon": [1],
-        "iconPosition": [1, "icon-position"],
-        "intent": [1],
-        "label": [1],
-        "removable": [4],
-        "bordered": [4],
-        "size": [1],
-        "removalButtonLabel": [1, "removal-button-label"],
-        "variant": [1025]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tag", "swirl-icon-close", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTag);
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlTag as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as a,createEvent as r,h as e,Host as o,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as i}from"./swirl-icon-close2.js";import{d as c}from"./swirl-visually-hidden2.js";const l=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.removeTag=r(this,"remove",7),this.iconPosition="start",this.intent="default",this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)}}componentDidLoad(){this.forceIconProps()}componentWillLoad(){this.forceVariant()}componentDidRender(){this.forceIconProps()}forceIconProps(){const t=this.iconEl?.children[0];t?.setAttribute("size","16")}forceVariant(){Boolean(this.bordered)&&(console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'),this.variant="outline")}render(){const t=s("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel});return e(o,{key:"31e81a17decfcb629da2aadd602ab3885f28e9d9"},e("span",{key:"37ca68bf8d46b677e457c817185444d4600b622a",class:t,part:"tag"},this.icon&&e("span",{key:"634b28092772482c1a93e3cbfa4d7e5f855c8ab2",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?e("swirl-visually-hidden",null,this.label):e("span",{class:"tag__label"},this.label),this.removable&&e("button",{key:"65c1ce66fb4460767f2b84d13d0f6c3bf3af1a92","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},e("swirl-icon-close",{key:"08bbf5e8cf6750392db278c488ab39e373c1b1a2",size:16}))))}get el(){return this}static get style(){return":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}"}},[1,"swirl-tag",{hideLabel:[4,"hide-label"],icon:[1],iconPosition:[1,"icon-position"],intent:[1],label:[1],removable:[4],bordered:[4],size:[1],removalButtonLabel:[1,"removal-button-label"],variant:[1025]}]);function g(){"undefined"!=typeof customElements&&["swirl-tag","swirl-icon-close","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tag":customElements.get(n(t))||customElements.define(n(t),l);break;case"swirl-icon-close":customElements.get(n(t))||i();break;case"swirl-visually-hidden":customElements.get(n(t))||c()}}))}export{l as S,g as d}

package/dist/components/swirl-text-input.js

@@ -1,6 +1 @@
-import { S as SwirlTextInput$1, d as defineCustomElement$1 } from './swirl-text-input2.js';
-
-const SwirlTextInput = SwirlTextInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTextInput, defineCustomElement };
+import{S as t,d as s}from"./swirl-text-input2.js";const o=t,r=s;export{o as SwirlTextInput,r as defineCustomElement}

package/dist/components/swirl-text-input2.js

@@ -1,266 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-import { d as defineCustomElement$6 } from './swirl-icon-cancel2.js';
-import { d as defineCustomElement$5 } from './swirl-icon-expand-less2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-expand-more2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-visibility2.js';
-import { d as defineCustomElement$2 } from './swirl-icon-visibility-off2.js';
-import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-
-const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
-
-const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.clear = createEvent(this, "clear", 7);
-        this.inputBlur = createEvent(this, "inputBlur", 7);
-        this.inputFocus = createEvent(this, "inputFocus", 7);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.autoComplete = "on";
-        this.characterCounterLabel = "Used characters";
-        this.clearButtonLabel = "Clear input";
-        this.fontSize = "default";
-        this.passwordToggleLabel = "Toggle password display";
-        this.rows = 1;
-        this.type = "text";
-        this.iconSize = 24;
-        this.showPassword = false;
-        this.mediaQueryUnsubscribe = () => { };
-        this.handleClearClick = () => {
-            this.inputEl.value = "";
-            this.value = "";
-            this.valueChange.emit("");
-            this.inputEl.focus();
-            this.clear.emit();
-        };
-        this.onChange = (event) => {
-            const el = event.target;
-            this.value = el.value;
-        };
-        this.onBlur = (event) => {
-            this.inputBlur.emit(event);
-        };
-        this.onFocus = (event) => {
-            this.inputFocus.emit(event);
-            this.handleAutoSelect(event);
-        };
-        this.onInput = (event) => {
-            this.onChange(event);
-        };
-        this.onKeyPress = (event) => {
-            if (this.type !== "number") {
-                return;
-            }
-            if (["+", "-", "e"].includes(event.key)) {
-                event.preventDefault();
-            }
-        };
-        this.decreaseValue = () => {
-            if (this.type !== "number") {
-                return;
-            }
-            const step = this.step || 1;
-            let currentValue = this.inputEl.valueAsNumber;
-            if (isNaN(this.inputEl.valueAsNumber)) {
-                currentValue = this.min !== undefined ? this.min + 1 : 1;
-            }
-            this.value = String(Math.max(this.min || -Infinity, currentValue - step));
-            this.valueChange.emit(this.value);
-        };
-        this.increaseValue = () => {
-            if (this.type !== "number") {
-                return;
-            }
-            const step = this.step || 1;
-            let currentValue = this.inputEl.valueAsNumber;
-            if (isNaN(this.inputEl.valueAsNumber)) {
-                currentValue = this.min !== undefined ? this.min - 1 : -1;
-            }
-            this.value = String(Math.min(this.max || Infinity, currentValue + step));
-            this.valueChange.emit(this.value);
-        };
-        this.togglePassword = () => {
-            if (this.type !== "password") {
-                return;
-            }
-            this.showPassword = !this.showPassword;
-        };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.updateIconSize(isDesktop);
-        });
-        // see https://stackoverflow.com/a/27314017
-        if (this.autoFocus) {
-            setTimeout(() => {
-                this.inputEl.focus();
-            });
-        }
-    }
-    componentDidRender() {
-        this.adjustInputSize();
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    async blurInput() {
-        this.inputEl.blur();
-    }
-    async focusInput() {
-        this.inputEl.focus();
-    }
-    watchValue(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.valueChange.emit(newValue);
-        }
-    }
-    updateIconSize(smallIcon) {
-        this.iconSize = smallIcon ? 20 : 24;
-    }
-    adjustInputSize() {
-        if (this.rows > 1 || this.autoGrow) {
-            this.inputEl.style.width = "";
-            this.inputEl.style.height = "";
-            this.inputEl.style.height = Boolean(this.inputEl.scrollHeight)
-                ? this.inputEl.scrollHeight / 16 + "rem"
-                : "";
-        }
-        if (this.rows === 1 && !this.autoGrow) {
-            this.inputEl.style.height = "";
-            this.inputEl.style.width = "";
-            if (this.suffixLabel &&
-                this.type !== "password" &&
-                !this.disableDynamicWidth &&
-                !Boolean(this.placeholder)) {
-                this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
-            }
-        }
-    }
-    handleAutoSelect(event) {
-        if (!(this.autoSelect || this.readonly)) {
-            return;
-        }
-        event.target.select();
-    }
-    render() {
-        const Tag = this.rows === 1 && !this.autoGrow ? "input" : "textarea";
-        const ariaInvalid = this.invalid === true || this.invalid === false
-            ? String(this.invalid)
-            : undefined;
-        const showStepper = this.type === "number" && !this.disabled && !this.readonly;
-        const showPasswordToggle = this.type === "password" && !this.disabled;
-        const showClearButton = this.clearable &&
-            !this.disabled &&
-            !this.readonly &&
-            Boolean(this.value) &&
-            !showPasswordToggle &&
-            !showStepper;
-        const characterCount = this.value?.length ?? 0;
-        const showCharacterCounter = this.showCharacterCounter &&
-            (!this.showCharacterCounterNearLimit ||
-                characterCount >= this.maxLength * 0.8);
-        const type = this.type === "password" && this.showPassword ? "text" : this.type;
-        const className = classNames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
-            "text-input--auto-grow": this.autoGrow,
-            "text-input--clearable": showClearButton,
-            "text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
-            "text-input--has-suffix": Boolean(this.suffixLabel),
-            "text-input--inline": this.inline,
-            "text-input--show-password": this.type === "password" && this.showPassword,
-        });
-        return (h(Host, { key: 'f822fb9a0003530bed7e53b2a6395fa0ead91d6c' }, h("div", { key: 'b8a048e87b0a8366b0243a8da2f80fd3571fbd6b', class: className }, this.prefixLabel && (h("span", { key: '20636fdec405901ebd416fce525a9c89b1ed9dbe', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '8b192a2783028e0eb1fb5703026daccef7170808', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '7b05575e9fc5f5f362f9aa23784177f16eb92660', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '860576e47f0e34aed31a0c53a6d7d8fa4e57557b', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '763a1558a792a017ba4a947bf7bd47220f88ee0c', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '584dd45c5dedb11cf9c7348a49b1ca15f959742c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'fbad244a2f8584c0003f581f66dc26bb9cb1f04c', class: "text-input__stepper" }, h("button", { key: '921cd8c3e64560ba46a7a06fd5147e132dd7bed4', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: 'df8eeb01df755b56dc0a465a02a1d76dbecafe59', size: this.iconSize })), h("button", { key: 'fee840a7e4a142f468292a9a69e8958869673e87', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'e9af53254c8f1d68c121eb8634444b410a4cb1e3', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '88dd11daf949bcb20d1a18bd77ab64a76000b30b', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'f55d1fa26b458ff6b09e80f79f32b25236cc6d5f' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
-    }
-    static get watchers() { return {
-        "value": ["watchValue"]
-    }; }
-    static get style() { return swirlTextInputCss; }
-}, [2, "swirl-text-input", {
-        "autoComplete": [1, "auto-complete"],
-        "autoFocus": [4, "auto-focus"],
-        "autoGrow": [4, "auto-grow"],
-        "autoSelect": [4, "auto-select"],
-        "characterCounterLabel": [1, "character-counter-label"],
-        "clearable": [4],
-        "clearButtonLabel": [1, "clear-button-label"],
-        "disabled": [4],
-        "disableDynamicWidth": [4, "disable-dynamic-width"],
-        "fontSize": [1, "font-size"],
-        "inline": [4],
-        "invalid": [4],
-        "maxLength": [2, "max-length"],
-        "max": [2],
-        "min": [2],
-        "mode": [1],
-        "inputName": [1, "input-name"],
-        "passwordToggleLabel": [1, "password-toggle-label"],
-        "placeholder": [1],
-        "prefixLabel": [1, "prefix-label"],
-        "required": [4],
-        "rows": [2],
-        "showCharacterCounter": [4, "show-character-counter"],
-        "showCharacterCounterNearLimit": [4, "show-character-counter-near-limit"],
-        "spellCheck": [4, "spell-check"],
-        "suffixLabel": [1, "suffix-label"],
-        "step": [2],
-        "swirlAriaAutocomplete": [1, "swirl-aria-autocomplete"],
-        "swirlAriaControls": [1, "swirl-aria-controls"],
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "swirlAriaExpanded": [1, "swirl-aria-expanded"],
-        "swirlRole": [1, "swirl-role"],
-        "type": [1],
-        "value": [1537],
-        "readonly": [4],
-        "iconSize": [32],
-        "showPassword": [32],
-        "blurInput": [64],
-        "focusInput": [64]
-    }, undefined, {
-        "value": ["watchValue"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-text-input", "swirl-icon-cancel", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-visibility", "swirl-icon-visibility-off", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-text-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTextInput);
-            }
-            break;
-        case "swirl-icon-cancel":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "swirl-icon-expand-less":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-icon-expand-more":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-icon-visibility":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-icon-visibility-off":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlTextInput as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as n,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as l}from"./swirl-icon-cancel2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as u}from"./swirl-icon-expand-more2.js";import{d as c}from"./swirl-icon-visibility2.js";import{d as h}from"./swirl-icon-visibility-off2.js";import{d}from"./swirl-visually-hidden2.js";const x=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.clear=e(this,"clear",7),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.autoComplete="on",this.characterCounterLabel="Used characters",this.clearButtonLabel="Clear input",this.fontSize="default",this.passwordToggleLabel="Toggle password display",this.rows=1,this.type="text",this.iconSize=24,this.showPassword=!1,this.mediaQueryUnsubscribe=()=>{},this.handleClearClick=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus(),this.clear.emit()},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){this.mediaQueryUnsubscribe()}async blurInput(){this.inputEl.blur()}async focusInput(){this.inputEl.focus()}watchValue(t,i){t!==i&&this.valueChange.emit(t)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height="",this.inputEl.style.height=Boolean(this.inputEl.scrollHeight)?this.inputEl.scrollHeight/16+"rem":""),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="",!this.suffixLabel||"password"===this.type||this.disableDynamicWidth||Boolean(this.placeholder)||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){(this.autoSelect||this.readonly)&&t.target.select()}render(){const t=1!==this.rows||this.autoGrow?"textarea":"input",i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,e="number"===this.type&&!this.disabled&&!this.readonly,r="password"===this.type&&!this.disabled,o=this.clearable&&!this.disabled&&!this.readonly&&Boolean(this.value)&&!r&&!e,l=this.value?.length??0,p=this.showCharacterCounter&&(!this.showCharacterCounterNearLimit||l>=.8*this.maxLength),u="password"===this.type&&this.showPassword?"text":this.type,c=a("text-input",`text-input--font-size-${this.fontSize}`,`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":o,"text-input--disable-dynamic-width":this.disableDynamicWidth||Boolean(this.placeholder),"text-input--has-suffix":Boolean(this.suffixLabel),"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return s(n,{key:"f822fb9a0003530bed7e53b2a6395fa0ead91d6c"},s("div",{key:"b8a048e87b0a8366b0243a8da2f80fd3571fbd6b",class:c},this.prefixLabel&&s("span",{key:"20636fdec405901ebd416fce525a9c89b1ed9dbe",class:"text-input__prefix"},this.prefixLabel),s(t,{key:"8b192a2783028e0eb1fb5703026daccef7170808","aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":i,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,placeholder:Boolean(this.suffixLabel)?void 0:this.placeholder,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,name:this.inputName,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:this.value,readonly:this.readonly},this.rows>1&&this.value),this.suffixLabel&&s("span",{key:"7b05575e9fc5f5f362f9aa23784177f16eb92660",class:"text-input__suffix"},this.suffixLabel),o&&s("button",{key:"860576e47f0e34aed31a0c53a6d7d8fa4e57557b","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.handleClearClick,part:"text-input__clear-button",type:"button"},s("swirl-icon-cancel",{key:"763a1558a792a017ba4a947bf7bd47220f88ee0c",size:this.iconSize})),r&&s("button",{key:"584dd45c5dedb11cf9c7348a49b1ca15f959742c","aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},s(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),e&&s("span",{key:"fbad244a2f8584c0003f581f66dc26bb9cb1f04c",class:"text-input__stepper"},s("button",{key:"921cd8c3e64560ba46a7a06fd5147e132dd7bed4","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-less",{key:"df8eeb01df755b56dc0a465a02a1d76dbecafe59",size:this.iconSize})),s("button",{key:"fee840a7e4a142f468292a9a69e8958869673e87","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-more",{key:"e9af53254c8f1d68c121eb8634444b410a4cb1e3",size:this.iconSize}))),p&&s("span",{key:"88dd11daf949bcb20d1a18bd77ab64a76000b30b",class:"text-input__character-counter","aria-live":"polite"},s("swirl-visually-hidden",{key:"f55d1fa26b458ff6b09e80f79f32b25236cc6d5f"},this.characterCounterLabel),l," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return'.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}'}},[2,"swirl-text-input",{autoComplete:[1,"auto-complete"],autoFocus:[4,"auto-focus"],autoGrow:[4,"auto-grow"],autoSelect:[4,"auto-select"],characterCounterLabel:[1,"character-counter-label"],clearable:[4],clearButtonLabel:[1,"clear-button-label"],disabled:[4],disableDynamicWidth:[4,"disable-dynamic-width"],fontSize:[1,"font-size"],inline:[4],invalid:[4],maxLength:[2,"max-length"],max:[2],min:[2],mode:[1],inputName:[1,"input-name"],passwordToggleLabel:[1,"password-toggle-label"],placeholder:[1],prefixLabel:[1,"prefix-label"],required:[4],rows:[2],showCharacterCounter:[4,"show-character-counter"],showCharacterCounterNearLimit:[4,"show-character-counter-near-limit"],spellCheck:[4,"spell-check"],suffixLabel:[1,"suffix-label"],step:[2],swirlAriaAutocomplete:[1,"swirl-aria-autocomplete"],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlRole:[1,"swirl-role"],type:[1],value:[1537],readonly:[4],iconSize:[32],showPassword:[32],blurInput:[64],focusInput:[64]},void 0,{value:[{watchValue:0}]}]);function w(){"undefined"!=typeof customElements&&["swirl-text-input","swirl-icon-cancel","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-visibility","swirl-icon-visibility-off","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-text-input":customElements.get(r(t))||customElements.define(r(t),x);break;case"swirl-icon-cancel":customElements.get(r(t))||l();break;case"swirl-icon-expand-less":customElements.get(r(t))||p();break;case"swirl-icon-expand-more":customElements.get(r(t))||u();break;case"swirl-icon-visibility":customElements.get(r(t))||c();break;case"swirl-icon-visibility-off":customElements.get(r(t))||h();break;case"swirl-visually-hidden":customElements.get(r(t))||d()}}))}export{x as S,w as d}

package/dist/components/swirl-text.js

@@ -1,6 +1 @@
-import { S as SwirlText$1, d as defineCustomElement$1 } from './swirl-text2.js';
-
-const SwirlText = SwirlText$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlText, defineCustomElement };
+import{S as s,d as t}from"./swirl-text2.js";const o=s,r=t;export{o as SwirlText,r as defineCustomElement}