@oslokommune/punkt-elements 12.29.2 → 12.29.3

package/dist/index.d.ts

@@ -47,6 +47,37 @@ declare interface IPktLinkCard {
     skin?: TLinkCardSkin;
 }
 
+export declare interface IPktLoader {
+    /**
+     * The `delay` prop controls how much time the loading should be given before the loader is displayed.
+     * This is handy for situations where the load time might be so short that loader is not necessary.
+     * Delay time is in milliseconds.
+     */
+    delay?: number;
+    /**
+     * The `inline` prop decides whether the loader should be displayed inline or not.
+     */
+    inline?: boolean;
+    /**
+     * The boolean 'isLoading' decides whether the loader or the children will be displayed.
+     * If set to false, the children will be displayed.
+     */
+    isLoading?: boolean;
+    /**
+     * The message to display when the loader is loading.
+     */
+    message?: string | null;
+    /**
+     * The size of the loader. Default is "medium".
+     */
+    size?: TPktSize;
+    /**
+     * The variant of the loader. Default is "shapes" which is the OSLO wave loader.
+     * Other variants are "blue" and "rainbow" which are spinner variants.
+     */
+    variant?: TPktLoaderVariant;
+}
+
 declare interface IPktMessagebox {
     skin?: TMessageboxSkin;
     title?: string;
@@ -521,6 +552,23 @@ export declare class PktLinkCard extends PktElement implements IPktLinkCard {
     render(): TemplateResult<1>;
 }
 
+export declare class PktLoader extends PktElement implements IPktLoader {
+    defaultSlot: Ref<HTMLElement>;
+    constructor();
+    delay: number;
+    inline: boolean;
+    isLoading: boolean;
+    message: string | null;
+    size: TPktSize;
+    variant: TPktLoaderVariant;
+    private _shouldDisplayLoader;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): TemplateResult<1>;
+    private getVariant;
+    private setupLoader;
+}
+
 export declare class PktMessagebox extends PktElement implements IPktMessagebox {
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -736,6 +784,8 @@ export declare type TPktButtonType = 'button' | 'submit' | 'reset';
 
 export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
 
+export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
+
 declare type TPktSize = 'small' | 'medium' | 'large';
 
 export declare type TProgressbarRole = 'progressbar' | 'meter';

package/dist/loader-ChVEsONa.js

@@ -0,0 +1,85 @@
+import { P as u, x as d, E as y, n as o, a as c } from "./element-D_ZgQsSr.js";
+import { e as h } from "./class-map-BYCG9U47.js";
+import { r as m } from "./state-DuS4ffEQ.js";
+import { e as f, n as v } from "./ref-BSGI8ogR.js";
+import { P as _ } from "./pkt-slot-controller-Clbye6cM.js";
+import "./icon-BBFK-d-X.js";
+var g = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (e, a, l, r) => {
+  for (var i = r > 1 ? void 0 : r ? L(a, l) : a, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (i = (r ? n(a, l, i) : n(i)) || i);
+  return r && i && g(a, l, i), i;
+};
+let t = class extends u {
+  constructor() {
+    super(), this.defaultSlot = f(), this.delay = 0, this.inline = !1, this.isLoading = !0, this.message = null, this.size = "medium", this.variant = "shapes", this._shouldDisplayLoader = !1, this.slotController = new _(this, this.defaultSlot);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._shouldDisplayLoader = this.delay === 0, this.delay > 0 && this.setupLoader();
+  }
+  updated(e) {
+    e.has("delay") && this.setupLoader();
+  }
+  render() {
+    const e = h({
+      "pkt-loader": !0,
+      [`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
+      [`pkt-loader--${this.size}`]: !0
+    }), a = h({
+      "pkt-contents": !0,
+      "pkt-hide": this.isLoading
+    });
+    return d`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${e}>
+      ${this.isLoading && this._shouldDisplayLoader ? d`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message && d`<p>${this.message}</p>`}
+          </div>` : y}
+      <div class=${a} ${v(this.defaultSlot)}></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));
+  }
+};
+s([
+  o({ type: Number })
+], t.prototype, "delay", 2);
+s([
+  o({ type: Boolean })
+], t.prototype, "inline", 2);
+s([
+  o({ type: Boolean })
+], t.prototype, "isLoading", 2);
+s([
+  o({ type: String })
+], t.prototype, "message", 2);
+s([
+  o({ type: String })
+], t.prototype, "size", 2);
+s([
+  o({ type: String })
+], t.prototype, "variant", 2);
+s([
+  m()
+], t.prototype, "_shouldDisplayLoader", 2);
+t = s([
+  c("pkt-loader")
+], t);
+export {
+  t as P
+};

package/dist/loader-DQV1hMM3.cjs

@@ -0,0 +1,11 @@
+"use strict";const e=require("./element-r-PeQ419.cjs"),d=require("./class-map-Dzci3Pfe.cjs"),u=require("./state-B77EXPZ9.cjs"),p=require("./ref-BUWgvhgU.cjs"),h=require("./pkt-slot-controller-Oc32unDk.cjs");require("./icon-DcJIqTIY.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
+      ${this.isLoading&&this._shouldDisplayLoader?e.x`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message&&e.x`<p>${this.message}</p>`}
+          </div>`:e.E}
+      <div class=${r} ${p.n(this.defaultSlot)}></div>
+    </div>`}getVariant(t){switch(t){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))}};s([e.n({type:Number})],exports.PktLoader.prototype,"delay",2);s([e.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([e.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([e.n({type:String})],exports.PktLoader.prototype,"message",2);s([e.n({type:String})],exports.PktLoader.prototype,"size",2);s([e.n({type:String})],exports.PktLoader.prototype,"variant",2);s([u.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([e.t("pkt-loader")],exports.PktLoader);

package/dist/loader.d.ts

@@ -0,0 +1,15 @@
+export { }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-CP5oN7df.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),k=require("./card-Bxe-jQD_.cjs"),P=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),h=require("./class-map-Dzci3Pfe.cjs"),m=require("./datepicker-D6ifQ2so.cjs"),g=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),C=require("./linkcard-C6mZOE0R.cjs"),O=require("./messagebox-BSyLVNas.cjs"),j=require("./modal-CblCiNUi.cjs"),q=require("./progressbar-C_q48_qh.cjs"),v=require("./radiobutton-3e105CXX.cjs"),S=require("./tag-BMyii4Da.cjs"),$=require("./textarea-DxpzI67n.cjs"),_=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var L=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?M(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&L(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
-      <div class="${h.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./alert-CP5oN7df.cjs"),d=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),P=require("./card-Bxe-jQD_.cjs"),k=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-BUWgvhgU.cjs"),m=require("./class-map-Dzci3Pfe.cjs"),g=require("./datepicker-D6ifQ2so.cjs"),h=require("./helptext-C0mrdhRi.cjs"),f=require("./icon-DcJIqTIY.cjs"),y=require("./input-wrapper-Dqj4uers.cjs"),x=require("./link-C_bwx1Ml.cjs"),O=require("./linkcard-C6mZOE0R.cjs"),j=require("./loader-DQV1hMM3.cjs"),q=require("./messagebox-BSyLVNas.cjs"),C=require("./modal-CblCiNUi.cjs"),v=require("./progressbar-C_q48_qh.cjs"),S=require("./radiobutton-3e105CXX.cjs"),$=require("./tag-BMyii4Da.cjs"),_=require("./textarea-DxpzI67n.cjs"),L=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var M=Object.defineProperty,B=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?B(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&M(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new b.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+      <div class="${m.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>p.PktAlert});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>d.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>k.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>P.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>m.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>g.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>f.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>y.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>x.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>C.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>O.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>j.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>q.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>v.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>S.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>$.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>_.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>T.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>p.PktAlert});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>d.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>P.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>k.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>g.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>h.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>f.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>y.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>x.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>O.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>j.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>q.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>C.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>v.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>S.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>$.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>_.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>L.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>T.PktSelect});

package/dist/pkt-index.js

@@ -6,7 +6,7 @@ import { P as B } from "./card-Db2Ex1cH.js";
 import { P as I } from "./checkbox-Dw2CX5zY.js";
 import { P as f, x as m, t as k, n, a as c } from "./element-D_ZgQsSr.js";
 import { P as x } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as h, n as P } from "./ref-BSGI8ogR.js";
+import { e as P, n as h } from "./ref-BSGI8ogR.js";
 import { e as u } from "./class-map-BYCG9U47.js";
 import { P as G } from "./datepicker-gZ_eVIyS.js";
 import { P as M } from "./helptext-RPq_TKzJ.js";
@@ -14,14 +14,15 @@ import { P as N } from "./icon-BBFK-d-X.js";
 import { P as W } from "./input-wrapper-D-pEAZaj.js";
 import { P as z } from "./link-CDkU7zsB.js";
 import { P as J } from "./linkcard-Dr5iKZrV.js";
-import { P as V } from "./messagebox-Di7LUz4C.js";
-import { P as Y } from "./modal-DZUQb_yG.js";
-import { P as tt } from "./progressbar-CuZj4FWi.js";
-import { P as rt } from "./radiobutton-CcZ2-z8q.js";
-import { P as ot } from "./tag-DVk69673.js";
-import { P as nt } from "./textarea-C8-lnWwu.js";
-import { P as pt } from "./textinput-DRkv93vp.js";
-import { P as mt } from "./select-CnizDIYN.js";
+import { P as V } from "./loader-ChVEsONa.js";
+import { P as Y } from "./messagebox-Di7LUz4C.js";
+import { P as tt } from "./modal-DZUQb_yG.js";
+import { P as rt } from "./progressbar-CuZj4FWi.js";
+import { P as ot } from "./radiobutton-CcZ2-z8q.js";
+import { P as nt } from "./tag-DVk69673.js";
+import { P as pt } from "./textarea-C8-lnWwu.js";
+import { P as mt } from "./textinput-DRkv93vp.js";
+import { P as ht } from "./select-CnizDIYN.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
@@ -29,7 +30,7 @@ var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, i
 };
 let s = class extends f {
   constructor() {
-    super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = h(), this.namedSlot = h(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
+    super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = P(), this.namedSlot = P(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
   /**
    * Runs on mount, used to set up various values and whatever you need to run
@@ -57,11 +58,11 @@ let s = class extends f {
         <div>${this.renderList(this.doStuff(this._list))}</div>
 
         <h2 class="pkt-txt-22">Slot</h2>
-        <div ${P(this.defaultSlot)}>defaultSlotRef</div>
+        <div ${h(this.defaultSlot)}>defaultSlotRef</div>
         <h2 class="pkt-txt-22">Named slot</h2>
         <select
           name="named-slot"
-          ${P(this.namedSlot)}
+          ${h(this.namedSlot)}
           @change=${(e) => alert(e.target.value)}
         >
           namedSlotRef
@@ -126,12 +127,13 @@ export {
   W as PktInputWrapper,
   z as PktLink,
   J as PktLinkCard,
-  V as PktMessagebox,
-  Y as PktModal,
-  tt as PktProgressbar,
-  rt as PktRadioButton,
-  mt as PktSelect,
-  ot as PktTag,
-  nt as PktTextarea,
-  pt as PktTextinput
+  V as PktLoader,
+  Y as PktMessagebox,
+  tt as PktModal,
+  rt as PktProgressbar,
+  ot as PktRadioButton,
+  ht as PktSelect,
+  nt as PktTag,
+  pt as PktTextarea,
+  mt as PktTextinput
 };

package/dist/pkt-loader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./loader-DQV1hMM3.cjs"),t=e.PktLoader;Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>e.PktLoader});exports.default=t;

package/dist/pkt-loader.js

@@ -0,0 +1,6 @@
+import { P as a } from "./loader-ChVEsONa.js";
+const t = a;
+export {
+  a as PktLoader,
+  t as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.29.2",
+  "version": "12.29.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bba55044dd965cd3cab5a32614be5a600b02b2ed"
+  "gitHead": "59a0d70f10e765285167342a739bbe6b126a9882"
 }

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { PktIcon } from '@/components/icon'
 export { PktInputWrapper } from '@/components/input-wrapper'
 export { PktLink } from '@/components/link'
 export { PktLinkCard } from '@/components/linkcard'
+export { PktLoader } from '@/components/loader'
 export { PktMessagebox } from '@/components/messagebox'
 export { PktModal } from '@/components/modal'
 export { PktProgressbar } from '@/components/progressbar'
@@ -20,7 +21,8 @@ export { PktTextarea } from '@/components/textarea'
 export { PktTextinput } from '@/components/textinput'
 export { PktSelect } from '@/components/select'
 
-// Export types
+// Export component types
+
 
 export type {
   IPktButton,
@@ -33,6 +35,7 @@ export type {
   TPktButtonType,
 } from '@/components/button'
 
+
 export type {
   IPktProgressbar,
   TProgressbarRole,
@@ -45,3 +48,5 @@ export type {
 export type { TTagSkin, TTagType } from '@/components/tag'
 
 export type { TSelectOption } from '@/components/select'
+
+export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'

package/src/components/loader/index.ts

@@ -0,0 +1,5 @@
+import { PktLoader } from './loader'
+export { PktLoader } from './loader'
+export default PktLoader
+
+export type { IPktLoader, TPktLoaderVariant } from './loader'

package/src/components/loader/loader.ts

@@ -0,0 +1,125 @@
+import { PktElement } from '@/base-elements/element'
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import { createRef, ref, Ref } from 'lit/directives/ref.js'
+import { html, nothing } from 'lit'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { TPktSize } from '@/types/size'
+import '@/components/icon'
+
+export type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes'
+
+export interface IPktLoader {
+  /**
+   * The `delay` prop controls how much time the loading should be given before the loader is displayed.
+   * This is handy for situations where the load time might be so short that loader is not necessary.
+   * Delay time is in milliseconds.
+   */
+  delay?: number
+  /**
+   * The `inline` prop decides whether the loader should be displayed inline or not.
+   */
+  inline?: boolean
+  /**
+   * The boolean 'isLoading' decides whether the loader or the children will be displayed.
+   * If set to false, the children will be displayed.
+   */
+  isLoading?: boolean
+  /**
+   * The message to display when the loader is loading.
+   */
+  message?: string | null
+  /**
+   * The size of the loader. Default is "medium".
+   */
+  size?: TPktSize
+  /**
+   * The variant of the loader. Default is "shapes" which is the OSLO wave loader.
+   * Other variants are "blue" and "rainbow" which are spinner variants.
+   */
+  variant?: TPktLoaderVariant
+}
+
+@customElement('pkt-loader')
+export class PktLoader extends PktElement implements IPktLoader {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  @property({ type: Number }) delay: number = 0
+  @property({ type: Boolean }) inline: boolean = false
+  @property({ type: Boolean }) isLoading: boolean = true
+  @property({ type: String }) message: string | null = null
+  @property({ type: String }) size: TPktSize = 'medium'
+  @property({ type: String }) variant: TPktLoaderVariant = 'shapes'
+
+  @state() private _shouldDisplayLoader: boolean = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._shouldDisplayLoader = this.delay === 0
+
+    if (this.delay > 0) {
+      this.setupLoader()
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('delay')) {
+      this.setupLoader()
+    }
+  }
+
+  render() {
+    const classes = classMap({
+      'pkt-loader': true,
+      [`pkt-loader--${this.inline ? 'inline' : 'box'}`]: true,
+      [`pkt-loader--${this.size}`]: true,
+    })
+
+    const slotClasses = classMap({
+      'pkt-contents': true,
+      'pkt-hide': this.isLoading,
+    })
+
+    return html`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${classes}>
+      ${this.isLoading && this._shouldDisplayLoader
+        ? html`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message && html`<p>${this.message}</p>`}
+          </div>`
+        : nothing}
+      <div class=${slotClasses} ${ref(this.defaultSlot)}></div>
+    </div>`
+  }
+
+  private getVariant(variant: TPktLoaderVariant): string {
+    switch (variant) {
+      case 'blue':
+        return 'spinner-blue'
+      case 'rainbow':
+        return 'spinner'
+      default:
+        return 'loader'
+    }
+  }
+
+  private setupLoader() {
+    if (this.delay > 0) {
+      this._shouldDisplayLoader = false
+      setTimeout(() => {
+        this._shouldDisplayLoader = true
+        this.requestUpdate()
+      }, this.delay)
+    }
+  }
+}
+
+export default PktLoader