@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/dist/tag-DGFgUF3l.js

@@ -0,0 +1,150 @@
+import { e as h } from "./class-map-hz16xq5a.js";
+import { P as d, x as p, n as l, t as y } from "./icon-wUXeHiBk.js";
+import { r as m } from "./state-BfyXV7EL.js";
+import { P as g } from "./pkt-slot-controller-RJvOnbF4.js";
+import { e as k, n as f } from "./ref-DuFGTLVX.js";
+const b = "pkt-tag", S = !0, $ = {
+  closeTag: {
+    type: "boolean",
+    required: !1,
+    default: !1
+  },
+  size: {
+    required: !1,
+    default: "medium",
+    type: [
+      "small",
+      "medium",
+      "large"
+    ]
+  },
+  iconName: {
+    type: "icon",
+    required: !1
+  },
+  skin: {
+    required: !1,
+    default: "blue",
+    type: [
+      "blue",
+      "green",
+      "red",
+      "beige",
+      "yellow",
+      "gray",
+      "blue-light"
+    ]
+  },
+  textStyle: {
+    required: !1,
+    default: "normal-text",
+    type: [
+      "thin-text",
+      "normal-text"
+    ]
+  },
+  type: {
+    required: !1,
+    default: "button",
+    type: [
+      "button",
+      "submit",
+      "reset"
+    ]
+  },
+  ariaLabel: {
+    type: "string",
+    required: !1,
+    default: "Lukk"
+  }
+}, _ = {
+  default: {
+    description: "Teksten til tag"
+  }
+}, a = {
+  name: b,
+  "css-class": "pkt-tag",
+  isElement: S,
+  props: $,
+  slots: _
+};
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? C(o, n) : o, c = s.length - 1, u; c >= 0; c--)
+    (u = s[c]) && (i = (r ? u(o, n, i) : u(i)) || i);
+  return r && i && x(o, n, i), i;
+};
+let t = class extends d {
+  constructor() {
+    super(), this.defaultSlot = k(), this.closeTag = a.props.closeTag.default, this.size = a.props.size.default, this.skin = a.props.skin.default, this.textStyle = a.props.textStyle.default, this.iconName = void 0, this.type = a.props.type.default, this.ariaLabel = a.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
+      this._isClosed = !0, this.dispatchEvent(
+        new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
+      ), this.dispatchEvent(
+        new CustomEvent("on-close", { detail: { origin: s }, bubbles: !0, composed: !0 })
+      );
+    }, this.slotController = new g(this, this.defaultSlot), this._isClosed = !1;
+  }
+  render() {
+    const s = {
+      "pkt-tag": !0,
+      [`pkt-tag--${this.size}`]: !!this.size,
+      [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.textStyle}`]: !!this.textStyle
+    }, o = {
+      "pkt-tag": !0,
+      "pkt-btn": !0,
+      "pkt-btn--tertiary": !0,
+      [`pkt-tag--${this.size}`]: !!this.size,
+      [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
+      "pkt-btn--icons-right-and-left": this.closeTag && !!this.iconName,
+      "pkt-hide": this._isClosed
+    };
+    return this.closeTag ? p`
+        <button
+          class=${h(o)}
+          type=${this.type}
+          aria-label=${this.ariaLabel}
+          @click=${this.close}
+        >
+          ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${f(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      ` : p`
+        <span class=${h(s)}>
+          ${this.iconName && p` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
+          <span ${f(this.defaultSlot)}></span>
+        </span>
+      `;
+  }
+};
+e([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "closeTag", 2);
+e([
+  l({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  l({ type: String, reflect: !0 })
+], t.prototype, "skin", 2);
+e([
+  l({ type: String, reflect: !0 })
+], t.prototype, "textStyle", 2);
+e([
+  l({ type: String, reflect: !0 })
+], t.prototype, "iconName", 2);
+e([
+  l({ type: String, reflect: !0 })
+], t.prototype, "type", 2);
+e([
+  l({ type: String, reflect: !0 })
+], t.prototype, "ariaLabel", 2);
+e([
+  m()
+], t.prototype, "_isClosed", 2);
+t = e([
+  y("pkt-tag")
+], t);
+export {
+  t as P
+};

package/dist/{textarea-BTpJjEhO.js → textarea-BAGWR1Hi.js}

@@ -1,18 +1,18 @@
-import { T as l, E as h, r as c, a as $, x as g, n as p } from "./index-CFDwiDTU.js";
-import { e as m, i as f, a as n, t as b } from "./custom-element-CWfU4dcr.js";
-import { f as v, m as x, e as T, n as y } from "./ref-CaiKp3S2.js";
-import { e as w } from "./class-map-CBvUV2N3.js";
-import "./input-wrapper-6vTrKtsW.js";
-import "./index-RwtTBIhT.js";
+import { e as c, i as $, b as n, T as l, E as h, x as m, n as p, t as g } from "./icon-wUXeHiBk.js";
+import { r as f } from "./state-BfyXV7EL.js";
+import { f as b, m as v, e as x, n as T } from "./ref-DuFGTLVX.js";
+import { e as y } from "./class-map-hz16xq5a.js";
+import { P as w } from "./input-element-D1Vls6A5.js";
+import "./input-wrapper-BTQk3W8T.js";
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const E = m(class extends f {
+const E = c(class extends $ {
   constructor(t) {
     if (super(t), t.type !== n.PROPERTY && t.type !== n.ATTRIBUTE && t.type !== n.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!v(t)) throw Error("`live` bindings can only contain a single expression");
+    if (!b(t)) throw Error("`live` bindings can only contain a single expression");
   }
   render(t) {
     return t;
@@ -25,17 +25,17 @@ const E = m(class extends f {
     } else if (t.type === n.BOOLEAN_ATTRIBUTE) {
       if (!!r === e.hasAttribute(i)) return l;
     } else if (t.type === n.ATTRIBUTE && e.getAttribute(i) === r + "") return l;
-    return x(t), r;
+    return v(t), r;
   }
 });
-var C = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (t, r, e, i) => {
-  for (var a = i > 1 ? void 0 : i ? B(r, e) : r, u = t.length - 1, d; u >= 0; u--)
-    (d = t[u]) && (a = (i ? d(r, e, a) : d(a)) || a);
-  return i && a && C(r, e, a), a;
+var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (t, r, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? P(r, e) : r, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (s = (i ? d(r, e, s) : d(s)) || s);
+  return i && s && C(r, e, s), s;
 };
-let s = class extends $ {
+let a = class extends w {
   constructor() {
-    super(...arguments), this.value = "", this.autocomplete = "off", this.placeholder = "", this.rows = null, this.counterCurrent = 0, this.inputRef = T();
+    super(...arguments), this.value = "", this.autocomplete = "off", this.placeholder = "", this.rows = null, this.counterCurrent = 0, this.inputRef = x();
   }
   attributeChangedCallback(t, r, e) {
     t === "value" && this.value !== r && (this.counterCurrent = e ? e.length : 0, this.valueChanged(e, r)), super.attributeChangedCallback(t, r, e);
@@ -45,13 +45,13 @@ let s = class extends $ {
     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);
   }
   render() {
-    const t = w({
+    const t = y({
       "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 g`<pkt-input-wrapper
-      label="${this.label}"
+    return m`<pkt-input-wrapper
+      label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
       ?hasError=${this.hasError}
@@ -73,7 +73,7 @@ let s = class extends $ {
       class="pkt-textarea"
     >
       <textarea
-        ${y(this.inputRef)}
+        ${T(this.inputRef)}
         class=${t}
         id=${this.id + "-input"}
         name=${(this.name || this.id) + "-input"}
@@ -106,22 +106,22 @@ let s = class extends $ {
 };
 o([
   p({ type: String, reflect: !0 })
-], s.prototype, "value", 2);
+], a.prototype, "value", 2);
 o([
   p({ type: String })
-], s.prototype, "autocomplete", 2);
+], a.prototype, "autocomplete", 2);
 o([
   p({ type: String })
-], s.prototype, "placeholder", 2);
+], a.prototype, "placeholder", 2);
 o([
   p({ type: Number })
-], s.prototype, "rows", 2);
+], a.prototype, "rows", 2);
 o([
-  c()
-], s.prototype, "counterCurrent", 2);
-s = o([
-  b("pkt-textarea")
-], s);
+  f()
+], a.prototype, "counterCurrent", 2);
+a = o([
+  g("pkt-textarea")
+], a);
 export {
-  s as P
+  a as P
 };

package/dist/textarea-BiUrhAlk.cjs

@@ -0,0 +1,48 @@
+"use strict";const r=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),p=require("./class-map-Boa7BqCc.cjs"),d=require("./input-element-DPKoFVwJ.cjs");require("./input-wrapper-D-PNRJB_.cjs");/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const c=r.e(class extends r.i{constructor(i){if(super(i),i.type!==r.t$1.PROPERTY&&i.type!==r.t$1.ATTRIBUTE&&i.type!==r.t$1.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!o.f(i))throw Error("`live` bindings can only contain a single expression")}render(i){return i}update(i,[e]){if(e===r.T||e===r.E)return e;const a=i.element,t=i.name;if(i.type===r.t$1.PROPERTY){if(e===a[t])return r.T}else if(i.type===r.t$1.BOOLEAN_ATTRIBUTE){if(!!e===a.hasAttribute(t))return r.T}else if(i.type===r.t$1.ATTRIBUTE&&a.getAttribute(t)===e+"")return r.T;return o.m(i),e}});var $=Object.defineProperty,g=Object.getOwnPropertyDescriptor,n=(i,e,a,t)=>{for(var s=t>1?void 0:t?g(e,a):e,u=i.length-1,l;u>=0;u--)(l=i[u])&&(s=(t?l(e,a,s):l(s))||s);return t&&s&&$(e,a,s),s};exports.PktTextarea=class extends d.PktInputElement{constructor(){super(...arguments),this.value="",this.autocomplete="off",this.placeholder="",this.rows=null,this.counterCurrent=0,this.inputRef=o.e()}attributeChangedCallback(e,a,t){e==="value"&&this.value!==a&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,a)),super.attributeChangedCallback(e,a,t)}updated(e){var a;super.updated(e),e.has("value")&&(this.counterCurrent=((a=this.value)==null?void 0:a.length)||0,this.valueChanged(this.value,e.get("value"))),e.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const e=p.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 r.x`<pkt-input-wrapper
+      label=${this.label}
+      ?counter=${this.counter}
+      ?disabled=${this.disabled}
+      ?hasError=${this.hasError}
+      ?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}
+      class="pkt-textarea"
+    >
+      <textarea
+        ${o.n(this.inputRef)}
+        class=${e}
+        id=${this.id+"-input"}
+        name=${(this.name||this.id)+"-input"}
+        placeholder=${this.placeholder??r.E}
+        .value=${c(this.value)}
+        minlength=${this.minlength||r.E}
+        maxlength=${this.maxlength||r.E}
+        ?readonly=${this.readonly}
+        autocomplete=${this.autocomplete}
+        aria-labelledby=${a}
+        aria-invalid=${this.hasError}
+        aria-errormessage=${`${this.id}-error`}
+        rows=${this.rows}
+        ?disabled=${this.disabled}
+        @input=${t=>{this.value=t.target.value,this.onInput(),t.stopImmediatePropagation()}}
+        @change=${t=>{t.stopImmediatePropagation()}}
+        @focus=${t=>{this.onFocus(),t.stopImmediatePropagation()}}
+        @blur=${t=>{this.value=t.target.value,this.onBlur(),t.stopImmediatePropagation()}}
+      ></textarea>
+    </pkt-input-wrapper>`}};n([r.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);n([r.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);n([r.n({type:String})],exports.PktTextarea.prototype,"placeholder",2);n([r.n({type:Number})],exports.PktTextarea.prototype,"rows",2);n([h.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=n([r.t("pkt-textarea")],exports.PktTextarea);

package/dist/{textinput-BIhQEr8z.cjs → textinput-CHOR5PPp.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./index-CR7t1zY9.cjs"),h=require("./custom-element-B-TlBwRu.cjs"),o=require("./ref-C2yPtMJA.cjs"),l=require("./class-map-a5HUzP83.cjs");require("./input-wrapper-DX41tnbj.cjs");require("./index-CmTjXoAb.cjs");var c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?d(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&c(i,n,e),e};exports.PktTextinput=class extends t.PktInputElement{constructor(){super(...arguments),this.value="",this.type="text",this.size=null,this.autocomplete="off",this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.inputRef=o.e()}attributeChangedCallback(i,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.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,n=l.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}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./icon-CdMQ6zBT.cjs"),h=require("./state-SKYD8kRO.cjs"),o=require("./ref-DCOsLZQg.cjs"),l=require("./class-map-Boa7BqCc.cjs"),c=require("./input-element-DPKoFVwJ.cjs");require("./input-wrapper-D-PNRJB_.cjs");var d=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,i,n,s)=>{for(var e=s>1?void 0:s?x(i,n):i,a=p.length-1,u;a>=0;a--)(u=p[a])&&(e=(s?u(i,n,e):u(e))||e);return s&&e&&d(i,n,e),e};exports.PktTextinput=class extends c.PktInputElement{constructor(){super(...arguments),this.value="",this.type="text",this.size=null,this.autocomplete="off",this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.inputRef=o.e()}attributeChangedCallback(i,n,s){i==="value"&&this.value!==n&&(this.counterCurrent=s?s.length:0,this.valueChanged(s,n)),super.attributeChangedCallback(i,n,s)}updated(i){var n;super.updated(i),i.has("value")&&(this.counterCurrent=((n=this.value)==null?void 0:n.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,n=l.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}),s=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}
@@ -60,4 +60,4 @@
           ${!this.suffix&&i?t.x`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>`:t.E}
         </div>
       </pkt-input-wrapper>
-    `}};r([t.n({type:String,reflect:!0})],exports.PktTextinput.prototype,"value",2);r([t.n({type:String})],exports.PktTextinput.prototype,"type",2);r([t.n({type:Number})],exports.PktTextinput.prototype,"size",2);r([t.n({type:String})],exports.PktTextinput.prototype,"autocomplete",2);r([t.n({type:String})],exports.PktTextinput.prototype,"iconNameRight",2);r([t.n({type:String})],exports.PktTextinput.prototype,"prefix",2);r([t.n({type:String})],exports.PktTextinput.prototype,"suffix",2);r([t.n({type:Boolean})],exports.PktTextinput.prototype,"omitSearchIcon",2);r([t.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([h.t("pkt-textinput")],exports.PktTextinput);
+    `}};r([t.n({type:String,reflect:!0})],exports.PktTextinput.prototype,"value",2);r([t.n({type:String})],exports.PktTextinput.prototype,"type",2);r([t.n({type:Number})],exports.PktTextinput.prototype,"size",2);r([t.n({type:String})],exports.PktTextinput.prototype,"autocomplete",2);r([t.n({type:String})],exports.PktTextinput.prototype,"iconNameRight",2);r([t.n({type:String})],exports.PktTextinput.prototype,"prefix",2);r([t.n({type:String})],exports.PktTextinput.prototype,"suffix",2);r([t.n({type:Boolean})],exports.PktTextinput.prototype,"omitSearchIcon",2);r([h.r()],exports.PktTextinput.prototype,"counterCurrent",2);exports.PktTextinput=r([t.t("pkt-textinput")],exports.PktTextinput);

package/dist/{textinput-CVo5wG14.js → textinput-pJ3N8m6g.js}

@@ -1,17 +1,17 @@
-import { r as c, a as d, x as h, E as n, n as p } from "./index-CFDwiDTU.js";
-import { t as $ } from "./custom-element-CWfU4dcr.js";
-import { e as g, n as m } from "./ref-CaiKp3S2.js";
-import { e as f } from "./class-map-CBvUV2N3.js";
-import "./input-wrapper-6vTrKtsW.js";
-import "./index-RwtTBIhT.js";
+import { x as h, E as n, n as o, t as c } from "./icon-wUXeHiBk.js";
+import { r as d } from "./state-BfyXV7EL.js";
+import { e as $, n as g } from "./ref-DuFGTLVX.js";
+import { e as m } from "./class-map-hz16xq5a.js";
+import { P as f } from "./input-element-D1Vls6A5.js";
+import "./input-wrapper-BTQk3W8T.js";
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, e, r, t) => {
-  for (var o = t > 1 ? void 0 : t ? y(e, r) : e, u = i.length - 1, l; u >= 0; u--)
-    (l = i[u]) && (o = (t ? l(e, r, o) : l(o)) || o);
-  return t && o && x(e, r, o), o;
+  for (var p = t > 1 ? void 0 : t ? y(e, r) : e, u = i.length - 1, l; u >= 0; u--)
+    (l = i[u]) && (p = (t ? l(e, r, p) : l(p)) || p);
+  return t && p && x(e, r, p), p;
 };
-let s = class extends d {
+let s = class extends f {
   constructor() {
-    super(...arguments), this.value = "", this.type = "text", this.size = null, this.autocomplete = "off", this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0, this.inputRef = g();
+    super(...arguments), this.value = "", this.type = "text", this.size = null, this.autocomplete = "off", this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0, this.inputRef = $();
   }
   attributeChangedCallback(i, e, r) {
     i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
@@ -21,7 +21,7 @@ let s = class extends d {
     super.updated(i), i.has("value") && (this.counterCurrent = ((e = this.value) == null ? void 0 : e.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, e = f({
+    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = m({
       "pkt-input": !0,
       "pkt-input--fullwidth": this.fullwidth,
       "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
@@ -52,7 +52,7 @@ let s = class extends d {
         <div class="pkt-input__container">
           ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : n}
           <input
-            ${m(this.inputRef)}
+            ${g(this.inputRef)}
             class=${e}
             type=${this.type}
             name=${(this.name || this.id) + "-input"}
@@ -100,34 +100,34 @@ let s = class extends d {
   }
 };
 a([
-  p({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
 a([
-  p({ type: String })
+  o({ type: String })
 ], s.prototype, "type", 2);
 a([
-  p({ type: Number })
+  o({ type: Number })
 ], s.prototype, "size", 2);
 a([
-  p({ type: String })
+  o({ type: String })
 ], s.prototype, "autocomplete", 2);
 a([
-  p({ type: String })
+  o({ type: String })
 ], s.prototype, "iconNameRight", 2);
 a([
-  p({ type: String })
+  o({ type: String })
 ], s.prototype, "prefix", 2);
 a([
-  p({ type: String })
+  o({ type: String })
 ], s.prototype, "suffix", 2);
 a([
-  p({ type: Boolean })
+  o({ type: Boolean })
 ], s.prototype, "omitSearchIcon", 2);
 a([
-  c()
+  d()
 ], s.prototype, "counterCurrent", 2);
 s = a([
-  $("pkt-textinput")
+  c("pkt-textinput")
 ], s);
 export {
   s as P

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.17.2",
+  "version": "12.18.1",
   "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": "998cf96281840a47cba5ba3e0c76e6fa1d2ed10e"
+  "gitHead": "6ae85b68cc5757ecef1c2a851cc4450e5e27f3db"
 }

package/src/components/alert/alert.ts

@@ -0,0 +1,115 @@
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import { html, nothing, PropertyValues } from 'lit'
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { TAriaLive } from '@/types/aria'
+
+import specs from 'componentSpecs/alert.json'
+
+import '@/components/icon'
+
+export type TAlertSkin = 'error' | 'success' | 'warning' | 'info'
+
+export interface IPktAlert {
+  skin?: TAlertSkin
+  closeAlert?: boolean
+  title?: string
+  date?: string
+  ariaLive?: TAriaLive
+  'aria-live'?: TAriaLive
+  compact?: boolean
+}
+@customElement('pkt-alert')
+export class PktAlert extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+    this._isClosed = false
+  }
+
+  @property({ type: Boolean, reflect: false }) compact = specs.props.compact.default
+  @property({ type: String, reflect: true }) title: string = ''
+  @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
+    .default as TAlertSkin
+  @property({ type: String }) ariaLive: TAriaLive = specs.props.ariaLive.default as TAriaLive
+  @property({ type: String, reflect: true }) 'aria-live': TAriaLive = null
+  @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
+  @property({ type: String, reflect: true }) date: string | null = null
+
+  @state() _isClosed: boolean = false
+
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(
+      new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
+    // Historical support of old Vue implementations…
+    this.dispatchEvent(
+      new CustomEvent('on-close', { detail: { origin: event }, bubbles: true, composed: true }),
+    )
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this['aria-live'] = (this.getAttribute('aria-live') as TAriaLive) || this.ariaLive
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    if (name === 'ariaLive') {
+      this['aria-live'] = value as TAriaLive
+    }
+    super.attributeChangedCallback(name, _old, value)
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties)
+    if (_changedProperties.has('ariaLive')) {
+      this['aria-live'] = this.ariaLive
+    }
+  }
+
+  render() {
+    const classes = {
+      'pkt-alert': true,
+      'pkt-alert--compact': this.compact,
+      [`pkt-alert--${this.skin}`]: this.skin,
+      'pkt-hide': this._isClosed,
+    }
+
+    return html`
+      <div class=${classMap(classes)}>
+        <pkt-icon
+          class="pkt-alert__icon"
+          name=${this.skin === 'info' ? 'alert-information' : `alert-${this.skin}`}
+        ></pkt-icon>
+
+        ${this.closeAlert
+          ? html`
+              <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>
+            `
+          : nothing}
+        ${this.title ? html`<div class="pkt-alert__title">${this.title}</div>` : nothing}
+
+        <div class="pkt-alert__text" ${ref(this.defaultSlot)}></div>
+
+        ${this.date
+          ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
+          : nothing}
+      </div>
+    `
+  }
+}