@oslokommune/punkt-elements 12.18.0 → 12.18.2

package/dist/ref-CA2-0S_W.cjs

@@ -1,13 +0,0 @@
-"use strict";const l=require("./index-CR7t1zY9.cjs"),d=require("./custom-element-B-TlBwRu.cjs");/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const{I:p}=l.Z,a=t=>t.strings===void 0,u=()=>document.createComment(""),Y=(t,s,e)=>{var h;const i=t._$AA.parentNode,n=s===void 0?t._$AB:s._$AA;if(e===void 0){const r=i.insertBefore(u(),n),$=i.insertBefore(u(),n);e=new p(r,$,t,t.options)}else{const r=e._$AB.nextSibling,$=e._$AM,f=$!==t;if(f){let o;(h=e._$AQ)==null||h.call(e,t),e._$AM=t,e._$AP!==void 0&&(o=t._$AU)!==$._$AU&&e._$AP(o)}if(r!==n||f){let o=e._$AA;for(;o!==r;){const g=o.nextSibling;i.insertBefore(o,n),o=g}}}return e},m=(t,s,e=t)=>(t._$AI(s,e),t),C={},M=(t,s=C)=>t._$AH=s,b=t=>t._$AH,N=t=>{var i;(i=t._$AP)==null||i.call(t,!1,!0);let s=t._$AA;const e=t._$AB.nextSibling;for(;s!==e;){const n=s.nextSibling;s.remove(),s=n}};/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const c=(t,s)=>{var i;const e=t._$AN;if(e===void 0)return!1;for(const n of e)(i=n._$AO)==null||i.call(n,s,!1),c(n,s);return!0},A=t=>{let s,e;do{if((s=t._$AM)===void 0)break;e=s._$AN,e.delete(t),t=s}while((e==null?void 0:e.size)===0)},v=t=>{for(let s;s=t._$AM;t=s){let e=s._$AN;if(e===void 0)s._$AN=e=new Set;else if(e.has(t))break;e.add(t),B(s)}};function w(t){this._$AN!==void 0?(A(this),this._$AM=t,v(this)):this._$AM=t}function x(t,s=!1,e=0){const i=this._$AH,n=this._$AN;if(n!==void 0&&n.size!==0)if(s)if(Array.isArray(i))for(let h=e;h<i.length;h++)c(i[h],!1),A(i[h]);else i!=null&&(c(i,!1),A(i));else c(this,t)}const B=t=>{t.type==d.t$1.CHILD&&(t._$AP??(t._$AP=x),t._$AQ??(t._$AQ=w))};class y extends d.i{constructor(){super(...arguments),this._$AN=void 0}_$AT(s,e,i){super._$AT(s,e,i),v(this),this.isConnected=s._$AU}_$AO(s,e=!0){var i,n;s!==this.isConnected&&(this.isConnected=s,s?(i=this.reconnected)==null||i.call(this):(n=this.disconnected)==null||n.call(this)),e&&(c(this,s),A(this))}setValue(s){if(a(this._$Ct))this._$Ct._$AI(s,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=s,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const H=()=>new I;class I{}const _=new WeakMap,S=d.e(class extends y{render(t){return l.E}update(t,[s]){var i;const e=s!==this.Y;return e&&this.Y!==void 0&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.Y=s,this.ht=(i=t.options)==null?void 0:i.host,this.rt(this.ct=t.element)),l.E}rt(t){if(this.isConnected||(t=void 0),typeof this.Y=="function"){const s=this.ht??globalThis;let e=_.get(s);e===void 0&&(e=new WeakMap,_.set(s,e)),e.get(this.Y)!==void 0&&this.Y.call(this.ht,void 0),e.set(this.Y,t),t!==void 0&&this.Y.call(this.ht,t)}else this.Y.value=t}get lt(){var t,s;return typeof this.Y=="function"?(t=_.get(this.ht??globalThis))==null?void 0:t.get(this.Y):(s=this.Y)==null?void 0:s.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});exports.M=N;exports.e=H;exports.f=a;exports.m=M;exports.n=S;exports.p=b;exports.r=Y;exports.v=m;

package/dist/textarea-D_ud1Mpa.cjs

@@ -1,48 +0,0 @@
-"use strict";const a=require("./index-CR7t1zY9.cjs"),s=require("./custom-element-B-TlBwRu.cjs"),u=require("./ref-CA2-0S_W.cjs"),p=require("./class-map-a5HUzP83.cjs");require("./input-wrapper-tJE-X4Ac.cjs");require("./index-CmTjXoAb.cjs");/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const d=s.e(class extends s.i{constructor(r){if(super(r),r.type!==s.t$1.PROPERTY&&r.type!==s.t$1.ATTRIBUTE&&r.type!==s.t$1.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!u.f(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(r,[e]){if(e===a.T||e===a.E)return e;const i=r.element,t=r.name;if(r.type===s.t$1.PROPERTY){if(e===i[t])return a.T}else if(r.type===s.t$1.BOOLEAN_ATTRIBUTE){if(!!e===i.hasAttribute(t))return a.T}else if(r.type===s.t$1.ATTRIBUTE&&i.getAttribute(t)===e+"")return a.T;return u.m(r),e}});var c=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(r,e,i,t)=>{for(var n=t>1?void 0:t?$(e,i):e,l=r.length-1,h;l>=0;l--)(h=r[l])&&(n=(t?h(e,i,n):h(n))||n);return t&&n&&c(e,i,n),n};exports.PktTextarea=class extends a.PktInputElement{constructor(){super(...arguments),this.value="",this.autocomplete="off",this.placeholder="",this.rows=null,this.counterCurrent=0,this.inputRef=u.e()}attributeChangedCallback(e,i,t){e==="value"&&this.value!==i&&(this.counterCurrent=t?t.length:0,this.valueChanged(t,i)),super.attributeChangedCallback(e,i,t)}updated(e){var i;super.updated(e),e.has("value")&&(this.counterCurrent=((i=this.value)==null?void 0:i.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}),i=this.ariaLabelledby||`${this.id}-input-label`;return a.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
-        ${u.n(this.inputRef)}
-        class=${e}
-        id=${this.id+"-input"}
-        name=${(this.name||this.id)+"-input"}
-        placeholder=${this.placeholder??a.E}
-        .value=${d(this.value)}
-        minlength=${this.minlength||a.E}
-        maxlength=${this.maxlength||a.E}
-        ?readonly=${this.readonly}
-        autocomplete=${this.autocomplete}
-        aria-labelledby=${i}
-        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>`}};o([a.n({type:String,reflect:!0})],exports.PktTextarea.prototype,"value",2);o([a.n({type:String})],exports.PktTextarea.prototype,"autocomplete",2);o([a.n({type:String})],exports.PktTextarea.prototype,"placeholder",2);o([a.n({type:Number})],exports.PktTextarea.prototype,"rows",2);o([a.r()],exports.PktTextarea.prototype,"counterCurrent",2);exports.PktTextarea=o([s.t("pkt-textarea")],exports.PktTextarea);

package/src/components/component-template/index.ts

@@ -1,129 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { PktElement } from '../element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref, Ref, createRef } from 'lit/directives/ref.js'
-
-// If you need to convert an object to a list of classes, use classMap
-import { classMap } from 'lit/directives/class-map.js'
-
-// If you need text strings add them in this file and include it
-import translations from '../../translations/no.json'
-
-// If you need to convert attribute strings to JavaScript objects,
-// use helpers from converters.ts
-import { csvToArray } from '../../helpers/converters'
-
-@customElement('pkt-component')
-export class PktComponent extends PktElement {
-  /**
-   * Element attributes => props
-   * Example:
-   * <pkt-component string="hei" strings="hei,og,hallo" darkmode>
-   *  Hei!
-   * </pkt-component>
-   */
-
-  @property({ type: String })
-  string: string = ''
-
-  @property({ converter: csvToArray })
-  strings: string[] = []
-
-  @property({ type: Boolean })
-  darkmode: boolean = false
-
-  /**
-   * Private properties, for internal use only
-   */
-
-  @property({ type: Array }) private _list: string[] = []
-
-  /**
-   * Runs on mount, used to set up various values and whatever you need to run
-   */
-  connectedCallback() {
-    this.strings.length &&
-      this.strings.forEach((string) => {
-        this._list.push(string.toUpperCase())
-      })
-    super.connectedCallback()
-  }
-
-  /**
-   * Set up slot support for Light DOM
-   */
-  slotController: PktSlotController
-  defaultSlot: Ref<HTMLElement> = createRef()
-  namedSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot, this.namedSlot)
-  }
-
-  /**
-   * Render functions
-   */
-  render() {
-    const classes = {
-      'pkt-component': true,
-      'pkt-component--has-list': this.strings.length > 0,
-      'pkt-darkmode': this.darkmode,
-    }
-
-    return html`
-      <div class="${classMap(classes)}">
-        <h1 class="pkt-txt-28">${this.string}</h1>
-
-        <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
-        <div>${this.renderList(this.strings)}</div>
-        <div>${this.renderList(this.doStuff(this._list))}</div>
-
-        <h2 class="pkt-txt-22">Slot</h2>
-        <div ${ref(this.defaultSlot)}>defaultSlotRef</div>
-        <h2 class="pkt-txt-22">Named slot</h2>
-        <select
-          name="named-slot"
-          ${ref(this.namedSlot)}
-          @change=${(e: Event) => alert((e.target as HTMLSelectElement).value)}
-        >
-          namedSlotRef
-        </select>
-
-        <h2 class="pkt-txt-22">Knapp som emitter en event</h2>
-        <button type="button" @click=${() => this.handleGreeting()}>
-          Si ${translations.example.hi}
-        </button>
-      </div>
-    `
-  }
-
-  private renderList(list: string[]) {
-    return html`
-      <ul>
-        ${list.map((i) => html`<li>${i}</li>`)}
-      </ul>
-    `
-  }
-
-  /**
-   * Add other functionality under here
-   */
-
-  private doStuff(val: string[]) {
-    return val.reverse()
-  }
-
-  /**
-   * Handlers for returning data from the component
-   */
-
-  private handleGreeting() {
-    this.dispatchEvent(
-      new CustomEvent('pkt-greeting', {
-        detail: 'Hei på deg!',
-      }),
-    )
-  }
-}

package/src/components/element/index.ts

@@ -1,353 +0,0 @@
-import { LitElement, PropertyValues } from 'lit'
-import { property, state } from 'lit/decorators.js'
-import { uuidish } from '@/utils/stringutils'
-import { renderReactNode } from '@/helpers/renderers'
-import strings from '../../translations/no.json'
-import inputwrapperspecs from 'componentSpecs/input-wrapper.json'
-import 'element-internals-polyfill'
-
-/**
- * Base class for all Punkt elements
- * @extends LitElement
- */
-export class PktElement extends LitElement {
-  [key: string]: any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @property({ type: Object }) strings: any = strings
-
-  /**
-   * Runs on mount, used to set up various values and whatever you need to run
-   */
-  connectedCallback() {
-    super.connectedCallback()
-  }
-  /**
-   * Make sure the component renders in light DOM instead of shadow DOM
-   */
-  createRenderRoot() {
-    return this
-  }
-
-  /**
-   * Add support for Hot Module Reloading in dev mode
-   */
-  hotReplacedCallback() {
-    this.requestUpdate()
-  }
-
-  /**
-   * Go through changed properties and find ReactNodes to render out
-   */
-  protected update(changedProperties: PropertyValues) {
-    changedProperties.forEach((_oldValue, propName) => {
-      if (
-        typeof propName === 'string' &&
-        this[propName] &&
-        typeof this[propName] === 'object' &&
-        this[propName].$$typeof
-      ) {
-        this[propName] = renderReactNode(this[propName])
-      }
-    })
-    super.update(changedProperties)
-  }
-
-  /**
-   * Add extra stuff here whenever we decide what should be added here…
-   */
-  constructor() {
-    super()
-  }
-}
-
-/**
- * Base class for all Punkt input elements
- * @extends PktElement
- */
-export class PktInputElement extends PktElement {
-  static get formAssociated() {
-    return true
-  }
-
-  @property({ type: String, reflect: true })
-  id: string = uuidish()
-
-  @property({ type: String, reflect: true })
-  name: string = ''
-
-  @property({ type: Boolean, reflect: true })
-  required: boolean = false
-
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
-
-  @property({ type: String, reflect: true })
-  placeholder: string = ''
-
-  @property({ type: Number, reflect: true })
-  min: string | number | null = null
-
-  @property({ type: Number, reflect: true })
-  max: string | number | null = null
-
-  @property({ type: Number, reflect: true })
-  minlength: number | null = 0
-
-  @property({ type: Number, reflect: true })
-  maxlength: number | null = 0
-
-  @property({ type: String, reflect: true })
-  pattern: string = ''
-
-  @property({ type: Boolean, reflect: true })
-  readonly: boolean = false
-
-  @property({ type: String })
-  ariaLabelledby: string | null = null
-
-  @property({ type: String })
-  ariaDescribedBy: string | null = null
-
-  // Properties for InputWrapper
-  @property({ type: String })
-  label: string | null = null
-
-  @property({ type: Boolean })
-  inline: boolean = false
-
-  @property({ type: Boolean })
-  optionalTag: boolean = false
-
-  @property({ type: String })
-  optionalText: string = strings.forms.labels.optional
-
-  @property({ type: Boolean })
-  requiredTag: boolean = false
-
-  @property({ type: String })
-  requiredText: string = strings.forms.labels.required
-
-  @property({ type: Boolean })
-  hasError: boolean = false
-
-  @property({ type: String })
-  errorMessage: string = ''
-
-  @property({ type: String })
-  helptext: string = ''
-
-  @property({ type: Boolean })
-  counter: boolean = false
-
-  @property({ type: Number })
-  counterMaxLength: number = 0
-
-  @property({ type: String })
-  helptextDropdown: string = ''
-
-  @property({ type: String })
-  helptextDropdownButton: string | null = inputwrapperspecs.props.helptextDropdownButton.default
-
-  @property({ type: Boolean, reflect: true })
-  fullwidth: boolean = false
-
-  @property({ type: Boolean })
-  useWrapper: boolean = true
-
-  @property({ type: String, attribute: 'data-testid' })
-  dataTestid: string = ''
-
-  @property({ type: Boolean })
-  skipForwardTestid: boolean = false
-
-  @state() touched: boolean = false
-
-  constructor() {
-    super()
-    this.internals = this.attachInternals()
-  }
-
-  protected manageValidity(input: HTMLInputElement) {
-    /**
-     * This is where we define all the various validations and set the validity state
-     */
-    if (this.required && !this.value) {
-      // If the input is required and the value is empty
-      this.internals.setValidity({ valueMissing: true }, strings.forms.messages.required, input)
-    } else if (input.validity.typeMismatch || input.validity.badInput) {
-      // If the input type is wrong
-      this.internals.setValidity({ typeMismatch: true }, strings.forms.messages.invalid, input)
-    } else if (input.validity.patternMismatch) {
-      // If the input pattern is wrong
-      this.internals.setValidity(
-        { patternMismatch: true },
-        strings.forms.messages.invalidPattern,
-        input,
-      )
-    } else if (
-      input.validity.tooShort ||
-      (this.minlength && this.minlength > 0 && this.value.length < this.minlength)
-    ) {
-      // If the input is too short or too few items selected
-      this.internals.setValidity({ tooShort: true }, strings.forms.messages.tooShort, input)
-    } else if (
-      input.validity.tooLong ||
-      (this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength)
-    ) {
-      // If the input is too long or too many items selected
-      this.internals.setValidity({ tooLong: true }, strings.forms.messages.tooLong, input)
-    } else if (input.validity.rangeUnderflow) {
-      // If the input is too low or date is too early
-      this.internals.setValidity(
-        { rangeUnderflow: true },
-        strings.forms.messages.rangeUnderflow,
-        input,
-      )
-    } else if (input.validity.rangeOverflow) {
-      // If the input is too high or date is too late
-      this.internals.setValidity(
-        { rangeOverflow: true },
-        strings.forms.messages.rangeOverflow,
-        input,
-      )
-    } else if (input.validity.customError) {
-      // If a custom error is set
-      this.internals.setValidity({ customError: true }, input.validationMessage, input)
-    } else {
-      // If everything is fine
-      this.internals.setValidity({})
-    }
-  }
-
-  protected setFormValue(value: string | string[]): void {
-    if (this.internals) {
-      if (Array.isArray(value)) {
-        const form = new FormData()
-        value.forEach((v) => {
-          form.append(this.name, v)
-        })
-        this.internals.setFormValue(form)
-      } else {
-        this.internals.setFormValue(value)
-      }
-    }
-  }
-
-  protected valueChanged(value: string | string[] | null, _old: string | string[] | null): void {
-    if (_old !== this.value || _old !== this._value) {
-      if (typeof value === 'string') {
-        if ((this.multiple || this.range) && value.includes(',')) {
-          value = value.split(',')
-        }
-        this.value = value
-        this._value = Array.isArray(value) ? value : [value]
-      } else if (Array.isArray(value)) {
-        this.value = value
-        this._value = value
-      } else {
-        this.value = ''
-        this._value = []
-      }
-      if ((!this.value || this.value.length === 0) && _old && _old.length !== 0) {
-        this.clearInputValue()
-      } else if (this.value && this.value.toString() !== _old?.toString()) {
-        this.onChange(this.value)
-      }
-      this.updateComplete.then(() => this.requestUpdate())
-    }
-  }
-
-  // When input goes from content to no content
-  protected clearInputValue(): void {
-    const value = this.multiple || this.range ? [] : ''
-    this.value = value
-    this.internals.setFormValue(value)
-    this.dispatchEvent(new Event('change'))
-    this.dispatchEvent(
-      new CustomEvent('value-change', {
-        detail: value,
-        bubbles: true,
-        composed: true,
-      }),
-    )
-  }
-
-  // When user enters the input, we need to push that event out to the form
-  protected onFocus(): void {
-    this.dispatchEvent(new FocusEvent('focus'))
-  }
-
-  // And also when the user leaves the input...
-  protected onBlur(): void {
-    this.dispatchEvent(new FocusEvent('blur'))
-  }
-
-  // Trigger this when user types in the input
-  protected onInput(): void {
-    this.dispatchEvent(new InputEvent('input'))
-  }
-
-  // Trigger this when you want to set the value of the input out to the form
-  protected onChange(value: string | string[]): void {
-    if (!this.touched) {
-      this.touched = true
-      value && this.setFormValue(value)
-      return
-    }
-    if (typeof value !== 'string' && !Array.isArray(value)) {
-      return
-    }
-
-    if ((this.range || this.multiple) && !Array.isArray(value) && value.includes(',')) {
-      value = value.split(',')
-    }
-
-    if (!this.multiple && !this.range && Array.isArray(value)) {
-      value = value[0]
-    }
-
-    this.setFormValue(value)
-
-    this.manageValidity(this.inputRef.value)
-    if (this.inputRef2) {
-      this.manageValidity(this.inputRef2.value)
-    }
-
-    // Change events
-    this.dispatchEvent(new Event('change'))
-    this.dispatchEvent(
-      new CustomEvent('value-change', {
-        detail: value,
-        bubbles: true,
-        composed: true,
-      }),
-    )
-
-    this.internals.reportValidity()
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    if (_changedProperties.has('dataTestid') && this.dataTestid && this.inputRef.value) {
-      if (!this.skipForwardTestid) {
-        this.inputRef.value.dataset.testid = this.dataTestid
-        this.removeAttribute('data-testid')
-      } else if (!this.hasAttribute('data-testid')) {
-        this.setAttribute('data-testid', this.dataTestid)
-      }
-    }
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    super.firstUpdated(_changedProperties)
-
-    if (this.required) {
-      this.internals.ariaRequired = true
-    }
-    if (this.disabled) {
-      this.internals.ariaDisabled = true
-    }
-
-    this.internals.setFormValue(this.value)
-    this.inputRef.value && this.manageValidity(this.inputRef.value)
-  }
-}