@getflip/swirl-components 0.523.1 → 0.525.0

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

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as r,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";const h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.activate=i(this,"activate",7),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checkboxLabel="Select",this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.selectionMode="row",this.hasMedia=!1,this.iconSize=24,this.elementId=crypto.randomUUID(),this.mediaQueryUnsubscribe=()=>{},this.rowHasFocus=!1,this.onClick=()=>{if(this.selectable)if(this.hasInteractiveCheckbox){if(this.disabled)return;this.activate.emit(this.el)}else this.toggle()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()},this.onCheckboxClick=e=>{e.preventDefault(),e.stopPropagation(),this.disabled||this.toggle()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.rowHasFocus=this.el.contains(document.activeElement),this.syncTabIndex(this.getControl()),this.syncTabIndex(this.checkboxEl),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}componentDidRender(){this.syncTabIndex(this.checkboxEl)}disconnectedCallback(){this.mediaQueryUnsubscribe()}onFocusIn(){this.rowHasFocus=!0,this.syncTabIndex(this.getControl()),this.syncTabIndex(this.checkboxEl)}onFocusOut(e){const s=e.relatedTarget;s&&this.el.contains(s)||(this.rowHasFocus=!1,this.syncTabIndex(this.getControl()),this.syncTabIndex(this.checkboxEl))}get hasInteractiveCheckbox(){return this.interactive&&this.selectable&&"checkbox"===this.selectionMode}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return!!this.meta||this.hasBadges}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}syncTabIndex(e){e&&e.isConnected&&"grid"===this.parentSemantics&&(e.tabIndex=this.rowHasFocus?0:-1)}toggle(){this.checked=!this.checked,this.valueChange.emit(this.checked)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s="a"===e,i=this.disabled&&!this.href,o=this.hasBadges,c=this.el.querySelector("[slot='control']"),a=!!this.menuTriggerId||c,n=this.hasInteractiveCheckbox,m=this.interactive&&this.href?this.href:void 0,u=c&&(!!this.meta||o),d=!!this.menuTriggerId&&!this.meta&&!this.selectable,h=this.showMeta,w=this.swirlAriaLabel?this.swirlAriaLabel:this.label,b=this.selectable&&!n?this.checked+"":void 0,p=this.interactive&&this.selectable&&!n?"checkbox":void 0,g=this.el.closest('[role="grid"]')?"row":"listitem",v="row"===g?"gridcell":void 0,_={minHeight:this.labelMinHeight??void 0},f=()=>t("span",{key:"2ca5b88fefa12904f184dc19ad0846d7aea49336",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),k=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":c,"resource-list-item--has-menu":a,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":u,"resource-list-item--show-meta":h,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return t(r,{key:"10f26514a4cfeeae416a045434fc79aa7083e4df",role:g},t("div",{key:"d923778b84f32fc3f267fd80adb65e02250d1d36",class:k,role:v,onClick:this.onClick},t(e,{key:"c51508ba74307ac275a257515fad40ede1355a72","aria-checked":b,"aria-current":this.swirlAriaCurrent,"aria-disabled":i?"true":void 0,"aria-label":w,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:m,rel:s?this.rel:void 0,target:s?this.target:void 0,disabled:i,part:"resource-list-item__content",role:p,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&t("span",{key:"32a6070ae1aedc8d40d49ae6b1b7fe89bd9de9ea",class:"resource-list-item__media"},t("slot",{key:"f7c954c6d72ee32cd324834d43e805c95eca485b",name:"media"})),t("span",{key:"ec3debb0e0520d5ef429095a4df2609de30cc96c",class:"resource-list-item__label-container",style:_},this.labelTooltip?t("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},f()):f(),this.description&&t("span",{key:"92e8a311fc27cd1d8822c1591417a0df056fad1b",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&(n?t("button",{"aria-checked":this.checked+"","aria-label":`${this.checkboxLabel} "${this.label}"`,class:"resource-list-item__checkbox",disabled:i,onClick:this.onCheckboxClick,ref:e=>this.checkboxEl=e,role:"checkbox",type:"button"},t("span",{class:"resource-list-item__checkbox-icon"},this.checked&&t("swirl-icon-check-strong",null))):t("span",{"aria-hidden":"true",class:"resource-list-item__checkbox"},t("span",{class:"resource-list-item__checkbox-icon"},this.checked&&t("swirl-icon-check-strong",null)))),h&&t("span",{key:"6951ac587e4ce85ebb829456e7c1241b121fcd78",class:"resource-list-item__meta"},this.meta&&t("span",{key:"14ad74042025464d1be6a0e0b48ded0f94becd7f",class:"resource-list-item__meta-text"},this.meta),t("span",{key:"e747e9fdc33e1cf02049aa72f61b0c40a24b5ce3",class:"resource-list-item__badges"},t("slot",{key:"18c7dce3c560007b5a0cc2bc97dd4edfccb91a1c",name:"badges"}))),t("span",{key:"efa3dff169329a580bcbf2d764a12167f0d698e7",class:"resource-list-item__control",onClick:this.onControlClick},t("slot",{key:"0941dad4c812be4313b517aab9c556a10845421d",name:"control"})),d&&t("swirl-popover-trigger",{key:"8e88d68a90e920f7aa5c0e2afebad6ca80d96e35",swirlPopover:this.menuTriggerId},t("swirl-button",{key:"001776074d3f2af5a7fb0de6e7cc100610f834b5","aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&t("button",{key:"c6fc94432a6ac6ce1371a23a37c8bcf266981ee3","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},t("swirl-icon-drag-handle",{key:"cf199a9428320acc4997cc69883d3fdcd12b4174",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__checkbox:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(     --swirl-resource-list-item-background-hovered   );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 0.75rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-8)}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;left:calc(var(--s-space-16) - var(--s-space-2));display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}button.resource-list-item__checkbox.sc-swirl-resource-list-item{margin:0;padding:0;color:inherit;background:none;font:inherit;cursor:pointer;pointer-events:auto}button.resource-list-item__checkbox.sc-swirl-resource-list-item::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-8))}button.resource-list-item__checkbox.sc-swirl-resource-list-item:focus-visible{outline:none;box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checkboxLabel:[1,"checkbox-label"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],rel:[1],selectable:[4],selectionMode:[1,"selection-mode"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]},[[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]]]),w=h,b=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),h);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{w as SwirlResourceListItem,b as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as r,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";const h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.activate=i(this,"activate",7),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checkboxLabel="Select",this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.selectionMode="row",this.hasMedia=!1,this.iconSize=24,this.elementId=crypto.randomUUID(),this.mediaQueryUnsubscribe=()=>{},this.rowHasFocus=!1,this.onClick=()=>{if(this.selectable)if(this.hasInteractiveCheckbox){if(this.disabled)return;this.activate.emit(this.el)}else this.toggle()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()},this.onCheckboxClick=e=>{e.preventDefault(),e.stopPropagation(),this.disabled||this.toggle()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.rowHasFocus=this.el.contains(document.activeElement),this.syncTabIndex(this.getControl()),this.syncTabIndex(this.checkboxEl),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}componentDidRender(){this.syncTabIndex(this.checkboxEl)}disconnectedCallback(){this.mediaQueryUnsubscribe()}onFocusIn(){this.rowHasFocus=!0,this.syncTabIndex(this.getControl()),this.syncTabIndex(this.checkboxEl)}onFocusOut(e){const s=e.relatedTarget;s&&this.el.contains(s)||(this.rowHasFocus=!1,this.syncTabIndex(this.getControl()),this.syncTabIndex(this.checkboxEl))}get hasInteractiveCheckbox(){return this.interactive&&this.selectable&&"checkbox"===this.selectionMode}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return!!this.meta||this.hasBadges}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}syncTabIndex(e){e&&e.isConnected&&"grid"===this.parentSemantics&&(e.tabIndex=this.rowHasFocus?0:-1)}toggle(){this.checked=!this.checked,this.valueChange.emit(this.checked)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s="a"===e,i=this.disabled&&!this.href,o=this.hasBadges,c=this.el.querySelector("[slot='control']"),a=!!this.menuTriggerId||c,n=this.hasInteractiveCheckbox,m=this.interactive&&this.href?this.href:void 0,u=c&&(!!this.meta||o),d=!!this.menuTriggerId&&!this.meta&&!this.selectable,h=this.showMeta,b=this.swirlAriaLabel?this.swirlAriaLabel:this.label,w=this.selectable&&!n?this.checked+"":void 0,p=this.interactive&&this.selectable&&!n?"checkbox":void 0,g=this.el.closest('[role="grid"]')?"row":"listitem",v="row"===g?"gridcell":void 0,f={minHeight:this.labelMinHeight??void 0},_=()=>t("span",{key:"94eb6e173dd0e8c07ca049334c550a731ad303e3",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),k=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":c,"resource-list-item--has-menu":a,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":u,"resource-list-item--show-meta":h,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return t(r,{key:"3d452b98f187256196a0d9e3aa21009ff2d0dee7",role:g},t("div",{key:"0a47471f5222795a380a595c50336cb22c1f31cb",class:k,role:v,onClick:this.onClick},t(e,{key:"e5fcd45ba424f48c9b866b61b17894d4e235125d","aria-checked":w,"aria-current":this.swirlAriaCurrent,"aria-disabled":i?"true":void 0,"aria-label":b,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:m,rel:s?this.rel:void 0,target:s?this.target:void 0,disabled:i,part:"resource-list-item__content",role:p,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&t("span",{key:"1d914b4b0cdc48d2a7868cb099095ecc46db8579",class:"resource-list-item__media"},t("slot",{key:"dba321608b134a5072d16f6f97f69563144f1fc3",name:"media"})),t("span",{key:"ccb528000b7298589271a66703066e5278c172ef",class:"resource-list-item__label-container",style:f},this.labelTooltip?t("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},_()):_(),this.description&&t("span",{key:"ac725a25fc879533f89f0656fb2f910af5cd5a50",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&(n?t("button",{"aria-checked":this.checked+"","aria-label":`${this.checkboxLabel} "${this.label}"`,class:"resource-list-item__checkbox",disabled:i,onClick:this.onCheckboxClick,ref:e=>this.checkboxEl=e,role:"checkbox",type:"button"},t("span",{class:"resource-list-item__checkbox-icon"},this.checked&&t("swirl-icon-check-strong",null))):t("span",{"aria-hidden":"true",class:"resource-list-item__checkbox"},t("span",{class:"resource-list-item__checkbox-icon"},this.checked&&t("swirl-icon-check-strong",null)))),h&&t("span",{key:"01e471d2bddbb73eab1f662e6d77f6c24346db24",class:"resource-list-item__meta"},this.meta&&t("span",{key:"605ecded4280fc4fcc8c8c34465c92ada7f7994a",class:"resource-list-item__meta-text"},this.meta),t("span",{key:"62a7a5eb61daefd535d185751b47900327bf6e3b",class:"resource-list-item__badges"},t("slot",{key:"75b2eeb4bc67720538c5e210956bbe92503d31d5",name:"badges"}))),t("span",{key:"f614f7fb62d1b0cbc3f8caa0d843cfb41d516b5e",class:"resource-list-item__control",onClick:this.onControlClick},t("slot",{key:"dcec9e53e1f37a17412b8559599681db06ed8dbf",name:"control"})),d&&t("swirl-popover-trigger",{key:"708eef8ebfe0d44f0204cad744f9ecf52b7bfaff",swirlPopover:this.menuTriggerId},t("swirl-button",{key:"b24284ec68b5d21833877c50b8f48cf9d5a28279","aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&t("button",{key:"dbceebaa858fc28aef63c2117d14047784db4c85","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},t("swirl-icon-drag-handle",{key:"a9d5a80c2e028e47f2563b4beb8867a205f3e1f6",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__checkbox:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(     --swirl-resource-list-item-background-hovered   );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 0.75rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-8)}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;left:calc(var(--s-space-16) - var(--s-space-2));display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}button.resource-list-item__checkbox.sc-swirl-resource-list-item{margin:0;padding:0;color:inherit;background:none;font:inherit;cursor:pointer;pointer-events:auto}button.resource-list-item__checkbox.sc-swirl-resource-list-item::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-8))}button.resource-list-item__checkbox.sc-swirl-resource-list-item:focus-visible{outline:none;box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checkboxLabel:[1,"checkbox-label"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],rel:[1],selectable:[4],selectionMode:[1,"selection-mode"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]},[[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]]]),b=h,w=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),h);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{b as SwirlResourceListItem,w as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as r}from"./swirl-separator2.js";import{d as c}from"./swirl-stack2.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"2d3fedf2fcef3ff55a1c5ddcd3768dc53e89db64"},this.hasSeparator&&t("swirl-separator",{key:"42499ffe3a517ee4bb6d5c1bc900664d7e62aaf6",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"de89f87ceac043a67bf267ac8bdc00a0f1705e7c","aria-labelledby":"label",role:e},t("span",{key:"82c88a4160ba416ed87692bc56fd62b9a720a5a9",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"d3b4d4248610a617e24d83ecbcce7a5bf6b7c2d5",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"a1a8fa736ea3c9008c0311506ad0b7d2509cd5bd"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),o=l,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(a(e))||customElements.define(a(e),l);break;case"swirl-separator":customElements.get(a(e))||r();break;case"swirl-stack":customElements.get(a(e))||c()}}))};export{o as SwirlResourceListSection,n as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./swirl-separator2.js";import{d as l}from"./swirl-stack2.js";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"3740b95541b1b3ca540d43415249eb58ddd6032f"},this.hasSeparator&&t("swirl-separator",{key:"76eaeeb1d8e2615fd0a6231897dabd7e0f50497d",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"23da1de9d21c713f33c8b632de5d8d60985c58b3","aria-labelledby":"label",role:e},t("span",{key:"ac37c95dbfd495911519d87125a079507c1f709c",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"470c908a527bfa3e875a8e082b7a764c4ed8c7c3",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"1a70eb69f9d271a14317dd1a5395695bde33de0b"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=o,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(r(e))||customElements.define(r(e),o);break;case"swirl-separator":customElements.get(r(e))||a();break;case"swirl-stack":customElements.get(r(e))||l()}}))};export{c as SwirlResourceListSection,n as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{d as o}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.semantics="grid",this.spacing="0",this.listId=crypto.randomUUID(),this.focusedIndex=0,this.componentLoaded=!1,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s||!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code||"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")||(t.preventDefault(),this.stopDrag(this.dragging))}}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState())}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState(),this.setupDragDrop(),this.setSectionSpacingAndSeparator(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect(),this.controllingElement?.removeEventListener("keydown",this.onKeyDown),this.removeToggleDragListeners()}observeSlotChanges(){this.observer?.disconnect(),this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState(),this.setSectionSpacingAndSeparator()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}collectItems(){this.removeToggleDragListeners(),this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(this.controllingElement.setAttribute("aria-controls",this.listId),this.controllingElement.setAttribute("role","combobox"),this.controllingElement.setAttribute("aria-autocomplete","list"),this.controllingElement.addEventListener("keydown",this.onKeyDown))}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=a.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t||this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"752bb4d96c91e44fde683aea0f053325d7636699",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"efd82ef5905163ff18a85d4a5cef3571975d3823",role:"alert"},this.assistiveText),e("swirl-box",{key:"492739979774568556b704fe8bdc64bfd0f63930",paddingBlockEnd:this.paddingBlockEnd??this.padding,paddingBlockStart:this.paddingBlockStart??this.padding,paddingInlineEnd:this.paddingInlineEnd??this.padding??"8",paddingInlineStart:this.paddingInlineStart??this.padding??"8"},e("swirl-stack",{key:"ffa5d7a9b5cae3973fbd86baf396a67a148c71d4","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"1c40609ce4a4a549f4611946560846bb64283aaf"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),c=d,m=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))||customElements.define(h(t),d);break;case"swirl-box":customElements.get(h(t))||o();break;case"swirl-stack":customElements.get(h(t))||l();break;case"swirl-visually-hidden":customElements.get(h(t))||n()}}))};export{c as SwirlResourceList,m as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{d as o}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.semantics="grid",this.spacing="0",this.listId=crypto.randomUUID(),this.focusedIndex=0,this.componentLoaded=!1,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s||!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code||"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")||(t.preventDefault(),this.stopDrag(this.dragging))}}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState())}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState(),this.setupDragDrop(),this.setSectionSpacingAndSeparator(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect(),this.controllingElement?.removeEventListener("keydown",this.onKeyDown),this.removeToggleDragListeners()}observeSlotChanges(){this.observer?.disconnect(),this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState(),this.setSectionSpacingAndSeparator()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}collectItems(){this.removeToggleDragListeners(),this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(this.controllingElement.setAttribute("aria-controls",this.listId),this.controllingElement.setAttribute("role","combobox"),this.controllingElement.setAttribute("aria-autocomplete","list"),this.controllingElement.addEventListener("keydown",this.onKeyDown))}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=a.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t||this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"2aedc68cb6c71b3c3249cb7e42249796ca99adf9",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"54da56764417cac816bc7b832382b5bfa5c3085c",role:"alert"},this.assistiveText),e("swirl-box",{key:"22d070cf477f33a7e8d09f8f58b18467879b7059",paddingBlockEnd:this.paddingBlockEnd??this.padding,paddingBlockStart:this.paddingBlockStart??this.padding,paddingInlineEnd:this.paddingInlineEnd??this.padding??"8",paddingInlineStart:this.paddingInlineStart??this.padding??"8"},e("swirl-stack",{key:"b6d3859f853f0298ec81fac7df95f6073e04dbbd","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"f2dbadf6b161374cb2e7e37fbf159d5a6ce4ccf1"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),d=c,m=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))||customElements.define(h(t),c);break;case"swirl-box":customElements.get(h(t))||o();break;case"swirl-stack":customElements.get(h(t))||l();break;case"swirl-visually-hidden":customElements.get(h(t))||n()}}))};export{d as SwirlResourceList,m as defineCustomElement}

package/dist/components/swirl-search.js

@@ -1 +1 @@
-import{proxyCustomElement as s,HTMLElement as e,createEvent as r,h as a,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as o}from"./swirl-icon-cancel2.js";import{d as l}from"./swirl-icon-search2.js";const n=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.clear=r(this,"clear",7),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.inputInput=r(this,"inputInput",7),this.valueChange=r(this,"valueChange",7),this.clearButtonLabel="Clear search term",this.placeholder="Search …",this.variant="filled",this.clearable=!0,this.mediaQueryUnsubscribe=()=>{},this.handleClear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit(""),this.clear.emit()},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((s=>{this.forceIconProps(s)})),this.autoFocus&&setTimeout((()=>{this.input.focus()}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(s){if(!this.iconEl)return;const e=this.iconEl.children[0];e?.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code||!s.ctrlKey&&!s.metaKey||this.input.focus()}render(){const s=t("search","search--variant-"+this.variant,{"search--disabled":this.disabled});return a(i,{key:"8e28d7e0f0fe00e19a90073b403290cd429200ec"},a("span",{key:"1f2280a34872bcd9584d492b929fe4f1f55df627",class:s,ref:s=>this.iconEl=s},a("swirl-icon-search",{key:"a57e2f88aad434366e95a4fa53e6cb520e9c8499","aria-hidden":"true",class:"search__icon"}),a("input",{key:"8b68769aa785f032a7890f682ad7eaa9c3a8b6ed","aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&this.clearable&&a("button",{key:"114afb55daf47751877f24c2abc915dc2cc0c456","aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.handleClear,type:"button"},a("swirl-icon-cancel",{key:"2986ed718392276fe3757c72d452d943a886c3d9"}))))}static get style(){return".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}"}},[2,"swirl-search",{autoFocus:[4,"auto-focus"],clearButtonLabel:[1,"clear-button-label"],disabled:[4],inputName:[1,"input-name"],inputId:[1,"input-id"],label:[1],placeholder:[1],value:[1025],variant:[1],clearable:[4]},[[8,"keydown","onKeyDown"]]]),d=n,u=function(){"undefined"!=typeof customElements&&["swirl-search","swirl-icon-cancel","swirl-icon-search"].forEach((s=>{switch(s){case"swirl-search":customElements.get(c(s))||customElements.define(c(s),n);break;case"swirl-icon-cancel":customElements.get(c(s))||o();break;case"swirl-icon-search":customElements.get(c(s))||l()}}))};export{d as SwirlSearch,u as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as e,createEvent as r,h as a,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as o}from"./swirl-icon-cancel2.js";import{d as l}from"./swirl-icon-search2.js";const n=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.clear=r(this,"clear",7),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.inputInput=r(this,"inputInput",7),this.valueChange=r(this,"valueChange",7),this.clearButtonLabel="Clear search term",this.placeholder="Search …",this.variant="filled",this.clearable=!0,this.mediaQueryUnsubscribe=()=>{},this.handleClear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit(""),this.clear.emit()},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((s=>{this.forceIconProps(s)})),this.autoFocus&&setTimeout((()=>{this.input.focus()}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(s){if(!this.iconEl)return;const e=this.iconEl.children[0];e?.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code||!s.ctrlKey&&!s.metaKey||this.input.focus()}render(){const s=t("search","search--variant-"+this.variant,{"search--disabled":this.disabled});return a(i,{key:"e81efc90b3d6a499688011221cc2a15c6f792dc2"},a("span",{key:"b7790e867c09bf68ffe59ec8d28f3880d4e8545a",class:s,ref:s=>this.iconEl=s},a("swirl-icon-search",{key:"dbda6b7c55171ee6c1d70d2eb12d42ed0158f10c","aria-hidden":"true",class:"search__icon"}),a("input",{key:"4cebbf2d5e9543728453055bfed8a6d94f6bd935","aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&this.clearable&&a("button",{key:"a471b4e873ed08cf152c9b60fef8f36df2bb6b65","aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.handleClear,type:"button"},a("swirl-icon-cancel",{key:"c418cfeddcadecbb411e72e5a66dd00ca3a46679"}))))}static get style(){return".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}"}},[2,"swirl-search",{autoFocus:[4,"auto-focus"],clearButtonLabel:[1,"clear-button-label"],disabled:[4],inputName:[1,"input-name"],inputId:[1,"input-id"],label:[1],placeholder:[1],value:[1025],variant:[1],clearable:[4]},[[8,"keydown","onKeyDown"]]]),d=n,u=function(){"undefined"!=typeof customElements&&["swirl-search","swirl-icon-cancel","swirl-icon-search"].forEach((s=>{switch(s){case"swirl-search":customElements.get(c(s))||customElements.define(c(s),n);break;case"swirl-icon-cancel":customElements.get(c(s))||o();break;case"swirl-icon-search":customElements.get(c(s))||l()}}))};export{d as SwirlSearch,u as defineCustomElement}

package/dist/components/swirl-select.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as t,h as i,Host as l,transformTag as c}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{q as a}from"./utils.js";import{d as o}from"./swirl-icon-check-small2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as h}from"./swirl-icon-close2.js";import{d}from"./swirl-icon-drag-handle2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as w}from"./swirl-icon-expand-more2.js";import{d as m}from"./swirl-icon-search2.js";import{d as u}from"./swirl-option-list2.js";import{d as f}from"./swirl-option-list-item2.js";import{d as b}from"./swirl-popover2.js";import{d as _}from"./swirl-popover-trigger2.js";import{d as v}from"./swirl-spinner2.js";import{d as g}from"./swirl-stack2.js";import{d as y}from"./swirl-tag2.js";import{d as k}from"./swirl-text2.js";import{d as x}from"./swirl-visually-hidden2.js";const E=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchChange=t(this,"searchChange",7),this.valueChange=t(this,"valueChange",7),this.allowDeselect=!0,this.emptyListLabel="No results found.",this.searchInputLabel="Search options",this.selectId=""+Math.round(1e6*Math.random()),this.options=[],this.typeaheadBuffer="",this.select=e=>{e.stopPropagation(),this.value=e.detail,this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.withSearch&&this.searchInput?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{this.searchInput&&(this.searchInput.value="",this.searchChange.emit("")),this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput?this.optionList.querySelector('[tabIndex="0"]')?.focus():this.isTypeaheadKey(e)&&(e.preventDefault(),e.stopPropagation(),this.handleTypeahead(e.key))},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)}}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect(),clearTimeout(this.typeaheadTimeout)}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}onValueChange(e,s){e?.length===s?.length&&e?.every((e=>s?.includes(e)))||this.valueChange.emit(this.value)}async selectSearchInput(){this.searchInput?.select()}async focusSearchInput(){this.searchInput?.focus()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}isTypeaheadKey(e){return e.target!==this.searchInput&&!(e.metaKey||e.ctrlKey||e.altKey)&&1===e.key.length&&" "!==e.key}handleTypeahead(e){const s=e.toLowerCase();if(clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer.length>0&&[...this.typeaheadBuffer].every((e=>e===s)))this.typeaheadBuffer+=s,this.cycleTypeahead(s);else{const e=this.typeaheadBuffer.length>1&&1===new Set(this.typeaheadBuffer).size;this.typeaheadBuffer=e?s:this.typeaheadBuffer+s,this.prefixMatchTypeahead(this.typeaheadBuffer)||(this.typeaheadBuffer=s,this.prefixMatchTypeahead(this.typeaheadBuffer))}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),500)}cycleTypeahead(e){const s=this.options.filter((e=>!e.disabled)).filter((s=>s.label?.toLowerCase().startsWith(e)));if(0===s.length)return;const t=this.getTypeaheadAnchorValue(),i=s.findIndex((e=>e.value===t));this.applyTypeaheadMatch(s[(i+1)%s.length])}prefixMatchTypeahead(e){const s=this.options.filter((e=>!e.disabled)).find((s=>s.label?.toLowerCase().startsWith(e)));return!!s&&(this.applyTypeaheadMatch(s),!0)}getTypeaheadAnchorValue(){if(this.open){const e=this.options.find((e=>e.querySelector('[role="option"][tabindex="0"]')));return e?.value}return this.value?.[this.value.length-1]}applyTypeaheadMatch(e){this.open&&this.optionList.focusItemWithValue(e.value)}getValueLabel(){return this.value?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=this.el.closest("swirl-form-control"),c=this.standalone?[-8,0]:t?.inline||"outside"===t?.labelPosition?[0,-12]:[0,-16],a=r("select","select--placement-"+this.placement,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return i(l,{key:"bd650164c4cf37b03f2c4295980f75c782ae745a",onKeyDown:this.onKeyDown},i("div",{key:"9cd9ad2549b0ad63829d8b5b8a2a651602e447b6",class:a},i("swirl-popover-trigger",{key:"4c5f4949a8e25331a7ccd6ccf75aa204227a9814",swirlPopover:this.swirlPopover,setAriaAttributes:!1},i("swirl-stack",{key:"756295bc59b173fa239526a2cd967fd9947c96d1",class:"select__value-container"},this.standalone&&i("span",{key:"81db3463dc1f27355dab96c35ca0559d3157126b","aria-hidden":"true",class:"select__resize-helper"},e),i("input",{key:"209511630e371b4b23ed290879b2cf1c60ea95e1","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),i("span",{key:"7ebfd6cd653ec41bbb7826f4877870c9c114db54",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>i("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect&&!e?.disabled})))),i("span",{key:"0e1838b3f9651da8a87b130096f12ba985c45477",class:"select__indicator"},i(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),i("swirl-popover",{key:"16d87bf0fe016fe08f7571b3dee438ea10989f07",animation:"scale-in-y",class:"select__popover",id:"select-options-"+this.selectId,label:this.label,offset:c,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&i("div",{key:"49d66b4a56e9921f8a2e9ccef83d758472243831",class:"select__search"},i("swirl-icon-search",{key:"512c0b5c357c51712ff97293facc99c2e6695ed8",class:"select__search-icon",size:20}),i("input",{key:"7cf79b0d59ef76f3e8074d57f3794ffc1ff48cec","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&i("swirl-spinner",{key:"25a0d68d4009fc37d0db556ee7a1c71f56d38401",class:"select__search-spinner",size:"s"})),i("swirl-option-list",{key:"7bc0c4467143232a81c4d7c0ec440d4bd4085042",class:"select__option-list",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&i("div",{key:"ee2a47069552cc829896dcd581490d2c8edc6bb0","aria-disabled":"true",class:"select__empty-list-label",role:"option"},i("swirl-text",{key:"887bea0bbe3aebc669b531d9d3c9a5e915a50eb7",color:"subdued",weight:"medium"},this.emptyListLabel)),i("slot",{key:"c95e6109170d160f4f6edea71264df75e48749ca",onSlotchange:this.onSlotChange})))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return'.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)));pointer-events:none}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__popover.sc-swirl-select::part(popover__scroll-container),.select__popover.sc-swirl-select [part~="popover__scroll-container"]{padding:0;overflow:hidden;display:flex;flex-direction:column}.select__popover.sc-swirl-select .select__search.sc-swirl-select{flex-shrink:0}.select__popover.sc-swirl-select .select__option-list.sc-swirl-select{padding:var(--s-space-4);overflow:auto;min-height:0}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}'}},[262,"swirl-select",{allowDeselect:[4,"allow-deselect"],disabled:[4],emptyListLabel:[1,"empty-list-label"],inline:[4],invalid:[4],label:[1],multiSelect:[4,"multi-select"],required:[4],searchInputLabel:[1,"search-input-label"],searchLoading:[4,"search-loading"],searchPlaceholder:[1,"search-placeholder"],selectId:[1,"select-id"],standalone:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1040],withSearch:[4,"with-search"],options:[32],open:[32],placement:[32],selectSearchInput:[64],focusSearchInput:[64]},[[8,"focusin","onWindowFocusIn"]],{value:[{onValueChange:0}]}]),j=E,z=function(){"undefined"!=typeof customElements&&["swirl-select","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-close","swirl-icon-drag-handle","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-search","swirl-option-list","swirl-option-list-item","swirl-popover","swirl-popover-trigger","swirl-spinner","swirl-stack","swirl-tag","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-select":customElements.get(c(e))||customElements.define(c(e),E);break;case"swirl-icon-check-small":customElements.get(c(e))||o();break;case"swirl-icon-check-strong":customElements.get(c(e))||n();break;case"swirl-icon-close":customElements.get(c(e))||h();break;case"swirl-icon-drag-handle":customElements.get(c(e))||d();break;case"swirl-icon-expand-less":customElements.get(c(e))||p();break;case"swirl-icon-expand-more":customElements.get(c(e))||w();break;case"swirl-icon-search":customElements.get(c(e))||m();break;case"swirl-option-list":customElements.get(c(e))||u();break;case"swirl-option-list-item":customElements.get(c(e))||f();break;case"swirl-popover":customElements.get(c(e))||b();break;case"swirl-popover-trigger":customElements.get(c(e))||_();break;case"swirl-spinner":customElements.get(c(e))||v();break;case"swirl-stack":customElements.get(c(e))||g();break;case"swirl-tag":customElements.get(c(e))||y();break;case"swirl-text":customElements.get(c(e))||k();break;case"swirl-visually-hidden":customElements.get(c(e))||x()}}))};export{j as SwirlSelect,z as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as t,h as i,Host as l,transformTag as c}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{q as a}from"./utils.js";import{d as o}from"./swirl-icon-check-small2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as h}from"./swirl-icon-close2.js";import{d}from"./swirl-icon-drag-handle2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as w}from"./swirl-icon-expand-more2.js";import{d as m}from"./swirl-icon-search2.js";import{d as u}from"./swirl-option-list2.js";import{d as f}from"./swirl-option-list-item2.js";import{d as _}from"./swirl-popover2.js";import{d as b}from"./swirl-popover-trigger2.js";import{d as v}from"./swirl-spinner2.js";import{d as g}from"./swirl-stack2.js";import{d as y}from"./swirl-tag2.js";import{d as k}from"./swirl-text2.js";import{d as x}from"./swirl-visually-hidden2.js";const E=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchChange=t(this,"searchChange",7),this.valueChange=t(this,"valueChange",7),this.allowDeselect=!0,this.emptyListLabel="No results found.",this.searchInputLabel="Search options",this.selectId=""+Math.round(1e6*Math.random()),this.options=[],this.typeaheadBuffer="",this.select=e=>{e.stopPropagation(),this.value=e.detail,this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.withSearch&&this.searchInput?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{this.searchInput&&(this.searchInput.value="",this.searchChange.emit("")),this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput?this.optionList.querySelector('[tabIndex="0"]')?.focus():this.isTypeaheadKey(e)&&(e.preventDefault(),e.stopPropagation(),this.handleTypeahead(e.key))},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)}}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect(),clearTimeout(this.typeaheadTimeout)}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}onValueChange(e,s){e?.length===s?.length&&e?.every((e=>s?.includes(e)))||this.valueChange.emit(this.value)}async selectSearchInput(){this.searchInput?.select()}async focusSearchInput(){this.searchInput?.focus()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}isTypeaheadKey(e){return e.target!==this.searchInput&&!(e.metaKey||e.ctrlKey||e.altKey)&&1===e.key.length&&" "!==e.key}handleTypeahead(e){const s=e.toLowerCase();if(clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer.length>0&&[...this.typeaheadBuffer].every((e=>e===s)))this.typeaheadBuffer+=s,this.cycleTypeahead(s);else{const e=this.typeaheadBuffer.length>1&&1===new Set(this.typeaheadBuffer).size;this.typeaheadBuffer=e?s:this.typeaheadBuffer+s,this.prefixMatchTypeahead(this.typeaheadBuffer)||(this.typeaheadBuffer=s,this.prefixMatchTypeahead(this.typeaheadBuffer))}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),500)}cycleTypeahead(e){const s=this.options.filter((e=>!e.disabled)).filter((s=>s.label?.toLowerCase().startsWith(e)));if(0===s.length)return;const t=this.getTypeaheadAnchorValue(),i=s.findIndex((e=>e.value===t));this.applyTypeaheadMatch(s[(i+1)%s.length])}prefixMatchTypeahead(e){const s=this.options.filter((e=>!e.disabled)).find((s=>s.label?.toLowerCase().startsWith(e)));return!!s&&(this.applyTypeaheadMatch(s),!0)}getTypeaheadAnchorValue(){if(this.open){const e=this.options.find((e=>e.querySelector('[role="option"][tabindex="0"]')));return e?.value}return this.value?.[this.value.length-1]}applyTypeaheadMatch(e){this.open&&this.optionList.focusItemWithValue(e.value)}getValueLabel(){return this.value?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=this.el.closest("swirl-form-control"),c=this.standalone?[-8,0]:t?.inline||"outside"===t?.labelPosition?[0,-12]:[0,-16],a=r("select","select--placement-"+this.placement,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return i(l,{key:"9dbf9cfb6ffe83121b2c4d2dc4e1baf64f4a2873",onKeyDown:this.onKeyDown},i("div",{key:"e2404019c938f2db166480a528f65de6fac3d937",class:a},i("swirl-popover-trigger",{key:"161f52041c92ac48a04b632340035a70bb8b336a",swirlPopover:this.swirlPopover,setAriaAttributes:!1},i("swirl-stack",{key:"c5d927547a609c565fb217995e3174f78ee1dffa",class:"select__value-container"},this.standalone&&i("span",{key:"0b632462094a30095112f77bd154952b1fee964b","aria-hidden":"true",class:"select__resize-helper"},e),i("input",{key:"389d66eed98f9c1b4ae8d817adcbf8ef8314b688","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),i("span",{key:"da4df41ca9f50ad5af33cc2e40e8284431ef4811",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>i("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect&&!e?.disabled})))),i("span",{key:"cc98de26ca16cdc93b92c1228e30e8218d8eb579",class:"select__indicator"},i(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),i("swirl-popover",{key:"9a178afb309ad1293e4c359890c26fdfcd84f6a3",animation:"scale-in-y",class:"select__popover",id:"select-options-"+this.selectId,label:this.label,offset:c,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&i("div",{key:"b22fd69f4454fffc9f02306de13a30f54075ade5",class:"select__search"},i("swirl-icon-search",{key:"0f78872ac2d72c2ac72687447003386c56d1c0ca",class:"select__search-icon",size:20}),i("input",{key:"71918c760e999fd7de2d6b45a675128ca4d5ec58","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&i("swirl-spinner",{key:"b3a39714d98982d0dad54b8f806ab7b00133abff",class:"select__search-spinner",size:"s"})),i("swirl-option-list",{key:"6ef5e6df3e406798397f26bfe6856ebd1a097135",class:"select__option-list",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&i("div",{key:"7363cb40bf07d37dc0bb1130cdf70393ed1dd987","aria-disabled":"true",class:"select__empty-list-label",role:"option"},i("swirl-text",{key:"c167dca6ff5c79fd3530991ab4627c928c066d51",color:"subdued",weight:"medium"},this.emptyListLabel)),i("slot",{key:"adb41f9740d387f20b81e8313305ac4de23e6917",onSlotchange:this.onSlotChange})))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return'.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)));pointer-events:none}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__popover.sc-swirl-select::part(popover__scroll-container),.select__popover.sc-swirl-select [part~="popover__scroll-container"]{padding:0;overflow:hidden;display:flex;flex-direction:column}.select__popover.sc-swirl-select .select__search.sc-swirl-select{flex-shrink:0}.select__popover.sc-swirl-select .select__option-list.sc-swirl-select{padding:var(--s-space-4);overflow:auto;min-height:0}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}'}},[262,"swirl-select",{allowDeselect:[4,"allow-deselect"],disabled:[4],emptyListLabel:[1,"empty-list-label"],inline:[4],invalid:[4],label:[1],multiSelect:[4,"multi-select"],required:[4],searchInputLabel:[1,"search-input-label"],searchLoading:[4,"search-loading"],searchPlaceholder:[1,"search-placeholder"],selectId:[1,"select-id"],standalone:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1040],withSearch:[4,"with-search"],options:[32],open:[32],placement:[32],selectSearchInput:[64],focusSearchInput:[64]},[[8,"focusin","onWindowFocusIn"]],{value:[{onValueChange:0}]}]),j=E,z=function(){"undefined"!=typeof customElements&&["swirl-select","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-close","swirl-icon-drag-handle","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-search","swirl-option-list","swirl-option-list-item","swirl-popover","swirl-popover-trigger","swirl-spinner","swirl-stack","swirl-tag","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-select":customElements.get(c(e))||customElements.define(c(e),E);break;case"swirl-icon-check-small":customElements.get(c(e))||o();break;case"swirl-icon-check-strong":customElements.get(c(e))||n();break;case"swirl-icon-close":customElements.get(c(e))||h();break;case"swirl-icon-drag-handle":customElements.get(c(e))||d();break;case"swirl-icon-expand-less":customElements.get(c(e))||p();break;case"swirl-icon-expand-more":customElements.get(c(e))||w();break;case"swirl-icon-search":customElements.get(c(e))||m();break;case"swirl-option-list":customElements.get(c(e))||u();break;case"swirl-option-list-item":customElements.get(c(e))||f();break;case"swirl-popover":customElements.get(c(e))||_();break;case"swirl-popover-trigger":customElements.get(c(e))||b();break;case"swirl-spinner":customElements.get(c(e))||v();break;case"swirl-stack":customElements.get(c(e))||g();break;case"swirl-tag":customElements.get(c(e))||y();break;case"swirl-text":customElements.get(c(e))||k();break;case"swirl-visually-hidden":customElements.get(c(e))||x()}}))};export{j as SwirlSelect,z as defineCustomElement}

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

@@ -1,4 +1,4 @@
-import{proxyCustomElement as e,HTMLElement as l,createEvent as a,h as t,Host as o,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{n as r}from"./utils.js";import{d as n}from"./swirl-box2.js";import{d as c}from"./swirl-button2.js";import{d}from"./swirl-icon-arrow-back2.js";import{d as u}from"./swirl-icon-arrow-forward2.js";import{d as h}from"./swirl-icon-dock-left-collapse2.js";import{d as y}from"./swirl-icon-dock-left-expand2.js";import{d as f}from"./swirl-icon-double-arrow-left2.js";import{d as v}from"./swirl-separator2.js";import{d as b}from"./swirl-stack2.js";import{d as w}from"./swirl-tooltip2.js";import{d as p}from"./swirl-visually-hidden2.js";
+import{proxyCustomElement as e,HTMLElement as l,createEvent as a,h as t,Host as o,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{n as r}from"./utils.js";import{d as n}from"./swirl-box2.js";import{d as c}from"./swirl-button2.js";import{d}from"./swirl-icon-arrow-back2.js";import{d as u}from"./swirl-icon-arrow-forward2.js";import{d as h}from"./swirl-icon-dock-left-collapse2.js";import{d as f}from"./swirl-icon-dock-left-expand2.js";import{d as y}from"./swirl-icon-double-arrow-left2.js";import{d as v}from"./swirl-separator2.js";import{d as b}from"./swirl-stack2.js";import{d as w}from"./swirl-tooltip2.js";import{d as p}from"./swirl-visually-hidden2.js";
 /*!
 * tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -8,4 +8,4 @@ var m=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hre
 * focus-trap 7.5.4
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-function B(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,t)}return a}function G(e){for(var l=1;l<arguments.length;l++){var a=null!=arguments[l]?arguments[l]:{};l%2?B(Object(a),!0).forEach((function(l){M(e,l,a[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):B(Object(a)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))}))}return e}function M(e,l,a){return(l=function(e){var l=function(e,l){if("object"!=typeof e||null===e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var t=a.call(e,l);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return e+""}(e,"string");return"symbol"==typeof l?l:l+""}(l))in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}var W=function(e){return"Tab"===(null==e?void 0:e.key)||9===(null==e?void 0:e.keyCode)},V=function(e){return W(e)&&!e.shiftKey},U=function(e){return W(e)&&e.shiftKey},Y=function(e){return setTimeout(e,0)},H=function(e,l){var a=-1;return e.every((function(e,t){return!l(e)||(a=t,!1)})),a},K=function(e){for(var l=arguments.length,a=Array(l>1?l-1:0),t=1;t<l;t++)a[t-1]=arguments[t];return"function"==typeof e?e.apply(void 0,a):e},$=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},X=[],q=function(e,l){var a,t=(null==l?void 0:l.document)||document,o=(null==l?void 0:l.trapStack)||X,s=G({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:V,isKeyBackward:U},l),i={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},r=function(e,l,a){return e&&void 0!==e[l]?e[l]:s[a||l]},n=function(e,l){var a="function"==typeof(null==l?void 0:l.composedPath)?l.composedPath():void 0;return i.containerGroups.findIndex((function(l){var t=l.container,o=l.tabbableNodes;return t.contains(e)||(null==a?void 0:a.includes(t))||o.find((function(l){return l===e}))}))},c=function(e){var l=s[e];if("function"==typeof l){for(var a=arguments.length,o=Array(a>1?a-1:0),i=1;i<a;i++)o[i-1]=arguments[i];l=l.apply(void 0,o)}if(!0===l&&(l=void 0),!l){if(void 0===l||!1===l)return l;throw Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=l;if("string"==typeof l&&!(r=t.querySelector(l)))throw Error("`".concat(e,"` as selector refers to no known node"));return r},d=function(){var e=c("initialFocus");if(!1===e)return!1;if(void 0===e||!z(e,s.tabbableOptions))if(n(t.activeElement)>=0)e=t.activeElement;else{var l=i.tabbableGroups[0];e=l&&l.firstTabbableNode||c("fallbackFocus")}if(!e)throw Error("Your focus-trap needs to have at least one focusable element");return e},u=function(){if(i.containerGroups=i.containers.map((function(e){var l=function(e,l){var a;return a=(l=l||{}).getShadowRoot?S([e],l.includeContainer,{filter:I.bind(null,l),flatten:!1,getShadowRoot:l.getShadowRoot,shadowRootFilter:D}):E(e,l.includeContainer,I.bind(null,l)),F(a)}(e,s.tabbableOptions),a=function(e,l){return(l=l||{}).getShadowRoot?S([e],l.includeContainer,{filter:O.bind(null,l),flatten:!0,getShadowRoot:l.getShadowRoot}):E(e,l.includeContainer,O.bind(null,l))}(e,s.tabbableOptions),t=l.length>0?l[0]:void 0,o=l.length>0?l[l.length-1]:void 0,i=a.find((function(e){return R(e)})),r=a.slice().reverse().find((function(e){return R(e)})),n=!!l.find((function(e){return T(e)>0}));return{container:e,tabbableNodes:l,focusableNodes:a,posTabIndexesFound:n,firstTabbableNode:t,lastTabbableNode:o,firstDomTabbableNode:i,lastDomTabbableNode:r,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],o=l.indexOf(e);return o<0?t?a.slice(a.indexOf(e)+1).find((function(e){return R(e)})):a.slice(0,a.indexOf(e)).reverse().find((function(e){return R(e)})):l[o+(t?1:-1)]}}})),i.tabbableGroups=i.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),i.tabbableGroups.length<=0&&!c("fallbackFocus"))throw Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(i.containerGroups.find((function(e){return e.posTabIndexesFound}))&&i.containerGroups.length>1)throw Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},h=function e(l){var a=l.activeElement;if(a)return a.shadowRoot&&null!==a.shadowRoot.activeElement?e(a.shadowRoot):a},y=function e(l){!1!==l&&l!==h(document)&&(l&&l.focus?(l.focus({preventScroll:!!s.preventScroll}),i.mostRecentlyFocusedNode=l,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(l)&&l.select()):e(d()))},f=function(e){var l=c("setReturnFocus",e);return l||!1!==l&&e},v=function(e){var l=e.target,a=e.event,t=e.isBackward,o=void 0!==t&&t;l=l||$(a),u();var r=null;if(i.tabbableGroups.length>0){var d=n(l,a),h=d>=0?i.containerGroups[d]:void 0;if(d<0)r=o?i.tabbableGroups[i.tabbableGroups.length-1].lastTabbableNode:i.tabbableGroups[0].firstTabbableNode;else if(o){var y=H(i.tabbableGroups,(function(e){return l===e.firstTabbableNode}));if(y<0&&(h.container===l||z(l,s.tabbableOptions)&&!R(l,s.tabbableOptions)&&!h.nextTabbableNode(l,!1))&&(y=d),y>=0){var f=i.tabbableGroups[0===y?i.tabbableGroups.length-1:y-1];r=T(l)>=0?f.lastTabbableNode:f.lastDomTabbableNode}else W(a)||(r=h.nextTabbableNode(l,!1))}else{var v=H(i.tabbableGroups,(function(e){return l===e.lastTabbableNode}));if(v<0&&(h.container===l||z(l,s.tabbableOptions)&&!R(l,s.tabbableOptions)&&!h.nextTabbableNode(l))&&(v=d),v>=0){var b=i.tabbableGroups[v===i.tabbableGroups.length-1?0:v+1];r=T(l)>=0?b.firstTabbableNode:b.firstDomTabbableNode}else W(a)||(r=h.nextTabbableNode(l))}}else r=c("fallbackFocus");return r},b=function(e){var l=$(e);n(l,e)>=0||(K(s.clickOutsideDeactivates,e)?a.deactivate({returnFocus:s.returnFocusOnDeactivate}):K(s.allowOutsideClick,e)||e.preventDefault())},w=function(e){var l=$(e),a=n(l,e)>=0;if(a||l instanceof Document)a&&(i.mostRecentlyFocusedNode=l);else{var t;e.stopImmediatePropagation();var o=!0;if(i.mostRecentlyFocusedNode)if(T(i.mostRecentlyFocusedNode)>0){var r=n(i.mostRecentlyFocusedNode),c=i.containerGroups[r].tabbableNodes;if(c.length>0){var u=c.findIndex((function(e){return e===i.mostRecentlyFocusedNode}));u>=0&&(s.isKeyForward(i.recentNavEvent)?u+1<c.length&&(t=c[u+1],o=!1):u-1>=0&&(t=c[u-1],o=!1))}}else i.containerGroups.some((function(e){return e.tabbableNodes.some((function(e){return T(e)>0}))}))||(o=!1);else o=!1;o&&(t=v({target:i.mostRecentlyFocusedNode,isBackward:s.isKeyBackward(i.recentNavEvent)})),y(t||i.mostRecentlyFocusedNode||d())}i.recentNavEvent=void 0},p=function(e){if(function(e){return"Escape"===(null==e?void 0:e.key)||"Esc"===(null==e?void 0:e.key)||27===(null==e?void 0:e.keyCode)}(e)&&!1!==K(s.escapeDeactivates,e))return e.preventDefault(),void a.deactivate();(s.isKeyForward(e)||s.isKeyBackward(e))&&function(e){var l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];i.recentNavEvent=e;var a=v({event:e,isBackward:l});a&&(W(e)&&e.preventDefault(),y(a))}(e,s.isKeyBackward(e))},m=function(e){var l=$(e);n(l,e)>=0||K(s.clickOutsideDeactivates,e)||K(s.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},g=function(){if(i.active)return function(e,l){if(e.length>0){var a=e[e.length-1];a!==l&&a.pause()}var t=e.indexOf(l);-1===t||e.splice(t,1),e.push(l)}(o,a),i.delayInitialFocusTimer=s.delayInitialFocus?Y((function(){y(d())})):y(d()),t.addEventListener("focusin",w,!0),t.addEventListener("mousedown",b,{capture:!0,passive:!1}),t.addEventListener("touchstart",b,{capture:!0,passive:!1}),t.addEventListener("click",m,{capture:!0,passive:!1}),t.addEventListener("keydown",p,{capture:!0,passive:!1}),a},_=function(){if(i.active)return t.removeEventListener("focusin",w,!0),t.removeEventListener("mousedown",b,!0),t.removeEventListener("touchstart",b,!0),t.removeEventListener("click",m,!0),t.removeEventListener("keydown",p,!0),a},k="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===i.mostRecentlyFocusedNode}))}))&&y(d())})):void 0,x=function(){k&&(k.disconnect(),i.active&&!i.paused&&i.containers.map((function(e){k.observe(e,{subtree:!0,childList:!0})})))};return(a={get active(){return i.active},get paused(){return i.paused},activate:function(e){if(i.active)return this;var l=r(e,"onActivate"),a=r(e,"onPostActivate"),o=r(e,"checkCanFocusTrap");o||u(),i.active=!0,i.paused=!1,i.nodeFocusedBeforeActivation=t.activeElement,null==l||l();var s=function(){o&&u(),g(),x(),null==a||a()};return o?(o(i.containers.concat()).then(s,s),this):(s(),this)},deactivate:function(e){if(!i.active)return this;var l=G({onDeactivate:s.onDeactivate,onPostDeactivate:s.onPostDeactivate,checkCanReturnFocus:s.checkCanReturnFocus},e);clearTimeout(i.delayInitialFocusTimer),i.delayInitialFocusTimer=void 0,_(),i.active=!1,i.paused=!1,x(),function(e,l){var a=e.indexOf(l);-1!==a&&e.splice(a,1),e.length>0&&e[e.length-1].unpause()}(o,a);var t=r(l,"onDeactivate"),n=r(l,"onPostDeactivate"),c=r(l,"checkCanReturnFocus"),d=r(l,"returnFocus","returnFocusOnDeactivate");null==t||t();var u=function(){Y((function(){d&&y(f(i.nodeFocusedBeforeActivation)),null==n||n()}))};return d&&c?(c(f(i.nodeFocusedBeforeActivation)).then(u,u),this):(u(),this)},pause:function(e){if(i.paused||!i.active)return this;var l=r(e,"onPause"),a=r(e,"onPostPause");return i.paused=!0,null==l||l(),_(),x(),null==a||a(),this},unpause:function(e){if(!i.paused||!i.active)return this;var l=r(e,"onUnpause"),a=r(e,"onPostUnpause");return i.paused=!1,null==l||l(),u(),g(),x(),null==a||a(),this},updateContainerElements:function(e){var l=[].concat(e).filter(Boolean);return i.containers=l.map((function(e){return"string"==typeof e?t.querySelector(e):e})),i.active&&u(),x(),this}}).updateContainerElements(e),a};const J="SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE",Q="SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE",Z="SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE",ee=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.historyBackClick=a(this,"historyBackClick",7),this.historyForwardClick=a(this,"historyForwardClick",7),this.skipLinkClick=a(this,"skipLinkClick",7),this.browserBackButtonLabel="Navigate back",this.browserForwardButtonLabel="Navigate forward",this.collapseNavigationButtonLabel="Collapse navigation",this.enableSecondaryNavGridLayout=!0,this.secondaryNavGridLayoutVariant="tiled",this.expandNavigationButtonLabel="Expand navigation",this.gridNavLayoutToggleLabel="Grid",this.hideMobileNavigationButtonLabel="Close navigation",this.listNavLayoutToggleLabel="List",this.navigationLabel="Main",this.secondaryNavCollapseLabel="Show less",this.secondaryNavExpandLabel="Show more",this.skipLinkLabel="Skip to main content",this.isDesktopViewport=!0,this.secondaryNavView="list",this.collectNavItems=()=>{this.mainNavItems=Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item")),this.secondaryNavItems=Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item")),this.toggleNavItemLabels(),this.setSecondaryNavItemsTiled()},this.toggleSecondaryNavView=e=>{e.stopPropagation(),this.secondaryNavView="grid"===this.secondaryNavView?"list":"grid",this.setSecondaryNavItemsTiled(),localStorage.setItem(Q,this.secondaryNavView+"")},this.toggleSecondaryNavCollapse=e=>{e.stopPropagation(),this.secondaryNavCollapsed=!this.secondaryNavCollapsed,localStorage.setItem(J,this.secondaryNavCollapsed+"")},this.onNavigationToggleClick=()=>{this.navigationCollapsed=!this.navigationCollapsed},this.onNavigationClick=()=>{this.hideMobileNavigation()}}componentWillLoad(){console.warn('[Swirl] The "swirl-shell-layout" component is deprecated and will be removed in the next major release.'),this.isDesktopViewport=r(),this.collectNavItems();const e="true"===localStorage.getItem(Z);this.navigationCollapsed=e,this.restoreSecondaryNavState()}componentDidLoad(){this.focusTrap=q(this.navElement,{allowOutsideClick:!0,tabbableOptions:{getShadowRoot:e=>e.shadowRoot}}),this.collectNavItems(),this.navMutationObserver=new MutationObserver((()=>{this.collectNavItems()})),this.navMutationObserver.observe(this.navElement,{childList:!0,subtree:!0})}componentDidRender(){this.focusTrap?.updateContainerElements(this.navElement)}disconnectedCallback(){this.focusTrap?.deactivate(),this.navMutationObserver?.disconnect()}onWindowKeyDown(e){"Escape"===e.key&&this.mobileNavigationActive&&this.hideMobileNavigation()}watchEnableSecondaryNavGridLayout(){this.restoreSecondaryNavState()}watchMobileNavigationState(){this.mobileNavigationActive?setTimeout((()=>{this.focusTrap.activate()}),200):this.focusTrap.deactivate()}watchNavigationCollapsed(){localStorage.setItem(Z,this.navigationCollapsed+""),this.toggleNavItemLabels(),this.setSecondaryNavItemsTiled()}onWindowResize(){this.isDesktopViewport!==r()&&(this.isDesktopViewport=r(),this.collectNavItems())}async showMobileNavigation(){this.mobileNavigationActive=!0,this.collectNavItems()}async hideMobileNavigation(){this.mobileNavigationActive=!1,this.toggleNavItemLabels()}toggleNavItemLabels(){[...this.secondaryNavItems,...this.mainNavItems].forEach((e=>{e.hideLabel=this.navigationCollapsed&&this.isDesktopViewport}))}setSecondaryNavItemsTiled(){this.secondaryNavItems.forEach((e=>{e.variant=this.enableSecondaryNavGridLayout&&("grid"===this.secondaryNavView||this.navigationCollapsed&&this.isDesktopViewport)?this.secondaryNavGridLayoutVariant:"default"}))}restoreSecondaryNavState(){if(this.enableSecondaryNavGridLayout){const e="true"===localStorage.getItem(J);this.secondaryNavCollapsed=e;const l=localStorage.getItem(Q);this.secondaryNavView=l}}render(){const e=this.navigationCollapsed&&this.isDesktopViewport,l=!!this.el.querySelector("[slot='secondary-nav']"),a=i("shell-layout",{"shell-layout--branded-header":this.brandedHeader,"shell-layout--secondary-nav-collapsed":this.secondaryNavCollapsed,"shell-layout--has-secondary-nav":l,"shell-layout--mobile-navigation-active":this.mobileNavigationActive,"shell-layout--navigation-collapsed":e});return t(o,{key:"8ab2509d3640e6ff5ddf7644c84d52a9da818499"},t("div",{key:"ae61dbb833096a829df0117aa735c1f344b753b0",class:a},t("header",{key:"2456b4b9dd7adf90bcb8e8030068b6dc9b1a2c48",class:"shell-layout__header","data-tauri-drag-region":"true"},t("button",{key:"c440272c0cb9cb2cc05b64480dc0464b0950bae0",class:"shell-layout__skip-link",onClick:this.skipLinkClick.emit,type:"button"},this.skipLinkLabel),t("div",{key:"803658c982ac00d9b21ef7f6cd982edbcced005b",class:"shell-layout__header-left"},t("swirl-tooltip",{key:"ea9ecdfe7216719082b0f34d9cf8615b1dadaa27",content:this.navigationCollapsed?this.expandNavigationButtonLabel:this.collapseNavigationButtonLabel,delay:100,position:"right"},t("button",{key:"28518af9a719bd23993bab24c7549b26c41316d3",class:"shell-layout__header-tool",onClick:this.onNavigationToggleClick,type:"button"},t(this.navigationCollapsed?"swirl-icon-dock-left-expand":"swirl-icon-dock-left-collapse",{size:20}),t("swirl-visually-hidden",{key:"5893bfd1dbb2182af0cbe16116251270a71bce47"},this.navigationCollapsed?this.expandNavigationButtonLabel:this.collapseNavigationButtonLabel))),t("a",{key:"cd11ecb0a4b78a7254b765a6c47c694c819d754b",class:"shell-layout__header-tool",onClick:this.historyBackClick.emit,href:"javascript:history.back()"},t("swirl-icon-arrow-back",{key:"fb0095390d4d6b2d9ce123d1e62f0fbdeb045125",size:20}),t("swirl-visually-hidden",{key:"7eefa10bec70a97cb8c6659034b67fc233371998"},this.browserBackButtonLabel)),t("a",{key:"e4b9a6165674bed6f41e984db15e746ce2bfc5c5",class:"shell-layout__header-tool",onClick:this.historyForwardClick.emit,href:"javascript:history.forward()"},t("swirl-icon-arrow-forward",{key:"916fb846cdec66cb68d7325a99008676ba6810ae",size:20}),t("swirl-visually-hidden",{key:"8319bdfbce89451ca5245dace1b22d8282f1d384"},this.browserForwardButtonLabel)),t("slot",{key:"6c93bb6fb16b11dd85d524a94750b1a56c6ae22d",name:"left-header-tools"})),t("div",{key:"286f7489dc541a8d4c811ef14c1367bfd3e332b1",class:"shell-layout__logo"},t("slot",{key:"c5102079ac7b2be42c56d9df910be8f50516dde9",name:"logo"})),t("div",{key:"89cbd30fc8abee2f582a5b09e10288b7caf9b628",class:"shell-layout__header-right"},t("slot",{key:"2e47c1364a63b1a89aa5dbe7646977b48b1443b5",name:"right-header-tools"}),t("slot",{key:"fa411ae0cf28ce5e66cb17c332ca0c6c175effc1",name:"avatar"}))),t("div",{key:"862d113b89fe0667bae68c6c32a39196f4e3a432",class:"shell-layout__mobile-nav-backdrop",onClick:this.onNavigationClick}),t("nav",{key:"4ebd16eb495762ddad2d13412aa39e70a5728907","aria-labelledby":"main-navigation-label",class:"shell-layout__nav",onClick:this.onNavigationClick,ref:e=>this.navElement=e},t("div",{key:"89b5b7e663252be56bfed87debff40af1553ee2f",class:"shell-layout__mobile-header"},t("slot",{key:"68a410d455e01a6820968aca84da34d2e6dcea45",name:"mobile-logo"}),t("div",{key:"57d0d71c4c6327d828d62bb73804c72e1dc32ff2",class:"shell-layout__mobile-header-tools"},t("slot",{key:"86a580d9e5b943a89dc30228a093aebbb327440d",name:"mobile-header-tools"}),t("button",{key:"8116fb2c2f2c8543e6aac0e1251ebd19cbd862da",class:"shell-layout__header-tool",type:"button"},t("swirl-icon-double-arrow-left",{key:"ca49ac7ce96536af1d9d4674db43278ad11a030c",size:20}),t("swirl-visually-hidden",{key:"4df0f52299f6c922863d2730f65d18ae63500045"},this.hideMobileNavigationButtonLabel)))),t("div",{key:"a250261dfdc43481e56aa8f0a56929f0121aca30",class:"shell-layout__nav-body"},t("swirl-visually-hidden",{key:"e427a5a9a1abf3b83522e258e1680175f983d699"},t("span",{key:"0804d9124772472504471320459a315b582ff0da",id:"main-navigation-label"},this.navigationLabel)),t("slot",{key:"81f79908deba3e155cb770e9ed804260807b3675",name:"nav",onSlotchange:this.collectNavItems}),t("div",{key:"7bf92d40cdd8a7c86a23b53a523e56068a021319",class:"shell-layout__secondary-nav"},t("swirl-separator",{key:"daf96d787fbe84d5bcb840d8964a3311d185e1d8",color:"strong",spacing:"16"}),this.enableSecondaryNavGridLayout&&t("swirl-box",{key:"24abed6e62a5f73769c7760999bfe0dd80883a3c",paddingBlockEnd:"16"},t("swirl-stack",{key:"2eb7f00c2bb9ae54dfe86504728bf222f23d91c8",justify:e?"center":"space-between",orientation:"horizontal"},t("swirl-button",{key:"c35406894c7178bdb7ae6896b7bb23c8954b3dac",hideLabel:e,icon:this.secondaryNavCollapsed?"<swirl-icon-expand-more></swirl-icon-expand-more>":"<swirl-icon-expand-less></swirl-icon-expand-less>",label:this.secondaryNavCollapsed?this.secondaryNavExpandLabel:this.secondaryNavCollapseLabel,onClick:this.toggleSecondaryNavCollapse,variant:"plain"}),!e&&!this.secondaryNavCollapsed&&t("swirl-button",{key:"034105feb112d6565151374fe46c09033929f805",icon:"grid"===this.secondaryNavView?"<swirl-icon-menu></swirl-icon-menu>":"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",iconPosition:"end",label:"grid"===this.secondaryNavView?this.gridNavLayoutToggleLabel:this.listNavLayoutToggleLabel,onClick:this.toggleSecondaryNavView,variant:"plain"}))),t("div",{key:"297358c0432f5c6f9cba83fdb19ecb7fce543a8f",class:{["shell-layout__secondary-nav-items--"+this.secondaryNavGridLayoutVariant]:!0,"shell-layout__secondary-nav-items":!0,"shell-layout__secondary-nav-items--grid-view":this.enableSecondaryNavGridLayout&&"grid"===this.secondaryNavView}},t("slot",{key:"277d58ee65b127675bb42b17d7e507bf11bfee96",name:"secondary-nav",onSlotchange:this.collectNavItems}))))),t("main",{key:"1be0deefac85edc50478bf255fa3ff861183d11f",class:"shell-layout__main",id:"main-content"},t("slot",{key:"0349633ab62c8e360213b23cfea3da83f0ddd62c"}))))}get el(){return this}static get watchers(){return{enableSecondaryNavGridLayout:[{watchEnableSecondaryNavGridLayout:0}],mobileNavigationActive:[{watchMobileNavigationState:0}],navigationCollapsed:[{watchNavigationCollapsed:0}]}}static get style(){return'.sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:"nav main"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:"header header header"       "nav main sidebar"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-state-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-state-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-state-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-state-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}'}},[262,"swirl-shell-layout",{brandedHeader:[4,"branded-header"],browserBackButtonLabel:[1,"browser-back-button-label"],browserForwardButtonLabel:[1,"browser-forward-button-label"],collapseNavigationButtonLabel:[1,"collapse-navigation-button-label"],enableSecondaryNavGridLayout:[4,"enable-secondary-nav-grid-layout"],secondaryNavGridLayoutVariant:[1,"secondary-nav-grid-layout-variant"],expandNavigationButtonLabel:[1,"expand-navigation-button-label"],gridNavLayoutToggleLabel:[1,"grid-nav-layout-toggle-label"],hideMobileNavigationButtonLabel:[1,"hide-mobile-navigation-button-label"],listNavLayoutToggleLabel:[1,"list-nav-layout-toggle-label"],navigationLabel:[1,"navigation-label"],secondaryNavCollapseLabel:[1,"secondary-nav-collapse-label"],secondaryNavExpandLabel:[1,"secondary-nav-expand-label"],skipLinkLabel:[1,"skip-link-label"],isDesktopViewport:[32],mobileNavigationActive:[32],navigationCollapsed:[32],secondaryNavCollapsed:[32],secondaryNavView:[32],showMobileNavigation:[64],hideMobileNavigation:[64]},[[8,"keydown","onWindowKeyDown"],[9,"resize","onWindowResize"]],{enableSecondaryNavGridLayout:[{watchEnableSecondaryNavGridLayout:0}],mobileNavigationActive:[{watchMobileNavigationState:0}],navigationCollapsed:[{watchNavigationCollapsed:0}]}]),le=ee,ae=function(){"undefined"!=typeof customElements&&["swirl-shell-layout","swirl-box","swirl-button","swirl-icon-arrow-back","swirl-icon-arrow-forward","swirl-icon-dock-left-collapse","swirl-icon-dock-left-expand","swirl-icon-double-arrow-left","swirl-separator","swirl-stack","swirl-tooltip","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-shell-layout":customElements.get(s(e))||customElements.define(s(e),ee);break;case"swirl-box":customElements.get(s(e))||n();break;case"swirl-button":customElements.get(s(e))||c();break;case"swirl-icon-arrow-back":customElements.get(s(e))||d();break;case"swirl-icon-arrow-forward":customElements.get(s(e))||u();break;case"swirl-icon-dock-left-collapse":customElements.get(s(e))||h();break;case"swirl-icon-dock-left-expand":customElements.get(s(e))||y();break;case"swirl-icon-double-arrow-left":customElements.get(s(e))||f();break;case"swirl-separator":customElements.get(s(e))||v();break;case"swirl-stack":customElements.get(s(e))||b();break;case"swirl-tooltip":customElements.get(s(e))||w();break;case"swirl-visually-hidden":customElements.get(s(e))||p()}}))};export{le as SwirlShellLayout,ae as defineCustomElement}
+function B(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,t)}return a}function G(e){for(var l=1;l<arguments.length;l++){var a=null!=arguments[l]?arguments[l]:{};l%2?B(Object(a),!0).forEach((function(l){M(e,l,a[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):B(Object(a)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))}))}return e}function M(e,l,a){return(l=function(e){var l=function(e,l){if("object"!=typeof e||null===e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var t=a.call(e,l);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return e+""}(e,"string");return"symbol"==typeof l?l:l+""}(l))in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}var W=function(e){return"Tab"===(null==e?void 0:e.key)||9===(null==e?void 0:e.keyCode)},V=function(e){return W(e)&&!e.shiftKey},U=function(e){return W(e)&&e.shiftKey},Y=function(e){return setTimeout(e,0)},H=function(e,l){var a=-1;return e.every((function(e,t){return!l(e)||(a=t,!1)})),a},K=function(e){for(var l=arguments.length,a=Array(l>1?l-1:0),t=1;t<l;t++)a[t-1]=arguments[t];return"function"==typeof e?e.apply(void 0,a):e},$=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},X=[],q=function(e,l){var a,t=(null==l?void 0:l.document)||document,o=(null==l?void 0:l.trapStack)||X,s=G({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:V,isKeyBackward:U},l),i={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},r=function(e,l,a){return e&&void 0!==e[l]?e[l]:s[a||l]},n=function(e,l){var a="function"==typeof(null==l?void 0:l.composedPath)?l.composedPath():void 0;return i.containerGroups.findIndex((function(l){var t=l.container,o=l.tabbableNodes;return t.contains(e)||(null==a?void 0:a.includes(t))||o.find((function(l){return l===e}))}))},c=function(e){var l=s[e];if("function"==typeof l){for(var a=arguments.length,o=Array(a>1?a-1:0),i=1;i<a;i++)o[i-1]=arguments[i];l=l.apply(void 0,o)}if(!0===l&&(l=void 0),!l){if(void 0===l||!1===l)return l;throw Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=l;if("string"==typeof l&&!(r=t.querySelector(l)))throw Error("`".concat(e,"` as selector refers to no known node"));return r},d=function(){var e=c("initialFocus");if(!1===e)return!1;if(void 0===e||!z(e,s.tabbableOptions))if(n(t.activeElement)>=0)e=t.activeElement;else{var l=i.tabbableGroups[0];e=l&&l.firstTabbableNode||c("fallbackFocus")}if(!e)throw Error("Your focus-trap needs to have at least one focusable element");return e},u=function(){if(i.containerGroups=i.containers.map((function(e){var l=function(e,l){var a;return a=(l=l||{}).getShadowRoot?S([e],l.includeContainer,{filter:I.bind(null,l),flatten:!1,getShadowRoot:l.getShadowRoot,shadowRootFilter:D}):E(e,l.includeContainer,I.bind(null,l)),F(a)}(e,s.tabbableOptions),a=function(e,l){return(l=l||{}).getShadowRoot?S([e],l.includeContainer,{filter:O.bind(null,l),flatten:!0,getShadowRoot:l.getShadowRoot}):E(e,l.includeContainer,O.bind(null,l))}(e,s.tabbableOptions),t=l.length>0?l[0]:void 0,o=l.length>0?l[l.length-1]:void 0,i=a.find((function(e){return R(e)})),r=a.slice().reverse().find((function(e){return R(e)})),n=!!l.find((function(e){return T(e)>0}));return{container:e,tabbableNodes:l,focusableNodes:a,posTabIndexesFound:n,firstTabbableNode:t,lastTabbableNode:o,firstDomTabbableNode:i,lastDomTabbableNode:r,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],o=l.indexOf(e);return o<0?t?a.slice(a.indexOf(e)+1).find((function(e){return R(e)})):a.slice(0,a.indexOf(e)).reverse().find((function(e){return R(e)})):l[o+(t?1:-1)]}}})),i.tabbableGroups=i.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),i.tabbableGroups.length<=0&&!c("fallbackFocus"))throw Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(i.containerGroups.find((function(e){return e.posTabIndexesFound}))&&i.containerGroups.length>1)throw Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},h=function e(l){var a=l.activeElement;if(a)return a.shadowRoot&&null!==a.shadowRoot.activeElement?e(a.shadowRoot):a},f=function e(l){!1!==l&&l!==h(document)&&(l&&l.focus?(l.focus({preventScroll:!!s.preventScroll}),i.mostRecentlyFocusedNode=l,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(l)&&l.select()):e(d()))},y=function(e){var l=c("setReturnFocus",e);return l||!1!==l&&e},v=function(e){var l=e.target,a=e.event,t=e.isBackward,o=void 0!==t&&t;l=l||$(a),u();var r=null;if(i.tabbableGroups.length>0){var d=n(l,a),h=d>=0?i.containerGroups[d]:void 0;if(d<0)r=o?i.tabbableGroups[i.tabbableGroups.length-1].lastTabbableNode:i.tabbableGroups[0].firstTabbableNode;else if(o){var f=H(i.tabbableGroups,(function(e){return l===e.firstTabbableNode}));if(f<0&&(h.container===l||z(l,s.tabbableOptions)&&!R(l,s.tabbableOptions)&&!h.nextTabbableNode(l,!1))&&(f=d),f>=0){var y=i.tabbableGroups[0===f?i.tabbableGroups.length-1:f-1];r=T(l)>=0?y.lastTabbableNode:y.lastDomTabbableNode}else W(a)||(r=h.nextTabbableNode(l,!1))}else{var v=H(i.tabbableGroups,(function(e){return l===e.lastTabbableNode}));if(v<0&&(h.container===l||z(l,s.tabbableOptions)&&!R(l,s.tabbableOptions)&&!h.nextTabbableNode(l))&&(v=d),v>=0){var b=i.tabbableGroups[v===i.tabbableGroups.length-1?0:v+1];r=T(l)>=0?b.firstTabbableNode:b.firstDomTabbableNode}else W(a)||(r=h.nextTabbableNode(l))}}else r=c("fallbackFocus");return r},b=function(e){var l=$(e);n(l,e)>=0||(K(s.clickOutsideDeactivates,e)?a.deactivate({returnFocus:s.returnFocusOnDeactivate}):K(s.allowOutsideClick,e)||e.preventDefault())},w=function(e){var l=$(e),a=n(l,e)>=0;if(a||l instanceof Document)a&&(i.mostRecentlyFocusedNode=l);else{var t;e.stopImmediatePropagation();var o=!0;if(i.mostRecentlyFocusedNode)if(T(i.mostRecentlyFocusedNode)>0){var r=n(i.mostRecentlyFocusedNode),c=i.containerGroups[r].tabbableNodes;if(c.length>0){var u=c.findIndex((function(e){return e===i.mostRecentlyFocusedNode}));u>=0&&(s.isKeyForward(i.recentNavEvent)?u+1<c.length&&(t=c[u+1],o=!1):u-1>=0&&(t=c[u-1],o=!1))}}else i.containerGroups.some((function(e){return e.tabbableNodes.some((function(e){return T(e)>0}))}))||(o=!1);else o=!1;o&&(t=v({target:i.mostRecentlyFocusedNode,isBackward:s.isKeyBackward(i.recentNavEvent)})),f(t||i.mostRecentlyFocusedNode||d())}i.recentNavEvent=void 0},p=function(e){if(function(e){return"Escape"===(null==e?void 0:e.key)||"Esc"===(null==e?void 0:e.key)||27===(null==e?void 0:e.keyCode)}(e)&&!1!==K(s.escapeDeactivates,e))return e.preventDefault(),void a.deactivate();(s.isKeyForward(e)||s.isKeyBackward(e))&&function(e){var l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];i.recentNavEvent=e;var a=v({event:e,isBackward:l});a&&(W(e)&&e.preventDefault(),f(a))}(e,s.isKeyBackward(e))},m=function(e){var l=$(e);n(l,e)>=0||K(s.clickOutsideDeactivates,e)||K(s.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},g=function(){if(i.active)return function(e,l){if(e.length>0){var a=e[e.length-1];a!==l&&a.pause()}var t=e.indexOf(l);-1===t||e.splice(t,1),e.push(l)}(o,a),i.delayInitialFocusTimer=s.delayInitialFocus?Y((function(){f(d())})):f(d()),t.addEventListener("focusin",w,!0),t.addEventListener("mousedown",b,{capture:!0,passive:!1}),t.addEventListener("touchstart",b,{capture:!0,passive:!1}),t.addEventListener("click",m,{capture:!0,passive:!1}),t.addEventListener("keydown",p,{capture:!0,passive:!1}),a},_=function(){if(i.active)return t.removeEventListener("focusin",w,!0),t.removeEventListener("mousedown",b,!0),t.removeEventListener("touchstart",b,!0),t.removeEventListener("click",m,!0),t.removeEventListener("keydown",p,!0),a},k="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===i.mostRecentlyFocusedNode}))}))&&f(d())})):void 0,x=function(){k&&(k.disconnect(),i.active&&!i.paused&&i.containers.map((function(e){k.observe(e,{subtree:!0,childList:!0})})))};return(a={get active(){return i.active},get paused(){return i.paused},activate:function(e){if(i.active)return this;var l=r(e,"onActivate"),a=r(e,"onPostActivate"),o=r(e,"checkCanFocusTrap");o||u(),i.active=!0,i.paused=!1,i.nodeFocusedBeforeActivation=t.activeElement,null==l||l();var s=function(){o&&u(),g(),x(),null==a||a()};return o?(o(i.containers.concat()).then(s,s),this):(s(),this)},deactivate:function(e){if(!i.active)return this;var l=G({onDeactivate:s.onDeactivate,onPostDeactivate:s.onPostDeactivate,checkCanReturnFocus:s.checkCanReturnFocus},e);clearTimeout(i.delayInitialFocusTimer),i.delayInitialFocusTimer=void 0,_(),i.active=!1,i.paused=!1,x(),function(e,l){var a=e.indexOf(l);-1!==a&&e.splice(a,1),e.length>0&&e[e.length-1].unpause()}(o,a);var t=r(l,"onDeactivate"),n=r(l,"onPostDeactivate"),c=r(l,"checkCanReturnFocus"),d=r(l,"returnFocus","returnFocusOnDeactivate");null==t||t();var u=function(){Y((function(){d&&f(y(i.nodeFocusedBeforeActivation)),null==n||n()}))};return d&&c?(c(y(i.nodeFocusedBeforeActivation)).then(u,u),this):(u(),this)},pause:function(e){if(i.paused||!i.active)return this;var l=r(e,"onPause"),a=r(e,"onPostPause");return i.paused=!0,null==l||l(),_(),x(),null==a||a(),this},unpause:function(e){if(!i.paused||!i.active)return this;var l=r(e,"onUnpause"),a=r(e,"onPostUnpause");return i.paused=!1,null==l||l(),u(),g(),x(),null==a||a(),this},updateContainerElements:function(e){var l=[].concat(e).filter(Boolean);return i.containers=l.map((function(e){return"string"==typeof e?t.querySelector(e):e})),i.active&&u(),x(),this}}).updateContainerElements(e),a};const J="SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE",Q="SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE",Z="SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE",ee=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.historyBackClick=a(this,"historyBackClick",7),this.historyForwardClick=a(this,"historyForwardClick",7),this.skipLinkClick=a(this,"skipLinkClick",7),this.browserBackButtonLabel="Navigate back",this.browserForwardButtonLabel="Navigate forward",this.collapseNavigationButtonLabel="Collapse navigation",this.enableSecondaryNavGridLayout=!0,this.secondaryNavGridLayoutVariant="tiled",this.expandNavigationButtonLabel="Expand navigation",this.gridNavLayoutToggleLabel="Grid",this.hideMobileNavigationButtonLabel="Close navigation",this.listNavLayoutToggleLabel="List",this.navigationLabel="Main",this.secondaryNavCollapseLabel="Show less",this.secondaryNavExpandLabel="Show more",this.skipLinkLabel="Skip to main content",this.isDesktopViewport=!0,this.secondaryNavView="list",this.collectNavItems=()=>{this.mainNavItems=Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item")),this.secondaryNavItems=Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item")),this.toggleNavItemLabels(),this.setSecondaryNavItemsTiled()},this.toggleSecondaryNavView=e=>{e.stopPropagation(),this.secondaryNavView="grid"===this.secondaryNavView?"list":"grid",this.setSecondaryNavItemsTiled(),localStorage.setItem(Q,this.secondaryNavView+"")},this.toggleSecondaryNavCollapse=e=>{e.stopPropagation(),this.secondaryNavCollapsed=!this.secondaryNavCollapsed,localStorage.setItem(J,this.secondaryNavCollapsed+"")},this.onNavigationToggleClick=()=>{this.navigationCollapsed=!this.navigationCollapsed},this.onNavigationClick=()=>{this.hideMobileNavigation()}}componentWillLoad(){console.warn('[Swirl] The "swirl-shell-layout" component is deprecated and will be removed in the next major release.'),this.isDesktopViewport=r(),this.collectNavItems();const e="true"===localStorage.getItem(Z);this.navigationCollapsed=e,this.restoreSecondaryNavState()}componentDidLoad(){this.focusTrap=q(this.navElement,{allowOutsideClick:!0,tabbableOptions:{getShadowRoot:e=>e.shadowRoot}}),this.collectNavItems(),this.navMutationObserver=new MutationObserver((()=>{this.collectNavItems()})),this.navMutationObserver.observe(this.navElement,{childList:!0,subtree:!0})}componentDidRender(){this.focusTrap?.updateContainerElements(this.navElement)}disconnectedCallback(){this.focusTrap?.deactivate(),this.navMutationObserver?.disconnect()}onWindowKeyDown(e){"Escape"===e.key&&this.mobileNavigationActive&&this.hideMobileNavigation()}watchEnableSecondaryNavGridLayout(){this.restoreSecondaryNavState()}watchMobileNavigationState(){this.mobileNavigationActive?setTimeout((()=>{this.focusTrap.activate()}),200):this.focusTrap.deactivate()}watchNavigationCollapsed(){localStorage.setItem(Z,this.navigationCollapsed+""),this.toggleNavItemLabels(),this.setSecondaryNavItemsTiled()}onWindowResize(){this.isDesktopViewport!==r()&&(this.isDesktopViewport=r(),this.collectNavItems())}async showMobileNavigation(){this.mobileNavigationActive=!0,this.collectNavItems()}async hideMobileNavigation(){this.mobileNavigationActive=!1,this.toggleNavItemLabels()}toggleNavItemLabels(){[...this.secondaryNavItems,...this.mainNavItems].forEach((e=>{e.hideLabel=this.navigationCollapsed&&this.isDesktopViewport}))}setSecondaryNavItemsTiled(){this.secondaryNavItems.forEach((e=>{e.variant=this.enableSecondaryNavGridLayout&&("grid"===this.secondaryNavView||this.navigationCollapsed&&this.isDesktopViewport)?this.secondaryNavGridLayoutVariant:"default"}))}restoreSecondaryNavState(){if(this.enableSecondaryNavGridLayout){const e="true"===localStorage.getItem(J);this.secondaryNavCollapsed=e;const l=localStorage.getItem(Q);this.secondaryNavView=l}}render(){const e=this.navigationCollapsed&&this.isDesktopViewport,l=!!this.el.querySelector("[slot='secondary-nav']"),a=i("shell-layout",{"shell-layout--branded-header":this.brandedHeader,"shell-layout--secondary-nav-collapsed":this.secondaryNavCollapsed,"shell-layout--has-secondary-nav":l,"shell-layout--mobile-navigation-active":this.mobileNavigationActive,"shell-layout--navigation-collapsed":e});return t(o,{key:"0df2c20baa7bde61d6deba35b10a912baf09ee53"},t("div",{key:"fddca1320b500709a78b8c27cf40104ed88869f8",class:a},t("header",{key:"4d97d3d4e8d24e99b868cef59ab641297e88c48a",class:"shell-layout__header","data-tauri-drag-region":"true"},t("button",{key:"f5786e887a58c682016e4a9dfadc01c6a9e73ae2",class:"shell-layout__skip-link",onClick:this.skipLinkClick.emit,type:"button"},this.skipLinkLabel),t("div",{key:"4f587bc7b6f233b32f09010b97f31a20b06cff36",class:"shell-layout__header-left"},t("swirl-tooltip",{key:"1f3f33269c494cb5b55808c8e80f656d9903f629",content:this.navigationCollapsed?this.expandNavigationButtonLabel:this.collapseNavigationButtonLabel,delay:100,position:"right"},t("button",{key:"ec38beba1849662adbcfaf77f6497cb062718332",class:"shell-layout__header-tool",onClick:this.onNavigationToggleClick,type:"button"},t(this.navigationCollapsed?"swirl-icon-dock-left-expand":"swirl-icon-dock-left-collapse",{size:20}),t("swirl-visually-hidden",{key:"9f7b3d9f62f3dc97f03fdc6e9ab9b3affe502359"},this.navigationCollapsed?this.expandNavigationButtonLabel:this.collapseNavigationButtonLabel))),t("a",{key:"0812e7a332b7449d4d6c35a496040fac76f5e076",class:"shell-layout__header-tool",onClick:this.historyBackClick.emit,href:"javascript:history.back()"},t("swirl-icon-arrow-back",{key:"3995e584995e805b428904b48183c1bbaf3c9a8b",size:20}),t("swirl-visually-hidden",{key:"5dd811ec31da84e44152e24dcf53b7a22a9d5cae"},this.browserBackButtonLabel)),t("a",{key:"13e52d0c564c5e5c626a3d6061c827c9dd0f5933",class:"shell-layout__header-tool",onClick:this.historyForwardClick.emit,href:"javascript:history.forward()"},t("swirl-icon-arrow-forward",{key:"63530b6b32f7917976365c3026b3bdffae38889b",size:20}),t("swirl-visually-hidden",{key:"a8d109c40cce19029a733d2acac0c6c837f57f7d"},this.browserForwardButtonLabel)),t("slot",{key:"fcbead7a60ad9ce498fe521a7741afe97b029a6a",name:"left-header-tools"})),t("div",{key:"5e95f80f303599960b861a81983624205be950e8",class:"shell-layout__logo"},t("slot",{key:"ef5d8033fb7184577718a0e1fff0353023f5cd52",name:"logo"})),t("div",{key:"98b8440dd6db7a7d68e294e0f47806c0bbea1740",class:"shell-layout__header-right"},t("slot",{key:"89f005b1d3de3803973723ebe8a8a9c27c89b14b",name:"right-header-tools"}),t("slot",{key:"8408ece20c06cebb0dd6806fbb22d4994c97d148",name:"avatar"}))),t("div",{key:"89f0294326e74fdd9e405ba062eb91fc8a056a1d",class:"shell-layout__mobile-nav-backdrop",onClick:this.onNavigationClick}),t("nav",{key:"cb8048b0488394cddfdec7e8bfd8ceceee63d7e3","aria-labelledby":"main-navigation-label",class:"shell-layout__nav",onClick:this.onNavigationClick,ref:e=>this.navElement=e},t("div",{key:"7e87de47c7ec2779b8cec8522bc9a885314f8a5d",class:"shell-layout__mobile-header"},t("slot",{key:"09cffc0557feef085e231df9a3cd6f1ee34b0ef1",name:"mobile-logo"}),t("div",{key:"4a111c41e215834efb0abb8cefabcfd0eca63e7f",class:"shell-layout__mobile-header-tools"},t("slot",{key:"d97fabcf081a10a950143c0318434d6498c0fd08",name:"mobile-header-tools"}),t("button",{key:"0f87222f1514ba6bcdaddc541576148f582b8603",class:"shell-layout__header-tool",type:"button"},t("swirl-icon-double-arrow-left",{key:"3eee7e2283ad38764fd33a99757a6b202bc62e21",size:20}),t("swirl-visually-hidden",{key:"dc49231404cb761b9d1f8a5321eedf97c8f30134"},this.hideMobileNavigationButtonLabel)))),t("div",{key:"b06b1482a38ff3c146cc04827d8fc3c0abd15e6b",class:"shell-layout__nav-body"},t("swirl-visually-hidden",{key:"09e334f1827e8dedba7d34a91d73cffa8782fbc0"},t("span",{key:"b310b5f8d2a26e9434d897284265c599801ed8f7",id:"main-navigation-label"},this.navigationLabel)),t("slot",{key:"b9aa5f91ac6fce9d1f6497ed5f5206ee654ef60a",name:"nav",onSlotchange:this.collectNavItems}),t("div",{key:"3152a89d29b711fdc9f1853381d7910ed94c272e",class:"shell-layout__secondary-nav"},t("swirl-separator",{key:"f28b0538afda37ea8f389c945c45ccb3951b414b",color:"strong",spacing:"16"}),this.enableSecondaryNavGridLayout&&t("swirl-box",{key:"5e030cf09beafdc015ba72cd8ec50e62d2b02a74",paddingBlockEnd:"16"},t("swirl-stack",{key:"6eabe3692316b33dc1d098c8f46f64d0d073b2cc",justify:e?"center":"space-between",orientation:"horizontal"},t("swirl-button",{key:"1b4960148cffcdf2a0da69eb1456ecd2d6847473",hideLabel:e,icon:this.secondaryNavCollapsed?"<swirl-icon-expand-more></swirl-icon-expand-more>":"<swirl-icon-expand-less></swirl-icon-expand-less>",label:this.secondaryNavCollapsed?this.secondaryNavExpandLabel:this.secondaryNavCollapseLabel,onClick:this.toggleSecondaryNavCollapse,variant:"plain"}),!e&&!this.secondaryNavCollapsed&&t("swirl-button",{key:"f9ad0d814533f107623824148a406aeff464b657",icon:"grid"===this.secondaryNavView?"<swirl-icon-menu></swirl-icon-menu>":"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",iconPosition:"end",label:"grid"===this.secondaryNavView?this.gridNavLayoutToggleLabel:this.listNavLayoutToggleLabel,onClick:this.toggleSecondaryNavView,variant:"plain"}))),t("div",{key:"a1be2fc91d2948012afb5625d18a089de7fe08c9",class:{["shell-layout__secondary-nav-items--"+this.secondaryNavGridLayoutVariant]:!0,"shell-layout__secondary-nav-items":!0,"shell-layout__secondary-nav-items--grid-view":this.enableSecondaryNavGridLayout&&"grid"===this.secondaryNavView}},t("slot",{key:"178548bfa49aa871320a4bca72b94517a2be1d9c",name:"secondary-nav",onSlotchange:this.collectNavItems}))))),t("main",{key:"9e3f904b12577733e14bd0ce3c3615bdfdc3d594",class:"shell-layout__main",id:"main-content"},t("slot",{key:"0a7f7fac29ecdf5adfdf3e4ae9efef7776e5a899"}))))}get el(){return this}static get watchers(){return{enableSecondaryNavGridLayout:[{watchEnableSecondaryNavGridLayout:0}],mobileNavigationActive:[{watchMobileNavigationState:0}],navigationCollapsed:[{watchNavigationCollapsed:0}]}}static get style(){return'.sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:"nav main"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:"header header header"       "nav main sidebar"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-state-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-state-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-state-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-state-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}'}},[262,"swirl-shell-layout",{brandedHeader:[4,"branded-header"],browserBackButtonLabel:[1,"browser-back-button-label"],browserForwardButtonLabel:[1,"browser-forward-button-label"],collapseNavigationButtonLabel:[1,"collapse-navigation-button-label"],enableSecondaryNavGridLayout:[4,"enable-secondary-nav-grid-layout"],secondaryNavGridLayoutVariant:[1,"secondary-nav-grid-layout-variant"],expandNavigationButtonLabel:[1,"expand-navigation-button-label"],gridNavLayoutToggleLabel:[1,"grid-nav-layout-toggle-label"],hideMobileNavigationButtonLabel:[1,"hide-mobile-navigation-button-label"],listNavLayoutToggleLabel:[1,"list-nav-layout-toggle-label"],navigationLabel:[1,"navigation-label"],secondaryNavCollapseLabel:[1,"secondary-nav-collapse-label"],secondaryNavExpandLabel:[1,"secondary-nav-expand-label"],skipLinkLabel:[1,"skip-link-label"],isDesktopViewport:[32],mobileNavigationActive:[32],navigationCollapsed:[32],secondaryNavCollapsed:[32],secondaryNavView:[32],showMobileNavigation:[64],hideMobileNavigation:[64]},[[8,"keydown","onWindowKeyDown"],[9,"resize","onWindowResize"]],{enableSecondaryNavGridLayout:[{watchEnableSecondaryNavGridLayout:0}],mobileNavigationActive:[{watchMobileNavigationState:0}],navigationCollapsed:[{watchNavigationCollapsed:0}]}]),le=ee,ae=function(){"undefined"!=typeof customElements&&["swirl-shell-layout","swirl-box","swirl-button","swirl-icon-arrow-back","swirl-icon-arrow-forward","swirl-icon-dock-left-collapse","swirl-icon-dock-left-expand","swirl-icon-double-arrow-left","swirl-separator","swirl-stack","swirl-tooltip","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-shell-layout":customElements.get(s(e))||customElements.define(s(e),ee);break;case"swirl-box":customElements.get(s(e))||n();break;case"swirl-button":customElements.get(s(e))||c();break;case"swirl-icon-arrow-back":customElements.get(s(e))||d();break;case"swirl-icon-arrow-forward":customElements.get(s(e))||u();break;case"swirl-icon-dock-left-collapse":customElements.get(s(e))||h();break;case"swirl-icon-dock-left-expand":customElements.get(s(e))||f();break;case"swirl-icon-double-arrow-left":customElements.get(s(e))||y();break;case"swirl-separator":customElements.get(s(e))||v();break;case"swirl-stack":customElements.get(s(e))||b();break;case"swirl-tooltip":customElements.get(s(e))||w();break;case"swirl-visually-hidden":customElements.get(s(e))||p()}}))};export{le as SwirlShellLayout,ae as defineCustomElement}

package/dist/components/swirl-shell-navigation-item.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,h as a,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as s}from"./swirl-badge2.js";import{d as o}from"./swirl-icon-close2.js";import{d as r}from"./swirl-tag2.js";import{d as h}from"./swirl-tooltip2.js";import{d as g}from"./swirl-visually-hidden2.js";const d=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.useCustomIconSize=!1,this.variant="default"}componentWillLoad(){console.warn('[Swirl] The "swirl-shell-navigation-item" component is deprecated and will be removed in the next major release.'),this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){if(this.useCustomIconSize)return;const i=this.el.querySelector("[slot='icon']"),e=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;i&&(i.tagName.startsWith("SWIRL-ICON")||i.tagName.startsWith("SWIRL-EMOJI")||i.tagName.startsWith("SWIRL-SYMBOL"))&&i.setAttribute("size",e?"20":"32")}render(){const i=!!this.el.querySelector("swirl-app-icon"),e=n("shell-navigation-item","shell-navigation-item--"+this.variant,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":i}),l=n("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=!!this.href;return a(t,{key:"eb88aec0b325ba805671f35a721509f1ffffaddb"},a("swirl-tooltip",{key:"46aca84aa4c3e4a5c1f894e3d017e2cf76b2641f",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right"},a(h?"a":"button",{key:"995f5937212f80ec263bee4140b06dc39cf9db37","aria-current":this.swirlAriaCurrent,class:e,href:this.href,target:this.target,type:h?void 0:"button",title:this.hideLabel?void 0:this.label},a("span",{key:"dbdfc55cda70a2f7513f4a8d8cf08ec448006c55",class:"shell-navigation-item__icon"},a("slot",{key:"47562f0fafec11e865f8542b32fde93e4a0229da",name:"icon"})),this.hideLabel?a("swirl-visually-hidden",null,a("span",{class:l},this.label)):"default"!==this.variant?a("span",{class:l},this.label):a("div",{class:"shell-navigation-item__text-wrapper"},a("span",{class:l},this.label),this.description&&a("span",{class:"shell-navigation-item__description"},this.description)),s&&a("span",{key:"789645f007ca97ba7221916dacf27dbf14630a16",class:"shell-navigation-item__badge-wrapper"},a("swirl-badge",{key:"f6afb63648b52560a5258e5c2171684f90ddce09","aria-label":this.badgeLabel,class:n("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&a("swirl-tag",{key:"aeb15827594215614b277e852d41895a026e4ff6",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&a("swirl-badge",{key:"63f236a979a028a63e9e663b75996a1baebf360b",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return this}static get style(){return':host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.shell-navigation-item{--swirl-app-icon-size:2rem;--swirl-shell-navigation-item-gradient:linear-gradient(     rgba(0, 0, 0, 0),     rgba(0, 0, 0, 0.8)   );position:relative;display:flex;width:100%;height:3rem;padding:var(--s-space-8);flex-shrink:0;justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-decoration:none;cursor:pointer;container-type:size;gap:var(--s-space-12)}.shell-navigation-item .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-overlay-default)}.shell-navigation-item:hover{background-color:var(--s-state-hovered)}.shell-navigation-item:hover .shell-navigation-item__badge,.shell-navigation-item:hover .shell-navigation-item__is-new-badge{--swirl-badge-border-color:var(--s-state-hovered)}.shell-navigation-item:active{background-color:var(--s-state-pressed)}.shell-navigation-item:active .shell-navigation-item__badge,.shell-navigation-item:active .shell-navigation-item__is-new-badge{--swirl-badge-border-color:var(--s-state-pressed)}.shell-navigation-item:focus{outline:none}.shell-navigation-item:focus-visible{z-index:1;box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-navigation-item.shell-navigation-item--boxed{--swirl-app-icon-size:2rem}.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon{overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-default)}.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon{border-radius:var(--s-border-radius-sm);width:2rem;min-width:2rem;height:2rem;min-height:2rem}.shell-navigation-item.shell-navigation-item--filled{padding:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon{color:var(--s-icon-on-action-primary);background-color:var(--s-action-primary-default)}.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon){position:inherit;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--tiled{--swirl-app-icon-size:100%;height:auto;padding:0;align-items:start;border-radius:var(--s-border-radius-base);flex-direction:column;container-type:inline-size;gap:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--tiled:hover{background-color:transparent}.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label{text-decoration:underline}.shell-navigation-item.shell-navigation-item--tiled ::slotted(*){position:absolute;top:var(--s-space-12);left:var(--s-space-12)}.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon){position:inherit;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon{overflow:hidden;width:100%;min-width:100%;height:auto;min-height:auto;border-radius:var(--s-border-radius-base);background-color:var(--s-state-hovered);aspect-ratio:1}.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after{position:absolute;display:inline-block;width:100%;border-radius:var(--s-border-radius-base);background-image:var(--swirl-shell-navigation-item-gradient);content:"";aspect-ratio:1}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);text-align:start}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline{position:absolute;bottom:var(--s-space-12);left:var(--s-space-12);margin-right:var(--s-space-12)}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light{color:rgba(242, 242, 242, 1)}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark{color:rgb(25, 25, 25)}.shell-navigation-item.shell-navigation-item--app-icon{--swirl-app-icon-size:100%;font-size:var(--s-font-size-xs);padding:var(--s-space-8) var(--s-space-4);align-items:center;height:auto;border-radius:var(--s-border-radius-sm);flex-direction:column;container-type:inline-size;gap:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label{align-items:start;padding:var(--s-space-8);--swirl-app-icon-size:2rem}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon{border-radius:var(--s-border-radius-sm);max-width:2rem}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper{max-width:2rem;max-height:2rem}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon{overflow:hidden;width:100%;max-width:3.5rem;height:auto;border-radius:var(--s-border-radius-base);color:var(--s-icon-on-action-primary);aspect-ratio:1}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper{max-width:3.5rem;max-height:3.5rem}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label{line-height:var(--s-line-height-xs);text-align:center}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper{position:absolute;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label{display:-webkit-box;overflow:hidden;white-space:normal;text-overflow:unset;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge{position:absolute;top:-0.375rem;right:-0.375rem;padding:var(--s-space-2)}.shell-navigation-item.shell-navigation-item--active{background-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon{color:var(--s-icon-highlight)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label{color:var(--s-text-highlight)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active:hover{background-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active:active{background-color:var(--s-state-pressed)}.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-state-pressed)}@media (min-width: 992px){.shell-navigation-item{background-color:var(--s-surface-sunken-default)}.shell-navigation-item .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-sunken-default)}}.shell-navigation-item__icon{display:inline-flex;width:2rem;min-width:2rem;height:2rem;min-height:2rem;justify-content:center;align-items:center;overflow:hidden;border-radius:var(--s-border-radius-base)}.shell-navigation-item__text-wrapper{overflow:hidden;min-width:0;flex-grow:1;text-align:start;white-space:nowrap;text-overflow:ellipsis}.shell-navigation-item__description{margin-left:var(--s-space-8);font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued)}.shell-navigation-item__badge{flex-shrink:0;--swirl-badge-border-color:var(--swirl-shell-background)}.shell-navigation-item__is-new-tag{flex-shrink:0}.shell-navigation-item__is-new-badge{position:absolute;top:0.625rem;right:0.625rem;flex-shrink:0;--swirl-badge-border-color:var(--swirl-shell-background)}@container (max-width: 4rem){.shell-navigation-item__badge{position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding:var(--s-space-2)}.shell-navigation-item--gradient .shell-navigation-item__icon{--swirl-shell-navigation-item-gradient:none}.shell-navigation-item__badge--dot{top:var(--s-space-8);right:var(--s-space-8)}}@container (min-width: 10rem){.shell-navigation-item__badge--dot{padding-right:var(--s-space-4)}}'}},[257,"swirl-shell-navigation-item",{active:[4],badgeLabel:[1,"badge-label"],boxed:[4],description:[1],filled:[4],hideLabel:[4,"hide-label"],href:[1],inlineLabel:[4,"inline-label"],inlineLabelColor:[1,"inline-label-color"],label:[1],markAsNew:[4,"mark-as-new"],markAsNewLabel:[1,"mark-as-new-label"],swirlAriaCurrent:[1,"swirl-aria-current"],target:[1],useCustomIconSize:[4,"use-custom-icon-size"],variant:[1],withGradient:[4,"with-gradient"]}]),v=d,m=function(){"undefined"!=typeof customElements&&["swirl-shell-navigation-item","swirl-badge","swirl-icon-close","swirl-tag","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-shell-navigation-item":customElements.get(l(i))||customElements.define(l(i),d);break;case"swirl-badge":customElements.get(l(i))||s();break;case"swirl-icon-close":customElements.get(l(i))||o();break;case"swirl-tag":customElements.get(l(i))||r();break;case"swirl-tooltip":customElements.get(l(i))||h();break;case"swirl-visually-hidden":customElements.get(l(i))||g()}}))};export{v as SwirlShellNavigationItem,m as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as e,h as a,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as s}from"./swirl-badge2.js";import{d as o}from"./swirl-icon-close2.js";import{d as r}from"./swirl-tag2.js";import{d as h}from"./swirl-tooltip2.js";import{d as g}from"./swirl-visually-hidden2.js";const d=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.useCustomIconSize=!1,this.variant="default"}componentWillLoad(){console.warn('[Swirl] The "swirl-shell-navigation-item" component is deprecated and will be removed in the next major release.'),this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){if(this.useCustomIconSize)return;const i=this.el.querySelector("[slot='icon']"),e=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;i&&(i.tagName.startsWith("SWIRL-ICON")||i.tagName.startsWith("SWIRL-EMOJI")||i.tagName.startsWith("SWIRL-SYMBOL"))&&i.setAttribute("size",e?"20":"32")}render(){const i=!!this.el.querySelector("swirl-app-icon"),e=n("shell-navigation-item","shell-navigation-item--"+this.variant,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":i}),l=n("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=!!this.href;return a(t,{key:"33ee5699da985cdddbf63f7c389277c629879844"},a("swirl-tooltip",{key:"8a1a5214fbc9632aa1b79b15fb463eaff62fee9b",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right"},a(h?"a":"button",{key:"7502772db476e2cc6b8cf1f232dbb3a75f16423b","aria-current":this.swirlAriaCurrent,class:e,href:this.href,target:this.target,type:h?void 0:"button",title:this.hideLabel?void 0:this.label},a("span",{key:"790a8af5734f0d21e4c6a5aa8638f683271d9375",class:"shell-navigation-item__icon"},a("slot",{key:"c3d0f50d2fc85c293c0291e1924e4e033894b6e1",name:"icon"})),this.hideLabel?a("swirl-visually-hidden",null,a("span",{class:l},this.label)):"default"!==this.variant?a("span",{class:l},this.label):a("div",{class:"shell-navigation-item__text-wrapper"},a("span",{class:l},this.label),this.description&&a("span",{class:"shell-navigation-item__description"},this.description)),s&&a("span",{key:"41b4e089f6108ec3254d9152d12c57b7e7fd91a1",class:"shell-navigation-item__badge-wrapper"},a("swirl-badge",{key:"b79b047139205211f0894c90ad63003077dc50c7","aria-label":this.badgeLabel,class:n("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&a("swirl-tag",{key:"365bb7594f6e0a43bcbae8f1f53d7492e3444022",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&a("swirl-badge",{key:"342437af8cf87922e1907fa2bf7d4e1a0666280c",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return this}static get style(){return':host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.shell-navigation-item{--swirl-app-icon-size:2rem;--swirl-shell-navigation-item-gradient:linear-gradient(     rgba(0, 0, 0, 0),     rgba(0, 0, 0, 0.8)   );position:relative;display:flex;width:100%;height:3rem;padding:var(--s-space-8);flex-shrink:0;justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-decoration:none;cursor:pointer;container-type:size;gap:var(--s-space-12)}.shell-navigation-item .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-overlay-default)}.shell-navigation-item:hover{background-color:var(--s-state-hovered)}.shell-navigation-item:hover .shell-navigation-item__badge,.shell-navigation-item:hover .shell-navigation-item__is-new-badge{--swirl-badge-border-color:var(--s-state-hovered)}.shell-navigation-item:active{background-color:var(--s-state-pressed)}.shell-navigation-item:active .shell-navigation-item__badge,.shell-navigation-item:active .shell-navigation-item__is-new-badge{--swirl-badge-border-color:var(--s-state-pressed)}.shell-navigation-item:focus{outline:none}.shell-navigation-item:focus-visible{z-index:1;box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-navigation-item.shell-navigation-item--boxed{--swirl-app-icon-size:2rem}.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon{overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-default)}.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon{border-radius:var(--s-border-radius-sm);width:2rem;min-width:2rem;height:2rem;min-height:2rem}.shell-navigation-item.shell-navigation-item--filled{padding:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon{color:var(--s-icon-on-action-primary);background-color:var(--s-action-primary-default)}.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon){position:inherit;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--tiled{--swirl-app-icon-size:100%;height:auto;padding:0;align-items:start;border-radius:var(--s-border-radius-base);flex-direction:column;container-type:inline-size;gap:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--tiled:hover{background-color:transparent}.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label{text-decoration:underline}.shell-navigation-item.shell-navigation-item--tiled ::slotted(*){position:absolute;top:var(--s-space-12);left:var(--s-space-12)}.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon){position:inherit;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon{overflow:hidden;width:100%;min-width:100%;height:auto;min-height:auto;border-radius:var(--s-border-radius-base);background-color:var(--s-state-hovered);aspect-ratio:1}.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after{position:absolute;display:inline-block;width:100%;border-radius:var(--s-border-radius-base);background-image:var(--swirl-shell-navigation-item-gradient);content:"";aspect-ratio:1}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);text-align:start}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline{position:absolute;bottom:var(--s-space-12);left:var(--s-space-12);margin-right:var(--s-space-12)}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light{color:rgba(242, 242, 242, 1)}.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark{color:rgb(25, 25, 25)}.shell-navigation-item.shell-navigation-item--app-icon{--swirl-app-icon-size:100%;font-size:var(--s-font-size-xs);padding:var(--s-space-8) var(--s-space-4);align-items:center;height:auto;border-radius:var(--s-border-radius-sm);flex-direction:column;container-type:inline-size;gap:var(--s-space-8)}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label{align-items:start;padding:var(--s-space-8);--swirl-app-icon-size:2rem}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon{border-radius:var(--s-border-radius-sm);max-width:2rem}.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper{max-width:2rem;max-height:2rem}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon{overflow:hidden;width:100%;max-width:3.5rem;height:auto;border-radius:var(--s-border-radius-base);color:var(--s-icon-on-action-primary);aspect-ratio:1}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper{max-width:3.5rem;max-height:3.5rem}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label{line-height:var(--s-line-height-xs);text-align:center}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper{position:absolute;width:100%;height:100%}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label{display:-webkit-box;overflow:hidden;white-space:normal;text-overflow:unset;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge,.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge{position:absolute;top:-0.375rem;right:-0.375rem;padding:var(--s-space-2)}.shell-navigation-item.shell-navigation-item--active{background-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon{color:var(--s-icon-highlight)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label{color:var(--s-text-highlight)}.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active:hover{background-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-state-hovered)}.shell-navigation-item.shell-navigation-item--active:active{background-color:var(--s-state-pressed)}.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-state-pressed)}@media (min-width: 992px){.shell-navigation-item{background-color:var(--s-surface-sunken-default)}.shell-navigation-item .shell-navigation-item__badge{--swirl-badge-border-color:var(--s-surface-sunken-default)}}.shell-navigation-item__icon{display:inline-flex;width:2rem;min-width:2rem;height:2rem;min-height:2rem;justify-content:center;align-items:center;overflow:hidden;border-radius:var(--s-border-radius-base)}.shell-navigation-item__text-wrapper{overflow:hidden;min-width:0;flex-grow:1;text-align:start;white-space:nowrap;text-overflow:ellipsis}.shell-navigation-item__description{margin-left:var(--s-space-8);font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued)}.shell-navigation-item__badge{flex-shrink:0;--swirl-badge-border-color:var(--swirl-shell-background)}.shell-navigation-item__is-new-tag{flex-shrink:0}.shell-navigation-item__is-new-badge{position:absolute;top:0.625rem;right:0.625rem;flex-shrink:0;--swirl-badge-border-color:var(--swirl-shell-background)}@container (max-width: 4rem){.shell-navigation-item__badge{position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding:var(--s-space-2)}.shell-navigation-item--gradient .shell-navigation-item__icon{--swirl-shell-navigation-item-gradient:none}.shell-navigation-item__badge--dot{top:var(--s-space-8);right:var(--s-space-8)}}@container (min-width: 10rem){.shell-navigation-item__badge--dot{padding-right:var(--s-space-4)}}'}},[257,"swirl-shell-navigation-item",{active:[4],badgeLabel:[1,"badge-label"],boxed:[4],description:[1],filled:[4],hideLabel:[4,"hide-label"],href:[1],inlineLabel:[4,"inline-label"],inlineLabelColor:[1,"inline-label-color"],label:[1],markAsNew:[4,"mark-as-new"],markAsNewLabel:[1,"mark-as-new-label"],swirlAriaCurrent:[1,"swirl-aria-current"],target:[1],useCustomIconSize:[4,"use-custom-icon-size"],variant:[1],withGradient:[4,"with-gradient"]}]),v=d,m=function(){"undefined"!=typeof customElements&&["swirl-shell-navigation-item","swirl-badge","swirl-icon-close","swirl-tag","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-shell-navigation-item":customElements.get(l(i))||customElements.define(l(i),d);break;case"swirl-badge":customElements.get(l(i))||s();break;case"swirl-icon-close":customElements.get(l(i))||o();break;case"swirl-tag":customElements.get(l(i))||r();break;case"swirl-tooltip":customElements.get(l(i))||h();break;case"swirl-visually-hidden":customElements.get(l(i))||g()}}))};export{v as SwirlShellNavigationItem,m as defineCustomElement}

package/dist/components/swirl-skeleton-box2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,h as t,Host as o,transformTag as i}from"@stencil/core/internal/client";import{c as r}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.animated=!0,this.borderRadius="base"}render(){const e=r("skeleton-box",`skeleton-box--border-radius-${this.borderRadius}`,{"skeleton-box--static":!this.animated});return t(o,{key:"441b8a19f3335a6a306eb0c633170a9b7381e8f8",style:{width:Boolean(this.width)||Boolean(this.aspectRatio)?void 0:"100%"}},t("div",{key:"ee2b103f0fe94577e43f25edf905201b1f4405ca",class:e,style:{aspectRatio:this.aspectRatio,borderRadius:"pill"!==this.borderRadius&&"none"!==this.borderRadius?`var(--s-border-radius-${this.borderRadius})`:void 0,height:this.height,width:this.width}}))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(       90deg,       rgba(255, 255, 255, 0) 0,       rgba(255, 255, 255, 0) 12%,       var(--s-surface-raised-default) 50%,       rgba(255, 255, 255, 0) 88%,       rgba(255, 255, 255, 0) 100%     );content:"";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}'}},[1,"swirl-skeleton-box",{animated:[4],aspectRatio:[1,"aspect-ratio"],borderRadius:[1,"border-radius"],height:[1],width:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-skeleton-box"].forEach((e=>{"swirl-skeleton-box"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))}export{a as S,n as d}
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as o,transformTag as i}from"@stencil/core/internal/client";import{c as r}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.animated=!0,this.borderRadius="base"}render(){const e=r("skeleton-box",`skeleton-box--border-radius-${this.borderRadius}`,{"skeleton-box--static":!this.animated});return t(o,{key:"0766d24e9c6dd8b47f0cde12acc961798539a663",style:{width:Boolean(this.width)||Boolean(this.aspectRatio)?void 0:"100%"}},t("div",{key:"78ef731b5c403dfe74d3034ac8bcef63e0bac16c",class:e,style:{aspectRatio:this.aspectRatio,borderRadius:"pill"!==this.borderRadius&&"none"!==this.borderRadius?`var(--s-border-radius-${this.borderRadius})`:void 0,height:this.height,width:this.width}}))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(       90deg,       rgba(255, 255, 255, 0) 0,       rgba(255, 255, 255, 0) 12%,       var(--s-surface-raised-default) 50%,       rgba(255, 255, 255, 0) 88%,       rgba(255, 255, 255, 0) 100%     );content:"";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}'}},[1,"swirl-skeleton-box",{animated:[4],aspectRatio:[1,"aspect-ratio"],borderRadius:[1,"border-radius"],height:[1],width:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-skeleton-box"].forEach((e=>{"swirl-skeleton-box"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))}export{a as S,n as d}