@oslokommune/punkt-elements 12.18.0 → 12.18.2

package/dist/card-kWt0BA2a.js

@@ -0,0 +1,170 @@
+import { e as g } from "./class-map-hz16xq5a.js";
+import { o as h } from "./if-defined-ZFE4ti2t.js";
+import { P as k, x as r, E as u, n as a, t as m } from "./icon-wUXeHiBk.js";
+import { P as y } from "./pkt-slot-controller-RJvOnbF4.js";
+import { e as f, n as b } from "./ref-DuFGTLVX.js";
+import "./tag-DGFgUF3l.js";
+const v = "pkt-card", $ = !0, _ = {
+  heading: {
+    type: "string",
+    name: "Heading",
+    description: "Tittel på kortet"
+  },
+  subheading: {
+    type: "string",
+    name: "Subheading",
+    description: "Undertittel på kortet"
+  },
+  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
+        }
+      }
+    }
+  },
+  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"
+  },
+  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"
+  }
+}, c = {
+  name: v,
+  "css-class": "pkt-card",
+  isElement: $,
+  props: _,
+  slots: S
+};
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (n, e, p, o) => {
+  for (var i = o > 1 ? void 0 : o ? P(e, p) : e, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (i = (o ? d(e, p, i) : d(i)) || i);
+  return o && i && x(e, p, i), i;
+};
+let t = class extends k {
+  constructor() {
+    super(), this.defaultSlot = f(), 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 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=${g(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(
+      (e) => r`
+                      <pkt-tag textStyle="normal-text" size="medium" skin=${h(e.skin)}>
+                        ${e.text}
+                      </pkt-tag>
+                    `
+    )}
+                </div>
+              ` : u}
+          ${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 })
+], t.prototype, "skin", 2);
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "direction", 2);
+s([
+  a({ type: Object, reflect: !0 })
+], t.prototype, "image", 2);
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "heading", 2);
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "subheading", 2);
+s([
+  a({ type: Array, reflect: !0 })
+], t.prototype, "tags", 2);
+t = s([
+  m("pkt-card")
+], t);
+export {
+  t as P
+};

package/dist/{class-map-a5HUzP83.cjs → class-map-Boa7BqCc.cjs}

@@ -1,5 +1,5 @@
-"use strict";const a=require("./index-CR7t1zY9.cjs"),r=require("./custom-element-B-TlBwRu.cjs");/**
+"use strict";const n=require("./icon-CdMQ6zBT.cjs");/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const c=r.e(class extends r.i{constructor(s){var e;if(super(s),s.type!==r.t$1.ATTRIBUTE||s.name!=="class"||((e=s.strings)==null?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(s){return" "+Object.keys(s).filter(e=>s[e]).join(" ")+" "}update(s,[e]){var i,o;if(this.st===void 0){this.st=new Set,s.strings!==void 0&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(const t in e)e[t]&&!((i=this.nt)!=null&&i.has(t))&&this.st.add(t);return this.render(e)}const n=s.element.classList;for(const t of this.st)t in e||(n.remove(t),this.st.delete(t));for(const t in e){const h=!!e[t];h===this.st.has(t)||(o=this.nt)!=null&&o.has(t)||(h?(n.add(t),this.st.add(t)):(n.remove(t),this.st.delete(t)))}return a.T}});exports.e=c;
+ */const a=n.e(class extends n.i{constructor(s){var e;if(super(s),s.type!==n.t$1.ATTRIBUTE||s.name!=="class"||((e=s.strings)==null?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(s){return" "+Object.keys(s).filter(e=>s[e]).join(" ")+" "}update(s,[e]){var i,o;if(this.st===void 0){this.st=new Set,s.strings!==void 0&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>t!=="")));for(const t in e)e[t]&&!((i=this.nt)!=null&&i.has(t))&&this.st.add(t);return this.render(e)}const r=s.element.classList;for(const t of this.st)t in e||(r.remove(t),this.st.delete(t));for(const t in e){const h=!!e[t];h===this.st.has(t)||(o=this.nt)!=null&&o.has(t)||(h?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return n.T}});exports.e=a;

package/dist/{class-map-CBvUV2N3.js → class-map-hz16xq5a.js}

@@ -1,32 +1,31 @@
-import { T as a } from "./index-CFDwiDTU.js";
-import { e as h, i as d, a as c } from "./custom-element-CWfU4dcr.js";
+import { e as a, i as h, b as d, T as c } from "./icon-wUXeHiBk.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const u = h(class extends d {
+const u = a(class extends h {
   constructor(s) {
     var e;
-    if (super(s), s.type !== c.ATTRIBUTE || s.name !== "class" || ((e = s.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+    if (super(s), s.type !== d.ATTRIBUTE || s.name !== "class" || ((e = s.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
   }
   render(s) {
     return " " + Object.keys(s).filter((e) => s[e]).join(" ") + " ";
   }
   update(s, [e]) {
-    var n, i;
+    var r, i;
     if (this.st === void 0) {
       this.st = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => t !== "")));
-      for (const t in e) e[t] && !((n = this.nt) != null && n.has(t)) && this.st.add(t);
+      for (const t in e) e[t] && !((r = this.nt) != null && r.has(t)) && this.st.add(t);
       return this.render(e);
     }
-    const r = s.element.classList;
-    for (const t of this.st) t in e || (r.remove(t), this.st.delete(t));
+    const n = s.element.classList;
+    for (const t of this.st) t in e || (n.remove(t), this.st.delete(t));
     for (const t in e) {
       const o = !!e[t];
-      o === this.st.has(t) || (i = this.nt) != null && i.has(t) || (o ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
+      o === this.st.has(t) || (i = this.nt) != null && i.has(t) || (o ? (n.add(t), this.st.add(t)) : (n.remove(t), this.st.delete(t)));
     }
-    return a;
+    return c;
   }
 });
 export {