@oslokommune/punkt-elements 14.2.0 → 14.4.0

package/src/components/header/index.ts

@@ -7,8 +7,11 @@ export type {
   Representing,
   UserMenuItem,
   TInternalMenuItem,
-  TPktHeaderMenu,
+  THeaderMenu,
   TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+  TSlotMenuVariant,
   IPktHeader,
 } from './types'
 

package/src/components/header/types.ts

@@ -6,10 +6,22 @@ import type {
   Representing as SharedRepresenting,
   UserMenuItem as SharedUserMenuItem,
   TInternalMenuItem as SharedTInternalMenuItem,
+  TSlotMenuVariant,
+  THeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
 } from 'shared-types'
 import { convertUserMenuItem as sharedConvertUserMenuItem } from 'shared-types'
 
-export type { Booleanish }
+export type {
+  Booleanish,
+  TSlotMenuVariant,
+  THeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+}
 export { booleanishConverter }
 
 // Re-export with PktIconName typing
@@ -25,26 +37,6 @@ export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
   return sharedConvertUserMenuItem(item)
 }
 
-/**
- * Type for which menu is currently open
- */
-export type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user'
-
-/**
- * Type for logout button placement
- */
-export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none'
-
-/**
- * Position options for header
- */
-export type THeaderPosition = 'fixed' | 'relative'
-
-/**
- * Scroll behavior options for header
- */
-export type THeaderScrollBehavior = 'hide' | 'none'
-
 /**
  * Interface for the Header component props
  */
@@ -86,5 +78,9 @@ export interface IPktHeader {
   /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
   tabletBreakpoint?: number
   /** Which menu is initially open */
-  openedMenu?: TPktHeaderMenu
+  openedMenu?: THeaderMenu
+  /** Variant for the slot menu button. Default: 'icon-only' */
+  slotMenuVariant?: TSlotMenuVariant
+  /** Text for the slot menu button. Default: 'Meny' */
+  slotMenuText?: string
 }

package/src/components/index.ts

@@ -49,8 +49,11 @@ export type {
   User as IPktHeaderUser,
   Representing as IPktHeaderRepresenting,
   UserMenuItem as IPktHeaderUserMenuItem,
-  TPktHeaderMenu,
+  THeaderMenu,
   TLogOutButtonPlacement as TPktHeaderLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+  TSlotMenuVariant,
   IPktHeader,
 } from '@/components/header'
 

package/src/components/radiobutton/radiobutton.ts

@@ -20,7 +20,7 @@ type Props = ElementProps<
 
 @customElement('pkt-radiobutton')
 export class PktRadioButton extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLInputElement> = createRef()
+  inputRef: Ref<HTMLInputElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''
   @property({ type: String }) checkHelptext: string | null = null

package/src/components/select/select.ts

@@ -1,8 +1,8 @@
 import { html, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { PktInputElement } from '@/base-elements/input-element'
+import { PktOptionsInputElement } from '@/base-elements/options-input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import '@/components/input-wrapper'
@@ -39,31 +39,15 @@ declare global {
 }
 
 @customElement('pkt-select')
-export class PktSelect extends PktInputElement implements IPktSelect {
-  private inputRef: Ref<HTMLSelectElement> = createRef()
+export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> implements IPktSelect {
+  inputRef: Ref<HTMLSelectElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
-  @property({ type: Array, attribute: 'options' }) private _optionsProp: TSelectOption[] = []
   @property({ type: String }) value: string = ''
 
-  @state() _options: TSelectOption[] = []
-
   public selectedIndex: number | null = -1
   public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined
 
-  // Getter and setter for options to expose the actual parsed options
-  public get options(): TSelectOption[] {
-    return this._options.map((option) => ({
-      ...option,
-      selected: option.value === this.value,
-    }))
-  }
-
-  public set options(value: TSelectOption[]) {
-    this._optionsProp = value
-    this.requestUpdate('_optionsProp', this._options)
-  }
-
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
@@ -74,34 +58,15 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   connectedCallback(): void {
     super.connectedCallback()
 
-    const optionsReceivedFromProps = this._optionsProp.length > 0
-    const checkIfOptionNodesInSlot =
-      this.optionsController.nodes.length && this.optionsController.nodes.length > 0
+    // Parse options from props or slots
+    this.parseOptions()
 
-    if (!optionsReceivedFromProps && checkIfOptionNodesInSlot) {
-      this.optionsController.nodes.forEach((node: Element) => {
-        const option: TSelectOption = {
-          value: node.hasAttribute('value')
-            ? (node.getAttribute('value') ?? '')
-            : (node.textContent ?? ''),
-          label: node.textContent || node.getAttribute('value') || '',
-          disabled: node.hasAttribute('disabled'),
-          selected: node.hasAttribute('selected'),
-          hidden: node.hasAttribute('data-hidden'),
-        }
-        if (node.getAttribute('selected') && !this.value) {
-          this.value = option.value
-        }
-        this._options.push(option)
-      })
-    } else {
-      this._options = this._optionsProp
-      this._options.forEach((option) => {
-        if (option.selected && !this.value) {
-          this.value = option.value
-        }
-      })
-    }
+    // Set initial value from selected option
+    this._options.forEach((option) => {
+      if (option.selected && !this.value) {
+        this.value = option.value
+      }
+    })
   }
 
   // Support native Select method `add`

package/src/components/textarea/textarea.ts

@@ -15,7 +15,7 @@ type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows'>
 
 @customElement('pkt-textarea')
 export class PktTextarea extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''

package/src/components/textinput/textinput.ts

@@ -24,7 +24,7 @@ type Props = ElementProps<
 
 @customElement('pkt-textinput')
 export class PktTextinput extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''