@postnord/web-components/postnord-web-components/p-b80c060c.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as e,r as n,h as a,a as o}from"./p-XKg-ydzH.js";const t=class{constructor(e){n(this,e)}type="box";width;height;borderRadius;small=!1;large=!1;lines=3;automatic=!1;hide=!1;getStyle(){const e={};return this.width&&(e.width=this.width),this.height&&(e.height=this.height),this.borderRadius&&(e["border-radius"]=this.borderRadius),e}renderParagraph(){const e=[];for(let n=0;n<this.lines;n++)e.push(a("div",{class:"pn-skeleton-loader-line",style:n===this.lines-1?{width:"75%"}:void 0}));return e}renderTable(){const e=[];for(let n=0;n<this.lines;n++)e.push(a("div",{class:"pn-skeleton-loader-table-row"}));return e}render(){const e=this.getStyle();return this.automatic?a(o,null,a("div",{class:{"pn-skeleton-loader--automatic":!this.hide},role:this.hide?void 0:"status","aria-busy":this.hide?void 0:"true","aria-label":this.hide?void 0:"Loading"},a("slot",null))):this.hide?a(o,{style:{display:"none"}}):a(o,null,"paragraph"===this.type?a("div",{class:"pn-skeleton-loader pn-skeleton-loader--paragraph",style:e,role:"status","aria-busy":"true","aria-label":"Loading"},this.renderParagraph()):"table"===this.type?a("div",{class:"pn-skeleton-loader pn-skeleton-loader--table",style:e,role:"status","aria-busy":"true","aria-label":"Loading"},a("div",{class:"pn-skeleton-loader-table-header"}),this.renderTable()):"card"===this.type?a("div",{class:"pn-skeleton-loader pn-skeleton-loader--card",style:e,role:"status","aria-busy":"true","aria-label":"Loading"},a("div",{class:"pn-skeleton-loader-card-image"}),a("div",{class:"pn-skeleton-loader-card-content"},this.renderParagraph())):"tile"===this.type?a("div",{class:"pn-skeleton-loader pn-skeleton-loader--tile",style:e,role:"status","aria-busy":"true","aria-label":"Loading"},a("div",{class:"pn-skeleton-loader-tile-circle"}),a("div",{class:"pn-skeleton-loader-tile-content"},a("div",{class:"pn-skeleton-loader-line"}),a("div",{class:"pn-skeleton-loader-line",style:{width:"75%"}}))):"header"===this.type?a("div",{class:"pn-skeleton-loader pn-skeleton-loader--header",style:e,role:"status","aria-busy":"true","aria-label":"Loading"},a("div",{class:"pn-skeleton-loader-header-back"}),a("div",{class:"pn-skeleton-loader-header-heading"}),a("div",{class:"pn-skeleton-loader-header-subheading"})):a("div",{class:{"pn-skeleton-loader":!0,[`pn-skeleton-loader--${this.type}`]:!0,"pn-skeleton-loader--small":this.small,"pn-skeleton-loader--large":this.large},style:e,role:"status","aria-busy":"true","aria-label":"Loading"}))}};t.style=`@keyframes pn-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}${e("pn-skeleton-loader")}{display:block;background:transparent}${e("pn-skeleton-loader")} .pn-skeleton-loader{background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader--box{width:100%;height:100%;min-height:3em;min-width:10em;border-radius:0.5em}${e("pn-skeleton-loader")} .pn-skeleton-loader--card{width:100%;min-width:10em;border-radius:0.5em;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);background:#ffffff;animation:none;overflow:hidden;display:flex;flex-direction:column}${e("pn-skeleton-loader")} .pn-skeleton-loader-card-image{width:100%;height:10em;clip-path:ellipse(175% 100% at top center);background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-card-image{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader-card-content{display:flex;flex-direction:column;gap:0.5em;padding:clamp(0.75em, 5vw, 1.5em)}${e("pn-skeleton-loader")} .pn-skeleton-loader--tile{width:100%;border-radius:0.5em;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);background:#ffffff;animation:none;display:flex;flex-direction:column;align-items:center;padding:clamp(0.75em, 3vw, 1.5em);gap:clamp(1em, 5vw, 1.5em);text-align:center}${e("pn-skeleton-loader")} .pn-skeleton-loader-tile-circle{width:7em;height:7em;border-radius:50%;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-tile-circle{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader-tile-content{display:flex;flex-direction:column;gap:0.5em;width:100%}${e("pn-skeleton-loader")} .pn-skeleton-loader--header{width:100%;background:none;animation:none;display:flex;flex-direction:column;gap:1em;padding:clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em)}${e("pn-skeleton-loader")} .pn-skeleton-loader-header-back{width:5em;height:1em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-header-back{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader-header-heading{width:40%;height:2em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-header-heading{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader-header-subheading{width:30%;height:1em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-header-subheading{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader--chip{display:inline-block;width:6em;height:2.5em;border-radius:0.5em}${e("pn-skeleton-loader")} .pn-skeleton-loader--chip.pn-skeleton-loader--small{height:2em;width:5em}${e("pn-skeleton-loader")} .pn-skeleton-loader--chip.pn-skeleton-loader--large{height:2.875em;width:7em}${e("pn-skeleton-loader")} .pn-skeleton-loader--input{width:100%;min-width:10em;height:3em;border-radius:0.5em}${e("pn-skeleton-loader")} .pn-skeleton-loader--avatar{width:3em;height:3em;border-radius:50%}${e("pn-skeleton-loader")} .pn-skeleton-loader--button{display:inline-block;min-width:5.5em;height:3em;border-radius:3em}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic{position:relative;background:none;animation:none;pointer-events:none}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic *{color:transparent !important;text-shadow:none !important}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic img,${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic svg,${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic ${e("pn-icon")},${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic ${e("pn-illustration")}{visibility:hidden}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton]{position:relative;overflow:hidden}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton]::after{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=avatar]{border-radius:50%;overflow:hidden}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=button]{border-radius:3em;min-height:3em;min-width:5.5em}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=button] *{visibility:hidden}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=chip]{border-radius:0.5em;min-height:2.5em;min-width:4em}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=chip] *{visibility:hidden}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]::after{display:none}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]>*{position:relative;overflow:hidden;border-radius:0.25em}${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]>*::after{content:"";position:absolute;inset:0;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]>*::after{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader--text{width:100%;min-width:10em;height:1em;border-radius:0.25em}${e("pn-skeleton-loader")} .pn-skeleton-loader--paragraph{display:flex;flex-direction:column;gap:0.5em;min-width:10em;background:none;animation:none}${e("pn-skeleton-loader")} .pn-skeleton-loader--table{display:flex;flex-direction:column;gap:0.5em;min-width:10em;background:none;animation:none;border-radius:0.5em}${e("pn-skeleton-loader")} .pn-skeleton-loader-table-header{width:100%;height:4em;border-radius:0.5em 0.5em 0 0;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-table-header{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader-table-row{width:100%;height:3em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}${e("pn-skeleton-loader")} .pn-skeleton-loader-table-row:last-child{border-radius:0 0 0.5em 0.5em}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-table-row{animation:none}}${e("pn-skeleton-loader")} .pn-skeleton-loader-line{width:100%;height:1em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}@media (prefers-reduced-motion: reduce){${e("pn-skeleton-loader")} .pn-skeleton-loader-line{animation:none}}`;export{t as pn_skeleton_loader}