@oslokommune/punkt-elements 16.7.1 → 16.7.3

package/dist/card-BwMNB5Bb.cjs

@@ -0,0 +1,87 @@
+"use strict";const p=require("./class-map-CsENJXf1.cjs"),l=require("./if-defined-BOW3ODSj.cjs"),e=require("./element-gR_VtSiD.cjs"),c=require("./element-with-slot-ZX-up7jO.cjs");require("./icon-q81vqPK_.cjs");require("./tag-CbwO8yvD.cjs");require("./heading-DrzbgDb6.cjs");const k={layout:{default:"vertical"},skin:{type:["outlined","outlined-beige","gray","blue","beige","green"],default:"outlined"},padding:{default:"default"}},o={props:k};var u=Object.defineProperty,a=(i,r,s,h)=>{for(var n=void 0,d=i.length-1,g;d>=0;d--)(g=i[d])&&(n=g(r,s,n)||n);return n&&u(r,s,n),n};class t extends c.PktElementWithSlot{constructor(){super(...arguments),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=o.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=o.props.padding.default,this.skin=o.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[]}connectedCallback(){super.connectedCallback()}render(){var n,d;const r={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},s=((n=this.ariaLabel)==null?void 0:n.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),h=((d=this.ariaLabel)==null?void 0:d.trim())||(this.heading?this.heading:"kort");return e.b`
+      <article
+        class=${p.e(r)}
+        aria-label=${l.o(this.clickCardLink?s:h)}
+      >
+        ${this.renderImage()}
+        <div class="pkt-card__wrapper">
+          ${this.tagPosition==="top"?this.renderTags():e.A} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition==="bottom"?this.renderTags():e.A}
+          ${this.renderMetadata()}
+        </div>
+      </article>
+    `}renderImage(){const r={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return e.b`
+      ${this.image.src&&e.b`
+        <div class=${p.e(r)}>
+          <img src=${this.image.src} alt=${this.image.alt||""} />
+        </div>
+      `}
+    `}renderHeading(){return e.b`
+      ${this.heading&&!this.clickCardLink?e.b`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel||3}
+              size="medium"
+              nospacing
+              weight="regular"
+            >
+              ${this.heading}
+            </pkt-heading>
+          `:e.A}
+    `}renderLinkHeading(){return e.b`
+      ${this.clickCardLink?e.b`
+            <pkt-heading
+              class="pkt-card__link-heading pkt-card__heading"
+              .level=${this.headinglevel||3}
+              size="medium"
+              weight="regular"
+              nospacing
+            >
+              <a
+                class="pkt-card__link"
+                href=${this.clickCardLink}
+                target=${this.openLinkInNewTab?"_blank":"_self"}
+                >${this.heading}</a
+              >
+            </pkt-heading>
+          `:e.A}
+    `}renderSubheading(){return e.b`
+      ${this.subheading?e.b` <p class="pkt-card__subheading ">${this.subheading}</p> `:e.A}
+    `}renderHeader(){const r=!!this.heading||!!this.subheading;return e.b`
+      ${r?e.b`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          `:e.A}
+    `}renderTags(){const r={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e.b`
+      ${this.tags.length>0?e.b`
+            <div
+              class=${p.e(r)}
+              role="list"
+              aria-label=${this.tags.length>1?"merkelapper":"merkelapp"}
+            >
+              ${this.tags.map(s=>e.b`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${l.o(s.skin)}
+                    iconName=${l.o(s.iconName)}
+                  >
+                    <span>${s.text}</span>
+                  </pkt-tag>
+                `)}
+            </div>
+          `:e.A}
+    `}renderSlot(){return e.b`<section class="pkt-card__content">${c.slotContent(this)}</section>`}renderMetadata(){return e.b`
+      ${this.metaLead||this.metaTrail?e.b`
+            <footer class="pkt-card__metadata">
+              ${this.metaLead?e.b`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:e.A}
+              ${this.metaTrail?e.b`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:e.A}
+            </footer>
+          `:e.A}
+    `}}a([e.n({type:String})],t.prototype,"ariaLabel");a([e.n({type:String})],t.prototype,"metaLead");a([e.n({type:Boolean})],t.prototype,"borderOnHover");a([e.n({type:String,reflect:!0})],t.prototype,"clickCardLink");a([e.n({type:String})],t.prototype,"metaTrail");a([e.n({type:String})],t.prototype,"layout");a([e.n({type:String})],t.prototype,"heading");a([e.n({type:Number})],t.prototype,"headinglevel");a([e.n({type:Object})],t.prototype,"image");a([e.n({type:String})],t.prototype,"imageShape");a([e.n({type:Boolean})],t.prototype,"openLinkInNewTab");a([e.n({type:String})],t.prototype,"padding");a([e.n({type:String,converter:{fromAttribute:i=>{const r=o.props.skin.type;return i&&r.includes(i)?i:(i&&!r.includes(i)&&console.warn(`Invalid skin value "${i}". Using default skin "${o.props.skin.default}".`),o.props.skin.default)},toAttribute:i=>i}})],t.prototype,"skin");a([e.n({type:String})],t.prototype,"subheading");a([e.n({type:String})],t.prototype,"tagPosition");a([e.n({type:Array})],t.prototype,"tags");try{e.t("pkt-card")(t)}catch{console.warn("Forsøker å definere <pkt-card>, men den er allerede definert")}exports.PktCard=t;

package/dist/{card-DDiLfuO4.js → card-CGlmcMSR.js}

@@ -1,24 +1,24 @@
-import { e as c } from "./class-map-CEnykyO_.js";
-import { o as k } from "./if-defined-B0krMLad.js";
-import { A as d, b as e, n as r, t as u } from "./element-CPpT3rFQ.js";
-import { P as m, s as $ } from "./element-with-slot-Dqk6-TRR.js";
-import "./icon-BlKA8YuW.js";
-import "./tag-BuCpqaks.js";
-import "./heading-CKt7cVn7.js";
-const y = { layout: { default: "vertical" }, skin: { type: ["outlined", "outlined-beige", "gray", "blue", "beige", "green"], default: "outlined" }, padding: { default: "default" } }, o = {
+import { e as h } from "./class-map-CEnykyO_.js";
+import { o as g } from "./if-defined-B0krMLad.js";
+import { t as m, A as n, b as t, n as a } from "./element-CPpT3rFQ.js";
+import { P as u, s as $ } from "./element-with-slot-Dqk6-TRR.js";
+import "./icon-CxQcIa5F.js";
+import "./tag-D4FI5t3y.js";
+import "./heading-D2tVS6lS.js";
+const y = { layout: { default: "vertical" }, skin: { type: ["outlined", "outlined-beige", "gray", "blue", "beige", "green"], default: "outlined" }, padding: { default: "default" } }, l = {
   props: y
 };
-var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, s, l, p) => {
-  for (var n = p > 1 ? void 0 : p ? b(s, l) : s, h = t.length - 1, g; h >= 0; h--)
-    (g = t[h]) && (n = (p ? g(s, l, n) : g(n)) || n);
-  return p && n && _(s, l, n), n;
+var b = Object.defineProperty, i = (r, s, p, c) => {
+  for (var d = void 0, o = r.length - 1, k; o >= 0; o--)
+    (k = r[o]) && (d = k(s, p, d) || d);
+  return d && b(s, p, d), d;
 };
-let a = class extends m {
+class e extends u {
   constructor() {
-    super(...arguments), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = o.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
+    super(...arguments), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = !0, this.clickCardLink = null, this.metaTrail = null, this.layout = l.props.layout.default, this.heading = "", this.headinglevel = 3, this.image = {
       src: "",
       alt: ""
-    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = o.props.padding.default, this.skin = o.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [];
+    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = l.props.padding.default, this.skin = l.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -27,25 +27,25 @@ let a = class extends m {
   // Main render method
   // prettier-ignore
   render() {
-    var p, n;
-    const t = {
+    var d, o;
+    const s = {
       "pkt-card": !0,
       [`pkt-card--${this.skin}`]: this.skin,
       [`pkt-card--${this.layout}`]: this.layout,
       [`pkt-card--padding-${this.padding}`]: this.padding,
       "pkt-card--border-on-hover": this.borderOnHover
-    }, s = ((p = this.ariaLabel) == null ? void 0 : p.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), l = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
-    return e`
+    }, p = ((d = this.ariaLabel) == null ? void 0 : d.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), c = ((o = this.ariaLabel) == null ? void 0 : o.trim()) || (this.heading ? this.heading : "kort");
+    return t`
       <article
-        class=${c(t)}
-        aria-label=${k(this.clickCardLink ? s : l)}
+        class=${h(s)}
+        aria-label=${g(this.clickCardLink ? p : c)}
       >
         ${this.renderImage()}
         <div class="pkt-card__wrapper">
-          ${this.tagPosition === "top" ? this.renderTags() : d} 
+          ${this.tagPosition === "top" ? this.renderTags() : n} 
           ${this.renderHeader()}
           ${this.renderSlot()} 
-          ${this.tagPosition === "bottom" ? this.renderTags() : d}
+          ${this.tagPosition === "bottom" ? this.renderTags() : n}
           ${this.renderMetadata()}
         </div>
       </article>
@@ -53,13 +53,13 @@ let a = class extends m {
   }
   // Render methods for different parts of the card
   renderImage() {
-    const t = {
+    const s = {
       "pkt-card__image": !0,
       [`pkt-card__image-${this.imageShape}`]: this.imageShape
     };
-    return e`
-      ${this.image.src && e`
-        <div class=${c(t)}>
+    return t`
+      ${this.image.src && t`
+        <div class=${h(s)}>
           <img src=${this.image.src} alt=${this.image.alt || ""} />
         </div>
       `}
@@ -68,8 +68,8 @@ let a = class extends m {
   // Do not render heading if link is present, render link heading instead
   // Combine the rendering for headings into a renderHeader method
   renderHeading() {
-    return e`
-      ${this.heading && !this.clickCardLink ? e`
+    return t`
+      ${this.heading && !this.clickCardLink ? t`
             <pkt-heading
               class="pkt-card__heading"
               .level=${this.headinglevel || 3}
@@ -79,12 +79,12 @@ let a = class extends m {
             >
               ${this.heading}
             </pkt-heading>
-          ` : d}
+          ` : n}
     `;
   }
   renderLinkHeading() {
-    return e`
-      ${this.clickCardLink ? e`
+    return t`
+      ${this.clickCardLink ? t`
             <pkt-heading
               class="pkt-card__link-heading pkt-card__heading"
               .level=${this.headinglevel || 3}
@@ -99,133 +99,135 @@ let a = class extends m {
                 >${this.heading}</a
               >
             </pkt-heading>
-          ` : d}
+          ` : n}
     `;
   }
   renderSubheading() {
-    return e`
-      ${this.subheading ? e` <p class="pkt-card__subheading ">${this.subheading}</p> ` : d}
+    return t`
+      ${this.subheading ? t` <p class="pkt-card__subheading ">${this.subheading}</p> ` : n}
     `;
   }
   // Render header
   // prettier-ignore
   renderHeader() {
-    const t = !!this.heading || !!this.subheading;
-    return e`
-      ${t ? e`
+    const s = !!this.heading || !!this.subheading;
+    return t`
+      ${s ? t`
             <header class="pkt-card__header">
               ${this.renderHeading()} 
               ${this.renderLinkHeading()} 
               ${this.renderSubheading()}
             </header>
-          ` : d}
+          ` : n}
     `;
   }
   renderTags() {
-    const t = {
+    const s = {
       "pkt-card__tags": !0,
       [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
     };
-    return e`
-      ${this.tags.length > 0 ? e`
+    return t`
+      ${this.tags.length > 0 ? t`
             <div
-              class=${c(t)}
+              class=${h(s)}
               role="list"
               aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
             >
               ${this.tags.map(
-      (s) => e`
+      (p) => t`
                   <pkt-tag
                     role="listitem"
                     textStyle="normal-text"
                     size="medium"
-                    skin=${k(s.skin)}
-                    iconName=${k(s.iconName)}
+                    skin=${g(p.skin)}
+                    iconName=${g(p.iconName)}
                   >
-                    <span>${s.text}</span>
+                    <span>${p.text}</span>
                   </pkt-tag>
                 `
     )}
             </div>
-          ` : d}
+          ` : n}
     `;
   }
   renderSlot() {
-    return e`<section class="pkt-card__content">${$(this)}</section>`;
+    return t`<section class="pkt-card__content">${$(this)}</section>`;
   }
   renderMetadata() {
-    return e`
-      ${this.metaLead || this.metaTrail ? e`
+    return t`
+      ${this.metaLead || this.metaTrail ? t`
             <footer class="pkt-card__metadata">
-              ${this.metaLead ? e`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : d}
-              ${this.metaTrail ? e`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : d}
+              ${this.metaLead ? t`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : n}
+              ${this.metaTrail ? t`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : n}
             </footer>
-          ` : d}
+          ` : n}
     `;
   }
-};
+}
 i([
-  r({ type: String })
-], a.prototype, "ariaLabel", 2);
+  a({ type: String })
+], e.prototype, "ariaLabel");
 i([
-  r({ type: String })
-], a.prototype, "metaLead", 2);
+  a({ type: String })
+], e.prototype, "metaLead");
 i([
-  r({ type: Boolean })
-], a.prototype, "borderOnHover", 2);
+  a({ type: Boolean })
+], e.prototype, "borderOnHover");
 i([
-  r({ type: String, reflect: !0 })
-], a.prototype, "clickCardLink", 2);
+  a({ type: String, reflect: !0 })
+], e.prototype, "clickCardLink");
 i([
-  r({ type: String })
-], a.prototype, "metaTrail", 2);
+  a({ type: String })
+], e.prototype, "metaTrail");
 i([
-  r({ type: String })
-], a.prototype, "layout", 2);
+  a({ type: String })
+], e.prototype, "layout");
 i([
-  r({ type: String })
-], a.prototype, "heading", 2);
+  a({ type: String })
+], e.prototype, "heading");
 i([
-  r({ type: Number })
-], a.prototype, "headinglevel", 2);
+  a({ type: Number })
+], e.prototype, "headinglevel");
 i([
-  r({ type: Object })
-], a.prototype, "image", 2);
+  a({ type: Object })
+], e.prototype, "image");
 i([
-  r({ type: String })
-], a.prototype, "imageShape", 2);
+  a({ type: String })
+], e.prototype, "imageShape");
 i([
-  r({ type: Boolean })
-], a.prototype, "openLinkInNewTab", 2);
+  a({ type: Boolean })
+], e.prototype, "openLinkInNewTab");
 i([
-  r({ type: String })
-], a.prototype, "padding", 2);
+  a({ type: String })
+], e.prototype, "padding");
 i([
-  r({
+  a({
     type: String,
     converter: {
-      fromAttribute: (t) => {
-        const s = o.props.skin.type;
-        return t && s.includes(t) ? t : (t && !s.includes(t) && console.warn(
-          `Invalid skin value "${t}". Using default skin "${o.props.skin.default}".`
-        ), o.props.skin.default);
+      fromAttribute: (r) => {
+        const s = l.props.skin.type;
+        return r && s.includes(r) ? r : (r && !s.includes(r) && console.warn(
+          `Invalid skin value "${r}". Using default skin "${l.props.skin.default}".`
+        ), l.props.skin.default);
       },
-      toAttribute: (t) => t
+      toAttribute: (r) => r
     }
   })
-], a.prototype, "skin", 2);
+], e.prototype, "skin");
 i([
-  r({ type: String })
-], a.prototype, "subheading", 2);
+  a({ type: String })
+], e.prototype, "subheading");
 i([
-  r({ type: String })
-], a.prototype, "tagPosition", 2);
+  a({ type: String })
+], e.prototype, "tagPosition");
 i([
-  r({ type: Array })
-], a.prototype, "tags", 2);
-a = i([
-  u("pkt-card")
-], a);
+  a({ type: Array })
+], e.prototype, "tags");
+try {
+  m("pkt-card")(e);
+} catch {
+  console.warn("Forsøker å definere <pkt-card>, men den er allerede definert");
+}
 export {
-  a as P
+  e as P
 };

package/dist/checkbox-BsJZYA26.js

@@ -0,0 +1,147 @@
+import { t as u, A as l, b as n, n as i } from "./element-CPpT3rFQ.js";
+import { P as k } from "./input-element-8nLwuQS4.js";
+import { e as f, n as b } from "./ref-Bg_Swj5w.js";
+import { e as o } from "./class-map-CEnykyO_.js";
+var g = Object.defineProperty, s = (r, e, h, d) => {
+  for (var a = void 0, p = r.length - 1, c; p >= 0; p--)
+    (c = r[p]) && (a = c(e, h, a) || a);
+  return a && g(e, h, a), a;
+};
+class t extends k {
+  constructor() {
+    super(...arguments), this.inputRef = f(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.indeterminate = !1, this.type = "checkbox", this.tagText = null, this.optionalTag = !1, this.optionalText = "Valgfritt", this.requiredTag = !1, this.requiredText = "Må fylles ut";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  attributeChangedCallback(e, h, d) {
+    e === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), e === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0, this.inputRef.value && (this.inputRef.value.checked = this.checked)), e === "indeterminate" && (this.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0, this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate)), super.attributeChangedCallback(e, h, d);
+  }
+  firstUpdated(e) {
+    e.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.firstUpdated(e);
+  }
+  updated(e) {
+    e.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), e.has("checked") && this.inputRef.value && (this.inputRef.value.checked = this.checked === "" || this.checked === "true" || this.checked === !0), e.has("indeterminate") && this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.updated(e);
+  }
+  render() {
+    const e = o({
+      "pkt-input-check__input": !0,
+      "pkt-input-check__input--tile": this.hasTile,
+      "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
+    }), h = o({
+      "pkt-input-check__input-checkbox": !0,
+      "pkt-input-check__input-checkbox--error": this.hasError
+    }), d = o({
+      "pkt-input-check__input-label": !0,
+      "pkt-input-check__input-label--disabled": this.disabled,
+      "pkt-input-check__input-label--left": this.labelPosition === "left",
+      "pkt-input-check__input-label--right": this.labelPosition === "right",
+      "pkt-sr-only": this.hideLabel
+    }), a = "pkt-tag pkt-tag--small pkt-tag--thin-text", p = () => n`
+        ${this.tagText ? n`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : l}
+        ${this.optionalTag ? n`<span class=${a + " pkt-tag--blue-light"}>${this.optionalText}</span>` : l}
+        ${this.requiredTag ? n`<span class=${a + " pkt-tag--beige"}>${this.requiredText}</span>` : l}
+      `, c = () => n`
+        <label class=${d} for=${this.id + "-internal"}>
+          ${this.label} ${p()}
+          ${this.checkHelptext ? n`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : l}
+        </label>
+      `;
+    return n`
+      <div class="pkt-input-check">
+        <div class=${e}>
+          ${this.labelPosition === "left" ? c() : l}
+          <input
+            id=${this.id + "-internal"}
+            class=${h}
+            type="checkbox"
+            ?disabled=${this.disabled}
+            name=${this.name + "-internal"}
+            ${b(this.inputRef)}
+            @change=${this.handleChange}
+            @click=${this.handleClick}
+            @blur=${this.onBlur}
+            @focus=${this.onFocus}
+            ?checked=${this.checked}
+            role=${this.isSwitch ? "switch" : "checkbox"}
+          />
+          ${this.labelPosition === "right" ? c() : l}
+        </div>
+      </div>
+    `;
+  }
+  handleClick(e) {
+    if (this.disabled)
+      return e.preventDefault(), e.stopImmediatePropagation(), !1;
+  }
+  handleChange(e) {
+    if (this.disabled)
+      return e.preventDefault(), e.stopImmediatePropagation(), !1;
+    this.toggleChecked(e);
+  }
+  toggleChecked(e) {
+    if (this.disabled) {
+      e.preventDefault(), e.stopImmediatePropagation();
+      return;
+    }
+    const h = e.target;
+    if (h && h.disabled) {
+      e.preventDefault(), e.stopImmediatePropagation();
+      return;
+    }
+    e.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this.checked = this.inputRef.value.matches(":checked"), this.valueChecked(this.checked));
+  }
+}
+s([
+  i({ type: String, reflect: !0 })
+], t.prototype, "value");
+s([
+  i({ type: String })
+], t.prototype, "checkHelptext");
+s([
+  i({ type: Boolean })
+], t.prototype, "defaultChecked");
+s([
+  i({ type: Boolean })
+], t.prototype, "hasTile");
+s([
+  i({ type: Boolean })
+], t.prototype, "isSwitch");
+s([
+  i({ type: String })
+], t.prototype, "labelPosition");
+s([
+  i({ type: Boolean })
+], t.prototype, "hideLabel");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "checked");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate");
+s([
+  i({ type: String, reflect: !0 })
+], t.prototype, "type");
+s([
+  i({ type: String })
+], t.prototype, "tagText");
+s([
+  i({ type: Boolean })
+], t.prototype, "optionalTag");
+s([
+  i({ type: String })
+], t.prototype, "optionalText");
+s([
+  i({ type: Boolean })
+], t.prototype, "requiredTag");
+s([
+  i({ type: String })
+], t.prototype, "requiredText");
+try {
+  u("pkt-checkbox")(t);
+} catch {
+  console.warn("Forsøker å definere <pkt-checkbox>, men den er allerede definert");
+}
+export {
+  t as P
+};

package/dist/checkbox-CTY8f_qn.cjs

@@ -0,0 +1,31 @@
+"use strict";const t=require("./element-gR_VtSiD.cjs"),u=require("./input-element-DdVhUvva.cjs"),d=require("./ref-CL-Xk9Xm.cjs"),p=require("./class-map-CsENJXf1.cjs");var o=Object.defineProperty,s=(c,e,n,r)=>{for(var a=void 0,h=c.length-1,l;h>=0;h--)(l=c[h])&&(a=l(e,n,a)||a);return a&&o(e,n,a),a};class i extends u.PktInputElement{constructor(){super(...arguments),this.inputRef=d.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.indeterminate=!1,this.type="checkbox",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,n,r){e==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),e==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e==="indeterminate"&&(this.indeterminate=this.indeterminate===""||this.indeterminate==="true"||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,n,r)}firstUpdated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===""||this.indeterminate==="true"||this.indeterminate===!0),super.firstUpdated(e)}updated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),e.has("checked")&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===""||this.checked==="true"||this.checked===!0),e.has("indeterminate")&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===""||this.indeterminate==="true"||this.indeterminate===!0),super.updated(e)}render(){const e=p.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=p.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),r=p.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),a="pkt-tag pkt-tag--small pkt-tag--thin-text",h=()=>t.b`
+        ${this.tagText?t.b`<span class=${a+" pkt-tag--gray"}>${this.tagText}</span>`:t.A}
+        ${this.optionalTag?t.b`<span class=${a+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.A}
+        ${this.requiredTag?t.b`<span class=${a+" pkt-tag--beige"}>${this.requiredText}</span>`:t.A}
+      `,l=()=>t.b`
+        <label class=${r} for=${this.id+"-internal"}>
+          ${this.label} ${h()}
+          ${this.checkHelptext?t.b`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:t.A}
+        </label>
+      `;return t.b`
+      <div class="pkt-input-check">
+        <div class=${e}>
+          ${this.labelPosition==="left"?l():t.A}
+          <input
+            id=${this.id+"-internal"}
+            class=${n}
+            type="checkbox"
+            ?disabled=${this.disabled}
+            name=${this.name+"-internal"}
+            ${d.n(this.inputRef)}
+            @change=${this.handleChange}
+            @click=${this.handleClick}
+            @blur=${this.onBlur}
+            @focus=${this.onFocus}
+            ?checked=${this.checked}
+            role=${this.isSwitch?"switch":"checkbox"}
+          />
+          ${this.labelPosition==="right"?l():t.A}
+        </div>
+      </div>
+    `}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}const n=e.target;if(n&&n.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}}s([t.n({type:String,reflect:!0})],i.prototype,"value");s([t.n({type:String})],i.prototype,"checkHelptext");s([t.n({type:Boolean})],i.prototype,"defaultChecked");s([t.n({type:Boolean})],i.prototype,"hasTile");s([t.n({type:Boolean})],i.prototype,"isSwitch");s([t.n({type:String})],i.prototype,"labelPosition");s([t.n({type:Boolean})],i.prototype,"hideLabel");s([t.n({type:Boolean,reflect:!0})],i.prototype,"checked");s([t.n({type:Boolean,reflect:!0})],i.prototype,"indeterminate");s([t.n({type:String,reflect:!0})],i.prototype,"type");s([t.n({type:String})],i.prototype,"tagText");s([t.n({type:Boolean})],i.prototype,"optionalTag");s([t.n({type:String})],i.prototype,"optionalText");s([t.n({type:Boolean})],i.prototype,"requiredTag");s([t.n({type:String})],i.prototype,"requiredText");try{t.t("pkt-checkbox")(i)}catch{console.warn("Forsøker å definere <pkt-checkbox>, men den er allerede definert")}exports.PktCheckbox=i;