@oslokommune/punkt-elements 12.3.3 → 12.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.3.3",
+  "version": "12.3.8",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.1.0",
-    "@oslokommune/punkt-css": "^12.3.1",
+    "@oslokommune/punkt-css": "^12.3.4",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "372dba9714e52bbd9a13eb02ea39ec2aa231ee66"
+  "gitHead": "be4a7ca19fb67b079fe05d9901f891a10ebd02d4"
 }

package/src/components/calendar/index.ts

@@ -32,9 +32,6 @@ export class PktCalendar extends PktElement {
   @property({ type: Boolean, reflect: true })
   withcontrols: boolean = specs.props.withcontrols.default
 
-  @property({ type: Boolean, reflect: true })
-  focused: boolean = false
-
   @property({ converter: converters.csvToArray })
   selected: string[] = []
 
@@ -102,6 +99,22 @@ export class PktCalendar extends PktElement {
     super.disconnectedCallback()
   }
 
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    if (name === 'currentmonth' && value) {
+      this.currentmonth = new Date(value)
+      this.year = this.currentmonth.getFullYear()
+      this.month = this.currentmonth.getMonth()
+      this.week = getWeek(new Date(this.year, this.month, 1, 12))
+    }
+    if (name === 'selected' && value) {
+      this._selected = []
+      this.selected.forEach((d: string) => {
+        this._selected.push(new Date(d))
+      })
+    }
+    super.attributeChangedCallback(name, _old, value)
+  }
+
   updated(changedProperties: PropertyValues): void {
     if (changedProperties.has('selected')) {
       if (this.selected.length === 2) {
@@ -505,6 +518,9 @@ export class PktCalendar extends PktElement {
     if (this.selected.includes(this.formatISODate(selectedDate))) return
     this.selected = [...this.selected, this.formatISODate(selectedDate)]
     this._selected = [...this._selected, selectedDate]
+    if (this.range && this.selected.length === 2) {
+      this.close()
+    }
   }
 
   public removeFromSelected(selectedDate: Date) {

package/src/components/card/index.ts

@@ -35,7 +35,6 @@ export class PktCard extends PktElement {
 
   connectedCallback() {
     super.connectedCallback()
-    console.log(this.tags)
   }
 
   render() {

package/src/components/datepicker/index.ts

@@ -133,17 +133,14 @@ export class PktDatepicker extends PktInputElement {
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    super.attributeChangedCallback(name, _old, value)
     if (name === 'value') {
-      if (this.value === '' || this.value.length === 0) {
+      if (this.value === '' || this.value.length === 0 || typeof this.value === 'undefined') {
         this._value = []
       } else if (this.value.length && this._value.length === 0) {
-        const dates = !Array.isArray(this.value) ? this.value.split(',') : this.value
-        for (const date of dates) {
-          if (date && !this._value.includes(date)) {
-            this.calRef?.value?.handleDateSelect(this.fromISOToDate(date))
-          }
+        if (!Array.isArray(this.value) && this.value.includes(',')) {
+          this.value = this.value.split(',')
         }
+        this._value = !Array.isArray(this.value) ? this.value.split(',') : this.value
       }
     }
 
@@ -154,6 +151,7 @@ export class PktDatepicker extends PktInputElement {
     if (name === 'excludeweekdays' && typeof this.excludeweekdays === 'string') {
       this.excludeweekdays = value?.split(',') ?? []
     }
+    super.attributeChangedCallback(name, _old, value)
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
@@ -166,6 +164,9 @@ export class PktDatepicker extends PktInputElement {
       if (this.range && this._value.length === 1) {
         return
       }
+      if (changedProperties.get('value')?.toString() === this.value.toString()) {
+        return
+      }
       this.onInput(this.value)
     }
   }
@@ -239,13 +240,12 @@ export class PktDatepicker extends PktInputElement {
         class="${classMap(this.inputClasses)}"
         type="date"
         id="${this.id}-input"
-        name="${this.name}"
-        .value=${this.value}
+        value=${this.value}
         min=${this.min}
         max=${this.max}
-        @focus=${this.showCalendar}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
+          this.showCalendar()
         }}
         ?disabled=${this.disabled}
         @blur=${(e: Event) => {
@@ -268,13 +268,12 @@ export class PktDatepicker extends PktInputElement {
         class=${classMap(this.inputClasses)}
         type="date"
         id="${this.id}-input"
-        name="${this.name}"
-        .value=${this._value[0] ?? ''}
+        value=${this._value[0] ?? ''}
         min=${this.min}
         max=${this.max}
-        @focus=${this.showCalendar}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
+          this.showCalendar()
         }}
         ?disabled=${this.disabled}
         @blur=${(e: Event) => {
@@ -282,7 +281,9 @@ export class PktDatepicker extends PktInputElement {
             this.manageValidity(e.target as HTMLInputElement)
             const date = this.fromISOToDate((e.target as HTMLInputElement).value)
             if (date) {
-              this.calRef?.value?.handleDateSelect(date)
+              if (this._value[0] !== (e.target as HTMLInputElement).value && this._value[1]) {
+                this.calRef?.value?.handleDateSelect(date)
+              }
             }
           }
         }}
@@ -296,13 +297,12 @@ export class PktDatepicker extends PktInputElement {
         class=${classMap(this.inputClasses)}
         type="date"
         id="${this.id}-to"
-        name="${this.name}-to"
-        .value=${this._value[1] ?? ''}
+        value=${this._value[1] ?? ''}
         min=${this.min}
         max=${this.max}
-        @focus=${this.showCalendar}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
+          this.showCalendar()
         }}
         ?disabled=${this.disabled}
         @blur=${(e: Event) => {
@@ -344,12 +344,11 @@ export class PktDatepicker extends PktInputElement {
         class=${classMap(this.inputClasses)}
         type="date"
         id="${this.id}-input"
-        name="${this.name}"
         min=${this.min}
         max=${this.max}
-        @focus=${this.showCalendar}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
+          this.showCalendar()
         }}
         @blur=${(e: Event) => {
           this.addToSelected(e)
@@ -402,7 +401,6 @@ export class PktDatepicker extends PktInputElement {
         ?range=${this.range}
         ?weeknumbers=${this.weeknumbers}
         ?withcontrols=${this.withcontrols}
-        ?focused=${this.calendarOpen}
         .maxMultiple=${this.maxlength}
         .selected=${this._value}
         .earliest=${this.min}
@@ -522,7 +520,6 @@ export class PktDatepicker extends PktInputElement {
       this.calRef.value.handleDateSelect(date)
     }
     target.value = ''
-    this.requestUpdate('value')
   }
 
   private handleFocusOut(e: FocusEvent) {

package/src/components/element/index.ts

@@ -157,19 +157,32 @@ export class PktInputElement extends PktElement {
     }
   }
 
+  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)
+      }
+    }
+  }
+
   // Trigger this when you want to set the value of the input out to the form
   protected onInput(value: string | string[]): void {
     if (!this.touched) {
       this.touched = true
+      value && this.setFormValue(value)
       return
     }
-    console.log('onInput', value)
     if (typeof value !== 'string' && !Array.isArray(value)) {
-      console.log('Value must be a string or an array')
       return
     }
 
-    if (!Array.isArray(value) && value.includes(',')) {
+    if ((this.range || this.multiple) && !Array.isArray(value) && value.includes(',')) {
       value = value.split(',')
     }
 
@@ -177,20 +190,21 @@ export class PktInputElement extends PktElement {
       value = value[0]
     }
 
+    this.setFormValue(value)
+
     this.manageValidity(this.inputRef.value)
     if (this.inputRef2) {
       this.manageValidity(this.inputRef2.value)
     }
 
-    this.internals.setFormValue(value)
-
+    // This should be moved to a separate trigger for text inputs
     this.dispatchEvent(new Event('input'))
 
+    // Change events
     this.dispatchEvent(new Event('change'))
-
     this.dispatchEvent(
-      new CustomEvent('value-changed', {
-        detail: this._value,
+      new CustomEvent('value-change', {
+        detail: value,
         bubbles: true,
         composed: true,
       }),