@getflip/swirl-components 0.252.0 → 0.252.1

package/dist/swirl-components/p-9428f8b6.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as e,H as s,g as o}from"./p-30e99c25.js";import{c as r}from"./p-a5dce9e6.js";const a=class{constructor(e){i(this,e),this.gifStarted=t(this,"gifStarted",7),this.gifStopped=t(this,"gifStopped",7),this.imageError=t(this,"imageError",7),this.imageLoad=t(this,"imageLoad",7),this.onLoad=()=>{this.error=!1,this.loaded=!0,this.imageLoad.emit()},this.onError=()=>{this.loaded=!0,this.error=!0,this.imageError.emit()},this.playGif=()=>{this.gifPaused=!1,this.computedSrc=this.src,this.gifStarted.emit()},this.handleControlClick=i=>{i.stopImmediatePropagation(),this.gifPaused?this.playGif():this.pauseGif()},this.alt=void 0,this.gifPauseLabel="Pause GIF playback",this.gifPlayLabel="Continue GIF playback",this.icon=void 0,this.interactive=void 0,this.loading=void 0,this.overlay=void 0,this.showGifControls=void 0,this.src=void 0,this.error=!1,this.loaded=!1,this.inViewport=!1,this.gifPaused=!1,this.computedSrc=void 0}async play(){this.playGif()}async pause(){this.pauseGif()}watchSrcProp(){this.computedSrc=this.src,this.gifPaused=!1}componentDidLoad(){this.setupIntersectionObserver(),this.computedSrc=this.src,this.img?.complete&&(this.loaded=!0)}componentDidRender(){this.img?.complete&&!this.loaded&&(this.loaded=!0)}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.computedSrc=""}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.el))}onVisibilityChange(i){this.inViewport=i.some((i=>i.isIntersecting))}async pauseGif(){const i=this.img,t=await this.readImageFromCanvas(i.src);this.gifPaused=!0,this.computedSrc=t,this.gifStopped.emit()}readImageFromCanvas(i){return new Promise(((t,e)=>{const s=new Image;s.src=i,s.onload=i=>{const e=i.target,s=document.createElement("canvas"),o=s.getContext("2d");s.width=e.width,s.height=e.height,o.drawImage(e,0,0,e.width,e.height),t(s.toDataURL("image/jpeg"))},s.onerror=()=>e()}))}render(){const i=this.interactive?"button":"div",t=this.gifPaused||!Boolean(this.loading)||"eager"===this.loading||this.loaded&&("intersecting"!==this.loading||this.inViewport),o=Math.min(this.el.parentElement?.children.length,4)??1,a=r("image-grid-item",{"image-grid-item--has-error":this.error,"image-grid-item--has-overlay":this.overlay});return e(s,{key:"75658ab5e5c9dfa05b47af29e6b173045a3046b0","data-sibling-count":o,role:"listitem"},e(i,{key:"730e1ae5791eea95fb9156b6c503ad8a86d0702e",class:a,type:this.interactive?"button":void 0},e("div",{key:"1af6c077e717b71b40e8f9a815a731218d0a37f4",class:"image-grid-item__background",style:{backgroundImage:t?`url(${this.computedSrc})`:void 0}}),"intersecting"!==this.loading||this.inViewport||this.gifPaused?e("img",{alt:this.alt,class:"image-grid-item__image",loading:"intersecting"!==this.loading?this.loading:void 0,onError:this.onError,onLoad:this.onLoad,ref:i=>this.img=i,src:this.computedSrc}):e("div",{class:"image-grid-item__loading-placeholder"}),this.showGifControls&&e("swirl-stack",{key:"0fd42074e485aa8c504060db5259891403e49665",class:"image-grid-item__gif-controls",orientation:"horizontal",spacing:"4"},e("button",{key:"66440c7eaea08167d32dceb3efe89bea404a94f7",class:"image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button",onClick:this.handleControlClick,type:"button","aria-label":this.gifPaused?this.gifPlayLabel:this.gifPauseLabel},e(this.gifPaused?"swirl-icon-play-arrow":"swirl-icon-pause",{size:20})),e("div",{key:"7311b452251d0dbd0004b50855b51b8dd4a45a26",class:"image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label"},e("swirl-icon-gif",{key:"fda7c865e98ba6235035f21b63437bf2840c748a",size:20}))),this.loaded&&!this.error&&this.icon&&!Boolean(this.overlay)&&e("div",{key:"ec261fd8161f6c4a0dbd1e4d453d53efa6078ffb",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&e("div",{key:"7ba82f4ae19a32b3645a9b78e896b77fe11d0fe7",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&e("div",{key:"5b10aa43ee80c16d2f49fc30d9a638700056bf6e",class:"image-grid-item__spinner"},e("swirl-spinner",{key:"4e654ea8e949853cf0b2ab7c624a7d8335920117"})),this.loaded&&this.error&&e("div",{key:"2cebd11ed5552cd6c8e1637a3b0dc88858d8d01d",class:"image-grid-item__error"},e("swirl-icon-error",{key:"1ceb0a99118b6cc9ac2e693e09010ee5213db913",color:"critical"}))))}get el(){return o(this)}static get watchers(){return{src:["watchSrcProp"]}}};a.style=':host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:"";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:"";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}';export{a as swirl_image_grid_item}

package/dist/swirl-components/p-a03f56fa.entry.js

@@ -1 +0,0 @@
-import{r as n,h as i,H as e,g as a}from"./p-30e99c25.js";import{c as t}from"./p-a5dce9e6.js";const l=class{constructor(i){n(this,i),this.active=void 0,this.badgeLabel=void 0,this.boxed=void 0,this.hideLabel=!1,this.href=void 0,this.inlineLabel=void 0,this.inlineLabelColor="default",this.label=void 0,this.target=void 0,this.tiled=void 0,this.withGradient=void 0}render(){const n=t("shell-navigation-item",{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--tiled":this.tiled,"shell-navigation-item--gradient":this.withGradient}),a=t("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),l=Boolean(this.href);return i(e,{key:"a4dbc4f2016615f8547b1cf9a7eb35993674fbbc"},i("swirl-tooltip",{key:"448e6662a88636305d0a4ae509a3e3c9127d9834",active:this.hideLabel,content:this.label,delay:100,position:"right",positioning:"fixed"},i(l?"a":"button",{key:"3431d06f77da580ff1b9bc3a0ae9dfb6891b519b",class:n,href:this.href,target:this.target,type:l?void 0:"button"},i("span",{key:"6918c395bf507fd08925164d3cef5357a25aed26",class:"shell-navigation-item__icon"},i("slot",{key:"65cf75ea3bd5d2b329c121cdee9e0e1ee64459e6",name:"icon"})),this.hideLabel?i("swirl-visually-hidden",null,i("span",{class:a},this.label)):i("span",{class:a},this.label),null!=this.badgeLabel&&i("swirl-badge",{key:"f4b62970241ba6417641cb8b1ce01b426454f8ee","aria-label":this.badgeLabel,class:t("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"}))))}get el(){return a(this)}};l.style='/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  --swirl-app-icon-size: 1.5rem;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-width: var(--s-border-width-default);\n      border-style: solid;\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    flex-direction: column;\n    container-type: unset;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n      position: absolute;\n      left: var(--s-space-12);\n      top: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n          content: "";\n          position: absolute;\n          width: 100%;\n          aspect-ratio: 1;\n          display: inline-block;\n          border-radius: var(--s-border-radius-base);\n          background-image: linear-gradient(\n            rgba(0, 0, 0, 0),\n            rgba(0, 0, 0, 0.8)\n          );\n        }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      text-align: start;\n      font-weight: var(--s-font-weight-semibold);\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      color: var(--s-text-default);\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n      position: absolute;\n      bottom: var(--s-space-12);\n      left: var(--s-space-12);\n      margin-right: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n        color: rgba(242, 242, 242, 1);\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n        color: rgb(25, 25, 25);\n      }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n';export{l as swirl_shell_navigation_item}