npm - @getflip/swirl-components - Versions diffs - 0.531.2 → 0.532.0 - Mend

@getflip/swirl-components 0.531.2 → 0.532.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3096) hide show

package/dist/components/swirl-card.js CHANGED Viewed

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

package/dist/components/swirl-carousel-slide.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=l("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"~~602fa58e6f9a08ac21b95f0e5a6db619012a7f5e~~","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"~~62708550e6868fd1ab2e472f635b43f6b5911a91~~"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(){height:100%}:host {box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),r=a,h=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))\|\|customElements.define(o(e),a))}))};export{r as SwirlCarouselSlide,h as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=l("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"bd595d626cca6ad119cfe2ad89aa639ee44e06f9","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"dcfd8cdfa905e26eababb896a2f48413febbe51f"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(){height:100%}:host {box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),r=a,c=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))\|\|customElements.define(o(e),a))}))};export{r as SwirlCarouselSlide,c as defineCustomElement}

package/dist/components/swirl-carousel.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as s,HTMLElement as t,createEvent as i,h as e,Host as o,transformTag as a}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as l}from"./utils.js";import{d as n}from"./swirl-button2.js";const c=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.activeSlidesChange=i(this,"activeSlidesChange",7),this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.fade=!1,this.fadeColor="default",this.loopAround=!1,this.padding="16",this.spacing="16",this.activeSlides=[],this.carouselFadeColorMap={default:"var(--s-background-default)","on-surface-overlay":"var(--s-surface-overlay-default)"},this.updateActiveSlideReferences=l((()=>{const s=this.getActiveSlides();s.some(((s,t)=>this.activeSlides[t]!==s))&&(this.activeSlides=s,this.activeSlidesChange.emit(this.activeSlides))}),100),this.onPreviousSlideButtonClick=()=>{this.previousSlide()},this.onNextSlideButtonClick=()=>{this.nextSlide()},this.onSlotChange=()=>{this.activeSlides.length&&this.scrollToElement(this.activeSlides[0]),this.checkScrollStatus(),this.checkScrollPosition()},this.onScroll=()=>{this.updateActiveSlideReferences(),this.checkScrollPosition()}}onWindowResize(){this.checkScrollStatus(),this.checkScrollPosition()}componentDidLoad(){queueMicrotask((()=>{this.el.isConnected&&(this.checkScrollStatus(),this.checkScrollPosition())}))}async scrollToSlide(s){const t=this.getSlides().find((t=>t.id===s));t&&this.scrollToElement(t)}scrollToElement(s){this.slidesContainer&&s&&this.slidesContainer?.scroll({left:s.offsetLeft,behavior:"smooth"})}previousSlide(){const s=this.getSlides(),t=this.getActiveSlides();this.scrollToElement(t[0].previousElementSibling\|\|(this.loopAround?s[s.length-1]:t[0]))}nextSlide(){const s=this.getSlides(),t=this.getActiveSlides();this.scrollToElement(!t[t.length-1].nextElementSibling&&this.loopAround?s[0]:t[0].nextElementSibling)}getSlides(){return Array.from(this.el.querySelectorAll("swirl-carousel-slide"))}getActiveSlides(){return this.getSlides().filter((s=>this.checkInView(s)))}checkScrollStatus(){this.isScrollable=this.slidesContainer.scrollWidth>this.slidesContainer.offsetWidth}checkScrollPosition(){const s=this.getSlides(),t=this.getActiveSlides(),i=t[0]===s[0],e=t[t.length-1]===s[s.length-1];i!==this.isAtStart&&(this.isAtStart=i),e!==this.isAtEnd&&(this.isAtEnd=e)}checkInView(s){let t=this.slidesContainer.scrollLeft,i=s.offsetLeft;return i>=t&&i+s.clientWidth<=t+this.slidesContainer.clientWidth}render(){this.el.style.setProperty("--swirl-carousel-spacing",this.spacing+"px"),this.el.style.setProperty("--swirl-carousel-fade-color",this.carouselFadeColorMap[this.fadeColor]);const s={padding:this.padding?`var(--s-space-${this.padding})`:void 0,paddingBlockEnd:this.paddingBlockEnd?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:this.paddingBlockStart?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:this.paddingInlineEnd?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:void 0,scrollPadding:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:this.padding?`var(--s-space-${this.padding})`:void 0},t=r("carousel",{"carousel--fade":this.fade,"carousel--is-at-start":this.isAtStart,"carousel--is-at-end":this.isAtEnd});return e(o,{key:"~~840096feefd373763dd50a841d3774fb3d466b99~~","aria-label":this.label,"aria-roledescription":"carousel",role:"group"},e("div",{key:"~~535cf444029aa486567192b5cf8d72b52df569f4~~",class:t},this.isScrollable&&!this.isAtStart&&e("swirl-button",{key:"~~4608b5385dc0b8ee293213a9d849632f2c32e53b~~",class:"carousel__previous-slide-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.previousSlideButtonLabel,onClick:this.onPreviousSlideButtonClick,pill:!0,variant:"translucent"}),this.isScrollable&&!this.isAtEnd&&e("swirl-button",{key:"~~e8d73e19115dcd30b0fc2b416183e72ff82bdc22~~",class:"carousel__next-slide-button",hideLabel:!0,icon:"<swirl-icon-arrow-forward></swirl-icon-arrow-forward>",label:this.nextSlideButtonLabel,onClick:this.onNextSlideButtonClick,pill:!0,variant:"translucent"}),e("div",{key:"~~64c2b7b2a9cfb305591e8bbe44bff581b5651564~~","aria-live":"polite",class:"carousel__slides",style:s,onScroll:this.onScroll,ref:s=>this.slidesContainer=s},e("slot",{key:"~~417793d107b7c1f49561138d00fcbaa4a3d87c45~~",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return':host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host {box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:"";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient( 90deg, var(--swirl-carousel-fade-color) 0%, transparent 100% )}.carousel:after{right:0;background:linear-gradient( 270deg, var(--swirl-carousel-fade-color) 0%, transparent 100% )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}'}},[257,"swirl-carousel",{label:[1],nextSlideButtonLabel:[1,"next-slide-button-label"],previousSlideButtonLabel:[1,"previous-slide-button-label"],fade:[4],fadeColor:[1,"fade-color"],loopAround:[4,"loop-around"],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],spacing:[1],isAtEnd:[32],isAtStart:[32],isScrollable:[32],scrollToSlide:[64]},[[9,"resize","onWindowResize"]]]),d=c,h=function(){"undefined"!=typeof customElements&&["swirl-carousel","swirl-button"].forEach((s=>{switch(s){case"swirl-carousel":customElements.get(a(s))\|\|customElements.define(a(s),c);break;case"swirl-button":customElements.get(a(s))\|\|n()}}))};export{d as SwirlCarousel,h as defineCustomElement}
1	+ import{proxyCustomElement as s,HTMLElement as t,createEvent as i,h as e,Host as o,transformTag as a}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as l}from"./utils.js";import{d as n}from"./swirl-button2.js";const c=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.activeSlidesChange=i(this,"activeSlidesChange",7),this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.fade=!1,this.fadeColor="default",this.loopAround=!1,this.padding="16",this.spacing="16",this.activeSlides=[],this.carouselFadeColorMap={default:"var(--s-background-default)","on-surface-overlay":"var(--s-surface-overlay-default)"},this.updateActiveSlideReferences=l((()=>{const s=this.getActiveSlides();s.some(((s,t)=>this.activeSlides[t]!==s))&&(this.activeSlides=s,this.activeSlidesChange.emit(this.activeSlides))}),100),this.onPreviousSlideButtonClick=()=>{this.previousSlide()},this.onNextSlideButtonClick=()=>{this.nextSlide()},this.onSlotChange=()=>{this.activeSlides.length&&this.scrollToElement(this.activeSlides[0]),this.checkScrollStatus(),this.checkScrollPosition()},this.onScroll=()=>{this.updateActiveSlideReferences(),this.checkScrollPosition()}}onWindowResize(){this.checkScrollStatus(),this.checkScrollPosition()}componentDidLoad(){queueMicrotask((()=>{this.el.isConnected&&(this.checkScrollStatus(),this.checkScrollPosition())}))}async scrollToSlide(s){const t=this.getSlides().find((t=>t.id===s));t&&this.scrollToElement(t)}scrollToElement(s){this.slidesContainer&&s&&this.slidesContainer?.scroll({left:s.offsetLeft,behavior:"smooth"})}previousSlide(){const s=this.getSlides(),t=this.getActiveSlides();this.scrollToElement(t[0].previousElementSibling\|\|(this.loopAround?s[s.length-1]:t[0]))}nextSlide(){const s=this.getSlides(),t=this.getActiveSlides();this.scrollToElement(!t[t.length-1].nextElementSibling&&this.loopAround?s[0]:t[0].nextElementSibling)}getSlides(){return Array.from(this.el.querySelectorAll("swirl-carousel-slide"))}getActiveSlides(){return this.getSlides().filter((s=>this.checkInView(s)))}checkScrollStatus(){this.isScrollable=this.slidesContainer.scrollWidth>this.slidesContainer.offsetWidth}checkScrollPosition(){const s=this.getSlides(),t=this.getActiveSlides(),i=t[0]===s[0],e=t[t.length-1]===s[s.length-1];i!==this.isAtStart&&(this.isAtStart=i),e!==this.isAtEnd&&(this.isAtEnd=e)}checkInView(s){let t=this.slidesContainer.scrollLeft,i=s.offsetLeft;return i>=t&&i+s.clientWidth<=t+this.slidesContainer.clientWidth}render(){this.el.style.setProperty("--swirl-carousel-spacing",this.spacing+"px"),this.el.style.setProperty("--swirl-carousel-fade-color",this.carouselFadeColorMap[this.fadeColor]);const s={padding:this.padding?`var(--s-space-${this.padding})`:void 0,paddingBlockEnd:this.paddingBlockEnd?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:this.paddingBlockStart?`var(--s-space-${this.paddingBlockStart})`:void 0,paddingInlineEnd:this.paddingInlineEnd?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:void 0,scrollPadding:this.paddingInlineStart?`var(--s-space-${this.paddingInlineStart})`:this.padding?`var(--s-space-${this.padding})`:void 0},t=r("carousel",{"carousel--fade":this.fade,"carousel--is-at-start":this.isAtStart,"carousel--is-at-end":this.isAtEnd});return e(o,{key:"eb2274cf3c4a0f9fa0a5e351ffbc79f05e34f2ca","aria-label":this.label,"aria-roledescription":"carousel",role:"group"},e("div",{key:"3e64fd8638de118884d211029898f5fb7d393fc6",class:t},this.isScrollable&&!this.isAtStart&&e("swirl-button",{key:"4afa3f38193e7b02f98ec524d82dc681fccf0085",class:"carousel__previous-slide-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.previousSlideButtonLabel,onClick:this.onPreviousSlideButtonClick,pill:!0,variant:"translucent"}),this.isScrollable&&!this.isAtEnd&&e("swirl-button",{key:"d35f5d26449333c7f87c070b58db7308f255f879",class:"carousel__next-slide-button",hideLabel:!0,icon:"<swirl-icon-arrow-forward></swirl-icon-arrow-forward>",label:this.nextSlideButtonLabel,onClick:this.onNextSlideButtonClick,pill:!0,variant:"translucent"}),e("div",{key:"6279acaf79d37888e5e7bb98d07538ccf4a303a4","aria-live":"polite",class:"carousel__slides",style:s,onScroll:this.onScroll,ref:s=>this.slidesContainer=s},e("slot",{key:"d63228ab82430539465811e606aee9451766c18d",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return':host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host {box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:"";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient( 90deg, var(--swirl-carousel-fade-color) 0%, transparent 100% )}.carousel:after{right:0;background:linear-gradient( 270deg, var(--swirl-carousel-fade-color) 0%, transparent 100% )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}'}},[257,"swirl-carousel",{label:[1],nextSlideButtonLabel:[1,"next-slide-button-label"],previousSlideButtonLabel:[1,"previous-slide-button-label"],fade:[4],fadeColor:[1,"fade-color"],loopAround:[4,"loop-around"],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],spacing:[1],isAtEnd:[32],isAtStart:[32],isScrollable:[32],scrollToSlide:[64]},[[9,"resize","onWindowResize"]]]),d=c,h=function(){"undefined"!=typeof customElements&&["swirl-carousel","swirl-button"].forEach((s=>{switch(s){case"swirl-carousel":customElements.get(a(s))\|\|customElements.define(a(s),c);break;case"swirl-button":customElements.get(a(s))\|\|n()}}))};export{d as SwirlCarousel,h as defineCustomElement}

package/dist/components/swirl-checkbox.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as c,HTMLElement as e,createEvent as i,h as o,Host as s,transformTag as r}from"@stencil/core/internal/client";import{c as h}from"./index2.js";import{d as a}from"./swirl-icon-check-strong2.js";import{d as b}from"./swirl-visually-hidden2.js";const l=c(class extends e{constructor(c){super(),!1!==c&&this.__registerHost(),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.labelWeight="medium",this.variant="default",this.onChange=()=>{this.checked=!0!==this.checked&&"true"!==this.checked,this.valueChange.emit(this.checked)}}getAriaCheckedLabel(c,e){return c?"true":e?"false":"mixed"}render(){const c=!1===this.checked\|\|"false"===this.checked,e=!0===this.checked\|\|"true"===this.checked,i="indeterminate"===this.checked,r=!!this.label\|\|!!this.description,a=this.getAriaCheckedLabel(e,c),b=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,l=h("checkbox","checkbox--label-weight-"+this.labelWeight,"checkbox--variant-"+this.variant,{"checkbox--checked":e,"checkbox--disabled":this.disabled,"checkbox--indeterminate":i,"checkbox--invalid":this.invalid,"checkbox--unchecked":c});return o(s,{key:"~~9594d167dd79813f182cc7adf684966be8e8fe57~~",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"~~d26e11bdc87328b21e109f191e0d6e0905490b7f~~",class:l,htmlFor:this.inputId},o("span",{key:"~~3a856c000cdcc555d535393267cac270518247d6~~",class:"checkbox__control"},o("swirl-visually-hidden",{key:"~~de6884b6b8fd2a64e69dc6f0b10367baa2b4becc~~"},o("input",{key:"~~25b14da328f1dee60de559d2ef5df4c4d7a166ef~~","aria-checked":a,"aria-describedby":this.swirlAriaDescribedby,"aria-invalid":b,"aria-label":this.swirlAriaLabel,checked:e,class:"checkbox__input",disabled:this.disabled,id:this.inputId,indeterminate:i,name:this.inputName,onChange:this.onChange,type:"checkbox",value:this.value})),o("span",{key:"~~f94ce6f89d7c3720c7d18aa932d3f0ca04abd962~~","aria-hidden":"true",class:"checkbox__box"},o("span",{key:"~~d74a5926836db3d63b390696a4901f53e457b9a9~~",class:"checkbox__icon"},e&&o("swirl-icon-check-strong",{key:"~~c986d82eca02a1026f0b95d3a04241a6d8038b13~~"}),i&&o("span",{key:"~~45fc5c9fdaf8945747a3b1e365c7983c43e10f9c~~",class:"checkbox__indeterminate-icon"})))),r&&o("span",{key:"~~60461a591a4249ceabe91e1f97ec82038a5a8c2a~~",class:"checkbox__label-container"},this.label&&o("span",{key:"~~04ff9af0785c912b256096745f822226f3d20e82~~",class:"checkbox__label"},this.label),this.description&&o("span",{key:"~~d9171656da199aaecb0294d63d1dd910fcfa9eef~~",class:"checkbox__description"},this.description))))}static get style(){return'.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h .sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;flex-grow:1}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default), 0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default), 0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-state-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-state-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>.sc-swirl-checkbox::part(icon),.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox [part~="icon"]{width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);align-items:flex-start;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label-container.sc-swirl-checkbox{padding-top:var(--s-space-2)}}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-checkbox",{checked:[1032],description:[1],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaLabel:[1,"swirl-aria-label"],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],labelWeight:[1,"label-weight"],value:[1],variant:[1]}]),t=l,d=function(){"undefined"!=typeof customElements&&["swirl-checkbox","swirl-icon-check-strong","swirl-visually-hidden"].forEach((c=>{switch(c){case"swirl-checkbox":customElements.get(r(c))\|\|customElements.define(r(c),l);break;case"swirl-icon-check-strong":customElements.get(r(c))\|\|a();break;case"swirl-visually-hidden":customElements.get(r(c))\|\|b()}}))};export{t as SwirlCheckbox,d as defineCustomElement}
1	+ import{proxyCustomElement as c,HTMLElement as e,createEvent as i,h as o,Host as s,transformTag as r}from"@stencil/core/internal/client";import{c as h}from"./index2.js";import{d as a}from"./swirl-icon-check-strong2.js";import{d as b}from"./swirl-visually-hidden2.js";const l=c(class extends e{constructor(c){super(),!1!==c&&this.__registerHost(),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.labelWeight="medium",this.variant="default",this.onChange=()=>{this.checked=!0!==this.checked&&"true"!==this.checked,this.valueChange.emit(this.checked)}}getAriaCheckedLabel(c,e){return c?"true":e?"false":"mixed"}render(){const c=!1===this.checked\|\|"false"===this.checked,e=!0===this.checked\|\|"true"===this.checked,i="indeterminate"===this.checked,r=!!this.label\|\|!!this.description,a=this.getAriaCheckedLabel(e,c),b=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,l=h("checkbox","checkbox--label-weight-"+this.labelWeight,"checkbox--variant-"+this.variant,{"checkbox--checked":e,"checkbox--disabled":this.disabled,"checkbox--indeterminate":i,"checkbox--invalid":this.invalid,"checkbox--unchecked":c});return o(s,{key:"3ad08c17f03d7e7687feaa98defebc8833733860",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"055534364640f13e3f8ac701eab5c02820f174f3",class:l,htmlFor:this.inputId},o("span",{key:"dbefcd0a53167cd632fe98165e7584f3f6217a32",class:"checkbox__control"},o("swirl-visually-hidden",{key:"e52c48576f02f8a768d7e4155c9299013641b2f0"},o("input",{key:"e5b0d971bfddb2cb6f17e7c3be49c983d8059e4e","aria-checked":a,"aria-describedby":this.swirlAriaDescribedby,"aria-invalid":b,"aria-label":this.swirlAriaLabel,checked:e,class:"checkbox__input",disabled:this.disabled,id:this.inputId,indeterminate:i,name:this.inputName,onChange:this.onChange,type:"checkbox",value:this.value})),o("span",{key:"1d426b70b008a23a45a1659c86e80fc58bb4eca9","aria-hidden":"true",class:"checkbox__box"},o("span",{key:"170929e968496483f7ae40fd4d5dd4733308519d",class:"checkbox__icon"},e&&o("swirl-icon-check-strong",{key:"0f2a4937b04485630178a6cd27eb835a869969bc"}),i&&o("span",{key:"ebfc555b5034202d47424e4e56e2143f5156e041",class:"checkbox__indeterminate-icon"})))),r&&o("span",{key:"0bfed4976d10492294bf486c900b99024f22550e",class:"checkbox__label-container"},this.label&&o("span",{key:"aca721f51a214dbdbfc54a769cc37a678c5edfc3",class:"checkbox__label"},this.label),this.description&&o("span",{key:"e5892f2c2e030515627def74cf1dda9cd5b7f1a0",class:"checkbox__description"},this.description))))}static get style(){return'.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h .sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;flex-grow:1}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default), 0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default), 0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-state-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-state-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>.sc-swirl-checkbox::part(icon),.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox [part~="icon"]{width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);align-items:flex-start;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label-container.sc-swirl-checkbox{padding-top:var(--s-space-2)}}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-checkbox",{checked:[1032],description:[1],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaLabel:[1,"swirl-aria-label"],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],labelWeight:[1,"label-weight"],value:[1],variant:[1]}]),t=l,d=function(){"undefined"!=typeof customElements&&["swirl-checkbox","swirl-icon-check-strong","swirl-visually-hidden"].forEach((c=>{switch(c){case"swirl-checkbox":customElements.get(r(c))\|\|customElements.define(r(c),l);break;case"swirl-icon-check-strong":customElements.get(r(c))\|\|a();break;case"swirl-visually-hidden":customElements.get(r(c))\|\|b()}}))};export{t as SwirlCheckbox,d as defineCustomElement}

package/dist/components/swirl-chip.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as i,HTMLElement as r,createEvent as c,h as s,Host as e,transformTag as t}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{d as o}from"./swirl-icon-close2.js";const l=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.iconColor="default",this.intent="default",this.interactive=!1,this.removeButtonLabel="Remove"}componentDidRender(){this.forceIconProps()}forceIconProps(){if(this.iconEl\|\|this.trailingIconEl){if(this.iconEl){const i=this.iconEl.children[0];i?.setAttribute("size","20")}if(this.trailingIconEl){const i=this.trailingIconEl.children[0];i?.setAttribute("size","20")}}}render(){const i=this.interactive\|\|void 0!==this.pressed?"button":"span",r=!!this.el.querySelector('[slot="avatar"]'),c=!r&&!!this.icon,t=!!this.el.querySelector('[slot="trailing-content"]'),o=a("chip","chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,{"chip--pressed":this.pressed,"chip--interactive":this.interactive\|\|void 0!==this.pressed,"chip--removable":this.removable});return s(e,{key:"~~eaf1cb68bbce4f825dd39d7659d61ca2b5f23909~~"},s(i,{key:"~~72c785321477ba529cbc9eb5ef2b435301916b69~~","aria-disabled":this.interactive&&this.disabled?"true":void 0,"aria-label":this.swirlAriaLabel,"aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:o,disabled:this.interactive?this.disabled:void 0,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},s("span",{key:"~~493f483a0ea3a9302f5e5cd7a7865e0870818d57~~",class:"chip__inner"},r&&s("span",{key:"~~cda543c9b1b6c6b3dbcf561dfbc1a35bcfd352ad~~",class:"chip__avatar"},s("slot",{key:"~~ea48be0cb14fee1700feb21d5c12289cec445adc~~",name:"avatar"})),c&&s("span",{key:"~~915484029f5bf81edeac405a2608e9e0b4a218c7~~",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),s("span",{key:"~~f99ab7efd6be22f552b25d7df9e04ff5affc22a3~~",class:"chip__label"},this.label),this.trailingIcon&&s("span",{key:"~~e58a89d7063cba7dfb39cf96666ee506bef6bae1~~",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),t&&s("span",{key:"~~558f2116c16e15114d92739dd8da5cff0e59b400~~",class:"chip__trailing-content"},s("slot",{key:"~~271992bfbee95e45ef0ed2c9f306a73b21d149b7~~",name:"trailing-content"})))),this.removable&&s("button",{key:"~~7c2183b57efbe743b2909ccf78dedc147dfca135~~","aria-disabled":this.disabled?"true":void 0,"aria-label":this.removeButtonLabel,class:"chip__remove-button",disabled:this.disabled,onClick:this.removeChip.emit,type:"button"},s("swirl-icon-close",{key:"~~99a186d7565af8903cdf1acd5b4a266f9041447a~~",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h .sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background:var(--s-surface-raised-50-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s));font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background:var(--s-surface-raised-50-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-surface-raised-50-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-8))}.chip--intent-critical.sc-swirl-chip:not(.chip--pressed):not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(.chip--pressed):not(:disabled) .chip__icon.sc-swirl-chip,.chip--intent-critical.sc-swirl-chip:not(.chip--pressed):not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-icon-critical)}.chip--intent-highlight.sc-swirl-chip:not(.chip--pressed):not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(.chip--pressed):not(:disabled) .chip__icon.sc-swirl-chip,.chip--intent-highlight.sc-swirl-chip:not(.chip--pressed):not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--pressed.sc-swirl-chip:disabled{background-color:var(--s-action-primary-disabled);color:var(--s-text-disabled);border-color:var(--s-action-primary-disabled)}.chip--pressed.sc-swirl-chip:disabled+.chip__remove-button.sc-swirl-chip{background-color:transparent}.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--pressed.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered);border-color:var(--s-action-primary-hovered)}.chip--pressed.sc-swirl-chip:hover:not(:disabled)+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--pressed.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed);border-color:var(--s-action-primary-pressed)}.chip--pressed.sc-swirl-chip:active:not(:disabled)+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-12);padding-left:var(--s-space-12);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-4);flex-shrink:0;align-items:center}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.5rem;height:1.5rem;margin-left:-0.5rem}.chip__icon.sc-swirl-chip{margin-left:-0.375rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__remove-button.sc-swirl-chip{position:absolute;top:var(--s-space-4);right:var(--s-space-4);display:inline-flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}'}},[262,"swirl-chip",{disabled:[4],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],pressed:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"],swirlAriaLabel:[1,"swirl-aria-label"]}]),h=l,n=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(t(i))\|\|customElements.define(t(i),l);break;case"swirl-icon-close":customElements.get(t(i))\|\|o()}}))};export{h as SwirlChip,n as defineCustomElement}
1	+ import{proxyCustomElement as i,HTMLElement as r,createEvent as s,h as e,Host as c,transformTag as t}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{d as o}from"./swirl-icon-close2.js";const l=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=s(this,"chipClick",7),this.removeChip=s(this,"remove",7),this.iconColor="default",this.intent="default",this.interactive=!1,this.removeButtonLabel="Remove"}componentDidRender(){this.forceIconProps()}forceIconProps(){if(this.iconEl\|\|this.trailingIconEl){if(this.iconEl){const i=this.iconEl.children[0];i?.setAttribute("size","20")}if(this.trailingIconEl){const i=this.trailingIconEl.children[0];i?.setAttribute("size","20")}}}render(){const i=this.interactive\|\|void 0!==this.pressed?"button":"span",r=!!this.el.querySelector('[slot="avatar"]'),s=!r&&!!this.icon,t=!!this.el.querySelector('[slot="trailing-content"]'),o=a("chip","chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,{"chip--pressed":this.pressed,"chip--interactive":this.interactive\|\|void 0!==this.pressed,"chip--removable":this.removable});return e(c,{key:"ab2949cf8228576514eb8dde433060f3165c458d"},e(i,{key:"34fb9734937acedb870feecd49698b45b3875b78","aria-disabled":this.interactive&&this.disabled?"true":void 0,"aria-label":this.swirlAriaLabel,"aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:o,disabled:this.interactive?this.disabled:void 0,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},e("span",{key:"52e34a130429ddbb3319f92078a51d70008537d2",class:"chip__inner"},r&&e("span",{key:"dbbb8e6505680352cef3d6934e110360cdc85ae9",class:"chip__avatar"},e("slot",{key:"5b4f0a2447a77f24da8e07b9c6eaf0db3abe1323",name:"avatar"})),s&&e("span",{key:"ae0312ea633f101bd7f5a5e6db2306d71845389a",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),e("span",{key:"8e4998fc2a027a568df8f40b8ed156cf7a9cd02c",class:"chip__label"},this.label),this.trailingIcon&&e("span",{key:"7610d8178c9835a6f7468134869327d692caf4da",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),t&&e("span",{key:"9013137e1f5110e762a1c154e443b055b0eaea35",class:"chip__trailing-content"},e("slot",{key:"94d2375e36ddba20f55d3d6af37ffdc77b3343c4",name:"trailing-content"})))),this.removable&&e("button",{key:"9841f5ed1ed4cdff460525623d7f6ebe3844e854","aria-disabled":this.disabled?"true":void 0,"aria-label":this.removeButtonLabel,class:"chip__remove-button",disabled:this.disabled,onClick:this.removeChip.emit,type:"button"},e("swirl-icon-close",{key:"a25560a78b8c4a97d7c984987ed4f4f03eb63f1f",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h .sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background:var(--s-surface-raised-50-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s));font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background:var(--s-surface-raised-50-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-surface-raised-50-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-8))}.chip--intent-critical.sc-swirl-chip:not(.chip--pressed):not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(.chip--pressed):not(:disabled) .chip__icon.sc-swirl-chip,.chip--intent-critical.sc-swirl-chip:not(.chip--pressed):not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-icon-critical)}.chip--intent-highlight.sc-swirl-chip:not(.chip--pressed):not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(.chip--pressed):not(:disabled) .chip__icon.sc-swirl-chip,.chip--intent-highlight.sc-swirl-chip:not(.chip--pressed):not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--pressed.sc-swirl-chip:disabled{background-color:var(--s-action-primary-disabled);color:var(--s-text-disabled);border-color:var(--s-action-primary-disabled)}.chip--pressed.sc-swirl-chip:disabled+.chip__remove-button.sc-swirl-chip{background-color:transparent}.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--pressed.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered);border-color:var(--s-action-primary-hovered)}.chip--pressed.sc-swirl-chip:hover:not(:disabled)+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--pressed.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed);border-color:var(--s-action-primary-pressed)}.chip--pressed.sc-swirl-chip:active:not(:disabled)+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-12);padding-left:var(--s-space-12);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-4);flex-shrink:0;align-items:center}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.5rem;height:1.5rem;margin-left:-0.5rem}.chip__icon.sc-swirl-chip{margin-left:-0.375rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__remove-button.sc-swirl-chip{position:absolute;top:var(--s-space-4);right:var(--s-space-4);display:inline-flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}'}},[262,"swirl-chip",{disabled:[4],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],pressed:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"],swirlAriaLabel:[1,"swirl-aria-label"]}]),h=l,n=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(t(i))\|\|customElements.define(t(i),l);break;case"swirl-icon-close":customElements.get(t(i))\|\|o()}}))};export{h as SwirlChip,n as defineCustomElement}

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

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

package/dist/components/swirl-columns.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,h as t,Host as c,transformTag as n}from"@stencil/core/internal/client";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.columns="repeat(3, minmax(0, 1fr))"}render(){return t(c,{key:"~~58dca0f53eb7169ebed52d040da35e407e939fba~~"},t("div",{key:"~~2c0cb89f1f7029da7265531cfa38d2e49b76dd30~~",class:"columns",style:{gridTemplateColumns:this.columns,gap:`var(--s-space-${this.spacing})`}},t("slot",{key:"~~3c2f0ed4c1d8a60e9e9079fe17986bbdf79468f9~~"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}"}},[257,"swirl-columns",{columns:[1],spacing:[1]}]),i=o,l=function(){"undefined"!=typeof customElements&&["swirl-columns"].forEach((e=>{"swirl-columns"===e&&(customElements.get(n(e))\|\|customElements.define(n(e),o))}))};export{i as SwirlColumns,l as defineCustomElement}
1	+ import{proxyCustomElement as s,HTMLElement as e,h as t,Host as n,transformTag as o}from"@stencil/core/internal/client";const c=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.columns="repeat(3, minmax(0, 1fr))"}render(){return t(n,{key:"9b63b86715fd2e4d6437f6e738c12803da8563d9"},t("div",{key:"1d36519eb21f4bf2f8ee79cb44a0b07604ee7106",class:"columns",style:{gridTemplateColumns:this.columns,gap:`var(--s-space-${this.spacing})`}},t("slot",{key:"8be8b8624dc7f663787f77907183bbb96277147b"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}"}},[257,"swirl-columns",{columns:[1],spacing:[1]}]),i=c,l=function(){"undefined"!=typeof customElements&&["swirl-columns"].forEach((s=>{"swirl-columns"===s&&(customElements.get(o(s))\|\|customElements.define(o(s),c))}))};export{i as SwirlColumns,l as defineCustomElement}

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

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

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

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

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as l,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";const n=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=t(this,"valueChange",7),this.intent="default",this.interactive=!1,this.size="m",this.vertical=!1,this.elementId="data-cell-"+crypto.randomUUID(),this.handleRadioClick=e=>{const a=e.target,t=this.el.querySelector('swirl-radio[slot="content"]');if(a.contains(t)){const e=t?.querySelector('input[type="radio"]');e.click()}},this.handleClick=e=>{this.handleRadioClick(e),this.valueChange.emit(e)}}render(){const e=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="media"]')?.parentElement.tagName),a=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),t=!!this.label,s=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=this.interactive\|\|!!this.href,n=c("data-cell","data-cell--size-"+this.size,{"data-cell--vertical":this.vertical,"data-cell--has-media":e,"data-cell--has-suffix":a,"data-cell--has-content":s,"data-cell--no-label":!t,"data-cell--interactive":o\|\|r\|\|d,["data-cell--intent-"+this.intent]:this.intent}),f=this.elementId+"-label",u=this.elementId+"-value",v="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=v?"listitem":"group",h=r\|\|d?"button":void 0,p=v&&!h?"group":h,w=this.href?"a":this.interactive?"button":"div",_=l("swirl-stack",{key:"~~02d9b33111b38a7e01c215ab22316e4702273d2f~~",orientation:"horizontal",align:"center",spacing:"4"},l("span",{key:"~~7c214d31b78bc9ed73bef749144fb090845be335~~",class:"data-cell__label",id:f,role:o?void 0:"term"},this.label),this.tooltip&&l("swirl-tooltip",{key:"~~5507dcf689141cf6492a0e0ebbac7f6d30bb9571~~",class:"data-cell__tooltip",content:this.tooltip,position:"right"},l("swirl-icon-info",{key:"~~ffd009f55337721081dd67811178625da5296395~~",size:16,tabIndex:0})));return l(i,{key:"~~3938b80ef59b8499ca122057cb2a601215fe63ca~~",role:b},l(w,{key:"~~d5e938b1e20cbd8ae35b3010e69655f04f31c4b3~~",class:n,href:this.href,onClick:r\|\|d?this.handleClick:void 0,part:"data-cell",rel:this.href&&"_blank"===this.linkTarget?"noreferrer":void 0,role:o?void 0:p,tabIndex:o?void 0:r\|\|d?0:void 0,target:this.linkTarget,type:this.href?void 0:this.interactive?"button":void 0},e&&l("div",{key:"~~11698c07d07a15d3e1402d5e7f06549ce12fec19~~",class:"data-cell__media","aria-hidden":"true"},l("slot",{key:"~~6c98bbb53fae7915300beafb9dbecc35aff6287c~~",name:"media"})),l("div",{key:"~~9370d31ac4d2d23dc0f40bb3ece90a608e182b83~~",class:"data-cell__content"},t&&l("div",{key:"~~a5ce98e4af9f182a159e15ca5b967a506f5771e3~~",class:"data-cell__label-wrapper"},_),(s\|\|this.value\|\|a)&&l("div",{key:"~~2360d1c1af966919370d00c44217314b7d91eece~~",class:"data-cell__value-wrapper",role:o?void 0:"definition","aria-labelledby":t&&!o?f:void 0,id:u},s?l("div",{class:"data-cell__input"},l("slot",{name:"content"})):this.value&&l("div",{class:"data-cell__value"},this.value))),a&&l("div",{key:"~~85482b447cb0d16b3c738a78f943ae8fd26281d8~~",class:"data-cell__suffix"},l("slot",{key:"~~0568683b289f22aed8aa6e0fc621c36d50b4d177~~",name:"suffix"}))))}get el(){return this}static get style(){return':host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border:0;border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l));color:inherit;font:inherit;text-align:left;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.data-cell--interactive{position:relative;cursor:pointer}.data-cell--interactive::after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.data-cell--interactive:hover::after{background-color:var(--s-state-hovered)}.data-cell--interactive:active::after{background-color:var(--s-state-pressed)}.data-cell--interactive:focus:not(:focus-visible){outline:none}.data-cell--interactive:focus-visible{outline-color:var(--s-focus-default)}.data-cell--interactive.data-cell--intent-default:hover{background-color:var(--s-surface-raised-50-hovered)}.data-cell--interactive.data-cell--intent-default:active{background-color:var(--s-surface-raised-50-pressed)}.data-cell--interactive.data-cell--intent-default:hover::after,.data-cell--interactive.data-cell--intent-default:active::after{background-color:transparent}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--size-s{gap:var(--s-space-4);padding:var(--s-space-8);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-s))}.data-cell--size-s .data-cell__content{gap:var(--s-space-8)}.data-cell--size-s .data-cell__value{font-weight:var(--s-font-weight-medium)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}'}},[257,"swirl-data-cell",{href:[1],intent:[1],interactive:[4],label:[1],linkTarget:[1,"link-target"],size:[513],tooltip:[1],value:[1],vertical:[4]}]),f=n,u=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-data-cell":customElements.get(s(e))\|\|customElements.define(s(e),n);break;case"swirl-icon-info":customElements.get(s(e))\|\|r();break;case"swirl-stack":customElements.get(s(e))\|\|d();break;case"swirl-tooltip":customElements.get(s(e))\|\|o()}}))};export{f as SwirlDataCell,u as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as l,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";const n=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=t(this,"valueChange",7),this.intent="default",this.interactive=!1,this.size="m",this.vertical=!1,this.elementId="data-cell-"+crypto.randomUUID(),this.handleRadioClick=e=>{const a=e.target,t=this.el.querySelector('swirl-radio[slot="content"]');if(a.contains(t)){const e=t?.querySelector('input[type="radio"]');e.click()}},this.handleClick=e=>{this.handleRadioClick(e),this.valueChange.emit(e)}}render(){const e=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="media"]')?.parentElement.tagName),a=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),t=!!this.label,s=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=this.interactive\|\|!!this.href,n=c("data-cell","data-cell--size-"+this.size,{"data-cell--vertical":this.vertical,"data-cell--has-media":e,"data-cell--has-suffix":a,"data-cell--has-content":s,"data-cell--no-label":!t,"data-cell--interactive":o\|\|r\|\|d,["data-cell--intent-"+this.intent]:this.intent}),f=this.elementId+"-label",u=this.elementId+"-value",v="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,h=v?"listitem":"group",p=r\|\|d?"button":void 0,b=v&&!p?"group":p,w=this.href?"a":this.interactive?"button":"div",_=l("swirl-stack",{key:"7ad34827a5205354e48fb8d44d7e663af0b3e0ee",orientation:"horizontal",align:"center",spacing:"4"},l("span",{key:"0696ff836e826503297a2fbed0b49743974d9b70",class:"data-cell__label",id:f,role:o?void 0:"term"},this.label),this.tooltip&&l("swirl-tooltip",{key:"1c087f7fff440350a732b4a83db4852d835cc5a5",class:"data-cell__tooltip",content:this.tooltip,position:"right"},l("swirl-icon-info",{key:"4e49fc8cc8963e6137065226943e1aab5f96a967",size:16,tabIndex:0})));return l(i,{key:"d8741151fcb58555a5c6b9d6354894aa2f600141",role:h},l(w,{key:"1c2177d376e5793c320b095d69597922d0b1e525",class:n,href:this.href,onClick:r\|\|d?this.handleClick:void 0,part:"data-cell",rel:this.href&&"_blank"===this.linkTarget?"noreferrer":void 0,role:o?void 0:b,tabIndex:o?void 0:r\|\|d?0:void 0,target:this.linkTarget,type:this.href?void 0:this.interactive?"button":void 0},e&&l("div",{key:"f932281ccdd6ffb3ad45ea30ad83022363076348",class:"data-cell__media","aria-hidden":"true"},l("slot",{key:"10b1c89bb462221340420a62a9b63d83473e662d",name:"media"})),l("div",{key:"420ba1b98a7e34313dfea6f776ce3e063b3d05f3",class:"data-cell__content"},t&&l("div",{key:"3851e943afe689d83cd4b2bd7df09f53396f96cd",class:"data-cell__label-wrapper"},_),(s\|\|this.value\|\|a)&&l("div",{key:"9c388cc161f3a4699925c740fd3f5e5f4c25b34d",class:"data-cell__value-wrapper",role:o?void 0:"definition","aria-labelledby":t&&!o?f:void 0,id:u},s?l("div",{class:"data-cell__input"},l("slot",{name:"content"})):this.value&&l("div",{class:"data-cell__value"},this.value))),a&&l("div",{key:"bca5294b382bd87d2ce41520fea8bc9f16f08d95",class:"data-cell__suffix"},l("slot",{key:"28f983b93caaea5da5c8b26cf1c7ac8e88a87bc1",name:"suffix"}))))}get el(){return this}static get style(){return':host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border:0;border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l));color:inherit;font:inherit;text-align:left;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.data-cell--interactive{position:relative;cursor:pointer}.data-cell--interactive::after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.data-cell--interactive:hover::after{background-color:var(--s-state-hovered)}.data-cell--interactive:active::after{background-color:var(--s-state-pressed)}.data-cell--interactive:focus:not(:focus-visible){outline:none}.data-cell--interactive:focus-visible{outline-color:var(--s-focus-default)}.data-cell--interactive.data-cell--intent-default:hover{background-color:var(--s-surface-raised-50-hovered)}.data-cell--interactive.data-cell--intent-default:active{background-color:var(--s-surface-raised-50-pressed)}.data-cell--interactive.data-cell--intent-default:hover::after,.data-cell--interactive.data-cell--intent-default:active::after{background-color:transparent}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--size-s{gap:var(--s-space-4);padding:var(--s-space-8);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-s))}.data-cell--size-s .data-cell__content{gap:var(--s-space-8)}.data-cell--size-s .data-cell__value{font-weight:var(--s-font-weight-medium)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}'}},[257,"swirl-data-cell",{href:[1],intent:[1],interactive:[4],label:[1],linkTarget:[1,"link-target"],size:[513],tooltip:[1],value:[1],vertical:[4]}]),f=n,u=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-data-cell":customElements.get(s(e))\|\|customElements.define(s(e),n);break;case"swirl-icon-info":customElements.get(s(e))\|\|r();break;case"swirl-stack":customElements.get(s(e))\|\|d();break;case"swirl-tooltip":customElements.get(s(e))\|\|o()}}))};export{f as SwirlDataCell,u as defineCustomElement}

package/dist/components/swirl-date-input.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{f as o,I as d,p as c,i as l}from"./index3.js";import{D as p}from"./media-query.service.js";import{i as h}from"./utils.js";import{d as u}from"./swirl-date-picker2.js";import{d as m}from"./swirl-icon-today2.js";import{d as w}from"./swirl-popover2.js";import{d as f}from"./swirl-popover-trigger2.js";import{d as b}from"./wc-datepicker2.js";const y="yyyy-MM-dd",k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.invalidInput=e(this,"invalidInput",7),this.valueChange=e(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly\|\|"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),h()\|\|this.focus())},this.onMouseDown=()=>{this.readonly\|\|"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,y);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id="swirl-date-input-"+t,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode\|\|!h())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern\|\|(this.pattern=y),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return l(t)?(this.value=o(t,y),i):(this.invalidInput.emit(""+t),"")},parse:t=>c(t,this.pattern,new Date)}),this.mask.on("accept",(()=>{""===this.mask.value&&(this.value="",this.valueChange.emit(""))})),this.updateValue()}updateValue(){if(this.value){const t=c(this.value,y,new Date);if(l(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}else this.mask.value=""}render(){const t=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,i=this.value?c(this.value,y,new Date):void 0,e=l(i)?i:void 0,r=n("date-input",{"date-input--inline":this.inline});return s(a,{key:"~~da068b51e091af3568aae56c4edc062a02250a0c~~"},s("div",{key:"~~2b3e85d7c41297c5c16fcd7da3911918709bb88b~~",class:r},s("input",{key:"~~7988a33053e6126b4e2c2db07ecd35154b5dc118~~","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode\|\|this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&s("swirl-popover-trigger",{key:"~~598635c0a78132ff023c7269ef1a1d0fb3a5598e~~",swirlPopover:"popover-"+this.id},s("button",{key:"~~c48e10b5e9a3f38129eab24773e95b54488b9567~~","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{key:"~~3e4fdb17f2c2a8d601773ceddc38fd83ec22032a~~",size:this.iconSize})))),!(this.disabled\|\|this.readonly)&&s("swirl-popover",{key:"~~ed5f0026cf1efc75b48994a83736e23b93c75527~~",animation:"scale-in-y",class:"date-input__date-picker-popover",id:"popover-"+this.id,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{key:"~~d49902ee534677e0ce8f7bf3925d574a702c81e9~~",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:e,startDate:e})))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h .sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input--inline.sc-swirl-date-input .date-input__input.sc-swirl-date-input::-moz-placeholder{color:transparent}.date-input--inline.sc-swirl-date-input .date-input__input.sc-swirl-date-input::placeholder{color:transparent}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}.date-input__input.sc-swirl-date-input::-moz-placeholder{color:var(--swirl-input-placeholder-color)}.date-input__input.sc-swirl-date-input::placeholder{color:var(--swirl-input-placeholder-color)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}"}},[2,"swirl-date-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],datePickerDisableDate:[16],datePickerLabel:[1,"date-picker-label"],datePickerTriggerLabel:[1,"date-picker-trigger-label"],disabled:[4],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inline:[4],invalid:[4],labels:[16],locale:[1],placeholder:[1],preferredInputMode:[1,"preferred-input-mode"],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32],isInPickOnlyMode:[32],openPicker:[64]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),v=k,g=function(){"undefined"!=typeof customElements&&["swirl-date-input","swirl-date-picker","swirl-icon-today","swirl-popover","swirl-popover-trigger","wc-datepicker"].forEach((t=>{switch(t){case"swirl-date-input":customElements.get(r(t))\|\|customElements.define(r(t),k);break;case"swirl-date-picker":customElements.get(r(t))\|\|u();break;case"swirl-icon-today":customElements.get(r(t))\|\|m();break;case"swirl-popover":customElements.get(r(t))\|\|w();break;case"swirl-popover-trigger":customElements.get(r(t))\|\|f();break;case"wc-datepicker":customElements.get(r(t))\|\|b()}}))};export{v as SwirlDateInput,g as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{f as o,I as d,p as c,i as l}from"./index3.js";import{D as p}from"./media-query.service.js";import{i as h}from"./utils.js";import{d as u}from"./swirl-date-picker2.js";import{d as m}from"./swirl-icon-today2.js";import{d as w}from"./swirl-popover2.js";import{d as f}from"./swirl-popover-trigger2.js";import{d as b}from"./wc-datepicker2.js";const y="yyyy-MM-dd",k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.invalidInput=e(this,"invalidInput",7),this.valueChange=e(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly\|\|"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),h()\|\|this.focus())},this.onMouseDown=()=>{this.readonly\|\|"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,y);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id="swirl-date-input-"+t,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode\|\|!h())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern\|\|(this.pattern=y),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return l(t)?(this.value=o(t,y),i):(this.invalidInput.emit(""+t),"")},parse:t=>c(t,this.pattern,new Date)}),this.mask.on("accept",(()=>{""===this.mask.value&&(this.value="",this.valueChange.emit(""))})),this.updateValue()}updateValue(){if(this.value){const t=c(this.value,y,new Date);if(l(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}else this.mask.value=""}render(){const t=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,i=this.value?c(this.value,y,new Date):void 0,e=l(i)?i:void 0,r=n("date-input",{"date-input--inline":this.inline});return s(a,{key:"3d227b767aebb1422ce118c3518e7d9b981d4cdf"},s("div",{key:"519ba3868d61325645f56c573cc8b0b414bc97e2",class:r},s("input",{key:"2e3f60ee0e301d92b917427d637c2d621e2a1941","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode\|\|this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&s("swirl-popover-trigger",{key:"512ddd1e2f76b31e2a169e4eaef0c14e52720814",swirlPopover:"popover-"+this.id},s("button",{key:"50d6ee4160a5665ed7ce056a106eef6cc1238dec","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{key:"21663e5a562c6b70407422f9860cc707d6da81f8",size:this.iconSize})))),!(this.disabled\|\|this.readonly)&&s("swirl-popover",{key:"5c321be0f59ac88fc13cbd504123268f1d0c6282",animation:"scale-in-y",class:"date-input__date-picker-popover",id:"popover-"+this.id,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{key:"af484f88ccba283e5c3f2934b947686b984434bc",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:e,startDate:e})))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h .sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input--inline.sc-swirl-date-input .date-input__input.sc-swirl-date-input::-moz-placeholder{color:transparent}.date-input--inline.sc-swirl-date-input .date-input__input.sc-swirl-date-input::placeholder{color:transparent}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}.date-input__input.sc-swirl-date-input::-moz-placeholder{color:var(--swirl-input-placeholder-color)}.date-input__input.sc-swirl-date-input::placeholder{color:var(--swirl-input-placeholder-color)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}"}},[2,"swirl-date-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],datePickerDisableDate:[16],datePickerLabel:[1,"date-picker-label"],datePickerTriggerLabel:[1,"date-picker-trigger-label"],disabled:[4],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inline:[4],invalid:[4],labels:[16],locale:[1],placeholder:[1],preferredInputMode:[1,"preferred-input-mode"],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32],isInPickOnlyMode:[32],openPicker:[64]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),v=k,g=function(){"undefined"!=typeof customElements&&["swirl-date-input","swirl-date-picker","swirl-icon-today","swirl-popover","swirl-popover-trigger","wc-datepicker"].forEach((t=>{switch(t){case"swirl-date-input":customElements.get(r(t))\|\|customElements.define(r(t),k);break;case"swirl-date-picker":customElements.get(r(t))\|\|u();break;case"swirl-icon-today":customElements.get(r(t))\|\|m();break;case"swirl-popover":customElements.get(r(t))\|\|w();break;case"swirl-popover-trigger":customElements.get(r(t))\|\|f();break;case"wc-datepicker":customElements.get(r(t))\|\|b()}}))};export{v as SwirlDateInput,g as defineCustomElement}

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

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

package/dist/components/swirl-description-list-item.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as i,HTMLElement as t,h as e,Host as s,transformTag as o}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{d as a}from"./swirl-icon-info2.js";import{d as n}from"./swirl-tooltip2.js";const r=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.bordered=!0}render(){const i=!!this.el.querySelector('[slot="tools"]'),t=!!this.el.querySelector('[slot="additional-content"]'),o=d("description-list-item",{"description-list-item--bordered":this.bordered,"description-list-item--has-additional-content":t,"description-list-item--has-tools":i});return e(s,{key:"~~e2dae4c05e0d737b33bb690f9571b01bc5724c40~~",role:"listitem"},e("div",{key:"~~f4bc749476eefba93aebb6873040cb2035c7f9c6~~",class:o,part:"description-list-item",role:"group"},e("div",{key:"~~557d6ce9b7b0d87dad52dbf40ffbd21056ba89c0~~",class:"description-list-item__inner"},e("div",{key:"~~11b529cd14f9f936ab769ce8e8406dacfd442a1d~~",class:"description-list-item__text-container"},e("div",{key:"~~4b15cc2f7f392d7b5c8deea5e402f666bca7ba3f~~",class:"description-list-item__term",part:"description-list-item__term",role:"term"},this.term,this.tooltip&&e("span",{key:"~~edf2abe8f8bb3665c757526cb92d26dc7c24adc8~~",class:"description-list-item__tooltip"},e("swirl-tooltip",{key:"~~fa412c817afbc14dd360712900af8b1397459e2a~~",content:this.tooltip,position:"right"},e("swirl-icon-info",{key:"~~e2dd532cdc0f782a604a0dfb470bdcde8579b845~~",size:16,tabIndex:0})))),e("div",{key:"~~1c2bbf097b840f96a1c44b298f8070179c990d96~~",style:{maxWidth:this.maxWidth},class:"description-list-item__description",role:"definition"},e("slot",{key:"~~9728aa72db29eda46aaa41b692ce03f6d4ea2712~~"}))),e("div",{key:"~~6fb83ccee5fc2691322342ed7db68f87ee5f0590~~",class:"description-list-item__tools"},e("slot",{key:"~~8f4b079d7015dacd65688af622c62fb9fecadb93~~",name:"tools"}))),e("div",{key:"~~bf8c2e6b9968d219ebba159e541dd00587e951ea~~",class:"description-list-item__additional-content"},e("slot",{key:"~~4a1abd184c498cb1e49f2012c94e9422793f4065~~",name:"additional-content"}))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.description-list-item__inner{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:flex-start;color:var(--s-text-default);line-height:var(--s-line-height-base);justify-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__inner{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item:not(.description-list-item--has-additional-content) .description-list-item__additional-content{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{display:flex;min-height:2.625rem;flex-shrink:0;align-items:center}.description-list-item__additional-content{padding-bottom:var(--s-space-8);flex-basis:100%;flex-shrink:0}"}},[257,"swirl-description-list-item",{bordered:[4],maxWidth:[1,"max-width"],term:[1],tooltip:[1]}]),c=r,l=function(){"undefined"!=typeof customElements&&["swirl-description-list-item","swirl-icon-info","swirl-tooltip"].forEach((i=>{switch(i){case"swirl-description-list-item":customElements.get(o(i))\|\|customElements.define(o(i),r);break;case"swirl-icon-info":customElements.get(o(i))\|\|a();break;case"swirl-tooltip":customElements.get(o(i))\|\|n()}}))};export{c as SwirlDescriptionListItem,l as defineCustomElement}
1	+ import{proxyCustomElement as i,HTMLElement as t,h as e,Host as s,transformTag as o}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{d as a}from"./swirl-icon-info2.js";import{d as n}from"./swirl-tooltip2.js";const r=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.bordered=!0}render(){const i=!!this.el.querySelector('[slot="tools"]'),t=!!this.el.querySelector('[slot="additional-content"]'),o=d("description-list-item",{"description-list-item--bordered":this.bordered,"description-list-item--has-additional-content":t,"description-list-item--has-tools":i});return e(s,{key:"4970a43d2827011defa2b0ed17beb4dc41336a36",role:"listitem"},e("div",{key:"69515ab209d3dbc60f9a52941d72461e9649b9ae",class:o,part:"description-list-item",role:"group"},e("div",{key:"2428ae9fbc5304c3a271978b2e298206da66d34e",class:"description-list-item__inner"},e("div",{key:"16b05061df5a03c5b79bee249261b67804e98510",class:"description-list-item__text-container"},e("div",{key:"71f2b6deffd96329854b435ea65296bb70865b73",class:"description-list-item__term",part:"description-list-item__term",role:"term"},this.term,this.tooltip&&e("span",{key:"c3d0d10992c81e7f0ce86e4b7450aa4f1ce0c146",class:"description-list-item__tooltip"},e("swirl-tooltip",{key:"5811c5cae4ac3fd526b3251fc7552181fd810406",content:this.tooltip,position:"right"},e("swirl-icon-info",{key:"e191dd42aecc953df63147506e758d8fbadc1504",size:16,tabIndex:0})))),e("div",{key:"3bb5afa6d9fa5c09ac8f2334116bd2876badf3c0",style:{maxWidth:this.maxWidth},class:"description-list-item__description",role:"definition"},e("slot",{key:"b2be6dba464bae5ce68ce1e9825bf78663fdb088"}))),e("div",{key:"b43577ab09d34cd6141882e50de9121527d44692",class:"description-list-item__tools"},e("slot",{key:"e7cb271bdc981848fb5971464223434ac31b6c77",name:"tools"}))),e("div",{key:"1020ad2c7c9193f0f4027fde73db8f91efc5b197",class:"description-list-item__additional-content"},e("slot",{key:"f90ae53857c804bef1a326ada27a01423c696e77",name:"additional-content"}))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.description-list-item__inner{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:flex-start;color:var(--s-text-default);line-height:var(--s-line-height-base);justify-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__inner{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item:not(.description-list-item--has-additional-content) .description-list-item__additional-content{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{display:flex;min-height:2.625rem;flex-shrink:0;align-items:center}.description-list-item__additional-content{padding-bottom:var(--s-space-8);flex-basis:100%;flex-shrink:0}"}},[257,"swirl-description-list-item",{bordered:[4],maxWidth:[1,"max-width"],term:[1],tooltip:[1]}]),l=r,c=function(){"undefined"!=typeof customElements&&["swirl-description-list-item","swirl-icon-info","swirl-tooltip"].forEach((i=>{switch(i){case"swirl-description-list-item":customElements.get(o(i))\|\|customElements.define(o(i),r);break;case"swirl-icon-info":customElements.get(o(i))\|\|a();break;case"swirl-tooltip":customElements.get(o(i))\|\|n()}}))};export{l as SwirlDescriptionListItem,c as defineCustomElement}

package/dist/components/swirl-description-list.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as n}from"@stencil/core/internal/client";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return i(s,{key:"~~f73f7d135974ca70c52cbc6ec623aa61bb67a96a~~"},i("div",{key:"~~3f55113d6ae5506ed9e3122cb80107ed6771fe0d~~",class:"description-list",role:"list"},i("slot",{key:"~~80b4b4b012683b30b83658956ffadc2a3b5ed823~~"})))}static get style(){return":host{display:block;container-type:inline-size;container-name:description-list}:host *{box-sizing:border-box}.description-list{display:block;max-width:100%;margin:0}"}},[257,"swirl-description-list"]),o=c,r=function(){"undefined"!=typeof customElements&&["swirl-description-list"].forEach((e=>{"swirl-description-list"===e&&(customElements.get(n(e))\|\|customElements.define(n(e),c))}))};export{o as SwirlDescriptionList,r as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as c}from"@stencil/core/internal/client";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return i(s,{key:"27f96e367e26b9c1c7c49bdf5aff9fed5364a437"},i("div",{key:"cec090b1ff65545a24796932791803aa91d18d8c",class:"description-list",role:"list"},i("slot",{key:"f7da0815863fdcdc75a152f7e5f14ccf0337ab46"})))}static get style(){return":host{display:block;container-type:inline-size;container-name:description-list}:host *{box-sizing:border-box}.description-list{display:block;max-width:100%;margin:0}"}},[257,"swirl-description-list"]),o=n,r=function(){"undefined"!=typeof customElements&&["swirl-description-list"].forEach((e=>{"swirl-description-list"===e&&(customElements.get(c(e))\|\|customElements.define(c(e),n))}))};export{o as SwirlDescriptionList,r as defineCustomElement}