@oslokommune/punkt-elements 12.18.0 → 12.18.2

package/src/components/tag/index.ts

@@ -1,110 +1,5 @@
-import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { html } from 'lit'
-import { PktElement } from '../element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref } from 'lit/directives/ref.js'
-import { Ref, createRef } from 'lit/directives/ref.js'
-import specs from 'componentSpecs/tag.json'
+import { PktTag } from './tag'
+export { PktTag } from './tag'
+export default PktTag
 
-import '../icon'
-
-type TagSize = 'small' | 'medium' | 'large'
-type TagSkin = 'blue' | 'green' | 'red' | 'yellow' | 'beige' | 'blue-light' | 'gray' | 'grey'
-type TagType = 'button' | 'reset' | 'submit'
-
-export interface IPktTag {
-  closeTag?: boolean
-  size?: TagSize
-  skin?: TagSkin
-  textStyle?: string
-  iconName?: string
-  type?: TagType
-  ariaLabel?: string
-}
-
-@customElement('pkt-tag')
-export class PktTag extends PktElement {
-  slotController: PktSlotController
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-    this._isClosed = false
-  }
-
-  /**
-   * Element attributes
-   */
-  @property({ type: Boolean, reflect: true }) closeTag: boolean = specs.props.closeTag.default
-  @property({ type: String, reflect: true }) size: TagSize = specs.props.size.default as TagSize
-  @property({ type: String, reflect: true }) skin: TagSkin = specs.props.skin.default as TagSkin
-  @property({ type: String, reflect: true }) textStyle: string = specs.props.textStyle.default
-  @property({ type: String, reflect: true }) iconName: string | undefined = undefined
-  @property({ type: String, reflect: true }) type: TagType = specs.props.type.default as TagType
-  @property({ type: String, reflect: true }) ariaLabel: string = specs.props.ariaLabel.default
-
-  /**
-   * Element state
-   */
-  @state() _isClosed: boolean = false
-
-  /**
-   * Element functions
-   */
-  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 }),
-    )
-  }
-
-  render() {
-    const classes = {
-      'pkt-tag': true,
-      [`pkt-tag--${this.size}`]: !!this.size,
-      [`pkt-tag--${this.skin}`]: !!this.skin,
-      [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
-    }
-
-    const btnClasses = {
-      'pkt-tag': true,
-      'pkt-btn': true,
-      'pkt-btn--tertiary': true,
-      [`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,
-    }
-
-    if (this.closeTag) {
-      return html`
-        <button
-          class=${classMap(btnClasses)}
-          type=${this.type}
-          aria-label=${this.ariaLabel}
-          @click=${this.close}
-        >
-          ${this.iconName &&
-          html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-          <span ${ref(this.defaultSlot)}></span>
-          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-        </button>
-      `
-    } else {
-      return html`
-        <span class=${classMap(classes)}>
-          ${this.iconName &&
-          html` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
-          <span ${ref(this.defaultSlot)}></span>
-        </span>
-      `
-    }
-  }
-}
+export type { TTagSkin, TTagType } from './tag'

package/src/components/tag/tag.ts

@@ -0,0 +1,118 @@
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import { html } from 'lit'
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref } from 'lit/directives/ref.js'
+import { Ref, createRef } from 'lit/directives/ref.js'
+import { TPktSize } from '@/types/size'
+import specs from 'componentSpecs/tag.json'
+
+import '@/components/icon'
+
+export type TTagSkin =
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'yellow'
+  | 'beige'
+  | 'blue-light'
+  | 'gray'
+  | 'grey'
+export type TTagType = 'button' | 'reset' | 'submit'
+
+export interface IPktTag {
+  closeTag?: boolean
+  size?: TPktSize
+  skin?: TTagSkin
+  textStyle?: string
+  iconName?: string
+  type?: TTagType
+  ariaLabel?: string
+}
+
+@customElement('pkt-tag')
+export class PktTag extends PktElement {
+  slotController: PktSlotController
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+    this._isClosed = false
+  }
+
+  /**
+   * Element attributes
+   */
+  @property({ type: Boolean, reflect: true }) closeTag: boolean = specs.props.closeTag.default
+  @property({ type: String, reflect: true }) size: TPktSize = specs.props.size.default as TPktSize
+  @property({ type: String, reflect: true }) skin: TTagSkin = specs.props.skin.default as TTagSkin
+  @property({ type: String, reflect: true }) textStyle: string = specs.props.textStyle.default
+  @property({ type: String, reflect: true }) iconName: string | undefined = undefined
+  @property({ type: String, reflect: true }) type: TTagType = specs.props.type.default as TTagType
+  @property({ type: String, reflect: true }) ariaLabel: string = specs.props.ariaLabel.default
+
+  /**
+   * Element state
+   */
+  @state() _isClosed: boolean = false
+
+  /**
+   * Element functions
+   */
+  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 }),
+    )
+  }
+
+  render() {
+    const classes = {
+      'pkt-tag': true,
+      [`pkt-tag--${this.size}`]: !!this.size,
+      [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
+    }
+
+    const btnClasses = {
+      'pkt-tag': true,
+      'pkt-btn': true,
+      'pkt-btn--tertiary': true,
+      [`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,
+    }
+
+    if (this.closeTag) {
+      return html`
+        <button
+          class=${classMap(btnClasses)}
+          type=${this.type}
+          aria-label=${this.ariaLabel}
+          @click=${this.close}
+        >
+          ${this.iconName &&
+          html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+          <span ${ref(this.defaultSlot)}></span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `
+    } else {
+      return html`
+        <span class=${classMap(classes)}>
+          ${this.iconName &&
+          html` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
+          <span ${ref(this.defaultSlot)}></span>
+        </span>
+      `
+    }
+  }
+}

package/src/components/textarea/textarea.ts

@@ -3,9 +3,10 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { live } from 'lit/directives/live.js'
-import { PktInputElement } from '../element'
-import '../input-wrapper'
-import '../icon'
+import { PktInputElement } from '@/base-elements/input-element'
+
+import '@/components/input-wrapper'
+import '@/components/icon'
 
 @customElement('pkt-textarea')
 export class PktTextarea extends PktInputElement {
@@ -57,7 +58,7 @@ export class PktTextarea extends PktInputElement {
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`<pkt-input-wrapper
-      label="${this.label}"
+      label=${this.label}
       ?counter=${this.counter}
       ?disabled=${this.disabled}
       ?hasError=${this.hasError}

package/src/components/textinput/textinput.ts

@@ -2,9 +2,9 @@ import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { PktInputElement } from '../element'
-import '../input-wrapper'
-import '../icon'
+import { PktInputElement } from '@/base-elements/input-element'
+import '@/components/input-wrapper'
+import '@/components/icon'
 
 @customElement('pkt-textinput')
 export class PktTextinput extends PktInputElement {

package/dist/component-template.d.ts

@@ -1,8 +0,0 @@
-export { }
-
-
-declare global {
-    interface Window {
-        pktTz: string;
-    }
-}

package/dist/converters-DNCwIFwr.js

@@ -1,17 +0,0 @@
-const n = (r) => {
-  if (Array.isArray(r)) return r;
-  if (typeof r == "string") return r.split(",");
-}, s = (r) => r ? new Date(r) : null, e = (r) => {
-  if (typeof r == "string")
-    return r.split(",").map((t) => new Date(t));
-  if (Array.isArray(r))
-    return r.map((t) => new Date(t));
-}, i = {
-  csvToArray: n,
-  stringToDate: s,
-  stringsToDate: e
-};
-export {
-  i as a,
-  n as c
-};

package/dist/converters-DhM11VlY.cjs

@@ -1 +0,0 @@
-"use strict";const n=r=>{if(Array.isArray(r))return r;if(typeof r=="string")return r.split(",")},s=r=>r?new Date(r):null,e=r=>{if(typeof r=="string")return r.split(",").map(t=>new Date(t));if(Array.isArray(r))return r.map(t=>new Date(t))},i={csvToArray:n,stringToDate:s,stringsToDate:e};exports.converters=i;exports.csvToArray=n;

package/dist/custom-element-B-TlBwRu.cjs

@@ -1,9 +0,0 @@
-"use strict";/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const r={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},n=i=>(...t)=>({_$litDirective$:i,values:t});class ${constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const E=i=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(i,t)}):customElements.define(i,t)};exports.e=n;exports.i=$;exports.t=E;exports.t$1=r;

package/dist/custom-element-CWfU4dcr.js

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const r = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, n = (i) => (...t) => ({ _$litDirective$: i, values: t });
-class E {
-  constructor(t) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t, e, s) {
-    this._$Ct = t, this._$AM = e, this._$Ci = s;
-  }
-  _$AS(t, e) {
-    return this.update(t, e);
-  }
-  update(t, e) {
-    return this.render(...e);
-  }
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const $ = (i) => (t, e) => {
-  e !== void 0 ? e.addInitializer(() => {
-    customElements.define(i, t);
-  }) : customElements.define(i, t);
-};
-export {
-  r as a,
-  n as e,
-  E as i,
-  $ as t
-};

package/dist/element.d.ts

@@ -1,8 +0,0 @@
-export { }
-
-
-declare global {
-    interface Window {
-        pktTz: string;
-    }
-}

package/dist/helptext-DBolvFI4.js

@@ -1,72 +0,0 @@
-import { r as d, P as c, u as _, s as f, x as s, n as i, E as a } from "./index-CFDwiDTU.js";
-import { o as u } from "./index-RwtTBIhT.js";
-import { e as w } from "./class-map-CBvUV2N3.js";
-import { t as v } from "./custom-element-CWfU4dcr.js";
-var b = Object.defineProperty, k = Object.getOwnPropertyDescriptor, p = (n, r, l, o) => {
-  for (var t = o > 1 ? void 0 : o ? k(r, l) : r, h = n.length - 1, x; h >= 0; h--)
-    (x = n[h]) && (t = (o ? x(r, l, t) : x(t)) || t);
-  return o && t && b(r, l, t), t;
-};
-let e = class extends c {
-  constructor() {
-    super(), this.forId = _(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = f.props.helptextDropdownButton.default, this.isHelpTextOpen = !1;
-  }
-  render() {
-    const n = () => {
-      this.isHelpTextOpen = !this.isHelpTextOpen, this.dispatchEvent(
-        new CustomEvent("toggleHelpText", {
-          bubbles: !0,
-          detail: { isOpen: !this.isHelpTextOpen }
-        })
-      );
-    };
-    return s`${this.helptext || this.helptextDropdown ? s`<div>
-          ${this.helptext ? s`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-                ${u(this.helptext)}
-              </div>` : a}
-          ${this.helptextDropdown ? s`<div class="pkt-inputwrapper__helptext-expandable">
-                <button
-                  class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
-                  type="button"
-                  @click=${n}
-                >
-                  <pkt-icon
-                    class="pkt-btn__icon"
-                    name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
-                  ></pkt-icon>
-                  <span class="pkt-btn__text">${u(this.helptextDropdownButton)}</span>
-                </button>
-                <div
-                  class="${w({
-      "pkt-inputwrapper__helptext": !0,
-      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
-      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
-    })}"
-                >
-                  ${u(this.helptextDropdown)}
-                </div>
-              </div>` : a}
-        </div>` : a}`;
-  }
-};
-p([
-  i({ type: String, reflect: !0 })
-], e.prototype, "forId", 2);
-p([
-  i({ type: String, reflect: !0 })
-], e.prototype, "helptext", 2);
-p([
-  i({ type: String, reflect: !0 })
-], e.prototype, "helptextDropdown", 2);
-p([
-  i({ type: String, reflect: !0 })
-], e.prototype, "helptextDropdownButton", 2);
-p([
-  d()
-], e.prototype, "isHelpTextOpen", 2);
-e = p([
-  v("pkt-helptext")
-], e);
-export {
-  e as P
-};

package/dist/helptext-_fMLOOCL.cjs

@@ -1,23 +0,0 @@
-"use strict";const t=require("./index-CR7t1zY9.cjs"),h=require("./index-CmTjXoAb.cjs"),x=require("./class-map-a5HUzP83.cjs"),c=require("./custom-element-B-TlBwRu.cjs");var u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,n=(s,p,r,l)=>{for(var e=l>1?void 0:l?d(p,r):p,i=s.length-1,o;i>=0;i--)(o=s[i])&&(e=(l?o(p,r,e):o(e))||e);return l&&e&&u(p,r,e),e};exports.PktHelptext=class extends t.PktElement{constructor(){super(),this.forId=t.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=t.specs.props.helptextDropdownButton.default,this.isHelpTextOpen=!1}render(){const p=()=>{this.isHelpTextOpen=!this.isHelpTextOpen,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:!this.isHelpTextOpen}}))},r=()=>this.helptext||this.helptextDropdown?t.x`<div>
-          ${this.helptext?t.x`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-                ${h.o(this.helptext)}
-              </div>`:t.E}
-          ${this.helptextDropdown?t.x`<div class="pkt-inputwrapper__helptext-expandable">
-                <button
-                  class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
-                  type="button"
-                  @click=${p}
-                >
-                  <pkt-icon
-                    class="pkt-btn__icon"
-                    name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
-                  ></pkt-icon>
-                  <span class="pkt-btn__text">${h.o(this.helptextDropdownButton)}</span>
-                </button>
-                <div
-                  class="${x.e({"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen})}"
-                >
-                  ${h.o(this.helptextDropdown)}
-                </div>
-              </div>`:t.E}
-        </div>`:t.E;return t.x`${r()}`}};n([t.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);n([t.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptext",2);n([t.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdown",2);n([t.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdownButton",2);n([t.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);exports.PktHelptext=n([c.t("pkt-helptext")],exports.PktHelptext);