@oslokommune/punkt-elements 12.32.0 → 12.32.7

package/dist/{textinput-M8I4dfoP.js → textinput-CxRSSYaN.js}

@@ -1,12 +1,12 @@
-import { x as p, E as h, n as o, a as $ } from "./element-G8JoS0Lj.js";
-import { o as c } from "./if-defined-rCqT8Od1.js";
-import { r as f } from "./state-gfUuUqVg.js";
-import { e as d, n as m } from "./ref-cRTOoM4R.js";
-import { e as g } from "./class-map-ChuDQU5C.js";
-import { P as x } from "./input-element-DM2uSYaW.js";
-import { P as y } from "./pkt-slot-controller-D1DakVrU.js";
-import "./input-wrapper-DQmYzhcy.js";
-import "./icon-BJnwW0eh.js";
+import { E as p, x as h, n as o, a as $ } from "./element-DiqKrDty.js";
+import { o as c } from "./if-defined-DeANa4n5.js";
+import { r as f } from "./state-CDwPbiQj.js";
+import { e as d, n as m } from "./ref-B70YZNXm.js";
+import { e as g } from "./class-map-D4tSZX70.js";
+import { P as x } from "./input-element-C4mmTk6h.js";
+import { P as y } from "./pkt-slot-controller-BtVLTZb7.js";
+import "./input-wrapper-P_oEi6dk.js";
+import "./icon-BdY52BIt.js";
 var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (e, i, r, t) => {
   for (var a = t > 1 ? void 0 : t ? b(i, r) : i, l = e.length - 1, u; l >= 0; l--)
     (u = e[l]) && (a = (t ? u(i, r, a) : u(a)) || a);
@@ -29,7 +29,7 @@ let s = class extends x {
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
     }), r = this.ariaLabelledby || `${this.id}-input-label`;
-    return p`
+    return h`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -55,7 +55,7 @@ let s = class extends x {
       >
         <div class="pkt-contents" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
-          ${this.prefix ? p`<div class="pkt-input-prefix">${this.prefix}</div>` : h}
+          ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : p}
           <input
             ${m(this.inputRef)}
             class=${i}
@@ -68,7 +68,7 @@ let s = class extends x {
             minlength=${c(this.minlength)}
             maxlength=${c(this.maxlength)}
             ?readonly=${this.readonly}
-            size=${this.size || h}
+            size=${this.size || p}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -86,19 +86,19 @@ let s = class extends x {
       this.value = t.target.value, this.onBlur(), t.stopImmediatePropagation();
     }}
           />
-          ${this.suffix ? p`<div class="pkt-input-suffix">
+          ${this.suffix ? h`<div class="pkt-input-suffix">
                 ${this.suffix}
-                ${this.iconNameRight ? p`<pkt-icon
+                ${this.iconNameRight ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
-                    ></pkt-icon>` : h}
-                ${e ? p`<pkt-icon
+                    ></pkt-icon>` : p}
+                ${e ? h`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
-                    ></pkt-icon>` : h}
-              </div>` : h}
-          ${!this.suffix && this.iconNameRight ? p`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : h}
-          ${!this.suffix && e ? p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : h}
+                    ></pkt-icon>` : p}
+              </div>` : p}
+          ${!this.suffix && this.iconNameRight ? h`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : p}
+          ${!this.suffix && e ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : p}
         </div>
       </pkt-input-wrapper>
     `;

package/dist/textinput.d.ts

@@ -1,41 +1,41 @@
 export { }
 
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-select': PktSelect & HTMLSelectElement;
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-combobox': PktCombobox & HTMLSelectElement;
+        'pkt-icon': PktIcon;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-icon': PktIcon;
+        'pkt-listbox': PktListbox;
     }
 }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
 declare global {
     interface HTMLElementTagNameMap {
-        'pkt-listbox': PktListbox;
+        'pkt-select': PktSelect & HTMLSelectElement;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.32.0",
+  "version": "12.32.7",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,10 +30,10 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.32.0",
+    "@oslokommune/punkt-css": "^12.32.1",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
-    "vite": "^5.4.4",
+    "vite": "^5.4.18",
     "vite-plugin-dts": "^4.2.1",
     "vite-plugin-web-components-hmr": "^0.1.3"
   },
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8d17b2b21d83b498b237d837747e753c64570285"
+  "gitHead": "001ce7fd764b33b5f4c7d90ad5418a62a4d780a6"
 }

package/src/components/button/button.ts

@@ -47,6 +47,7 @@ export interface IPktButton {
 export class PktButton extends PktElement<IPktButton> implements IPktButton {
   static formAssociated = true
   private internals = this.attachInternals()
+  slotController: PktSlotController
   defaultSlot: Ref<HTMLElement> = createRef()
 
   constructor() {
@@ -94,7 +95,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
         this.setAttribute('tabindex', '0')
       }
       if (this.getAttribute('aria-disabled') !== 'false') {
-        this.setAttribute('aria-disabled', 'false')
+        this.removeAttribute('aria-disabled')
       }
     }
     if (this.isLoading) {
@@ -114,7 +115,7 @@ export class PktButton extends PktElement<IPktButton> implements IPktButton {
 
   render() {
     return html`
-      <div class="pkt-btn__element-content">
+      <div class="pkt-contents">
         ${this.isLoading
           ? html`<pkt-icon
               class="pkt-btn__icon pkt-btn__spinner"

package/src/components/datepicker/datepicker.ts

@@ -91,10 +91,10 @@ export class PktDatepicker extends PktInputElement {
   async connectedCallback() {
     super.connectedCallback()
 
-    this.isMobileSafari =
-      /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-      !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
-    this.inputType = this.isMobileSafari ? 'text' : 'date'
+    const ua = navigator.userAgent
+    const isIOS = /iP(hone|od|ad)/.test(ua)
+
+    this.inputType = isIOS ? 'text' : 'date'
 
     document &&
       document.body.addEventListener('click', (e: MouseEvent) => {

package/src/components/tag/tag.ts

@@ -36,7 +36,7 @@ export interface IPktTag {
 }
 
 @customElement('pkt-tag')
-export class PktTag extends PktElement implements IPktTag {
+export class PktTag extends PktElement<IPktTag> implements IPktTag {
   slotController: PktSlotController
   defaultSlot: Ref<HTMLElement> = createRef()
 

package/dist/alert-D5G5UJuo.cjs

@@ -1,27 +0,0 @@
-"use strict";const d=require("./class-map-D4rXyUxT.cjs"),e=require("./element-BBo3JZk5.cjs"),k=require("./state-BILlRnrD.cjs"),u=require("./pkt-slot-controller-CqNvEpFd.cjs"),c=require("./ref-DsoUUoPU.cjs"),h=require("./classutils-BwNK82ZQ.cjs");require("./icon-BTUCDPN5.cjs");const v="pkt-alert",f=!0,m={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},b={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},y={default:{description:"Innholdet i meldingen"}},a={name:v,"css-class":"pkt-alert","dark-mode":!0,isElement:f,events:m,props:b,slots:y};var _=Object.defineProperty,C=Object.getOwnPropertyDescriptor,s=(n,t,r,i)=>{for(var l=i>1?void 0:i?C(t,r):t,o=n.length-1,p;o>=0;o--)(p=n[o])&&(l=(i?p(t,r,l):p(l))||l);return i&&l&&_(t,r,l),l};exports.PktAlert=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(t,r,i){t==="ariaLive"&&(this["aria-live"]=i),super.attributeChangedCallback(t,r,i)}updated(t){super.updated(t),t.has("ariaLive")&&(this["aria-live"]=this.ariaLive),t.has("_isClosed")&&h.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return e.x`
-      <div class=${d.e(t)}>
-        <pkt-icon
-          class="pkt-alert__icon"
-          name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
-        ></pkt-icon>
-
-        ${this.closeAlert?e.x`
-              <div class="pkt-alert__close">
-                <button
-                  type="button"
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-                  tabindex="0"
-                  aria-label="close"
-                  @click=${this.close}
-                >
-                  <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
-                </button>
-              </div>
-            `:e.E}
-        ${this.title?e.x`<div class="pkt-alert__title">${this.title}</div>`:e.E}
-
-        <div class="pkt-alert__text" ${c.n(this.defaultSlot)}></div>
-
-        ${this.date?e.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.E}
-      </div>
-    `}};s([e.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);s([e.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);s([e.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);s([e.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);s([k.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=s([e.t("pkt-alert")],exports.PktAlert);

package/dist/alert-gERpVuB7.js

@@ -1,163 +0,0 @@
-import { e as k } from "./class-map-ChuDQU5C.js";
-import { P as m, x as n, E as u, n as r, a as h } from "./element-G8JoS0Lj.js";
-import { r as f } from "./state-gfUuUqVg.js";
-import { P as v } from "./pkt-slot-controller-D1DakVrU.js";
-import { e as b, n as y } from "./ref-cRTOoM4R.js";
-import { u as _ } from "./classutils-RQs1k6D9.js";
-import "./icon-BJnwW0eh.js";
-const C = "pkt-alert", g = !0, $ = {
-  onClose: {
-    description: "React: Klikk-event for 'Lukk'-knappen"
-  },
-  close: {
-    description: "Vue: Klikk-event for 'Lukk'-knappen"
-  }
-}, L = {
-  title: {
-    name: "Tittel",
-    description: "Tittelen som vises øverst i på meldingen",
-    type: "string"
-  },
-  skin: {
-    name: "Utseende",
-    description: "Hvordan type melding er dette?",
-    type: [
-      "info",
-      "success",
-      "warning",
-      "error"
-    ],
-    default: "info"
-  },
-  date: {
-    name: "Sist oppdatert",
-    description: "Dato som vises nederst i på meldingen",
-    type: "string"
-  },
-  ariaLive: {
-    name: "aria-live",
-    description: "Hvordan skal skjermleseren lese opp meldingen?",
-    type: [
-      "off",
-      "polite",
-      "assertive"
-    ],
-    default: "polite"
-  },
-  compact: {
-    name: "Kompakt",
-    description: "Gjør meldingen mindre",
-    type: "boolean",
-    default: !1
-  },
-  closeAlert: {
-    name: "Vis 'Lukk'-knapp",
-    description: "Viser 'Lukk'-knappen",
-    type: "boolean",
-    default: !1
-  }
-}, S = {
-  default: {
-    description: "Innholdet i meldingen"
-  }
-}, p = {
-  name: C,
-  "css-class": "pkt-alert",
-  "dark-mode": !0,
-  isElement: g,
-  events: $,
-  props: L,
-  slots: S
-};
-var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, a, l, o) => {
-  for (var s = o > 1 ? void 0 : o ? E(a, l) : a, c = t.length - 1, d; c >= 0; c--)
-    (d = t[c]) && (s = (o ? d(a, l, s) : d(s)) || s);
-  return o && s && A(a, l, s), s;
-};
-let e = class extends m {
-  constructor() {
-    super(), this.defaultSlot = b(), this.compact = p.props.compact.default, this.title = "", this.skin = p.props.skin.default, this.ariaLive = p.props.ariaLive.default, this["aria-live"] = null, this.closeAlert = p.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (t) => {
-      this._isClosed = !0, this.dispatchEvent(
-        new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
-      ), this.dispatchEvent(
-        new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
-      );
-    }, this.slotController = new v(this, this.defaultSlot), this._isClosed = !1;
-  }
-  // Lifecycle
-  connectedCallback() {
-    super.connectedCallback(), this["aria-live"] = this.getAttribute("aria-live") || this.ariaLive;
-  }
-  attributeChangedCallback(t, a, l) {
-    t === "ariaLive" && (this["aria-live"] = l), super.attributeChangedCallback(t, a, l);
-  }
-  updated(t) {
-    super.updated(t), t.has("ariaLive") && (this["aria-live"] = this.ariaLive), t.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
-  }
-  // Render
-  render() {
-    const t = {
-      "pkt-alert": !0,
-      "pkt-alert--compact": this.compact,
-      [`pkt-alert--${this.skin}`]: this.skin,
-      "pkt-hide": this._isClosed
-    };
-    return n`
-      <div class=${k(t)}>
-        <pkt-icon
-          class="pkt-alert__icon"
-          name=${this.skin === "info" ? "alert-information" : `alert-${this.skin}`}
-        ></pkt-icon>
-
-        ${this.closeAlert ? n`
-              <div class="pkt-alert__close">
-                <button
-                  type="button"
-                  class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
-                  tabindex="0"
-                  aria-label="close"
-                  @click=${this.close}
-                >
-                  <pkt-icon name="close" class="pkt-btn__icon" aria-hidden="true"></pkt-icon>
-                </button>
-              </div>
-            ` : u}
-        ${this.title ? n`<div class="pkt-alert__title">${this.title}</div>` : u}
-
-        <div class="pkt-alert__text" ${y(this.defaultSlot)}></div>
-
-        ${this.date ? n`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>` : u}
-      </div>
-    `;
-  }
-};
-i([
-  r({ type: Boolean, reflect: !1 })
-], e.prototype, "compact", 2);
-i([
-  r({ type: String, reflect: !0 })
-], e.prototype, "title", 2);
-i([
-  r({ type: String, reflect: !0 })
-], e.prototype, "skin", 2);
-i([
-  r({ type: String })
-], e.prototype, "ariaLive", 2);
-i([
-  r({ type: String, reflect: !0 })
-], e.prototype, "aria-live", 2);
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "closeAlert", 2);
-i([
-  r({ type: String, reflect: !0 })
-], e.prototype, "date", 2);
-i([
-  f()
-], e.prototype, "_isClosed", 2);
-e = i([
-  h("pkt-alert")
-], e);
-export {
-  e as P
-};

package/dist/card-BbMBpvJt.js

@@ -1,176 +0,0 @@
-import { e as h } from "./class-map-ChuDQU5C.js";
-import { o as c } from "./if-defined-rCqT8Od1.js";
-import { P as m, x as r, E as k, n as a, a as u } from "./element-G8JoS0Lj.js";
-import { P as y } from "./pkt-slot-controller-D1DakVrU.js";
-import { e as f, n as b } from "./ref-cRTOoM4R.js";
-import "./icon-BJnwW0eh.js";
-import "./tag-CWx1XsGR.js";
-const $ = "pkt-card", v = !0, _ = {
-  heading: {
-    type: "string",
-    name: "Heading",
-    description: "Tittel på kortet"
-  },
-  subheading: {
-    type: "string",
-    name: "Subheading",
-    description: "Undertittel på kortet"
-  },
-  skin: {
-    type: [
-      "outlined",
-      "gray",
-      "blue",
-      "beige",
-      "green"
-    ],
-    name: "Skin",
-    description: "Farge på kortet",
-    default: "outlined"
-  },
-  direction: {
-    type: [
-      "landscape",
-      "portrait"
-    ],
-    name: "Direction",
-    description: "Retningen innholdet skal ligge i forhold til kortet",
-    default: "portrait"
-  },
-  tags: {
-    type: "array",
-    description: "Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",
-    name: "Tags",
-    items: {
-      type: "object",
-      properties: {
-        skin: {
-          type: [
-            "blue",
-            "green",
-            "red",
-            "yellow"
-          ],
-          description: "Farge på tag"
-        },
-        iconName: {
-          type: "icon",
-          description: "Id på ikonet du ønsker å bruke til tag"
-        },
-        ariaLabel: {
-          type: "string",
-          description: "Tekst for aria-label"
-        },
-        text: {
-          type: "string",
-          description: "Tekst på tag",
-          required: !0
-        }
-      }
-    }
-  },
-  image: {
-    type: "object",
-    name: "Bilde",
-    description: "Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",
-    properties: {
-      src: {
-        type: "string",
-        description: "Bilde på kortet",
-        required: !0
-      },
-      alt: {
-        type: "string",
-        description: "Tekst for aria-label",
-        required: !0
-      }
-    }
-  }
-}, S = {
-  default: {
-    description: "Innholdet i kortet"
-  }
-}, g = {
-  name: $,
-  "css-class": "pkt-card",
-  isElement: v,
-  props: _,
-  slots: S
-};
-var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (n, t, p, o) => {
-  for (var i = o > 1 ? void 0 : o ? P(t, p) : t, l = n.length - 1, d; l >= 0; l--)
-    (d = n[l]) && (i = (o ? d(t, p, i) : d(i)) || i);
-  return o && i && x(t, p, i), i;
-};
-let e = class extends m {
-  constructor() {
-    super(), this.defaultSlot = f(), this.skin = g.props.skin.default, this.direction = g.props.direction.default, this.image = {
-      src: "",
-      alt: ""
-    }, this.heading = "", this.subheading = "", this.tags = [], this.slotController = new y(this, this.defaultSlot);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  render() {
-    const n = {
-      "pkt-card": !0,
-      [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction
-    };
-    return r`
-      <div class=${h(n)}>
-        ${this.image.src && r`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length > 0 ? r`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-      (t) => r`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${c(t.skin)}
-                        iconName=${c(t.iconName)}
-                      >
-                        ${t.text}
-                      </pkt-tag>
-                    `
-    )}
-                </div>
-              ` : k}
-          ${this.heading && r`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && r`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot && r`<div class="pkt-card__content" ${b(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `;
-  }
-};
-s([
-  a({ type: String, reflect: !0 })
-], e.prototype, "skin", 2);
-s([
-  a({ type: String, reflect: !0 })
-], e.prototype, "direction", 2);
-s([
-  a({ type: Object, reflect: !0 })
-], e.prototype, "image", 2);
-s([
-  a({ type: String, reflect: !0 })
-], e.prototype, "heading", 2);
-s([
-  a({ type: String, reflect: !0 })
-], e.prototype, "subheading", 2);
-s([
-  a({ type: Array, reflect: !0 })
-], e.prototype, "tags", 2);
-e = s([
-  u("pkt-card")
-], e);
-export {
-  e as P
-};

package/dist/card-ZX09f_ka.cjs

@@ -1,28 +0,0 @@
-"use strict";const g=require("./class-map-D4rXyUxT.cjs"),d=require("./if-defined-C1ZDVzYn.cjs"),t=require("./element-BBo3JZk5.cjs"),k=require("./pkt-slot-controller-CqNvEpFd.cjs"),l=require("./ref-DsoUUoPU.cjs");require("./icon-BTUCDPN5.cjs");require("./tag-DThwKsrg.cjs");const u="pkt-card",h=!0,m={heading:{type:"string",name:"Heading",description:"Tittel på kortet"},subheading:{type:"string",name:"Subheading",description:"Undertittel på kortet"},skin:{type:["outlined","gray","blue","beige","green"],name:"Skin",description:"Farge på kortet",default:"outlined"},direction:{type:["landscape","portrait"],name:"Direction",description:"Retningen innholdet skal ligge i forhold til kortet",default:"portrait"},tags:{type:"array",description:"Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",name:"Tags",items:{type:"object",properties:{skin:{type:["blue","green","red","yellow"],description:"Farge på tag"},iconName:{type:"icon",description:"Id på ikonet du ønsker å bruke til tag"},ariaLabel:{type:"string",description:"Tekst for aria-label"},text:{type:"string",description:"Tekst på tag",required:!0}}}},image:{type:"object",name:"Bilde",description:"Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",properties:{src:{type:"string",description:"Bilde på kortet",required:!0},alt:{type:"string",description:"Tekst for aria-label",required:!0}}}},y={default:{description:"Innholdet i kortet"}},c={name:u,"css-class":"pkt-card",isElement:h,props:m,slots:y};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,s,e,n)=>{for(var r=n>1?void 0:n?b(s,e):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(n?p(s,e,r):p(r))||r);return n&&r&&f(s,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=c.props.skin.default,this.direction=c.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new k.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const s={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
-      <div class=${g.e(s)}>
-        ${this.image.src&&t.x`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt||""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length>0?t.x`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(e=>t.x`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d.o(e.skin)}
-                        iconName=${d.o(e.iconName)}
-                      >
-                        ${e.text}
-                      </pkt-tag>
-                    `)}
-                </div>
-              `:t.E}
-          ${this.heading&&t.x`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading&&t.x`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot&&t.x`<div class="pkt-card__content" ${l.n(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `}};i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"skin",2);i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"direction",2);i([t.n({type:Object,reflect:!0})],exports.PktCard.prototype,"image",2);i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"heading",2);i([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"subheading",2);i([t.n({type:Array,reflect:!0})],exports.PktCard.prototype,"tags",2);exports.PktCard=i([t.t("pkt-card")],exports.PktCard);