@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-theme-provider.js

@@ -1,186 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const swirlThemeProviderCss = ".sc-swirl-theme-provider-h{display:unset}";
-
-const preferredThemeStorageKey = "swirl-preferred-theme";
-const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemeProvider extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.appThemeUpdated = createEvent(this, "appThemeUpdated", 7);
-        this.themeChange = createEvent(this, "themeChange", 7);
-        this.darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        this.setDesignTokens = [];
-        this.osThemeChangeHandler = (e) => {
-            this.osTheme = e.matches ? "dark" : "light";
-            this.updateAppTheme();
-        };
-    }
-    componentWillLoad() {
-        this.resolveConfig();
-        this.determineOSTheme();
-        this.updateAppTheme();
-    }
-    disconnectedCallback() {
-        this.darkThemeMediaQuery.removeEventListener("change", this.osThemeChangeHandler);
-    }
-    watchConfig() {
-        this.resolveConfig();
-        this.determineOSTheme();
-        this.updateAppTheme();
-    }
-    /**
-     * Returns the active OS theme.
-     * @returns SwirlTheme
-     */
-    async getActiveOSTheme() {
-        return this.appOSTheme;
-    }
-    /**
-     * Returns the user's preferred OS theme stored in local storage.
-     * @returns SwirlTheme
-     */
-    async getPreferredOSTheme() {
-        if (!Boolean(this.resolvedConfig.storage)) {
-            return;
-        }
-        return this.resolvedConfig.storage.getItem(preferredThemeStorageKey);
-    }
-    /**
-     * Sets the user's preferred OS theme and stores it in local storage. Overrides
-     * the system theme.
-     */
-    async setPreferredOSTheme(theme) {
-        if (!Boolean(this.resolvedConfig.storage) ||
-            !this.resolvedConfig.enabledThemes.includes(theme)) {
-            return;
-        }
-        this.resolvedConfig.storage.setItem(preferredThemeStorageKey, theme);
-        this.updateAppTheme();
-    }
-    /**
-     * Resets the user's preferred OS theme, using the system theme instead.
-     */
-    async resetPreferredOSTheme() {
-        if (!Boolean(this.resolvedConfig.storage)) {
-            return;
-        }
-        this.resolvedConfig.storage.removeItem(preferredThemeStorageKey);
-        this.updateAppTheme();
-    }
-    resolveConfig() {
-        this.resolvedConfig = {
-            ...(this.config || {}),
-            enabledThemes: this.config?.enabledThemes || ["light", "dark"],
-            rootElement: this.config?.rootElement || document.documentElement,
-            storage: this.config?.storage || window?.localStorage,
-        };
-        if (!this.resolvedConfig.enabledThemes.includes("light")) {
-            throw new Error("[Swirl Theme Provider] Light theme must be enabled.");
-        }
-    }
-    determineOSTheme() {
-        if (!Boolean(window.matchMedia)) {
-            this.osTheme = "light";
-            return;
-        }
-        this.osTheme = this.darkThemeMediaQuery.matches ? "dark" : "light";
-        this.darkThemeMediaQuery.removeEventListener("change", this.osThemeChangeHandler);
-        this.darkThemeMediaQuery.addEventListener("change", this.osThemeChangeHandler);
-    }
-    async updateAppTheme() {
-        const newAppOSTheme = (await this.getPreferredOSTheme()) || this.osTheme;
-        if (!this.resolvedConfig.enabledThemes.includes(newAppOSTheme)) {
-            this.appOSTheme = "light";
-        }
-        else {
-            this.appOSTheme = newAppOSTheme;
-        }
-        if (this.appOSTheme === "dark") {
-            document.documentElement.classList.remove("theme-light");
-            document.documentElement.classList.add("theme-dark");
-        }
-        else {
-            document.documentElement.classList.remove("theme-dark");
-            document.documentElement.classList.add("theme-light");
-        }
-        this.updateTenantVariables();
-        this.updateTenantAssets();
-        const themeChangeEventData = {
-            activeTheme: await this.getActiveOSTheme(),
-            preferredTheme: await this.getPreferredOSTheme(),
-        };
-        if (!Boolean(this.recentOSThemeChangeEventData) ||
-            themeChangeEventData.activeTheme !==
-                this.recentOSThemeChangeEventData.activeTheme ||
-            themeChangeEventData.preferredTheme !==
-                this.recentOSThemeChangeEventData.preferredTheme) {
-            this.recentOSThemeChangeEventData = themeChangeEventData;
-            this.themeChange.emit(this.recentOSThemeChangeEventData);
-        }
-        this.appThemeUpdated.emit();
-    }
-    updateTenantAssets() {
-        const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
-        if (!Boolean(theme)) {
-            return;
-        }
-        document.head
-            .querySelector('link[rel="icon"]')
-            ?.setAttribute("href", theme.favicon.link);
-    }
-    updateTenantVariables() {
-        const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
-        if (!Boolean(theme)) {
-            this.resetTenantVariables();
-            return;
-        }
-        const rootElement = this.resolvedConfig.rootElement;
-        this.setDesignTokens = [];
-        theme.design_tokens.forEach((token) => {
-            const propertyName = `--s-${token.id}`;
-            rootElement.style.setProperty(propertyName, `rgba(${token.color.r}, ${token.color.g}, ${token.color.b}, ${token.color.a})`);
-            this.setDesignTokens.push(propertyName);
-        });
-    }
-    resetTenantVariables() {
-        const rootElement = this.resolvedConfig.rootElement;
-        this.setDesignTokens.forEach((property) => {
-            rootElement.style.removeProperty(property);
-        });
-        this.setDesignTokens = [];
-    }
-    render() {
-        return (h(Host, { key: '24f362137b85574390684da5cc51ccda9108b63c' }, h("slot", { key: 'b9ddf8ae18d3f0c21e9866e5732024d9663b9f03' })));
-    }
-    static get watchers() { return {
-        "config": ["watchConfig"]
-    }; }
-    static get style() { return swirlThemeProviderCss; }
-}, [6, "swirl-theme-provider", {
-        "config": [16],
-        "getActiveOSTheme": [64],
-        "getPreferredOSTheme": [64],
-        "setPreferredOSTheme": [64],
-        "resetPreferredOSTheme": [64]
-    }, undefined, {
-        "config": ["watchConfig"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-theme-provider"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-theme-provider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlThemeProvider$1);
-            }
-            break;
-    } });
-}
-
-const SwirlThemeProvider = SwirlThemeProvider$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlThemeProvider, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as h,transformTag as r}from"@stencil/core/internal/client";const n="swirl-preferred-theme",c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.appThemeUpdated=i(this,"appThemeUpdated",7),this.themeChange=i(this,"themeChange",7),this.darkThemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.setDesignTokens=[],this.osThemeChangeHandler=e=>{this.osTheme=e.matches?"dark":"light",this.updateAppTheme()}}componentWillLoad(){this.resolveConfig(),this.determineOSTheme(),this.updateAppTheme()}disconnectedCallback(){this.darkThemeMediaQuery.removeEventListener("change",this.osThemeChangeHandler)}watchConfig(){this.resolveConfig(),this.determineOSTheme(),this.updateAppTheme()}async getActiveOSTheme(){return this.appOSTheme}async getPreferredOSTheme(){if(this.resolvedConfig.storage)return this.resolvedConfig.storage.getItem(n)}async setPreferredOSTheme(e){this.resolvedConfig.storage&&this.resolvedConfig.enabledThemes.includes(e)&&(this.resolvedConfig.storage.setItem(n,e),this.updateAppTheme())}async resetPreferredOSTheme(){this.resolvedConfig.storage&&(this.resolvedConfig.storage.removeItem(n),this.updateAppTheme())}resolveConfig(){if(this.resolvedConfig={...this.config||{},enabledThemes:this.config?.enabledThemes||["light","dark"],rootElement:this.config?.rootElement||document.documentElement,storage:this.config?.storage||window?.localStorage},!this.resolvedConfig.enabledThemes.includes("light"))throw Error("[Swirl Theme Provider] Light theme must be enabled.")}determineOSTheme(){window.matchMedia?(this.osTheme=this.darkThemeMediaQuery.matches?"dark":"light",this.darkThemeMediaQuery.removeEventListener("change",this.osThemeChangeHandler),this.darkThemeMediaQuery.addEventListener("change",this.osThemeChangeHandler)):this.osTheme="light"}async updateAppTheme(){const e=await this.getPreferredOSTheme()||this.osTheme;this.appOSTheme=this.resolvedConfig.enabledThemes.includes(e)?e:"light","dark"===this.appOSTheme?(document.documentElement.classList.remove("theme-light"),document.documentElement.classList.add("theme-dark")):(document.documentElement.classList.remove("theme-dark"),document.documentElement.classList.add("theme-light")),this.updateTenantVariables(),this.updateTenantAssets();const t={activeTheme:await this.getActiveOSTheme(),preferredTheme:await this.getPreferredOSTheme()};this.recentOSThemeChangeEventData&&t.activeTheme===this.recentOSThemeChangeEventData.activeTheme&&t.preferredTheme===this.recentOSThemeChangeEventData.preferredTheme||(this.recentOSThemeChangeEventData=t,this.themeChange.emit(this.recentOSThemeChangeEventData)),this.appThemeUpdated.emit()}updateTenantAssets(){const e=this.resolvedConfig?.themes?.[this.appOSTheme];e&&document.head.querySelector('link[rel="icon"]')?.setAttribute("href",e.favicon.link)}updateTenantVariables(){const e=this.resolvedConfig?.themes?.[this.appOSTheme];if(!e)return void this.resetTenantVariables();const t=this.resolvedConfig.rootElement;this.setDesignTokens=[],e.design_tokens.forEach((e=>{const i="--s-"+e.id;t.style.setProperty(i,`rgba(${e.color.r}, ${e.color.g}, ${e.color.b}, ${e.color.a})`),this.setDesignTokens.push(i)}))}resetTenantVariables(){const e=this.resolvedConfig.rootElement;this.setDesignTokens.forEach((t=>{e.style.removeProperty(t)})),this.setDesignTokens=[]}render(){return s(h,{key:"24f362137b85574390684da5cc51ccda9108b63c"},s("slot",{key:"b9ddf8ae18d3f0c21e9866e5732024d9663b9f03"}))}static get watchers(){return{config:[{watchConfig:0}]}}static get style(){return".sc-swirl-theme-provider-h{display:unset}"}},[262,"swirl-theme-provider",{config:[16],getActiveOSTheme:[64],getPreferredOSTheme:[64],setPreferredOSTheme:[64],resetPreferredOSTheme:[64]},void 0,{config:[{watchConfig:0}]}]),o=c,a=function(){"undefined"!=typeof customElements&&["swirl-theme-provider"].forEach((e=>{"swirl-theme-provider"===e&&(customElements.get(r(e))||customElements.define(r(e),c))}))};export{o as SwirlThemeProvider,a as defineCustomElement}

package/dist/components/swirl-thumbnail.js

@@ -1,93 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$5 } from './swirl-button2.js';
-import { d as defineCustomElement$4 } from './swirl-button-group2.js';
-import { d as defineCustomElement$3 } from './swirl-progress-indicator2.js';
-import { d as defineCustomElement$2 } from './swirl-stack2.js';
-
-const swirlThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;padding:0.0625rem;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-xl .thumbnail__buttons{transform:scale(0.75)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail--interactive .thumbnail__image-wrapper{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:\"\";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:\"\";inset:0}.thumbnail__image-wrapper{overflow:hidden;width:100%;height:100%;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}@media (hover: hover){.thumbnail__buttons{opacity:0}.thumbnail:hover .thumbnail__buttons{opacity:1}}.thumbnail__timestamp{position:absolute;z-index:1;bottom:var(--s-space-4);left:var(--s-space-4);display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.5rem;padding-right:var(--s-space-8);padding-left:var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-size:var(--s-font-size-sm);line-height:1.5rem;white-space:nowrap;text-overflow:ellipsis}";
-
-const SwirlThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.edit = createEvent(this, "edit", 7);
-        this.remove = createEvent(this, "remove", 7);
-        this.thumbnailClick = createEvent(this, "thumbnailClick", 7);
-        this.editButtonIcon = "<swirl-icon-crop></swirl-icon-crop>";
-        this.editButtonLabel = "Edit";
-        this.format = "landscape";
-        this.progressLabel = "Loading progress";
-        this.removeButtonLabel = "Remove";
-        this.size = "m";
-    }
-    render() {
-        const showInteractable = (this.size === "xl" || this.size === "2xl") && this.format === "square";
-        const showRemoveButton = this.showRemoveButton && showInteractable;
-        const showEditButton = this.showEditButton &&
-            showInteractable &&
-            !(this.size === "xl" && showRemoveButton);
-        const showButtonGroup = showEditButton || showRemoveButton;
-        const showTimestamp = Boolean(this.timestamp) && showInteractable;
-        const ImageWrapper = this.interactive ? "button" : "span";
-        const className = classNames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
-            "thumbnail--interactive": this.interactive,
-            "thumbnail--has-progress": this.progress !== undefined,
-        });
-        return (h(Host, { key: 'e840bfad58edcb9a5cef2b63eec58fcd5f46b155' }, h("span", { key: '19696d67e35e33d0128f832641994a11a3f2a4ac', class: className, role: "group" }, h(ImageWrapper, { key: '527badb4904648ca26a26c19e49c1b671ef11eb3', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'cec8b78095b1bbdbbc97318fdd38a74ae5239a26', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '72bdc799e32292a45d1467c7f3e77cd04878e757', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '224a9f1897b1cab5372d500bbfd12600c8acd24d', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '0d9120bbec527668af3e04012d049fd0ee3d42d1', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'd4beb150ac16cbf41c528f64f17dc5e2717af865' }, h("swirl-button", { key: 'cc814f0264d7f4adac00360ab64d7c9e92f7fdbe', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '919455f07002b859af704d0725f5b049813d1948' }, h("swirl-button", { key: '89bffd975fb0f5eeb969813f97e3b6afce80f922', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '73d46eaf287fdedf652a6b093daeb3450e29a39e', class: "thumbnail__timestamp" }, this.timestamp)))));
-    }
-    static get style() { return swirlThumbnailCss; }
-}, [1, "swirl-thumbnail", {
-        "alt": [1],
-        "editButtonIcon": [1, "edit-button-icon"],
-        "editButtonLabel": [1, "edit-button-label"],
-        "format": [1],
-        "interactive": [4],
-        "progress": [2],
-        "progressLabel": [1, "progress-label"],
-        "removeButtonLabel": [1, "remove-button-label"],
-        "showEditButton": [4, "show-edit-button"],
-        "showRemoveButton": [4, "show-remove-button"],
-        "size": [1],
-        "src": [1],
-        "timestamp": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-thumbnail", "swirl-button", "swirl-button-group", "swirl-progress-indicator", "swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-thumbnail":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlThumbnail$1);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-button-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-progress-indicator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlThumbnail = SwirlThumbnail$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlThumbnail, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as n}from"./swirl-button2.js";import{d as l}from"./swirl-button-group2.js";import{d as b}from"./swirl-progress-indicator2.js";import{d as h}from"./swirl-stack2.js";const m=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.edit=e(this,"edit",7),this.remove=e(this,"remove",7),this.thumbnailClick=e(this,"thumbnailClick",7),this.editButtonIcon="<swirl-icon-crop></swirl-icon-crop>",this.editButtonLabel="Edit",this.format="landscape",this.progressLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m"}render(){const t=("xl"===this.size||"2xl"===this.size)&&"square"===this.format,i=this.showRemoveButton&&t,e=this.showEditButton&&t&&!("xl"===this.size&&i),r=e||i,n=!!this.timestamp&&t,l=this.interactive?"button":"span",b=o("thumbnail","thumbnail--format-"+this.format,"thumbnail--size-"+this.size,{"thumbnail--interactive":this.interactive,"thumbnail--has-progress":void 0!==this.progress});return s(a,{key:"e840bfad58edcb9a5cef2b63eec58fcd5f46b155"},s("span",{key:"19696d67e35e33d0128f832641994a11a3f2a4ac",class:b,role:"group"},s(l,{key:"527badb4904648ca26a26c19e49c1b671ef11eb3",class:"thumbnail__image-wrapper",onClick:this.thumbnailClick.emit,type:this.interactive?"button":void 0},s("img",{key:"cec8b78095b1bbdbbc97318fdd38a74ae5239a26",alt:this.alt,class:"thumbnail__image",loading:"lazy",src:this.src})),void 0!==this.progress&&s("span",{key:"72bdc799e32292a45d1467c7f3e77cd04878e757",class:"thumbnail__progress-indicator"},s("swirl-progress-indicator",{key:"224a9f1897b1cab5372d500bbfd12600c8acd24d",label:this.progressLabel,value:this.progress})),r&&s("swirl-button-group",{key:"0d9120bbec527668af3e04012d049fd0ee3d42d1",class:"thumbnail__buttons",segmented:e&&i},e&&s("span",{key:"d4beb150ac16cbf41c528f64f17dc5e2717af865"},s("swirl-button",{key:"cc814f0264d7f4adac00360ab64d7c9e92f7fdbe",hideLabel:!0,icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.edit.emit,pill:"xl"===this.size,variant:"on-image"})),i&&s("span",{key:"919455f07002b859af704d0725f5b049813d1948"},s("swirl-button",{key:"89bffd975fb0f5eeb969813f97e3b6afce80f922",hideLabel:!0,icon:"<swirl-icon-delete></swirl-icon-delete>",label:this.removeButtonLabel,onClick:this.remove.emit,pill:"xl"===this.size,variant:"on-image"}))),n&&s("span",{key:"73d46eaf287fdedf652a6b093daeb3450e29a39e",class:"thumbnail__timestamp"},this.timestamp)))}static get style(){return':host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;padding:0.0625rem;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-xl .thumbnail__buttons{transform:scale(0.75)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail--interactive .thumbnail__image-wrapper{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image-wrapper{overflow:hidden;width:100%;height:100%;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}@media (hover: hover){.thumbnail__buttons{opacity:0}.thumbnail:hover .thumbnail__buttons{opacity:1}}.thumbnail__timestamp{position:absolute;z-index:1;bottom:var(--s-space-4);left:var(--s-space-4);display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.5rem;padding-right:var(--s-space-8);padding-left:var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-size:var(--s-font-size-sm);line-height:1.5rem;white-space:nowrap;text-overflow:ellipsis}'}},[1,"swirl-thumbnail",{alt:[1],editButtonIcon:[1,"edit-button-icon"],editButtonLabel:[1,"edit-button-label"],format:[1],interactive:[4],progress:[2],progressLabel:[1,"progress-label"],removeButtonLabel:[1,"remove-button-label"],showEditButton:[4,"show-edit-button"],showRemoveButton:[4,"show-remove-button"],size:[1],src:[1],timestamp:[1]}]),c=m,d=function(){"undefined"!=typeof customElements&&["swirl-thumbnail","swirl-button","swirl-button-group","swirl-progress-indicator","swirl-stack"].forEach((t=>{switch(t){case"swirl-thumbnail":customElements.get(r(t))||customElements.define(r(t),m);break;case"swirl-button":customElements.get(r(t))||n();break;case"swirl-button-group":customElements.get(r(t))||l();break;case"swirl-progress-indicator":customElements.get(r(t))||b();break;case"swirl-stack":customElements.get(r(t))||h()}}))};export{c as SwirlThumbnail,d as defineCustomElement}

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

@@ -1,213 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { p as parse, i as isValid, f as format, I as IMask } from './index3.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-
-const swirlTimeInputCss = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));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);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-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}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}";
-
-const internalTimeFormat = "HH:mm:ss";
-const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.inputBlur = createEvent(this, "inputBlur", 7);
-        this.inputFocus = createEvent(this, "inputFocus", 7);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.format = "HH:mm";
-        this.placeholder = "hh:mm";
-        this.iconSize = 24;
-        this.mediaQueryUnsubscribe = () => { };
-        this.onBlur = (event) => {
-            this.inputBlur.emit(event);
-        };
-        this.onClick = (event) => {
-            event.preventDefault();
-        };
-        this.onFocus = (event) => {
-            this.inputFocus.emit(event);
-            this.handleAutoSelect(event);
-        };
-    }
-    componentWillLoad() {
-        const index = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
-        this.id = `swirl-time-input-${index}`;
-    }
-    componentDidLoad() {
-        this.setupMask();
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.updateIconSize(isDesktop);
-        });
-        // see https://stackoverflow.com/a/27314017
-        if (this.autoFocus) {
-            setTimeout(() => {
-                this.inputEl.focus();
-            });
-        }
-    }
-    disconnectedCallback() {
-        this.mask?.destroy();
-        this.mediaQueryUnsubscribe();
-    }
-    watchFormat() {
-        this.setupMask();
-    }
-    watchValue(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.valueChange.emit(newValue);
-            // Parse and format the value properly for the mask
-            if (this.mask && newValue) {
-                const pattern = this.getPattern();
-                // Try to parse with internal format first, then display format
-                let dateValue = parse(newValue, internalTimeFormat, new Date());
-                if (!isValid(dateValue)) {
-                    dateValue = parse(newValue, pattern, new Date());
-                }
-                if (isValid(dateValue)) {
-                    const formattedValue = format(dateValue, pattern);
-                    this.mask.value = formattedValue;
-                }
-            }
-            else if (this.mask && !newValue) {
-                this.mask.value = "";
-            }
-        }
-    }
-    updateIconSize(smallIcon) {
-        this.iconSize = smallIcon ? 20 : 24;
-    }
-    getPattern() {
-        return this.format
-            .replace(/(?<!H)H(?!H)/g, "HH")
-            .replace(/(?<!h)h(?!h)/g, "hh")
-            .replace(/(?<!m)m(?!m)/g, "mm")
-            .replace(/(?<!s)s(?!s)/g, "ss")
-            .replace(/(?<!a)a(?!a)/g, "aa");
-    }
-    handleAutoSelect(event) {
-        if (!this.autoSelect) {
-            setTimeout(() => {
-                if (event.target &&
-                    event.target instanceof HTMLInputElement &&
-                    event.target.setSelectionRange) {
-                    event.target.setSelectionRange(0, 0);
-                }
-            });
-            return;
-        }
-        if (event.target && event.target instanceof HTMLInputElement) {
-            event.target.select();
-        }
-    }
-    setupMask() {
-        this.mask?.destroy();
-        // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
-        const pattern = this.getPattern();
-        this.mask = IMask(this.inputEl, {
-            mask: Date,
-            pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
-            autofix: "pad",
-            lazy: true,
-            overwrite: true,
-            eager: "append",
-            prepareChar: (str) => str.toUpperCase(),
-            blocks: {
-                HH: {
-                    mask: IMask.MaskedRange,
-                    from: 0,
-                    to: 23,
-                    maxLength: 2,
-                },
-                hh: {
-                    mask: IMask.MaskedRange,
-                    from: 1,
-                    to: 12,
-                    maxLength: 2,
-                },
-                mm: {
-                    mask: IMask.MaskedRange,
-                    from: 0,
-                    to: 59,
-                    maxLength: 2,
-                },
-                ss: {
-                    mask: IMask.MaskedRange,
-                    from: 0,
-                    to: 59,
-                    maxLength: 2,
-                },
-                aa: {
-                    mask: IMask.MaskedEnum,
-                    enum: ["AM", "PM"],
-                    maxLength: 2,
-                },
-            },
-            format: (date) => {
-                if (!isValid(date)) {
-                    return "";
-                }
-                this.value = format(date, internalTimeFormat);
-                return format(date, pattern);
-            },
-            parse: (str) => {
-                return parse(str, pattern, new Date());
-            },
-        });
-        // Set the initial value if it exists
-        if (this.value) {
-            const dateValue = parse(this.value, internalTimeFormat, new Date());
-            if (isValid(dateValue)) {
-                const formattedValue = format(dateValue, pattern);
-                this.mask.value = formattedValue;
-            }
-        }
-    }
-    render() {
-        const ariaInvalid = this.invalid === true || this.invalid === false
-            ? String(this.invalid)
-            : undefined;
-        const className = classNames("time-input", {
-            "time-input--inline": this.inline,
-        });
-        return (h(Host, { key: '667391bfd2d4707cc993cabba7419118ee01c909' }, h("div", { key: '02a921a42ac7088a4ec9266eefd3579439484b22', class: className }, h("input", { key: '376cba426422a258901766eb86f2ac0f633e6b8e', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'efb7b4d169ff054295edaf1c56f311801936b866', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ab00481e8aadca0fb08adb930f3c91f19cfa6db2', size: this.iconSize })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "format": ["watchFormat"],
-        "value": ["watchValue"]
-    }; }
-    static get style() { return swirlTimeInputCss; }
-}, [2, "swirl-time-input", {
-        "autoFocus": [4, "auto-focus"],
-        "autoSelect": [4, "auto-select"],
-        "disabled": [4],
-        "format": [1],
-        "inline": [4],
-        "invalid": [4],
-        "placeholder": [1],
-        "required": [4],
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "value": [1537],
-        "readonly": [4],
-        "iconSize": [32]
-    }, undefined, {
-        "format": ["watchFormat"],
-        "value": ["watchValue"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-time-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-time-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTimeInput$1);
-            }
-            break;
-    } });
-}
-
-const SwirlTimeInput = SwirlTimeInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTimeInput, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as n,transformTag as a}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{p as o,i as h,f as m,I as c}from"./index3.js";import{D as l}from"./media-query.service.js";const u="HH:mm:ss",d=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id="swirl-time-input-"+i}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=l.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){if(i!==t)if(this.valueChange.emit(i),this.mask&&i){const t=this.getPattern();let e=o(i,u,new Date);if(h(e)||(e=o(i,t,new Date)),h(e)){const i=m(e,t);this.mask.value=i}}else this.mask&&!i&&(this.mask.value="")}updateIconSize(i){this.iconSize=i?20:24}getPattern(){return this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss").replace(/(?<!a)a(?!a)/g,"aa")}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.getPattern();if(this.mask=c(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",prepareChar:i=>i.toUpperCase(),blocks:{HH:{mask:c.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:c.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:c.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:c.MaskedRange,from:0,to:59,maxLength:2},aa:{mask:c.MaskedEnum,enum:["AM","PM"],maxLength:2}},format:t=>h(t)?(this.value=m(t,u),m(t,i)):"",parse:t=>o(t,i,new Date)}),this.value){const t=o(this.value,u,new Date);if(h(t)){const e=m(t,i);this.mask.value=e}}}render(){const i=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=r("time-input",{"time-input--inline":this.inline});return s(n,{key:"667391bfd2d4707cc993cabba7419118ee01c909"},s("div",{key:"02a921a42ac7088a4ec9266eefd3579439484b22",class:t},s("input",{key:"376cba426422a258901766eb86f2ac0f633e6b8e","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":i,autoFocus:this.autoFocus,class:"time-input__input",disabled:this.disabled,id:this.id,inputmode:"numeric",onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder,ref:i=>this.inputEl=i,required:this.required,type:"text",readonly:this.readonly}),s("span",{key:"efb7b4d169ff054295edaf1c56f311801936b866",class:"time-input__icon"},s("swirl-icon-time-outlined",{key:"ab00481e8aadca0fb08adb930f3c91f19cfa6db2",size:this.iconSize}))))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));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);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-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}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}"}},[2,"swirl-time-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],format:[1],inline:[4],invalid:[4],placeholder:[1],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),p=d,f=function(){"undefined"!=typeof customElements&&["swirl-time-input"].forEach((i=>{"swirl-time-input"===i&&(customElements.get(a(i))||customElements.define(a(i),d))}))};export{p as SwirlTimeInput,f as defineCustomElement}