@oslokommune/punkt-elements 19.18.3 → 19.18.5

package/src/components/loader/loader.ts

@@ -3,65 +3,58 @@ import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
 import { slotContent } from '@/directives/slot-content'
-import type { TPktSizeBase } from 'shared-types'
+import {
+  ANIMATION_DEFAULT_PATH,
+  booleanishConverter,
+  LOADER_DEFAULTS,
+  type IPktLoaderBase,
+  type TPktLoaderVariant,
+  type TPktSizeBase,
+} from 'shared-types'
 import '@/components/icon'
 
-const defaultAnimationPath = 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
-
 // Allow global override of animation assets path
 if (typeof window !== 'undefined') {
-  window.pktAnimationPath = window.pktAnimationPath || defaultAnimationPath
+  window.pktAnimationPath = window.pktAnimationPath || ANIMATION_DEFAULT_PATH
 }
 
-export type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes'
-
-export interface IPktLoader {
-  /**
-   * The `delay` prop controls how much time the loading should be given before the loader is displayed.
-   * This is handy for situations where the load time might be so short that loader is not necessary.
-   * Delay time is in milliseconds.
-   */
-  delay?: number
-  /**
-   * The `inline` prop decides whether the loader should be displayed inline or not.
-   */
-  inline?: boolean
-  /**
-   * The boolean 'isLoading' decides whether the loader or the children will be displayed.
-   * If set to false, the children will be displayed.
-   */
-  isLoading?: boolean
-  /**
-   * The message to display when the loader is loading.
-   */
-  message?: string | null
-  /**
-   * The size of the loader. Default is "medium".
-   */
-  size?: TPktSizeBase
-  /**
-   * The variant of the loader. Default is "rainbow".
-   * "shapes" is the OSLO wave loader, "blue" a blue spinner.
-   */
-  variant?: TPktLoaderVariant
-  /**
-   * Override path to loading animations.
-   */
-  loadingAnimationPath?: string
-}
+export type { TPktLoaderVariant }
+export type IPktLoader = IPktLoaderBase
+
+// Lowercase names Lit generated before the kebab-case attributes existed.
+const LEGACY_IS_LOADING = 'isloading'
+const LEGACY_LOADING_ANIMATION_PATH = 'loadinganimationpath'
 
 export class PktLoader extends PktElementWithSlot implements IPktLoader {
-  @property({ type: Number }) delay: number = 0
-  @property({ type: Boolean }) inline: boolean = false
-  @property({ type: Boolean }) isLoading: boolean = true
-  @property({ type: String }) message: string | null = null
-  @property({ type: String }) size: TPktSizeBase = 'medium'
-  @property({ type: String }) variant: TPktLoaderVariant = 'rainbow'
-  @property({ type: String }) loadingAnimationPath: string | undefined =
-    typeof window !== 'undefined' ? window.pktAnimationPath : defaultAnimationPath
+  @property({ type: Number }) delay: number = LOADER_DEFAULTS.delay
+  @property({ type: Boolean }) inline: boolean = LOADER_DEFAULTS.inline
+  @property({ type: Boolean, attribute: 'is-loading', converter: booleanishConverter })
+  isLoading: boolean = LOADER_DEFAULTS.isLoading
+  @property({ type: String }) message: string | null = LOADER_DEFAULTS.message
+  @property({ type: String }) size: TPktSizeBase = LOADER_DEFAULTS.size
+  @property({ type: String }) variant: TPktLoaderVariant = LOADER_DEFAULTS.variant
+  @property({ type: String, attribute: 'loading-animation-path' })
+  loadingAnimationPath: string | undefined =
+    typeof window !== 'undefined' ? window.pktAnimationPath : ANIMATION_DEFAULT_PATH
 
   @state() private _shouldDisplayLoader: boolean = false
 
+  static get observedAttributes(): string[] {
+    return [...super.observedAttributes, LEGACY_IS_LOADING, LEGACY_LOADING_ANIMATION_PATH]
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    if (name === LEGACY_IS_LOADING) {
+      this.isLoading = booleanishConverter.fromAttribute(value)
+      return
+    }
+    if (name === LEGACY_LOADING_ANIMATION_PATH) {
+      this.loadingAnimationPath = value ?? undefined
+      return
+    }
+    super.attributeChangedCallback(name, _old, value)
+  }
+
   connectedCallback() {
     super.connectedCallback()
     this._shouldDisplayLoader = this.delay === 0

package/src/components/modal/modal.ts

@@ -1,6 +1,6 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
@@ -57,7 +57,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
   private readonly _headingId = `pkt-modal__headingText-${this._idSuffix}`
   private readonly _contentId = `pkt-modal__content-${this._idSuffix}`
 
-  @state() _isOpen: boolean = false
+  _isOpen: boolean = false
 
   constructor() {
     super()
@@ -143,8 +143,6 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
       new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }),
     )
     if (!bypassNativeClose) this.dialogRef.value?.close()
-
-    this.requestUpdate()
   }
 
   public showModal = (event: Event | null = null) => {
@@ -156,7 +154,6 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
     this.dispatchEvent(
       new CustomEvent('showModal', { detail: { origin: event }, bubbles: true, composed: true }),
     )
-    this.requestUpdate()
   }
 
   render() {

package/src/components/progressbar/progressbar.ts

@@ -57,13 +57,14 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
   @property({ type: Number }) valueMin = 0
 
   // State
-  @state() private labelWidth = 0
+  private labelWidth = 0
   @state() private progressbarId: string = this.id
   @state() private resolvedRole: TProgressbarRole = 'progressbar'
 
   // Private refs
   private labelRef: Ref<HTMLSpanElement> = createRef()
   private progressBarRef: Ref<HTMLDivElement> = createRef()
+  private containerRef: Ref<HTMLDivElement> = createRef()
 
   protected willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
     super.willUpdate(changedProperties)
@@ -85,7 +86,11 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
     super.updated(changedProperties)
 
     if (changedProperties.has('valueCurrent') && this.labelRef.value) {
-      this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0
+      const width = this.labelRef.value.getBoundingClientRect().width || 0
+      if (width !== this.labelWidth) {
+        this.labelWidth = width
+        this.containerRef.value?.style.setProperty('--pkt-progress-label-width', `${width}px`)
+      }
     }
   }
 
@@ -140,6 +145,7 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
       class="pkt-progressbar"
     >
       <div
+        ${ref(this.containerRef)}
         class="pkt-progressbar__container"
         style=${styleMap({
           '--pkt-progress-label-width': `${this.labelWidth}px`,

package/src/components/select/select.ts

@@ -50,6 +50,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
 
   public selectedIndex: number | null = -1
   public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined
+  private defaultedToFirstOption = false
 
   constructor() {
     super()
@@ -145,19 +146,31 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
     super.attributeChangedCallback(name, _old, value)
   }
 
-  update(changedProperties: PropertyValues) {
-    super.update(changedProperties)
+  protected willUpdate(changedProperties: PropertyValues): void {
     if (changedProperties.has('_optionsProp') && this._optionsProp.length > 0) {
       this._options = this._optionsProp
-      this.requestUpdate('_options')
-
-      // If no value is set and we have options, set to first option
       if (!this.value && this._options.length > 0) {
-        // eslint-disable-next-line lit/no-property-change-update -- Initial value setup is intentional
         this.value = this._options[0].value
         this.selectedIndex = 0
       }
     }
+    super.willUpdate(changedProperties)
+    if (!this.hasUpdated) {
+      if (!this.value && this._options.length > 0) {
+        this.value = this._options[0].value
+        this.selectedIndex = 0
+        this.defaultedToFirstOption = true
+      } else {
+        this.selectedIndex = this._options.findIndex((option) => option.value === this.value)
+      }
+    }
+    if (changedProperties.has('id')) {
+      !this.name && this.id && (this.name = this.id)
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties)
     if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
@@ -165,25 +178,15 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
       this.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(this.value, changedProperties.get('value'))
     }
-    if (changedProperties.has('id')) {
-      !this.name && this.id && (this.name = this.id)
-    }
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
     this.classList.add('pkt-select')
-    if (this._optionsProp.length) {
-      this._options = this._optionsProp
-    }
-    // If no options are selected, set value and selectedIndex to the first option
-    if (!this.value && this._options.length > 0) {
-      this.value = this._options[0].value
-      this.selectedIndex = 0
-    } else {
-      this.selectedIndex = this._options.findIndex((option) => option.value === this.value)
-    }
     this.selectedOptions = this.inputRef.value?.selectedOptions
+    if (this.defaultedToFirstOption) {
+      this.updateComplete.then(() => this.dispatchChangeEvents(this.value))
+    }
   }
 
   render() {

package/src/components/textarea/textarea.ts

@@ -65,6 +65,9 @@ export class PktTextarea extends PktInputElement<Props> implements IPktTextarea
 
   protected willUpdate(changedProperties: PropertyValues) {
     super.willUpdate(changedProperties)
+    if (changedProperties.has('value') && typeof this.value !== 'string' && !Array.isArray(this.value)) {
+      this.value = this.coerceToString(this.value)
+    }
     if (changedProperties.has('value')) {
       this.counterCurrent = this.value?.length || 0
     }

package/src/components/textinput/textinput.ts

@@ -46,6 +46,9 @@ export class PktTextinput extends PktInputElement<Props> {
 
   protected willUpdate(changedProperties: PropertyValues) {
     super.willUpdate(changedProperties)
+    if (changedProperties.has('value') && typeof this.value !== 'string' && !Array.isArray(this.value)) {
+      this.value = this.coerceToString(this.value)
+    }
     if (changedProperties.has('value')) {
       this.counterCurrent = this.value?.length || 0
     }

package/dist/icon-BsRlhXU2.cjs

@@ -1 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs");require("./shared-types-BvRk9kiK.cjs");var t={name:``,path:`https://punkt-cdn.oslo.kommune.no/latest/icons/`},n=class extends e.p{constructor(t){if(super(t),this.it=e.h,t.type!==e.m.CHILD)throw Error(this.constructor.directiveName+`() can only be used in child bindings`)}render(t){if(t===e.h||t==null)return this._t=void 0,this.it=t;if(t===e.g)return t;if(typeof t!=`string`)throw Error(this.constructor.directiveName+`() called with a non-string value`);if(t===this.it)return this._t;this.it=t;let n=[t];return n.raw=n,this._t={_$litType$:this.constructor.resultType,strings:n,values:[]}}};n.directiveName=`unsafeHTML`,n.resultType=1;var r=e.f(n),i=class extends n{};i.directiveName=`unsafeSVG`,i.resultType=2;var a=e.f(i);typeof window<`u`&&(window.pktFetch=window.pktFetch===void 0?fetch:window.pktFetch,window.pktIconPath=window.pktIconPath||t.path);var o=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>`,s={},c=2,l=1500,u=(()=>{try{return typeof Storage<`u`&&typeof sessionStorage<`u`}catch{return!1}})(),d=e=>window.pktFetch(e).then(t=>{if(!t.ok)throw Error(`Missing icon: `+e);return t.text()}),f=async(e,t=c)=>{try{return await d(e)}catch{return t>0?(await new Promise(e=>setTimeout(e,l)),f(e,t-1)):(console.error(`Failed to fetch icon: `+e),o)}},p=async(e,t)=>{let n=t+e+`.svg`;return u&&sessionStorage.getItem(n)?sessionStorage.getItem(n):n in s?s[n]:typeof window<`u`&&typeof window.pktFetch==`function`?(s[n]=f(n).then(e=>(e!==o&&u&&sessionStorage.setItem(n,e),delete s[n],e)),s[n]):o},m=class extends e.t{constructor(...e){super(...e),this.path=typeof window<`u`?window.pktIconPath:t.path,this.name=t.name,this.ariaHidden=null,this.ariaLabel=null,this.icon=a(o),this._updatedProps=[]}get effectiveAriaHidden(){return this.ariaHidden!==null&&this.ariaHidden!==void 0?this.ariaHidden===``||this.ariaHidden===`true`:!this.ariaLabel}get effectiveAriaLabel(){return this.effectiveAriaHidden?null:this.ariaLabel||this.name||null}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-icon`)}async attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),(e===`name`||e===`path`)&&this.getIcon(this.name)}async updated(e){super.updated(e),(e.has(`name`)||e.has(`path`))&&this.getIcon(this.name),this.applyAriaToSvg()}applyAriaToSvg(){let e=this.querySelector(`svg`);if(!e)return;e.setAttribute(`aria-hidden`,String(this.effectiveAriaHidden));let t=this.effectiveAriaLabel;t?e.setAttribute(`aria-label`,t):e.removeAttribute(`aria-label`)}async getIcon(e=``){if(this._updatedProps.length>0){this.path||=typeof window<`u`?window.pktIconPath:t.path;try{this.icon=a(await p(this.name||``,this.path))}catch{this.icon=a(o)}this._updatedProps=[]}else this._updatedProps.includes(e)||this._updatedProps.push(e)}render(){return e._`${this.name&&this.icon}`}};e.n([e.u({type:String,reflect:!1})],m.prototype,`path`,void 0),e.n([e.u({type:String,reflect:!0})],m.prototype,`name`,void 0),e.n([e.u({type:String,attribute:`aria-hidden`,reflect:!0})],m.prototype,`ariaHidden`,void 0),e.n([e.u({type:String,attribute:`aria-label`,reflect:!0})],m.prototype,`ariaLabel`,void 0),e.n([e.u({type:SVGElement})],m.prototype,`icon`,void 0),e.n([e.u({type:Array,noAccessor:!0})],m.prototype,`_updatedProps`,void 0);try{e.d(`pkt-icon`)(m)}catch{console.warn(`Forsøker å definere <pkt-icon>, men den er allerede definert`)}var h=m;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});

package/dist/loader-l7CLjzgI.cjs

@@ -1,16 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./element-with-slot-B0Vp_OuR.cjs");require("./icon-BsRlhXU2.cjs");var r=`https://punkt-cdn.oslo.kommune.no/latest/animations/`;typeof window<`u`&&(window.pktAnimationPath=window.pktAnimationPath||r);var i=class extends n.t{constructor(...e){super(...e),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size=`medium`,this.variant=`rainbow`,this.loadingAnimationPath=typeof window<`u`?window.pktAnimationPath:r,this._shouldDisplayLoader=!1}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has(`delay`)&&this.setupLoader()}render(){let r=t.t({"pkt-loader":!0,[`pkt-loader--${this.inline?`inline`:`box`}`]:!0,[`pkt-loader--${this.size}`]:!0}),i=t.t({"pkt-contents":!0,"pkt-hide":this.isLoading});return e._`<div
-      role="status"
-      aria-live="polite"
-      aria-busy=${this.isLoading?`true`:`false`}
-      class=${r}
-    >
-      ${this.isLoading&&this._shouldDisplayLoader?e._`<div class="pkt-loader__spinner">
-              <pkt-icon
-                name=${this.getVariant(this.variant)}
-                path=${this.loadingAnimationPath}
-                class="pkt-loader__svg pkt-loader__${this.variant}"
-              ></pkt-icon>
-              ${this.message&&e._`<p>${this.message}</p>`}
-            </div>`:e.h}
-      <div class=${i}>${n.i(this)}</div>
-    </div>`}getVariant(e){switch(e){case`blue`:return`spinner-blue`;case`rainbow`:return`spinner`;default:return`loader`}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};e.n([e.u({type:Number})],i.prototype,`delay`,void 0),e.n([e.u({type:Boolean})],i.prototype,`inline`,void 0),e.n([e.u({type:Boolean})],i.prototype,`isLoading`,void 0),e.n([e.u({type:String})],i.prototype,`message`,void 0),e.n([e.u({type:String})],i.prototype,`size`,void 0),e.n([e.u({type:String})],i.prototype,`variant`,void 0),e.n([e.u({type:String})],i.prototype,`loadingAnimationPath`,void 0),e.n([e.l()],i.prototype,`_shouldDisplayLoader`,void 0);try{e.d(`pkt-loader`)(i)}catch{console.warn(`Forsøker å definere <pkt-loader>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});