@oslokommune/punkt-elements 19.18.3 → 19.18.4

package/src/components/header/header-service.ts

@@ -106,12 +106,15 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     this.chrome.observe(this.headerRef.value)
   }
 
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties)
-
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties)
     if (changedProperties.has('openedMenu') && this.openedMenu !== this.openMenu) {
       this.openMenu = this.openedMenu
     }
+  }
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties)
 
     if (changedProperties.has('mobileBreakpoint') || changedProperties.has('tabletBreakpoint')) {
       this.chrome.refreshBreakpoints()

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
     }