@oslokommune/punkt-elements 16.7.0 → 16.7.3

package/dist/{textarea-Bzuymclz.js → textarea-CMiSJaYL.js}

@@ -1,61 +1,61 @@
-import { E as l, A as c, b as m, n as d, t as g } from "./element-CPpT3rFQ.js";
-import { o as u } from "./if-defined-B0krMLad.js";
+import { E as o, A as c, t as m, b as g, n as u } from "./element-CPpT3rFQ.js";
+import { o as p } from "./if-defined-B0krMLad.js";
 import { r as $ } from "./state-C_1EOo3D.js";
 import { e as f, n as x } from "./ref-Bg_Swj5w.js";
 import { e as v } from "./class-map-CEnykyO_.js";
-import { e as b, i as T, t as a } from "./directive-oAbCiebi.js";
+import { e as b, i as T, t as s } from "./directive-oAbCiebi.js";
 import { r as y, p as w } from "./directive-helpers-rm-28gIj.js";
 import { P as C } from "./input-element-8nLwuQS4.js";
 import { s as E } from "./element-with-slot-Dqk6-TRR.js";
-import "./input-wrapper-B2JpK016.js";
-import "./icon-BlKA8YuW.js";
+import "./input-wrapper-Bs4CRNst.js";
+import "./icon-CxQcIa5F.js";
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const P = b(class extends T {
-  constructor(t) {
-    if (super(t), t.type !== a.PROPERTY && t.type !== a.ATTRIBUTE && t.type !== a.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!y(t)) throw Error("`live` bindings can only contain a single expression");
+const k = b(class extends T {
+  constructor(e) {
+    if (super(e), e.type !== s.PROPERTY && e.type !== s.ATTRIBUTE && e.type !== s.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!y(e)) throw Error("`live` bindings can only contain a single expression");
   }
-  render(t) {
-    return t;
+  render(e) {
+    return e;
   }
-  update(t, [r]) {
-    if (r === l || r === c) return r;
-    const e = t.element, i = t.name;
-    if (t.type === a.PROPERTY) {
-      if (r === e[i]) return l;
-    } else if (t.type === a.BOOLEAN_ATTRIBUTE) {
-      if (!!r === e.hasAttribute(i)) return l;
-    } else if (t.type === a.ATTRIBUTE && e.getAttribute(i) === r + "") return l;
-    return w(t), r;
+  update(e, [t]) {
+    if (t === o || t === c) return t;
+    const i = e.element, r = e.name;
+    if (e.type === s.PROPERTY) {
+      if (t === i[r]) return o;
+    } else if (e.type === s.BOOLEAN_ATTRIBUTE) {
+      if (!!t === i.hasAttribute(r)) return o;
+    } else if (e.type === s.ATTRIBUTE && i.getAttribute(r) === t + "") return o;
+    return w(e), t;
   }
 });
-var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, r, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? I(r, e) : r, h = t.length - 1, p; h >= 0; h--)
-    (p = t[h]) && (s = (i ? p(r, e, s) : p(s)) || s);
-  return i && s && B(r, e, s), s;
+var B = Object.defineProperty, l = (e, t, i, r) => {
+  for (var a = void 0, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (a = d(t, i, a) || a);
+  return a && B(t, i, a), a;
 };
-let o = class extends C {
+class n extends C {
   constructor() {
     super(...arguments), this.inputRef = f(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0;
   }
-  attributeChangedCallback(t, r, e) {
-    t === "value" && this.value !== r && (this.counterCurrent = e ? e.length : 0, this.valueChanged(e, r)), super.attributeChangedCallback(t, r, e);
+  attributeChangedCallback(t, i, r) {
+    t === "value" && this.value !== i && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, i)), super.attributeChangedCallback(t, i, r);
   }
   updated(t) {
-    var r;
-    super.updated(t), t.has("value") && (this.counterCurrent = ((r = this.value) == null ? void 0 : r.length) || 0, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
+    var i;
+    super.updated(t), t.has("value") && (this.counterCurrent = ((i = this.value) == null ? void 0 : i.length) || 0, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
   }
   render() {
     const t = v({
       "pkt-input": !0,
       "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 m`<pkt-input-wrapper
+    }), i = this.ariaLabelledby || `${this.id}-input-label`;
+    return g`<pkt-input-wrapper
       label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
@@ -84,48 +84,50 @@ let o = class extends C {
         class=${t}
         id=${this.id + "-input"}
         name=${(this.name || this.id) + "-input"}
-        placeholder=${u(this.placeholder)}
-        .value=${P(this.value)}
-        minlength=${u(this.minlength)}
-        maxlength=${u(this.maxlength)}
+        placeholder=${p(this.placeholder)}
+        .value=${k(this.value)}
+        minlength=${p(this.minlength)}
+        maxlength=${p(this.maxlength)}
         ?readonly=${this.readonly}
         autocomplete=${this.autocomplete}
-        aria-labelledby=${r}
+        aria-labelledby=${i}
         aria-invalid=${this.hasError}
         aria-errormessage=${`${this.id}-error`}
         rows=${this.rows}
         ?disabled=${this.disabled}
-        @input=${(e) => {
-      this.value = e.target.value, this.onInput(), e.stopImmediatePropagation();
+        @input=${(r) => {
+      this.value = r.target.value, this.onInput(), r.stopImmediatePropagation();
     }}
-        @change=${(e) => {
-      e.stopImmediatePropagation();
+        @change=${(r) => {
+      r.stopImmediatePropagation();
     }}
-        @focus=${(e) => {
-      this.onFocus(), e.stopImmediatePropagation();
+        @focus=${(r) => {
+      this.onFocus(), r.stopImmediatePropagation();
     }}
-        @blur=${(e) => {
-      this.value = e.target.value, this.onBlur(), e.stopImmediatePropagation();
+        @blur=${(r) => {
+      this.value = r.target.value, this.onBlur(), r.stopImmediatePropagation();
     }}
       ></textarea>
     </pkt-input-wrapper>`;
   }
-};
-n([
-  d({ type: String, reflect: !0 })
-], o.prototype, "value", 2);
-n([
-  d({ type: String })
-], o.prototype, "autocomplete", 2);
-n([
-  d({ type: Number })
-], o.prototype, "rows", 2);
-n([
+}
+l([
+  u({ type: String, reflect: !0 })
+], n.prototype, "value");
+l([
+  u({ type: String })
+], n.prototype, "autocomplete");
+l([
+  u({ type: Number })
+], n.prototype, "rows");
+l([
   $()
-], o.prototype, "counterCurrent", 2);
-o = n([
-  g("pkt-textarea")
-], o);
+], n.prototype, "counterCurrent");
+try {
+  m("pkt-textarea")(n);
+} catch {
+  console.warn("Forsøker å definere <pkt-textarea>, men den er allerede definert");
+}
 export {
-  o as P
+  n as P
 };

package/dist/textinput-em9y4yrL.cjs

@@ -0,0 +1,70 @@
+"use strict";const t=require("./element-gR_VtSiD.cjs"),h=require("./if-defined-BOW3ODSj.cjs"),c=require("./state-Dg-53wQ8.cjs"),l=require("./ref-CL-Xk9Xm.cjs"),d=require("./class-map-CsENJXf1.cjs"),$=require("./input-element-DdVhUvva.cjs"),f=require("./element-with-slot-ZX-up7jO.cjs");require("./input-wrapper-Bv9aqqVq.cjs");require("./icon-q81vqPK_.cjs");var g=Object.defineProperty,r=(u,i,s,a)=>{for(var e=void 0,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=p(i,s,e)||e);return e&&g(i,s,e),e};class n extends $.PktInputElement{constructor(){super(...arguments),this.inputRef=l.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0}attributeChangedCallback(i,s,a){i==="value"&&this.value!==s&&(this.counterCurrent=a?a.length:0,this.valueChanged(a,s)),super.attributeChangedCallback(i,s,a)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=d.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),a=this.ariaLabelledby||`${this.id}-input-label`;return t.b`
+      <pkt-input-wrapper
+        label="${this.label}"
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?required=${this.required}
+        ?requiredTag=${this.requiredTag}
+        useWrapper=${this.useWrapper}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        .counterCurrent=${this.counterCurrent}
+        .counterMaxLength=${this.counterMaxLength}
+        .errorMessage=${this.errorMessage}
+        .forId="${this.id+"-input"}"
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        class="pkt-textinput"
+      >
+        <div class="pkt-contents" slot="helptext">${f.slotContent(this,"helptext")}</div>
+        <div class="pkt-input__container">
+          ${this.prefix?t.b`<div class="pkt-input-prefix">${this.prefix}</div>`:t.A}
+          <input
+            ${l.n(this.inputRef)}
+            class=${s}
+            type=${this.type}
+            name=${(this.name||this.id)+"-input"}
+            id=${this.id+"-input"}
+            placeholder=${h.o(this.placeholder)}
+            aria-labelledby=${a}
+            autocomplete=${this.autocomplete||"off"}
+            minlength=${h.o(this.minlength||void 0)}
+            maxlength=${h.o(this.maxlength||void 0)}
+            min=${h.o(this.min||void 0)}
+            max=${h.o(this.max||void 0)}
+            step=${h.o(this.step||void 0)}
+            ?readonly=${this.readonly}
+            size=${this.size||t.A}
+            .value=${this.value}
+            ?disabled=${this.disabled}
+            aria-invalid=${this.hasError}
+            aria-errormessage=${`${this.id}-error`}
+            @input=${e=>{this.value=e.target.value,this.onInput(),e.stopImmediatePropagation()}}
+            @change=${e=>{e.stopImmediatePropagation()}}
+            @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
+            @blur=${e=>{this.value=e.target.value,this.onBlur(),e.stopImmediatePropagation()}}
+            @keydown=${e=>{var o;if(e.key==="Enter"){const p=this.internals.form;p?p.requestSubmit():(o=this.inputRef.value)==null||o.blur()}}}
+          />
+          ${this.suffix?t.b`<div class="pkt-input-suffix">
+                ${this.suffix}
+                ${this.iconNameRight?t.b`<pkt-icon
+                      class="pkt-input-suffix-icon"
+                      name=${this.iconNameRight}
+                    ></pkt-icon>`:t.A}
+                ${i?t.b`<pkt-icon
+                      class="pkt-input-suffix-icon"
+                      name="magnifying-glass-big"
+                    ></pkt-icon>`:t.A}
+              </div>`:t.A}
+          ${!this.suffix&&this.iconNameRight?t.b`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>`:t.A}
+          ${!this.suffix&&i?t.b`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:t.A}
+        </div>
+      </pkt-input-wrapper>
+    `}}r([t.n({type:String,reflect:!0})],n.prototype,"value");r([t.n({type:String})],n.prototype,"type");r([t.n({type:Number})],n.prototype,"size");r([t.n({type:String})],n.prototype,"autocomplete");r([t.n({type:String})],n.prototype,"iconNameRight");r([t.n({type:String})],n.prototype,"prefix");r([t.n({type:String})],n.prototype,"suffix");r([t.n({type:Boolean})],n.prototype,"omitSearchIcon");r([c.r()],n.prototype,"counterCurrent");try{t.t("pkt-textinput")(n)}catch{console.warn("Forsøker å definere <pkt-textinput>, men den er allerede definert")}exports.PktTextinput=n;

package/dist/{textinput-9lHjs4ce.js → textinput-r8udK0IX.js}

@@ -1,23 +1,23 @@
-import { A as p, b as h, n as a, t as d } from "./element-CPpT3rFQ.js";
+import { t as d, A as a, b as p, n } from "./element-CPpT3rFQ.js";
 import { o as l } from "./if-defined-B0krMLad.js";
 import { r as m } from "./state-C_1EOo3D.js";
 import { e as $, n as f } from "./ref-Bg_Swj5w.js";
 import { e as g } from "./class-map-CEnykyO_.js";
 import { P as x } from "./input-element-8nLwuQS4.js";
 import { s as v } from "./element-with-slot-Dqk6-TRR.js";
-import "./input-wrapper-B2JpK016.js";
-import "./icon-BlKA8YuW.js";
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, e, r, t) => {
-  for (var n = t > 1 ? void 0 : t ? b(e, r) : e, u = i.length - 1, c; u >= 0; u--)
-    (c = i[u]) && (n = (t ? c(e, r, n) : c(n)) || n);
-  return t && n && y(e, r, n), n;
+import "./input-wrapper-Bs4CRNst.js";
+import "./icon-CxQcIa5F.js";
+var y = Object.defineProperty, r = (c, i, e, o) => {
+  for (var t = void 0, h = c.length - 1, u; h >= 0; h--)
+    (u = c[h]) && (t = u(i, e, t) || t);
+  return t && y(i, e, t), t;
 };
-let s = class extends x {
+class s extends x {
   constructor() {
     super(...arguments), this.inputRef = $(), this.value = "", this.type = "text", this.size = null, this.autocomplete = null, this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0;
   }
-  attributeChangedCallback(i, e, r) {
-    i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
+  attributeChangedCallback(i, e, o) {
+    i === "value" && this.value !== e && (this.counterCurrent = o ? o.length : 0, this.valueChanged(o, e)), super.attributeChangedCallback(i, e, o);
   }
   updated(i) {
     var e;
@@ -28,8 +28,8 @@ let s = class extends x {
       "pkt-input": !0,
       "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 h`
+    }), o = this.ariaLabelledby || `${this.id}-input-label`;
+    return p`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -56,7 +56,7 @@ let s = class extends x {
       >
         <div class="pkt-contents" slot="helptext">${v(this, "helptext")}</div>
         <div class="pkt-input__container">
-          ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : p}
+          ${this.prefix ? p`<div class="pkt-input-prefix">${this.prefix}</div>` : a}
           <input
             ${f(this.inputRef)}
             class=${e}
@@ -64,7 +64,7 @@ let s = class extends x {
             name=${(this.name || this.id) + "-input"}
             id=${this.id + "-input"}
             placeholder=${l(this.placeholder)}
-            aria-labelledby=${r}
+            aria-labelledby=${o}
             autocomplete=${this.autocomplete || "off"}
             minlength=${l(this.minlength || void 0)}
             maxlength=${l(this.maxlength || void 0)}
@@ -72,7 +72,7 @@ let s = class extends x {
             max=${l(this.max || void 0)}
             step=${l(this.step || void 0)}
             ?readonly=${this.readonly}
-            size=${this.size || p}
+            size=${this.size || a}
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
@@ -90,61 +90,63 @@ let s = class extends x {
       this.value = t.target.value, this.onBlur(), t.stopImmediatePropagation();
     }}
             @keydown=${(t) => {
-      var n;
+      var h;
       if (t.key === "Enter") {
         const u = this.internals.form;
-        u ? u.requestSubmit() : (n = this.inputRef.value) == null || n.blur();
+        u ? u.requestSubmit() : (h = this.inputRef.value) == null || h.blur();
       }
     }}
           />
-          ${this.suffix ? h`<div class="pkt-input-suffix">
+          ${this.suffix ? p`<div class="pkt-input-suffix">
                 ${this.suffix}
-                ${this.iconNameRight ? h`<pkt-icon
+                ${this.iconNameRight ? p`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name=${this.iconNameRight}
-                    ></pkt-icon>` : p}
-                ${i ? h`<pkt-icon
+                    ></pkt-icon>` : a}
+                ${i ? p`<pkt-icon
                       class="pkt-input-suffix-icon"
                       name="magnifying-glass-big"
-                    ></pkt-icon>` : p}
-              </div>` : p}
-          ${!this.suffix && this.iconNameRight ? h`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : p}
-          ${!this.suffix && i ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : p}
+                    ></pkt-icon>` : a}
+              </div>` : a}
+          ${!this.suffix && this.iconNameRight ? p`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : a}
+          ${!this.suffix && i ? p`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : a}
         </div>
       </pkt-input-wrapper>
     `;
   }
-};
-o([
-  a({ type: String, reflect: !0 })
-], s.prototype, "value", 2);
-o([
-  a({ type: String })
-], s.prototype, "type", 2);
-o([
-  a({ type: Number })
-], s.prototype, "size", 2);
-o([
-  a({ type: String })
-], s.prototype, "autocomplete", 2);
-o([
-  a({ type: String })
-], s.prototype, "iconNameRight", 2);
-o([
-  a({ type: String })
-], s.prototype, "prefix", 2);
-o([
-  a({ type: String })
-], s.prototype, "suffix", 2);
-o([
-  a({ type: Boolean })
-], s.prototype, "omitSearchIcon", 2);
-o([
+}
+r([
+  n({ type: String, reflect: !0 })
+], s.prototype, "value");
+r([
+  n({ type: String })
+], s.prototype, "type");
+r([
+  n({ type: Number })
+], s.prototype, "size");
+r([
+  n({ type: String })
+], s.prototype, "autocomplete");
+r([
+  n({ type: String })
+], s.prototype, "iconNameRight");
+r([
+  n({ type: String })
+], s.prototype, "prefix");
+r([
+  n({ type: String })
+], s.prototype, "suffix");
+r([
+  n({ type: Boolean })
+], s.prototype, "omitSearchIcon");
+r([
   m()
-], s.prototype, "counterCurrent", 2);
-s = o([
-  d("pkt-textinput")
-], s);
+], s.prototype, "counterCurrent");
+try {
+  d("pkt-textinput")(s);
+} catch {
+  console.warn("Forsøker å definere <pkt-textinput>, men den er allerede definert");
+}
 export {
   s as P
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.7.0",
+  "version": "16.7.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -78,5 +78,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "782a591e43ea062ca4ef23fe5415aca5f2d523b5"
+  "gitHead": "0f6fe32d4c462b5b2931a2dd042123552cec77fa"
 }

package/src/components/accordion/accordion.ts

@@ -15,7 +15,6 @@ export interface IPktAccordion {
    */
 }
 
-@customElement('pkt-accordion')
 export class PktAccordion extends LitElement implements IPktAccordion {
   // Properties
   @property({ type: String, reflect: true, attribute: 'aria-labelledby' }) ariaLabelledBy: string =
@@ -81,3 +80,9 @@ export class PktAccordion extends LitElement implements IPktAccordion {
 }
 
 export default PktAccordion
+
+try {
+  customElement('pkt-accordion')(PktAccordion)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-accordion>, men den er allerede definert')
+}

package/src/components/accordion/accordionitem.ts

@@ -24,7 +24,6 @@ export interface IPktAccordionItem {
   name?: string | undefined
 }
 
-@customElement('pkt-accordion-item')
 export class PktAccordionItem extends PktElementWithSlot implements IPktAccordionItem {
   @property({ type: Boolean }) defaultOpen: boolean = false
   @property({ type: String }) title: string = ''
@@ -81,3 +80,9 @@ export class PktAccordionItem extends PktElementWithSlot implements IPktAccordio
 }
 
 export default PktAccordionItem
+
+try {
+  customElement('pkt-accordion-item')(PktAccordionItem)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-accordion-item>, men den er allerede definert')
+}

package/src/components/alert/alert.ts

@@ -22,7 +22,6 @@ export interface IPktAlert {
   compact?: boolean
   role?: string
 }
-@customElement('pkt-alert')
 export class PktAlert extends PktElementWithSlot implements IPktAlert {
   constructor() {
     super()
@@ -135,3 +134,9 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
     )
   }
 }
+
+try {
+  customElement('pkt-alert')(PktAlert)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-alert>, men den er allerede definert')
+}

package/src/components/backlink/backlink.ts

@@ -11,7 +11,6 @@ export interface IPktBackLink {
   ariaLabel?: string
 }
 
-@customElement('pkt-backlink')
 export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
   // Properties
 
@@ -52,3 +51,9 @@ export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLin
 }
 
 export default PktBackLink
+
+try {
+  customElement('pkt-backlink')(PktBackLink)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-backlink>, men den er allerede definert')
+}

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -13,7 +13,6 @@ export interface IPktBreadcrumbs {
   breadcrumbs: IBreadcrumbItem[]
 }
 
-@customElement('pkt-breadcrumbs')
 export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
   @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []
 
@@ -93,3 +92,9 @@ export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
 }
 
 export default PktBreadcrumbs
+
+try {
+  customElement('pkt-breadcrumbs')(PktBreadcrumbs)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-breadcrumbs>, men den er allerede definert')
+}

package/src/components/button/button.ts

@@ -55,7 +55,6 @@ export interface IPktButton {
   disabled?: Booleanish
   loadingAnimationPath?: string
 }
-@customElement('pkt-button')
 export class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
 
   // Properties
@@ -183,3 +182,9 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
 }
 
 export default PktButton
+
+try {
+  customElement('pkt-button')(PktButton)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-button>, men den er allerede definert')
+}

package/src/components/calendar/calendar.ts

@@ -54,7 +54,6 @@ type TDayViewData = {
   tabindex: string
 }
 
-@customElement('pkt-calendar')
 export class PktCalendar extends PktElement {
   // Selection properties
   @property({ converter: converters.csvToArray })
@@ -718,3 +717,9 @@ export class PktCalendar extends PktElement {
     )
   }
 }
+
+try {
+  customElement('pkt-calendar')(PktCalendar)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-calendar>, men den er allerede definert')
+}

package/src/components/card/card.ts

@@ -36,7 +36,6 @@ export interface IPktCard {
   tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
 }
 
-@customElement('pkt-card')
 export class PktCard extends PktElementWithSlot implements IPktCard {
   // Properties
 
@@ -260,3 +259,9 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
     `
   }
 }
+
+try {
+  customElement('pkt-card')(PktCard)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-card>, men den er allerede definert')
+}

package/src/components/checkbox/checkbox.ts

@@ -21,7 +21,6 @@ type Props = ElementProps<
   | 'requiredText'
 >
 
-@customElement('pkt-checkbox')
 export class PktCheckbox extends PktInputElement<Props> {
   inputRef: Ref<HTMLInputElement> = createRef()
 
@@ -202,3 +201,9 @@ export class PktCheckbox extends PktInputElement<Props> {
     }
   }
 }
+
+try {
+  customElement('pkt-checkbox')(PktCheckbox)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-checkbox>, men den er allerede definert')
+}

package/src/components/combobox/combobox.ts

@@ -62,7 +62,6 @@ declare global {
   }
 }
 
-@customElement('pkt-combobox')
 export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   // Bound handler for body click — stored for cleanup in disconnectedCallback
   private handleBodyClick = (e: MouseEvent) => {
@@ -498,3 +497,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
 }
 
 export default PktCombobox
+
+try {
+  customElement('pkt-combobox')(PktCombobox)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-combobox>, men den er allerede definert')
+}

package/src/components/consent/consent.ts

@@ -58,7 +58,6 @@ export interface IPktConsent {
   triggerText?: string | null
 }
 
-@customElement('pkt-consent')
 export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
   private _cookieEventHandler?: (consent: any) => void
 
@@ -189,3 +188,9 @@ export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
     return html`<pkt-button @click=${this.openModal}>${this.triggerText}</pkt-button>`
   }
 }
+
+try {
+  customElement('pkt-consent')(PktConsent)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-consent>, men den er allerede definert')
+}