@oslokommune/punkt-elements 16.25.0 → 16.25.2

package/src/components/loader/loader.ts

@@ -6,9 +6,12 @@ import { slotContent } from '@/directives/slot-content'
 import { TPktSize } from '@/types/size'
 import '@/components/icon'
 
+const defaultAnimationPath = 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+
 // Allow global override of animation assets path
-window.pktAnimationPath =
-  window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+if (typeof window !== 'undefined') {
+  window.pktAnimationPath = window.pktAnimationPath || defaultAnimationPath
+}
 
 export type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes'
 
@@ -54,7 +57,8 @@ export class PktLoader extends PktElementWithSlot implements IPktLoader {
   @property({ type: String }) message: string | null = null
   @property({ type: String }) size: TPktSize = 'medium'
   @property({ type: String }) variant: TPktLoaderVariant = 'shapes'
-  @property({ type: String }) loadingAnimationPath: string | undefined = window.pktAnimationPath
+  @property({ type: String }) loadingAnimationPath: string | undefined =
+    typeof window !== 'undefined' ? window.pktAnimationPath : defaultAnimationPath
 
   @state() private _shouldDisplayLoader: boolean = false
 

package/dist/button-Dwv11n6R.cjs

@@ -1,27 +0,0 @@
-const e=require(`./element-CXAtr6Gu.cjs`),t=require(`./class-map-B8Ja0q7n.cjs`),n=require(`./element-with-slot-Cmxb9h4H.cjs`);require(`./icon-Dw6I0HDV.cjs`);const r=require(`./if-defined-LTjAScFG.cjs`);window.pktAnimationPath=window.pktAnimationPath||`https://punkt-cdn.oslo.kommune.no/latest/animations/`;var i=class extends n.t{constructor(...e){super(...e),this.iconName=`user`,this.secondIconName=`user`,this.mode=`light`,this.size=`medium`,this.fullWidth=!1,this.fullWidthOnMobile=!1,this.skin=`primary`,this.variant=`label-only`,this.state=`normal`,this.type=`button`,this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.preventDefault(),e.stopImmediatePropagation())},!0),this.addEventListener(`keydown`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopImmediatePropagation())},!0)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`disabled`&&n===`false`&&(this.disabled=!1),(e===`isloading`||e===`isLoading`)&&n===`false`&&(this.isLoading=!1)}firstUpdated(e){super.firstUpdated(e),this.disabled===`false`&&(this.disabled=!1),this.isLoading===`false`&&(this.isLoading=!1)}render(){let i=this.form??this.getAttribute(`form`)??void 0;return e.p`
-      <button
-        class=${t.t({"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--full":!!this.fullWidth,"pkt-btn--full-small":!!this.fullWidthOnMobile,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading})}
-        type=${this.type}
-        ?disabled=${!!this.disabled}
-        aria-busy=${r.t(this.isLoading?`true`:void 0)}
-        aria-disabled=${r.t(this.disabled||this.isLoading?`true`:void 0)}
-        form=${r.t(i)}
-      >
-        ${this.isLoading?e.p`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path=${r.t(this.loadingAnimationPath)}
-            ></pkt-icon>`:e.d}
-        ${this.variant===`label-only`?e.d:e.p`<pkt-icon
-              class="pkt-btn__icon pkt-icon"
-              name=${this.iconName}
-              path=${r.t(this.iconPath)}
-            ></pkt-icon>`}
-        <span class="pkt-btn__text">${n.n(this)}</span>
-        ${this.variant===`icons-right-and-left`?e.p`<pkt-icon
-              class="pkt-btn__icon"
-              name=${this.secondIconName}
-              path=${r.t(this.secondIconPath)}
-            ></pkt-icon>`:e.d}
-      </button>
-    `}};e.n([e.o({type:String})],i.prototype,`iconName`,void 0),e.n([e.o({type:String})],i.prototype,`secondIconName`,void 0),e.n([e.o({type:String})],i.prototype,`iconPath`,void 0),e.n([e.o({type:String})],i.prototype,`secondIconPath`,void 0),e.n([e.o({type:String})],i.prototype,`mode`,void 0),e.n([e.o({type:String})],i.prototype,`size`,void 0),e.n([e.o({type:Boolean,attribute:`full-width`})],i.prototype,`fullWidth`,void 0),e.n([e.o({type:Boolean,attribute:`full-width-on-mobile`})],i.prototype,`fullWidthOnMobile`,void 0),e.n([e.o({type:String})],i.prototype,`color`,void 0),e.n([e.o({type:String})],i.prototype,`skin`,void 0),e.n([e.o({type:String})],i.prototype,`variant`,void 0),e.n([e.o({type:String,reflect:!0})],i.prototype,`state`,void 0),e.n([e.o({type:String,reflect:!0})],i.prototype,`type`,void 0),e.n([e.o({type:String})],i.prototype,`form`,void 0),e.n([e.o({type:Boolean,reflect:!0})],i.prototype,`isLoading`,void 0),e.n([e.o({type:Boolean,reflect:!0})],i.prototype,`disabled`,void 0),e.n([e.o({type:String})],i.prototype,`loadingAnimationPath`,void 0);try{e.s(`pkt-button`)(i)}catch{console.warn(`Forsøker å definere <pkt-button>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/dist/loader-Uap9qDsV.cjs

@@ -1,16 +0,0 @@
-const e=require(`./element-CXAtr6Gu.cjs`),t=require(`./class-map-B8Ja0q7n.cjs`),n=require(`./element-with-slot-Cmxb9h4H.cjs`);require(`./icon-Dw6I0HDV.cjs`),window.pktAnimationPath=window.pktAnimationPath||`https://punkt-cdn.oslo.kommune.no/latest/animations/`;var r=class extends n.t{constructor(...e){super(...e),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size=`medium`,this.variant=`shapes`,this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has(`delay`)&&this.setupLoader()}render(){let r=t.t({"pkt-loader":!0,[`pkt-loader--${this.inline?`inline`:`box`}`]:!0,[`pkt-loader--${this.size}`]:!0}),i=t.t({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.p`<div
-      role="status"
-      aria-live="polite"
-      aria-busy=${this.isLoading?`true`:`false`}
-      class=${r}
-    >
-      ${this.isLoading&&this._shouldDisplayLoader?e.p`<div class="pkt-loader__spinner">
-            <pkt-icon
-              name=${this.getVariant(this.variant)}
-              path=${this.loadingAnimationPath}
-              class="pkt-loader__svg pkt-loader__${this.variant}"
-            ></pkt-icon>
-            ${this.message&&e.p`<p>${this.message}</p>`}
-          </div>`:e.d}
-      <div class=${i}>${n.n(this)}</div>
-    </div>`}getVariant(e){switch(e){case`blue`:return`spinner-blue`;case`rainbow`:return`spinner`;default:return`loader`}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};e.n([e.o({type:Number})],r.prototype,`delay`,void 0),e.n([e.o({type:Boolean})],r.prototype,`inline`,void 0),e.n([e.o({type:Boolean})],r.prototype,`isLoading`,void 0),e.n([e.o({type:String})],r.prototype,`message`,void 0),e.n([e.o({type:String})],r.prototype,`size`,void 0),e.n([e.o({type:String})],r.prototype,`variant`,void 0),e.n([e.o({type:String})],r.prototype,`loadingAnimationPath`,void 0),e.n([e.a()],r.prototype,`_shouldDisplayLoader`,void 0);try{e.s(`pkt-loader`)(r)}catch{console.warn(`Forsøker å definere <pkt-loader>, men den er allerede definert`)}var i=r;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});