@getflip/swirl-components 0.508.0 → 0.509.0

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -1,6 +1,5 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { v4 as uuid } from "uuid";
 import { DesktopMediaQuery } from "../../services/media-query.service";
 /**
  * @slot avatar - Optional avatar displayed to the left of the label
@@ -16,7 +15,7 @@ export class SwirlOptionListItem {
         this.swirlAriaRole = "option";
         this.truncateLabel = true;
         this.iconSize = 24;
-        this.elementId = uuid();
+        this.elementId = crypto.randomUUID();
         this.mediaQueryUnsubscribe = () => { };
         this.onDragHandleKeyDown = (event) => {
             if (event.code === "Space" || event.code === "Enter") {
@@ -63,9 +62,9 @@ export class SwirlOptionListItem {
             "option-list-item--indeterminate": this.indeterminate && !this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: '1e25e511c68647f4588aa64b5de0ae03528161a5' }, h("div", { key: '8c1f602b01f8968187411d7e27439edf9d0bfbf4', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: 'b5aaf4ae7ea6e5ceaff70bab71b30c20c7dffbfe' }, h("div", { key: '77e3f55f107cc8627ef0187d5c4cc7b568ebfcd9', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
                 ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole, style: { minWidth: this.minWidth } }, showIcon && (h("span", { key: 'cbebac927e5706a65da753c53dff407a42fad16c', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'db6953592315384152fa71c5e8e6fdf643fcd5de', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: 'd09d0b6db2b3bb6cf6c3eb4ddf7a870748484c30', class: "option-list-item__checkbox" }, h("span", { key: '729134e866d0e56e0ad811464948745e5ff50692', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '37e980a9cfcef829c612c97b20fad3c630ed163f', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (h("span", { key: '4ebdcb375e22fd368f76960e61114327320ab2c4', class: "option-list-item__checkbox-indeterminate-icon" }))))), h("span", { key: '9d801b6f3b72bc5cfcfc18e2eb45f9adee6e755b', class: "option-list-item__avatar" }, h("slot", { key: 'fca3269ae56233fcef6c013481ae4712d0859b23', name: "avatar" })), h("span", { key: '2733d44b3d4b33396c2a995a6b64676f45c5ee7c', class: "option-list-item__label-container" }, h("span", { key: '342d9bbbf7c17d0b8e5612c915a86edc928165e4', class: "option-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" }, id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'f44e4abe0f3678279a6593cd8ec80e987317cca3', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'e4744267f21610bdb8be26ba02c21ca86a21b7f6', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '290cc81320d414b22d05da1d5b485c9b82e61807', size: this.iconSize })))), this.allowDrag && (h("button", { key: 'fa1c38bcbe38154b43fcfbd4bcdff38d7a539a7a', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '3e22273d1a0f7926e78cf604604e5caa4b17e5ed', size: this.iconSize })))));
+                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole, style: { minWidth: this.minWidth } }, showIcon && (h("span", { key: 'e8555f8d07ef4cf7c3e119bfc99ec1fede75f458', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '33842d55954af945ef60447d87820b0d6a6a11cf', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '10e72dcd704c7804599de7384b754518c3c221a5', class: "option-list-item__checkbox" }, h("span", { key: '17c0aa731d77c84f975faf7d3eb68848ceee4462', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: 'd91ee0e66e6a5a6e1087d6076d91e79deea99a58', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (h("span", { key: 'a127a21b0ebcc112ade9879bfcfb059523666f15', class: "option-list-item__checkbox-indeterminate-icon" }))))), h("span", { key: 'c981b6aacb6d6e94a7d2762f5de6686e7e0c2dc5', class: "option-list-item__avatar" }, h("slot", { key: 'f48b8ef345eba64cb969acc667afbe589170ee22', name: "avatar" })), h("span", { key: 'e8fc56506a32ff29a0bb02ed1d7cac87f7e70782', class: "option-list-item__label-container" }, h("span", { key: 'a684bf7b22a53b77a7e1433376102722dc1692a0', class: "option-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" }, id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '04bacf1ff34692826138c659ff9caa51a48660a6', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'ffadb4f479b671a1d977c7db9908c5762aa067a1', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'dd7bef36511d1f7d95fdea5308cf4d9d8235fc73', size: this.iconSize })))), this.allowDrag && (h("button", { key: '34dc6653fc91019a3f8a096b7786988735b19d2f', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: 'e2609764cc9758d4d084d4e7062c3828fa9e2709', size: this.iconSize })))));
     }
     static get is() { return "swirl-option-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-pagination/swirl-pagination.css

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -1,6 +1,5 @@
 import { h, Host, } from "@stencil/core";
 import Sortable from "sortablejs";
-import { v4 as uuid } from "uuid";
 /**
  * @slot slot - The resource list items and sections (e.g. swirl-resource-list-item, swirl-resource-list-section).
  */
@@ -11,7 +10,7 @@ export class SwirlResourceList {
         this.assistiveTextItemMoved = "Item moved. New position:";
         this.semantics = "grid";
         this.spacing = "0";
-        this.listId = uuid();
+        this.listId = crypto.randomUUID();
         this.focusedIndex = 0;
         this.componentLoaded = false;
         this.toggleDrag = (event) => {
@@ -280,7 +279,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: '0a7edd843c77cb5105b0523a4e60a0c470aa54ba', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'c7361c42c129ee08ad1a70cb135d5a4eac7b8691', role: "alert" }, this.assistiveText), h("swirl-box", { key: '748481c0b950167cfbced4ef486a87e2a1892deb', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '85c7697b06af904deaef64414b2f5b53caada0c2', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: 'eff384c8ac86d3dfb8eacb638959933298762459' })))));
+        return (h(Host, { key: 'b5e4d53782d0d41c43d81f7222201f03d28cc282', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '1b9112ef866b5095c1c9f47f96cd0b7c61db8e04', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'cf1605239d7a736f924ee3bef04180a5d49d1d25', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: 'a9176dd03792be73814a33cc9d3eab7740702f2b', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: '0c1335249b5e423ffd422591573ec08a5cf53f74' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -366,7 +366,6 @@
 
 .resource-list-item__badges {
   display: inline-flex;
-  width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -1,5 +1,4 @@
 import classnames from "classnames";
-import { v4 as uuid } from "uuid";
 import { h, Host, } from "@stencil/core";
 import { DesktopMediaQuery } from "../../services/media-query.service";
 /**
@@ -18,7 +17,7 @@ export class SwirlResourceListItem {
         this.menuTriggerLabel = "Options";
         this.hasMedia = false;
         this.iconSize = 24;
-        this.elementId = uuid();
+        this.elementId = crypto.randomUUID();
         this.mediaQueryUnsubscribe = () => { };
         this.onClick = () => {
             if (!this.selectable) {
@@ -134,7 +133,7 @@ export class SwirlResourceListItem {
         const labelContainerStyles = {
             minHeight: this.labelMinHeight ?? undefined,
         };
-        const renderLabel = () => (h("span", { key: '537dd934195837b1f62852e91bc8d3e60fd7163a', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
+        const renderLabel = () => (h("span", { key: 'b7bfb79d0b4dca7c3854c774e8c3cb291e24312f', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
                 "-webkit-line-clamp": !!this.labelWrapMaxLines
                     ? String(this.labelWrapMaxLines)
                     : undefined,
@@ -157,7 +156,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-label": this.labelWrap,
             "resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines,
         });
-        return (h(Host, { key: 'a0ec97096aa526c5506f5d1a7335da572c4254b0', role: hostRole }, h("div", { key: '938a0d902c62c49d5b0de62ba0b90000488b4a21', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '1fb212f7ce32d64a384885f9a5270f50eed52ff9', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'e1138053996443398d9cfcd9b18f330adf2607f6', class: "resource-list-item__media" }, h("slot", { key: '765b883ef7628e0dbee7a617f0f99b3024a88ea6', name: "media" }))), h("span", { key: 'cd30b88132e3f76cbef1b3b438c63530a89fd4d7', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '998fc6d09b7635155a36ec506083f396f4354d5f', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '35ffd1950959e8d98f32382bd0e48c2da3e87a08', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '26552aaa887512090f252ed529f272285b92ec7e', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '47a8f92c70cc64c9a8f9bd0f3ce292f5c9ab9945' }))))), showMeta && (h("span", { key: 'aad790a9b0535ff56160deed65d8c3c075e05775', class: "resource-list-item__meta" }, this.meta && (h("span", { key: 'cc91b6058aa3b282281dcc9122963b5ad7562325', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'a51f75703daa74c1708565d4a187278dbb2f6fcf', class: "resource-list-item__badges" }, h("slot", { key: '1e2a61cb3e1461b22af8f1da955b3029a041ddf3', name: "badges" })))), h("span", { key: 'aceeb9ef206093840ba980cd3557f020aa86fb1d', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '1e6075743a17cd29a1ea7d97863d111ddb3d85f2', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '5d5aac56bf7f9fce6c6be8804cec45e2ed233f83', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '34e4baf52d5b6c49f29bba1685e31e01d071555e', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '2ab8938f948dd60903da5f39d6363d8d91cc6e16', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'cef7c5a979ec10453a31866e3f1e2ceaed9f9129', size: this.iconSize })))));
+        return (h(Host, { key: '95aedb74943cff960433658ee6b605dddea02474', role: hostRole }, h("div", { key: '1ea17f0f37f013048ea4df6f30dcb2f0fb74f701', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '125a265ab2bc2249c465c4d11b2665ea005c5caa', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '8a239cd77026ef8d78e24ae816a45aa13d34eeea', class: "resource-list-item__media" }, h("slot", { key: '0cd81a58a00d0219a199e9a4aba01b650f44401e', name: "media" }))), h("span", { key: '0f5a1b71242d456dc7e10753992913c8c6e90aae', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '51491ce73ab27952a1daa6b1ee3308561efc875c', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '87d151fd0650d338b89b34df27bd3886d1606178', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'b7226a891e97012ed703aa504e171357190c7b8d', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'ad690debcb4accbecddd9c5c29c48c4aaf8eefb1' }))))), showMeta && (h("span", { key: '828d3b9193087789cf0fede9a7b9e527a784f3d0', class: "resource-list-item__meta" }, this.meta && (h("span", { key: 'd8e70b55f8521191ab14150bef90f4c427e8f95b', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'd035df5c2e1aa8f26c8cd82ad03f10aa848b5ce0', class: "resource-list-item__badges" }, h("slot", { key: '7d894272a6e58660d0df43aaefa27bb34c27cda9', name: "badges" })))), h("span", { key: '594e81bd914d0f2bcab87ca40aa70c4c58bc950e', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'e7deb32a4d49247ee593f83212b47a7fc0e5d12c', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '7c2f9b55e6dd99d3391d35fee545891f18430489', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'c2cd74bf7008e1d3a0655dbf33a9bb052c8f4cce', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '95704b3f6f5f72a24c869376929f4b3f3ae3d095', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '16068df530dd48e098388f5b94433d9815a9cd6d', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-select/swirl-select.css

@@ -53,7 +53,6 @@
   }
 
 .select--standalone {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -73,7 +72,6 @@
   }
 
 .select--standalone .select__value-container {
-    width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
   }

package/dist/collection/components/swirl-separator/swirl-separator.css

@@ -54,7 +54,6 @@
 
 .separator__label {
   flex-shrink: 0;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   font-size: var(--s-font-size-sm);

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css

@@ -37,7 +37,6 @@
 .tab-bar__tab {
   position: relative;
   display: flex;
-  min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
   margin: 0;

package/dist/collection/components/swirl-table/swirl-table.css

@@ -40,7 +40,6 @@
 }
 
 .table__table {
-  width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   min-width: max(20rem, 100%);

package/dist/collection/components/swirl-table-cell/swirl-table-cell.css

@@ -11,8 +11,7 @@
   align-items: center;
   background-color: var(--s-surface-default);
   word-break: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
   transition: box-shadow 0.15s;
 }
 

package/dist/components/swirl-accordion-item.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,createEvent as o,h as t,Host as a,transformTag as d}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as n}from"./swirl-icon2.js";import{d as c}from"./swirl-text2.js";import{v as r}from"./v4.js";const l=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.expansionChange=o(this,"expansionChange",7),this.headingLevel=2,this.itemId=r(),this.expanded=!1,this.headingId=r()+"-heading",this.onHeadingClick=()=>{this.toggle()}}componentWillLoad(){if(this.accordion=this.el.closest("swirl-accordion"),this.expanded=this.initiallyOpen&&!this.disabled||!1,!this.accordion)throw Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.")}async collapse(){this.expanded&&!this.disabled&&(this.expanded=!1,this.expansionChange.emit(this.expanded))}async expand(){this.expanded||this.disabled||(this.expanded=!0,this.expansionChange.emit(this.expanded))}async toggle(){this.expanded?this.collapse():this.expand()}render(){const i="h"+this.headingLevel,e=s("accordion-item",{"accordion-item--expanded":this.expanded});return t(a,{key:"9eb402da9e5382bc658a3bf2bcc6a4e6fc83eb15"},t("div",{key:"baf87dc91914002c5c26dd360a11520b0059638f",class:e},t(i,{key:"a80584ad5c65a7f6a1ddbc504c456dedd4d8ae50",class:"accordion-item__heading"},t("button",{key:"2a99df8d96f34a7b7e0f9c7838e052f79881f5da","aria-controls":this.itemId,"aria-expanded":this.expanded+"",class:"accordion-item__toggle",disabled:this.disabled,id:this.headingId,onClick:this.onHeadingClick,type:"button"},t("slot",{key:"f81381e388c95ba7ab3fddaf9622cf8036289dfd",name:"media"}),t("span",{key:"bc855d5d5fc262c67478d00e5b4979f9f573c465",class:"accordion-item__toggle-text"},this.heading,this.description&&t("swirl-text",{key:"e84613303533dbc57b2e8fbf78ae0b8682631fd7",as:"span",color:"subdued",size:"sm"},this.description)),t("slot",{key:"c441d88ef4e97bb0a0be9b6b79f3c2a4976bc82f",name:"trailing"}),t("span",{key:"1fd5da1543bd83149408f79521aec30d8cfea3e8",class:"accordion-item__icon"},!this.expanded&&t("swirl-icon",{key:"05616a2e22f5f9154654bac3e015bb9ad968bd79",glyph:"chevron-right",size:20}),this.expanded&&t("swirl-icon",{key:"eb1e3be7c7ef2153c195d87d9170d76b56627f24",glyph:"expand-more",size:20})))),t("div",{key:"ea15a0c40f8b32194b1acd5f1c6be4db8fbf1f82","aria-labelledby":this.headingId,class:"accordion-item__content",id:this.itemId,role:"region"},t("slot",{key:"b85f37fcc199ba95c68f049bc15470dc224f5c2b"}))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}"}},[257,"swirl-accordion-item",{description:[1],disabled:[4],heading:[1],headingLevel:[2,"heading-level"],initiallyOpen:[4,"initially-open"],itemId:[1,"item-id"],expanded:[32],collapse:[64],expand:[64],toggle:[64]}]),m=l,h=function(){"undefined"!=typeof customElements&&["swirl-accordion-item","swirl-icon","swirl-text"].forEach((i=>{switch(i){case"swirl-accordion-item":customElements.get(d(i))||customElements.define(d(i),l);break;case"swirl-icon":customElements.get(d(i))||n();break;case"swirl-text":customElements.get(d(i))||c()}}))};export{m as SwirlAccordionItem,h as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as e,createEvent as o,h as t,Host as a,transformTag as d}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as n}from"./swirl-icon2.js";import{d as c}from"./swirl-text2.js";const r=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.expansionChange=o(this,"expansionChange",7),this.headingLevel=2,this.itemId=crypto.randomUUID(),this.expanded=!1,this.headingId=crypto.randomUUID()+"-heading",this.onHeadingClick=()=>{this.toggle()}}componentWillLoad(){if(this.accordion=this.el.closest("swirl-accordion"),this.expanded=this.initiallyOpen&&!this.disabled||!1,!this.accordion)throw Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.")}async collapse(){this.expanded&&!this.disabled&&(this.expanded=!1,this.expansionChange.emit(this.expanded))}async expand(){this.expanded||this.disabled||(this.expanded=!0,this.expansionChange.emit(this.expanded))}async toggle(){this.expanded?this.collapse():this.expand()}render(){const i="h"+this.headingLevel,e=s("accordion-item",{"accordion-item--expanded":this.expanded});return t(a,{key:"ed0d988e2fc48f140515cfecc40e543ed40d14cc"},t("div",{key:"a1a9bb9a36e5018b0741aa4980659dca503cf128",class:e},t(i,{key:"4919327d90ec3b829aecd9af57601dced379009d",class:"accordion-item__heading"},t("button",{key:"7d31acbf313e30827703c88027121681f0a0d6b0","aria-controls":this.itemId,"aria-expanded":this.expanded+"",class:"accordion-item__toggle",disabled:this.disabled,id:this.headingId,onClick:this.onHeadingClick,type:"button"},t("slot",{key:"b79a174398448e9fea3407f8d7a4803d5d60d1f5",name:"media"}),t("span",{key:"f092906ba953c07abdbb1d8159268b92960fdc39",class:"accordion-item__toggle-text"},this.heading,this.description&&t("swirl-text",{key:"827970a298d728085b6ae63be7c8c9d44859bbda",as:"span",color:"subdued",size:"sm"},this.description)),t("slot",{key:"6dc7a6efd5948d2954c4e5dce1ccb04475bee77d",name:"trailing"}),t("span",{key:"5626c5d1a6a8ccaa4c3f20deaeea6d169da05f89",class:"accordion-item__icon"},!this.expanded&&t("swirl-icon",{key:"7656ce9908d12897902ccc81dbb3b9388f46b292",glyph:"chevron-right",size:20}),this.expanded&&t("swirl-icon",{key:"5f9ad2f5dcc97d32f30f1981356ac525286ff8d9",glyph:"expand-more",size:20})))),t("div",{key:"5b32ae5da0caacd8891b74451a2f3aff91d640af","aria-labelledby":this.headingId,class:"accordion-item__content",id:this.itemId,role:"region"},t("slot",{key:"50ff36caf14b70bcc79fbf91db1e58ceb0c10a60"}))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}"}},[257,"swirl-accordion-item",{description:[1],disabled:[4],heading:[1],headingLevel:[2,"heading-level"],initiallyOpen:[4,"initially-open"],itemId:[1,"item-id"],expanded:[32],collapse:[64],expand:[64],toggle:[64]}]),l=r,m=function(){"undefined"!=typeof customElements&&["swirl-accordion-item","swirl-icon","swirl-text"].forEach((i=>{switch(i){case"swirl-accordion-item":customElements.get(d(i))||customElements.define(d(i),r);break;case"swirl-icon":customElements.get(d(i))||n();break;case"swirl-text":customElements.get(d(i))||c()}}))};export{l as SwirlAccordionItem,m as defineCustomElement}

package/dist/components/swirl-card.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as r,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c as d}from"./index2.js";const o=["xs","sm","base","l","xl"],c=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.componentLoad=t(this,"componentLoad",7),this.as="div",this.borderRadius="base",this.elevationLevel=3,this.intent="default",this.justifyContent="start",this.flashing=!1}async flash(e=5e3){this.flashingTimeout&&(clearTimeout(this.flashingTimeout),this.flashingTimeout=void 0),this.flashing=!0,this.flashingTimeout=setTimeout((()=>{this.flashing=!1}),e)}componentDidLoad(){this.componentLoad.emit()}render(){const e=this.href?"a":this.as,a=!!this.el.querySelector('[slot="floating-controls"]'),t=!!this.el.querySelector('[slot="image"]'),s={...this.customBackgroundColor?{"--swirl-card-background-default":this.customBackgroundColor}:{},backdropFilter:this.customBackdropFilter,borderRadius:o.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,height:this.height,minHeight:this.minHeight,overflow:this.overflow},c={padding:this.padding?`var(--s-space-${this.padding})`:void 0,paddingBlockEnd:this.paddingBlockEnd?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:this.paddingBlockStart?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:this.paddingInlineEnd?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:void 0},n=d("card","card--elevation-level-"+this.elevationLevel,"card--intent-"+this.intent,"card--justify-content-"+this.justifyContent,{"card--elevated":this.elevated,"card--flashing":this.flashing,"card--has-floating-controls":a,"card--has-image":t,"card--highlighted":this.highlighted,"card--interactive":this.interactive||this.href,"card--translucent":this.translucent,"card--is--borderless":this.isBorderless});return r(i,{key:"5d3e28cd329ea9312db055ec26603471b2769b5f",styles:{height:this.height}},r(e,{key:"1a0a88412a4c09d94dc26216a0d1508d2c7e1e9c","aria-current":this.swirlAriaCurrent,"aria-label":this.swirlAriaLabel,"aria-labelledby":this.swirlAriaLabelledby,class:n,href:this.href,rel:this.href&&"_blank"===this.linkTarget?"noreferrer":void 0,style:s,target:this.linkTarget},r("div",{key:"19531ee30d16e58045cf88cb2a2c131840361832",class:"card__image",style:{aspectRatio:this.imageAspectRatio}},r("slot",{key:"1ceb9d2bdad0fcd627f6d9729d12cedac0439083",name:"image"})),r("div",{key:"5c4da7197a80d912a12358e324a1be859ee0db7d",class:"card__floating-controls"},r("slot",{key:"8fbaada621865c95bfddbc9c54e18721afbbe969",name:"floating-controls"})),r("div",{key:"dd5daf282b659d12c10de972420eb07cc5c58f81",class:"card__body",style:c},r("div",{key:"964a2d0f76da2ef99e73223c5682c196235b89c1",class:"card__content"},r("slot",{key:"eaf859000c7414ba1780d7c3dda62675570ab204",name:"content"})))))}get el(){return this}static get style(){return':host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--translucent{background-color:transparent}.card--translucent:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}'}},[257,"swirl-card",{as:[1],borderRadius:[1,"border-radius"],customBackgroundColor:[1,"custom-background-color"],customBackdropFilter:[1,"custom-backdrop-filter"],elevated:[4],elevationLevel:[2,"elevation-level"],height:[1],highlighted:[4],href:[1],imageAspectRatio:[1,"image-aspect-ratio"],intent:[1],isBorderless:[4,"is-borderless"],interactive:[4],justifyContent:[1,"justify-content"],linkTarget:[1,"link-target"],minHeight:[1,"min-height"],overflow:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],translucent:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],swirlAriaLabelledby:[1,"swirl-aria-labelledby"],flashing:[32],flash:[64]}]),n=c,l=function(){"undefined"!=typeof customElements&&["swirl-card"].forEach((e=>{"swirl-card"===e&&(customElements.get(s(e))||customElements.define(s(e),c))}))};export{n as SwirlCard,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as r,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c as d}from"./index2.js";const o=["xs","sm","base","l","xl"],c=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.componentLoad=t(this,"componentLoad",7),this.as="div",this.borderRadius="base",this.elevationLevel=3,this.intent="default",this.justifyContent="start",this.flashing=!1}async flash(e=5e3){this.flashingTimeout&&(clearTimeout(this.flashingTimeout),this.flashingTimeout=void 0),this.flashing=!0,this.flashingTimeout=setTimeout((()=>{this.flashing=!1}),e)}componentDidLoad(){this.componentLoad.emit()}render(){const e=this.href?"a":this.as,a=!!this.el.querySelector('[slot="floating-controls"]'),t=!!this.el.querySelector('[slot="image"]'),s={...this.customBackgroundColor?{"--swirl-card-background-default":this.customBackgroundColor}:{},backdropFilter:this.customBackdropFilter,borderRadius:o.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,height:this.height,minHeight:this.minHeight,overflow:this.overflow},c={padding:this.padding?`var(--s-space-${this.padding})`:void 0,paddingBlockEnd:this.paddingBlockEnd?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:this.paddingBlockStart?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:this.paddingInlineEnd?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:void 0},n=d("card","card--elevation-level-"+this.elevationLevel,"card--intent-"+this.intent,"card--justify-content-"+this.justifyContent,{"card--elevated":this.elevated,"card--flashing":this.flashing,"card--has-floating-controls":a,"card--has-image":t,"card--highlighted":this.highlighted,"card--interactive":this.interactive||this.href,"card--translucent":this.translucent,"card--is--borderless":this.isBorderless});return r(i,{key:"5d3e28cd329ea9312db055ec26603471b2769b5f",styles:{height:this.height}},r(e,{key:"1a0a88412a4c09d94dc26216a0d1508d2c7e1e9c","aria-current":this.swirlAriaCurrent,"aria-label":this.swirlAriaLabel,"aria-labelledby":this.swirlAriaLabelledby,class:n,href:this.href,rel:this.href&&"_blank"===this.linkTarget?"noreferrer":void 0,style:s,target:this.linkTarget},r("div",{key:"19531ee30d16e58045cf88cb2a2c131840361832",class:"card__image",style:{aspectRatio:this.imageAspectRatio}},r("slot",{key:"1ceb9d2bdad0fcd627f6d9729d12cedac0439083",name:"image"})),r("div",{key:"5c4da7197a80d912a12358e324a1be859ee0db7d",class:"card__floating-controls"},r("slot",{key:"8fbaada621865c95bfddbc9c54e18721afbbe969",name:"floating-controls"})),r("div",{key:"dd5daf282b659d12c10de972420eb07cc5c58f81",class:"card__body",style:c},r("div",{key:"964a2d0f76da2ef99e73223c5682c196235b89c1",class:"card__content"},r("slot",{key:"eaf859000c7414ba1780d7c3dda62675570ab204",name:"content"})))))}get el(){return this}static get style(){return':host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--translucent{background-color:transparent}.card--translucent:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}'}},[257,"swirl-card",{as:[1],borderRadius:[1,"border-radius"],customBackgroundColor:[1,"custom-background-color"],customBackdropFilter:[1,"custom-backdrop-filter"],elevated:[4],elevationLevel:[2,"elevation-level"],height:[1],highlighted:[4],href:[1],imageAspectRatio:[1,"image-aspect-ratio"],intent:[1],isBorderless:[4,"is-borderless"],interactive:[4],justifyContent:[1,"justify-content"],linkTarget:[1,"link-target"],minHeight:[1,"min-height"],overflow:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],translucent:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],swirlAriaLabelledby:[1,"swirl-aria-labelledby"],flashing:[32],flash:[64]}]),n=c,l=function(){"undefined"!=typeof customElements&&["swirl-card"].forEach((e=>{"swirl-card"===e&&(customElements.get(s(e))||customElements.define(s(e),c))}))};export{n as SwirlCard,l as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";import{v as h}from"./v4.js";const d=(t,e=0,r=1)=>t>r?r:t<e?e:t,u=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,p=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?u(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?u(parseInt(t.substring(6,8),16)/255,2):1}),b=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:u(t),s:u(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:u(i/2),a:u(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},m=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},f=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},g={},v=t=>{let e=g[t];return e||(e=document.createElement("template"),e.innerHTML=t,g[t]=e),e},w=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let x=!1;const k=t=>"touches"in t,y=(t,e)=>{const r=k(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();w(t.el,"move",t.getMove({x:d((r.pageX-(s.left+window.pageXOffset))/s.width),y:d((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class _{constructor(t,e,r,s){const i=v(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(x?"touchmove":"mousemove",this),e(x?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(x&&!k(t)||(x||(x=k(t)),0)))(t)||!x&&0!=t.button)return;this.el.focus(),y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),w(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class E extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:b({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+u(t))}getMove(t,e){return{h:e?d(this.h+360*t.x,0,360):360*t.x}}}class $ extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:b(t)},{"background-color":b({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100*t.x,0,100):100*t.x,v:e?d(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const I=Symbol("same"),S=Symbol("color"),C=Symbol("hsva"),M=Symbol("update"),z=Symbol("parts"),B=Symbol("css"),L=Symbol("sliders");class j extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[L](){return[$,E]}get color(){return this[S]}set color(t){if(!this[I](t)){const e=this.colorModel.toHsva(t);this[M](e),this[S]=t}}constructor(){super();const t=v(`<style>${this[B].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[z]=this[L].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[I](s)||(this.color=s)}handleEvent(t){const e=this[C],r={...e,...t.detail};let s;this[M](r),f(r,e)||this[I](s=this.colorModel.fromHsva(r))||(this[S]=s,w(this,"color-changed",{value:s}))}[I](t){return this.color&&this.colorModel.equal(t,this.color)}[M](t){this[C]=t,this[z].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:u(60*(n<0?n+6:n)),s:u(i?o/i*100:0),v:u(i/255*100),a:s}})(p(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?m(u(255*s)):"";return"#"+m(t)+m(e)+m(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/360*6),o=r*(1-e),n=r*(1-(t-i)*e),a=r*(1-(1-t+i)*e),l=i%6;return{r:u(255*[r,n,o,o,a,r][l]),g:u(255*[a,r,r,n,o,o][l]),b:u(255*[o,o,a,r,r,n][l]),a:u(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||f(p(t),p(e)),fromAttr:t=>t};class A extends j{get colorModel(){return H}}customElements.define("hex-color-picker",class extends A{});const F=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+h(),this.onPickerChange=t=>{this.value=t.detail.value},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)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"2ed3d40d8b69af36b2226c911cc5dae84742f0cb"},s("div",{key:"ef197f8e0a01ddf121df8f47a99691040663f286",class:e},s("input",{key:"34f8ae5eb9aaa8e664a6b47fac63917a2f7e2039","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"3e11abdfdf445802e84cf3e87de2499c3a402f9a",swirlPopover:this.pickerId},s("button",{key:"e99eb09576d3843aebd5c8803e0d9235bbb0139e",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"b60e4424b971f6f76b5e0adc9d7b155cd7a0fdac",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"756f20986aeb68b92bd03649623b64f210b1f846",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"5410df4ccf4537763171af4b15ab26898e007ff4",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-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}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;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)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),q=F,T=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))||customElements.define(o(t),F);break;case"swirl-box":customElements.get(o(t))||a();break;case"swirl-popover":customElements.get(o(t))||l();break;case"swirl-popover-trigger":customElements.get(o(t))||c()}}))};export{q as SwirlColorInput,T as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";const h=(t,e=0,r=1)=>t>r?r:t<e?e:t,d=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,u=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?d(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?d(parseInt(t.substring(6,8),16)/255,2):1}),p=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:d(t),s:d(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:d(i/2),a:d(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},b=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},m=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},f={},g=t=>{let e=f[t];return e||(e=document.createElement("template"),e.innerHTML=t,f[t]=e),e},v=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let w=!1;const x=t=>"touches"in t,k=(t,e)=>{const r=x(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();v(t.el,"move",t.getMove({x:h((r.pageX-(s.left+window.pageXOffset))/s.width),y:h((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class y{constructor(t,e,r,s){const i=g(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(w?"touchmove":"mousemove",this),e(w?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(w&&!x(t)||(w||(w=x(t)),0)))(t)||!w&&0!=t.button)return;this.el.focus(),k(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),k(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),v(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class _ extends y{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:p({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+d(t))}getMove(t,e){return{h:e?h(this.h+360*t.x,0,360):360*t.x}}}class E extends y{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:p(t)},{"background-color":p({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${d(t.s)}%, Brightness ${d(t.v)}%`)}getMove(t,e){return{s:e?h(this.hsva.s+100*t.x,0,100):100*t.x,v:e?h(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const $=Symbol("same"),I=Symbol("color"),S=Symbol("hsva"),C=Symbol("update"),M=Symbol("parts"),z=Symbol("css"),B=Symbol("sliders");class L extends HTMLElement{static get observedAttributes(){return["color"]}get[z](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[B](){return[E,_]}get color(){return this[I]}set color(t){if(!this[$](t)){const e=this.colorModel.toHsva(t);this[C](e),this[I]=t}}constructor(){super();const t=g(`<style>${this[z].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[M]=this[B].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[$](s)||(this.color=s)}handleEvent(t){const e=this[S],r={...e,...t.detail};let s;this[C](r),m(r,e)||this[$](s=this.colorModel.fromHsva(r))||(this[I]=s,v(this,"color-changed",{value:s}))}[$](t){return this.color&&this.colorModel.equal(t,this.color)}[C](t){this[S]=t,this[M].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:d(60*(n<0?n+6:n)),s:d(i?o/i*100:0),v:d(i/255*100),a:s}})(u(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?b(d(255*s)):"";return"#"+b(t)+b(e)+b(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/360*6),o=r*(1-e),n=r*(1-(t-i)*e),a=r*(1-(1-t+i)*e),l=i%6;return{r:d(255*[r,n,o,o,a,r][l]),g:d(255*[a,r,r,n,o,o][l]),b:d(255*[o,o,a,r,r,n][l]),a:d(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||m(u(t),u(e)),fromAttr:t=>t};class j extends L{get colorModel(){return H}}customElements.define("hex-color-picker",class extends j{});const A=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+crypto.randomUUID(),this.onPickerChange=t=>{this.value=t.detail.value},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)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"2ee1b42158b3caeb6ab7b0c46192a327ae9a854e"},s("div",{key:"c14754cc9fe4d74fd40ec50cb796dd1b7688d823",class:e},s("input",{key:"4d884de2795ed648a11cda4eaf08e03cf825e443","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"9d543f84f7831b48af0036fa0062ea98afdbfecf",swirlPopover:this.pickerId},s("button",{key:"fe0ffd3db789188beb2c5ca62bfcdd241a932721",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"c9ac21281b927941dfe43851785c94ac48594c6b",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"c888476cc56718853a644e2b722defa46babd920",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"f5ee44a0661d3c8ae6d076a0817b76e8a646bd5a",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-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}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;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)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),F=A,q=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))||customElements.define(o(t),A);break;case"swirl-box":customElements.get(o(t))||a();break;case"swirl-popover":customElements.get(o(t))||l();break;case"swirl-popover-trigger":customElements.get(o(t))||c()}}))};export{F as SwirlColorInput,q as defineCustomElement}

package/dist/components/swirl-console-layout.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as d}from"./utils.js";import{d as r}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{d()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=d();e||this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),d()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,d()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"f92e62cd7a3aa3679a62cedc47003f9dc6afa138"},t("div",{key:"e64ead610749dbefebd1a48332e3e4ce9749a4ea",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"dee14aa96c8e3840343621d2cd2dc437285107f2","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"5c74ea43a8d073cfaa2426b1bdc2f3c301f7f53e",class:"console-layout__header"},t("div",{key:"958cf209f0c70ba4654b9d216b15dd62aeb58fd1",class:"console-layout__logo"},t("svg",{key:"c9d36c86ad44e96365b6710426c4550d0c81d7a5",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"d3b4a3cbc7564ddd805d1ddfb1b34c449b1beec5","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"97d5f351e6de465c059fc357fc012dae757b5678",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"3bb30959d7c34a28bce82aeffc1e1c0ab0799833","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"497faf890249299fd21075d766f344cdbd49f47d",name:"navigation"})),t("div",{key:"76e25959719dabb8e5c3b779d3eed5e7e286681b",class:"console-layout__user"},t("slot",{key:"eaabb2af9392992f184f547365fc2a74063d449f",name:"user"}))),t("main",{key:"5e242a75ab5e24ed535e45117238ceb56b7ba69d","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"f096010fa4cc6e2a1e8b57093fbace8ad99ee2fa",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"019e8471fcc2b4b83b3eca434851c833d506a9fe",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"3ad1bdad10025933e5476ad172961cea33cf8bf2",class:"console-layout__app-bar"},t("span",{key:"5d3769ea1ab077f8b536ea1382db4a98c4ad300c",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"08140f76ae70e54f7bf8bbbb3a30c3e4192a7661",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"dd72e2beb8ee2bfc87896eb53a0ece44abb6e411",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"5fa6495f2bc592ed2e2b7d2bb3659ca1f0ecfe38",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"ee75f146bdf639b93e02561853eb391dc58d8142",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"fa54f51cc8e703663a11fcd7027df84dc9ea57d8","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"4505b706577728b794d5c370c0d627f14db72742",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"9d7d64cf621cf713bd8c10abb3545791226deec2",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"f170dd5a4d0292842a42df782f84491fbfa16446",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"9ce1c29868fc24915b1d7060fdc30ad4e2726802",class:"console-layout__heading-container"},t("swirl-heading",{key:"33d2473e87cdb94998783ba1337ea92ee34ac5b0",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"e3071a03d28e05550385fa6b5101d2c98e11a405",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"62a31138ed664b4900030150e1d1959e470c1a17",class:"console-layout__heading-container"},t("slot",{key:"6f1de516692eeb2922a2e18784bc8c74e5416b1d",name:"heading"})),t("div",{key:"02fdc97524fee6a75524ef9eb095a59cff238cc7",class:"console-layout__content-header-tools"},t("slot",{key:"159bbfad00487ee173dc708e5047e603986318f9",name:"content-header-tools"}))),t("div",{key:"2fce6c367d3815e7482e63836900ae4793dca055",class:"console-layout__integration",style:e},t("slot",{key:"6d962aff82cf2b1276650e3eb5b9fba06994f1dc",name:"content"})))),t("footer",{key:"da76594d20b410746a70960c1abc83eff0a38f59",class:"console-layout__footer"},t("slot",{key:"c07940b404f20db835967d6fa2355d9ae9c035f1",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"39e32ef1a08100b9f15bede9180accaa884de3ee",class:"console-layout__overlays"},t("slot",{key:"78d8abf993064df290ce2890ea200e246c599b0e",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))||customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))||r();break;case"swirl-heading":customElements.get(i(e))||c();break;case"swirl-text":customElements.get(i(e))||h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as d}from"./utils.js";import{d as r}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{d()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=d();e||this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),d()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,d()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"f92e62cd7a3aa3679a62cedc47003f9dc6afa138"},t("div",{key:"e64ead610749dbefebd1a48332e3e4ce9749a4ea",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"dee14aa96c8e3840343621d2cd2dc437285107f2","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"5c74ea43a8d073cfaa2426b1bdc2f3c301f7f53e",class:"console-layout__header"},t("div",{key:"958cf209f0c70ba4654b9d216b15dd62aeb58fd1",class:"console-layout__logo"},t("svg",{key:"c9d36c86ad44e96365b6710426c4550d0c81d7a5",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"d3b4a3cbc7564ddd805d1ddfb1b34c449b1beec5","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"97d5f351e6de465c059fc357fc012dae757b5678",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"3bb30959d7c34a28bce82aeffc1e1c0ab0799833","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"497faf890249299fd21075d766f344cdbd49f47d",name:"navigation"})),t("div",{key:"76e25959719dabb8e5c3b779d3eed5e7e286681b",class:"console-layout__user"},t("slot",{key:"eaabb2af9392992f184f547365fc2a74063d449f",name:"user"}))),t("main",{key:"5e242a75ab5e24ed535e45117238ceb56b7ba69d","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"f096010fa4cc6e2a1e8b57093fbace8ad99ee2fa",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"019e8471fcc2b4b83b3eca434851c833d506a9fe",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"3ad1bdad10025933e5476ad172961cea33cf8bf2",class:"console-layout__app-bar"},t("span",{key:"5d3769ea1ab077f8b536ea1382db4a98c4ad300c",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"08140f76ae70e54f7bf8bbbb3a30c3e4192a7661",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"dd72e2beb8ee2bfc87896eb53a0ece44abb6e411",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"5fa6495f2bc592ed2e2b7d2bb3659ca1f0ecfe38",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"ee75f146bdf639b93e02561853eb391dc58d8142",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"fa54f51cc8e703663a11fcd7027df84dc9ea57d8","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"4505b706577728b794d5c370c0d627f14db72742",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"9d7d64cf621cf713bd8c10abb3545791226deec2",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"f170dd5a4d0292842a42df782f84491fbfa16446",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"9ce1c29868fc24915b1d7060fdc30ad4e2726802",class:"console-layout__heading-container"},t("swirl-heading",{key:"33d2473e87cdb94998783ba1337ea92ee34ac5b0",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"e3071a03d28e05550385fa6b5101d2c98e11a405",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"62a31138ed664b4900030150e1d1959e470c1a17",class:"console-layout__heading-container"},t("slot",{key:"6f1de516692eeb2922a2e18784bc8c74e5416b1d",name:"heading"})),t("div",{key:"02fdc97524fee6a75524ef9eb095a59cff238cc7",class:"console-layout__content-header-tools"},t("slot",{key:"159bbfad00487ee173dc708e5047e603986318f9",name:"content-header-tools"}))),t("div",{key:"2fce6c367d3815e7482e63836900ae4793dca055",class:"console-layout__integration",style:e},t("slot",{key:"6d962aff82cf2b1276650e3eb5b9fba06994f1dc",name:"content"})))),t("footer",{key:"da76594d20b410746a70960c1abc83eff0a38f59",class:"console-layout__footer"},t("slot",{key:"c07940b404f20db835967d6fa2355d9ae9c035f1",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"39e32ef1a08100b9f15bede9180accaa884de3ee",class:"console-layout__overlays"},t("slot",{key:"78d8abf993064df290ce2890ea200e246c599b0e",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))||customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))||r();break;case"swirl-heading":customElements.get(i(e))||c();break;case"swirl-text":customElements.get(i(e))||h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}

package/dist/components/swirl-data-cell-stack.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{v as c}from"./v4.js";const r=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+c(),this.onSlotChange=e=>{e.target.assignedElements().filter((e=>"SWIRL-DATA-CELL"!==e.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const e=!!this.el.querySelector('[slot="cta"]'),a=!!this.label&&!this.hideLabel,l=d("data-cell-stack",{"data-cell-stack--has-cta":e}),c=a?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"b79ce886f01b55239f1a2a0a153568fcdd3d9961"},t("div",{key:"d95fafcfc4de8958971ecb91f43dd7339e89bab6",class:l,part:"data-cell-stack",role:"group"},(a||this.description||e)&&t("header",{key:"e87a98dab5c55ea579dc414add17d41a7fdd416b",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"3774cf27961cc6088db2c01fa76becea9d46eb7d",class:"data-cell-stack__header-content"},a&&t("h3",{key:"ee1312f8b92564c3f87d3b0c2a4270e5be15e472",class:"data-cell-stack__label",id:c},this.label),this.description&&t("p",{key:"8c70b4d92f1bd6be313df0d9de091731c1a9aa20",class:"data-cell-stack__description",id:r},this.description)),e&&t("div",{key:"d0dfecd262d77c78efd59def270e6a924275eb33",class:"data-cell-stack__cta"},t("slot",{key:"ad3505f97e9b89707fd007971b0858eeb907ceee",name:"cta"}))),t("div",{key:"a8bb8acd3e42db09ebb8ba47490e5a7a2be083af",class:"data-cell-stack__cells",role:"list","aria-labelledby":c||void 0,"aria-describedby":r||void 0},t("slot",{key:"8652e5e828e2f8da7ff31837c9d0814a945b66b1",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)     var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)     var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=r,o=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((e=>{"swirl-data-cell-stack"===e&&(customElements.get(l(e))||customElements.define(l(e),r))}))};export{i as SwirlDataCellStack,o as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as e,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c}from"./index2.js";const d=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+crypto.randomUUID(),this.onSlotChange=a=>{a.target.assignedElements().filter((a=>"SWIRL-DATA-CELL"!==a.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const a=!!this.el.querySelector('[slot="cta"]'),e=!!this.label&&!this.hideLabel,l=c("data-cell-stack",{"data-cell-stack--has-cta":a}),d=e?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"042c83c6f2fcbb76810f082487dba327f3cc8309"},t("div",{key:"07eb0ed861d3051dcffcbaa830ec07e46b1fd624",class:l,part:"data-cell-stack",role:"group"},(e||this.description||a)&&t("header",{key:"e664e0c1db6346a7b7680f4b5fa1354ec27af519",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"6e4e5b99e5cfb6a98375bd6b19cdf8c60ccbe223",class:"data-cell-stack__header-content"},e&&t("h3",{key:"092b8ac7525b5edf5d0938bd8c8ddb8fe9ef9e1b",class:"data-cell-stack__label",id:d},this.label),this.description&&t("p",{key:"abc7d688fadb1248b4c0fabb57f83b004fe0091d",class:"data-cell-stack__description",id:r},this.description)),a&&t("div",{key:"5868eff8aa04cd733d7c7d6d029585075739607a",class:"data-cell-stack__cta"},t("slot",{key:"4b872cac524edaa3ef7fc102554190006fe31a5c",name:"cta"}))),t("div",{key:"88bba53868d016ee19a79e75dbd3dab4fd6e87c1",class:"data-cell-stack__cells",role:"list","aria-labelledby":d||void 0,"aria-describedby":r||void 0},t("slot",{key:"8a7b45a1bb3b648d8fd1848ade56c0c56b5485de",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)     var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)     var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),r=d,i=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((a=>{"swirl-data-cell-stack"===a&&(customElements.get(l(a))||customElements.define(l(a),d))}))};export{r as SwirlDataCellStack,i as defineCustomElement}

package/dist/components/swirl-data-cell.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,createEvent as l,h as t,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";import{v as n}from"./v4.js";const f=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=l(this,"valueChange",7),this.intent="default",this.vertical=!1,this.elementId="data-cell-"+n(),this.handleRadioClick=e=>{const a=e.target,l=this.el.querySelector('swirl-radio[slot="content"]');if(a.contains(l)){const e=l?.querySelector('input[type="radio"]');e.click()}},this.handleClick=e=>{this.handleRadioClick(e),this.valueChange.emit(e)}}render(){const e=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="media"]')?.parentElement.tagName),a=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),l=!!this.label,s=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=c("data-cell",{"data-cell--vertical":this.vertical,"data-cell--has-media":e,"data-cell--has-suffix":a,"data-cell--has-content":s,"data-cell--no-label":!l,"data-cell--interactive":r||d,["data-cell--intent-"+this.intent]:this.intent}),n=this.elementId+"-label",f=this.elementId+"-value",u="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=u?"listitem":"group",p=r||d?"button":void 0,h=u&&!p?"group":p,v=t("swirl-stack",{key:"b7e45f984e5f703bf6602cf04026ce030206743b",orientation:"horizontal",align:"center",spacing:"4"},t("span",{key:"abe3e4a268fc074e864335eb5a3504ed977210df",class:"data-cell__label",id:n,role:"term"},this.label),this.tooltip&&t("swirl-tooltip",{key:"6fd19146e87e14c4bc5c20cf391a0f4dfee16edd",class:"data-cell__tooltip",content:this.tooltip,position:"right"},t("swirl-icon-info",{key:"3fffcab519ac14c2493abc99a2ea9f99c5d5899b",size:16,tabIndex:0})));return t(i,{key:"950c2a9d7c7e1f605698c5d2b44bdcb3ff54e5d0",role:b},t("div",{key:"d40c9e1dfca15fb47193d42602b48040ae9f2eed",class:o,part:"data-cell",onClick:r||d?this.handleClick:void 0,role:h,tabIndex:r||d?0:void 0},e&&t("div",{key:"07218ec52d997f764c250e1f70f2269a55eced5e",class:"data-cell__media","aria-hidden":"true"},t("slot",{key:"84eaae0b7997bd80cf1a9c0c7179209b7272a95b",name:"media"})),t("div",{key:"4d4f901bf61febc68ec46f00db0a4167160bf869",class:"data-cell__content"},l&&t("div",{key:"2d4ad0b8975a409e372a5d4f2e3f75fa0714774f",class:"data-cell__label-wrapper"},v),(s||this.value||a)&&t("div",{key:"78c4f5ee10fbc8928b24a53d1d42cb6e3b20524f",class:"data-cell__value-wrapper",role:"definition","aria-labelledby":l?n:void 0,id:f},s?t("div",{class:"data-cell__input"},t("slot",{name:"content"})):this.value&&t("div",{class:"data-cell__value"},this.value))),a&&t("div",{key:"98f57eda879de173cb4b683df7bf3213c2d4197b",class:"data-cell__suffix"},t("slot",{key:"9793229f457bf8989af7bf9ecc5d684340d25e9f",name:"suffix"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var(     --swirl-data-cell-input-background,     var(--s-surface-default)   )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}"}},[257,"swirl-data-cell",{intent:[1],label:[1],tooltip:[1],value:[1],vertical:[4]}]),u=f,b=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-data-cell":customElements.get(s(e))||customElements.define(s(e),f);break;case"swirl-icon-info":customElements.get(s(e))||r();break;case"swirl-stack":customElements.get(s(e))||d();break;case"swirl-tooltip":customElements.get(s(e))||o()}}))};export{u as SwirlDataCell,b as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as e,createEvent as l,h as t,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";const n=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.valueChange=l(this,"valueChange",7),this.intent="default",this.vertical=!1,this.elementId="data-cell-"+crypto.randomUUID(),this.handleRadioClick=a=>{const e=a.target,l=this.el.querySelector('swirl-radio[slot="content"]');if(e.contains(l)){const a=l?.querySelector('input[type="radio"]');a.click()}},this.handleClick=a=>{this.handleRadioClick(a),this.valueChange.emit(a)}}render(){const a=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="media"]')?.parentElement.tagName),e=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),l=!!this.label,c=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=s("data-cell",{"data-cell--vertical":this.vertical,"data-cell--has-media":a,"data-cell--has-suffix":e,"data-cell--has-content":c,"data-cell--no-label":!l,"data-cell--interactive":r||d,["data-cell--intent-"+this.intent]:this.intent}),n=this.elementId+"-label",f=this.elementId+"-value",u="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=u?"listitem":"group",p=r||d?"button":void 0,h=u&&!p?"group":p,v=t("swirl-stack",{key:"7a729ce4b378c034b97979986762a0fa1d641cfb",orientation:"horizontal",align:"center",spacing:"4"},t("span",{key:"40982cffdceb54b8d24792c7198d0897276f58e3",class:"data-cell__label",id:n,role:"term"},this.label),this.tooltip&&t("swirl-tooltip",{key:"ea28c9c22c24cbc8693ea289c1dda8a4fb1c20a9",class:"data-cell__tooltip",content:this.tooltip,position:"right"},t("swirl-icon-info",{key:"9b7e454200efa02d2fa80b8e2af0b11c8b114df2",size:16,tabIndex:0})));return t(i,{key:"29deeeca389052e4b8224fa793930260d5626f64",role:b},t("div",{key:"67714930178503e615e4c57c4fb55a09e668141f",class:o,part:"data-cell",onClick:r||d?this.handleClick:void 0,role:h,tabIndex:r||d?0:void 0},a&&t("div",{key:"befe843837b8e860175c1d21d9aba3b09be4abaa",class:"data-cell__media","aria-hidden":"true"},t("slot",{key:"04d1d43cea0aa2b597191276361972a542892a25",name:"media"})),t("div",{key:"67d0e9ff7ccc92ee666b75736c1640f2f5cbfef9",class:"data-cell__content"},l&&t("div",{key:"a9ba713fcaa63c4eef2d37765c7ad709f8f53e1b",class:"data-cell__label-wrapper"},v),(c||this.value||e)&&t("div",{key:"167aee81080412dcdc4766be480bf8e774a4c0ed",class:"data-cell__value-wrapper",role:"definition","aria-labelledby":l?n:void 0,id:f},c?t("div",{class:"data-cell__input"},t("slot",{name:"content"})):this.value&&t("div",{class:"data-cell__value"},this.value))),e&&t("div",{key:"998ac95e5c5a2dbcd1106c39261163d10ee4d538",class:"data-cell__suffix"},t("slot",{key:"bf5f0adfd4138d7831d69fbbb94045de95084040",name:"suffix"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var(     --swirl-data-cell-input-background,     var(--s-surface-default)   )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}"}},[257,"swirl-data-cell",{intent:[1],label:[1],tooltip:[1],value:[1],vertical:[4]}]),f=n,u=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((a=>{switch(a){case"swirl-data-cell":customElements.get(c(a))||customElements.define(c(a),n);break;case"swirl-icon-info":customElements.get(c(a))||r();break;case"swirl-stack":customElements.get(c(a))||d();break;case"swirl-tooltip":customElements.get(c(a))||o()}}))};export{f as SwirlDataCell,u as defineCustomElement}

package/dist/components/swirl-date-picker2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as r,Host as i,transformTag as o}from"@stencil/core/internal/client";import{r as n,g as s}from"./utils.js";import{c}from"./index2.js";import{d}from"./wc-datepicker2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=a(this,"valueChange",3),this.disableDate=()=>!1,this.firstDayOfWeek=0,this.fixedAspectRatio=!0,this.fixedMaxWidth=!0,this.locale="en-US",this.onClick=e=>{e.stopPropagation(),e.preventDefault()},this.onSelectDate=e=>{this.valueChange.emit("string"==typeof e.detail?n(new Date(e.detail)):e.detail.map((e=>n(new Date(e)))))}}componentWillLoad(){if(!this.firstDayOfWeek){const e=new Intl.Locale(this.locale);this.firstDayOfWeek="getWeekInfo"in e?e.getWeekInfo().firstDay:e.weekInfo?.firstDay??0}}render(){const e=this.startDate instanceof Date?s(this.startDate):void 0,t=c({"date-picker--fixed-max-width":this.fixedMaxWidth,"date-picker--fixed-aspect-ratio":this.fixedAspectRatio});return r(i,{key:"b5427fbe372af8ca42124c874a4e44b775441af0",onClick:this.onClick},r("wc-datepicker",{key:"569e169295ddd23b4a2a06d3a19ad5e7f1e484fa",class:t,elementClassName:"date-picker",disableDate:this.disableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onSelectDate:this.onSelectDate,range:this.range,startDate:e,value:this.value}))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:transparent;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker--fixed-max-width .date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:\"\";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-state-hovered)}.date-picker__next-month-button:active,.date-picker__previous-month-button:active{background-color:var(--s-state-pressed)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:transparent;font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular)}.date-picker--fixed-aspect-ratio .date-picker__weekday{aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:\"\";inset:0;aspect-ratio:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto}.date-picker__date:hover:before{background-color:var(--s-state-hovered)}.date-picker--fixed-aspect-ratio .date-picker__date{aspect-ratio:1}.date-picker__date--current:before{background-color:var(--s-state-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)       var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}.date-picker__date--disabled{color:var(--s-text-disabled);cursor:default;pointer-events:none}.date-picker__date--disabled:before{background-color:transparent}.date-picker__date--disabled:hover{color:var(--s-text-disabled)}.date-picker__date--disabled:hover:before{background-color:transparent}"}},[1,"swirl-date-picker",{disableDate:[16],firstDayOfWeek:[1026,"first-day-of-week"],fixedAspectRatio:[4,"fixed-aspect-ratio"],fixedMaxWidth:[4,"fixed-max-width"],labels:[16],locale:[1],range:[4],startDate:[16],value:[1040]}]);function p(){"undefined"!=typeof customElements&&["swirl-date-picker","wc-datepicker"].forEach((e=>{switch(e){case"swirl-date-picker":customElements.get(o(e))||customElements.define(o(e),l);break;case"wc-datepicker":customElements.get(o(e))||d()}}))}export{l as S,p as d}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as r,Host as i,transformTag as o}from"@stencil/core/internal/client";import{r as s,g as n}from"./utils.js";import{c}from"./index2.js";import{d}from"./wc-datepicker2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=a(this,"valueChange",3),this.disableDate=()=>!1,this.firstDayOfWeek=0,this.fixedAspectRatio=!0,this.fixedMaxWidth=!0,this.locale="en-US",this.onClick=e=>{e.stopPropagation(),e.preventDefault()},this.onSelectDate=e=>{this.valueChange.emit("string"==typeof e.detail?s(new Date(e.detail)):e.detail.map((e=>s(new Date(e)))))}}componentWillLoad(){if(!this.firstDayOfWeek){const e=new Intl.Locale(this.locale);this.firstDayOfWeek="getWeekInfo"in e?e.getWeekInfo().firstDay:e.weekInfo?.firstDay??0}}render(){const e=this.startDate instanceof Date?n(this.startDate):void 0,t=c({"date-picker--fixed-max-width":this.fixedMaxWidth,"date-picker--fixed-aspect-ratio":this.fixedAspectRatio});return r(i,{key:"b5427fbe372af8ca42124c874a4e44b775441af0",onClick:this.onClick},r("wc-datepicker",{key:"569e169295ddd23b4a2a06d3a19ad5e7f1e484fa",class:t,elementClassName:"date-picker",disableDate:this.disableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onSelectDate:this.onSelectDate,range:this.range,startDate:e,value:this.value}))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:transparent;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker--fixed-max-width .date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:\"\";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-state-hovered)}.date-picker__next-month-button:active,.date-picker__previous-month-button:active{background-color:var(--s-state-pressed)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:transparent;font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular)}.date-picker--fixed-aspect-ratio .date-picker__weekday{aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:\"\";inset:0;aspect-ratio:1;width:-moz-fit-content;width:fit-content;margin:auto}.date-picker__date:hover:before{background-color:var(--s-state-hovered)}.date-picker--fixed-aspect-ratio .date-picker__date{aspect-ratio:1}.date-picker__date--current:before{background-color:var(--s-state-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)       var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}.date-picker__date--disabled{color:var(--s-text-disabled);cursor:default;pointer-events:none}.date-picker__date--disabled:before{background-color:transparent}.date-picker__date--disabled:hover{color:var(--s-text-disabled)}.date-picker__date--disabled:hover:before{background-color:transparent}"}},[1,"swirl-date-picker",{disableDate:[16],firstDayOfWeek:[1026,"first-day-of-week"],fixedAspectRatio:[4,"fixed-aspect-ratio"],fixedMaxWidth:[4,"fixed-max-width"],labels:[16],locale:[1],range:[4],startDate:[16],value:[1040]}]);function p(){"undefined"!=typeof customElements&&["swirl-date-picker","wc-datepicker"].forEach((e=>{switch(e){case"swirl-date-picker":customElements.get(o(e))||customElements.define(o(e),l);break;case"wc-datepicker":customElements.get(o(e))||d()}}))}export{l as S,p as d}