@oslokommune/punkt-elements 19.19.0 → 19.20.0

package/src/components/progressbar/progressbar.test.ts

@@ -32,8 +32,11 @@ describe('PktProgressbar', () => {
     })
 
     test('keeps the id on the host element', async () => {
-      document.body.innerHTML = '<pkt-progressbar id="min-framdrift" title="Framdrift"></pkt-progressbar>'
-      const progressbar = document.querySelector('pkt-progressbar') as CustomElementFor<'pkt-progressbar'>
+      document.body.innerHTML =
+        '<pkt-progressbar id="min-framdrift" title="Framdrift"></pkt-progressbar>'
+      const progressbar = document.querySelector(
+        'pkt-progressbar',
+      ) as CustomElementFor<'pkt-progressbar'>
       await progressbar.updateComplete
 
       expect(document.getElementById('min-framdrift')).toBe(progressbar)
@@ -57,7 +60,9 @@ describe('PktProgressbar', () => {
       const { progressbar } = await createProgressbarTest({ valueCurrent: 50 })
 
       expect(progressbar.valueCurrent).toBe(50)
-      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe(
+        'progressbar',
+      )
     })
   })
 
@@ -134,6 +139,39 @@ describe('PktProgressbar', () => {
       expect(statusElement?.textContent?.trim()).toContain('25 av 50')
     })
 
+    test('shows fraction relative to valueMin', async () => {
+      const { progressbar } = await createProgressbarTest({
+        valueCurrent: 25,
+        valueMin: 20,
+        valueMax: 30,
+        statusType: 'fraction',
+      })
+
+      const bar = progressbar.querySelector('.pkt-progressbar')
+      const barContainer = progressbar.querySelector<HTMLElement>('.pkt-progressbar__container')
+      expect(progressbar.querySelector('.pkt-progressbar__status')?.textContent?.trim()).toBe(
+        '5 av 10',
+      )
+      expect(bar?.getAttribute('aria-valuetext')).toBe('5 av 10')
+      expect(barContainer?.style.getPropertyValue('--pkt-progress-width')).toBe('50%')
+    })
+
+    test('uses the same bar width for fraction and percentage', async () => {
+      const widths: string[] = []
+      for (const statusType of ['fraction', 'percentage'] as const) {
+        const { progressbar } = await createProgressbarTest({
+          valueCurrent: 10,
+          valueMin: 1,
+          valueMax: 10,
+          statusType,
+        })
+        const barContainer = progressbar.querySelector<HTMLElement>('.pkt-progressbar__container')
+        widths.push(barContainer?.style.getPropertyValue('--pkt-progress-width') ?? '')
+        document.body.innerHTML = ''
+      }
+      expect(widths).toEqual(['100%', '100%'])
+    })
+
     test('hides status when statusType is none', async () => {
       const { progressbar } = await createProgressbarTest({
         valueCurrent: 50,
@@ -182,7 +220,9 @@ describe('PktProgressbar', () => {
       progressbar.valueCurrent = 80
       await progressbar.updateComplete
 
-      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('aria-valuenow')).toBe('80')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('aria-valuenow')).toBe(
+        '80',
+      )
     })
   })
 
@@ -190,7 +230,9 @@ describe('PktProgressbar', () => {
     test('uses progressbar role by default', async () => {
       const { progressbar } = await createProgressbarTest()
 
-      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe(
+        'progressbar',
+      )
       expect(progressbar.hasAttribute('role')).toBe(false)
     })
 

package/src/components/progressbar/progressbar.ts

@@ -6,64 +6,58 @@ import { PktElement } from '@/base-elements/element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { uuidish } from 'shared-utils/utils'
+import { formatString } from 'shared-strings'
+import {
+  PROGRESSBAR_DEFAULTS,
+  type IPktProgressbarBase,
+  type TAriaLive,
+  type TProgressbarRole,
+  type TProgressbarSkin,
+  type TProgressbarStatusPlacement,
+  type TProgressbarStatusType,
+  type TProgressbarTitlePosition,
+} from 'shared-types'
 
-import '@/components/icon'
-import type {
-  TAriaLive,
+export type {
   TProgressbarRole,
   TProgressbarSkin,
   TProgressbarStatusPlacement,
   TProgressbarStatusType,
   TProgressbarTitlePosition,
-} from 'shared-types'
-
-export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition }
+}
 
-export interface IPktProgressbar {
-  ariaLabel?: string | null
-  ariaLabelledby?: string | null
+export interface IPktProgressbar extends Omit<IPktProgressbarBase, 'ariaLive' | 'id'> {
   ariaLive?: TAriaLive | null
-  ariaValueText?: string | null
   id?: string | null
-  role?: TProgressbarRole
-  skin?: TProgressbarSkin
-  statusPlacement?: TProgressbarStatusPlacement
-  statusType?: TProgressbarStatusType
-  title?: string | null
-  titlePosition?: TProgressbarTitlePosition
-  valueCurrent: number
-  valueMax?: number
-  valueMin?: number
 }
 
-export class PktProgressbar extends PktElement implements IPktProgressbar {
-  constructor() {
-    super()
-  }
+export class PktProgressbar extends PktElement<IPktProgressbar> implements IPktProgressbar {
   // Public properties
   @property({ type: String }) ariaLabel: string | null = null
   @property({ type: String, reflect: true }) ariaLabelledby: string | null = null
   @property({ type: String, reflect: true }) ariaValueText: string | null = null
-  @property({ type: String }) ariaLive: TAriaLive = 'polite'
+  @property({ type: String }) ariaLive: TAriaLive = PROGRESSBAR_DEFAULTS.ariaLive
   @property({ type: String, reflect: true }) id: string = uuidish()
-  @property({ type: String }) role: TProgressbarRole = 'progressbar'
-  @property({ type: String }) skin: TProgressbarSkin = 'dark-blue'
-  @property({ type: String }) statusPlacement: TProgressbarStatusPlacement = 'following'
-  @property({ type: String }) statusType: TProgressbarStatusType = 'none'
+  @property({ type: String }) role: TProgressbarRole = PROGRESSBAR_DEFAULTS.role
+  @property({ type: String }) skin: TProgressbarSkin = PROGRESSBAR_DEFAULTS.skin
+  @property({ type: String }) statusPlacement: TProgressbarStatusPlacement =
+    PROGRESSBAR_DEFAULTS.statusPlacement
+  @property({ type: String }) statusType: TProgressbarStatusType = PROGRESSBAR_DEFAULTS.statusType
   @property({ type: String, reflect: true }) title = ''
-  @property({ type: String }) titlePosition: TProgressbarTitlePosition = 'left'
-  @property({ type: Number, reflect: true }) valueCurrent = 0
-  @property({ type: Number }) valueMax = 100
-  @property({ type: Number }) valueMin = 0
+  @property({ type: String }) titlePosition: TProgressbarTitlePosition =
+    PROGRESSBAR_DEFAULTS.titlePosition
+  @property({ type: Number, reflect: true }) valueCurrent: number =
+    PROGRESSBAR_DEFAULTS.valueCurrent
+  @property({ type: Number }) valueMax: number = PROGRESSBAR_DEFAULTS.valueMax
+  @property({ type: Number }) valueMin: number = PROGRESSBAR_DEFAULTS.valueMin
 
   // State
   private labelWidth = 0
   @state() private progressbarId: string = this.id
-  @state() private resolvedRole: TProgressbarRole = 'progressbar'
+  @state() private resolvedRole: TProgressbarRole = PROGRESSBAR_DEFAULTS.role
 
   // 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>) {
@@ -97,17 +91,17 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
   render() {
     const hasStatus = this.statusType !== 'none'
     const totalSteps = this.valueMax - this.valueMin
-    const percentageOfSteps = (this.valueCurrent / totalSteps) * 100
-    const currentPercentage =
-      this.statusType === 'fraction'
-        ? Math.round(percentageOfSteps)
-        : Math.round(((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin)) * 100)
+    const currentStep = this.valueCurrent - this.valueMin
+    const currentPercentage = Math.round((currentStep / totalSteps) * 100)
 
-    const formattedTitle = `${this.valueCurrent} av ${totalSteps}`
+    const formattedTitle = formatString(this.pktStrings.get('progressbar').fraction, {
+      current: currentStep,
+      total: totalSteps,
+    })
 
     const computedAriaValueText =
       this.statusType === 'fraction' && !this.ariaValueText
-        ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+        ? formattedTitle
         : this.ariaValueText || ''
     const computedAriaLabelledby = this.ariaLabel
       ? undefined
@@ -132,7 +126,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
     })
 
     return html`<div
-      ${ref(this.progressBarRef)}
       role=${this.resolvedRole}
       aria-live=${ifDefined(this.ariaLive || undefined)}
       aria-atomic="true"
@@ -152,25 +145,28 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
           '--pkt-progress-width': `${currentPercentage}%`,
         })}
       >
-        ${this.title
-          ? html`<p id=${`${this.progressbarId}-title`} class=${titleClasses}>${this.title}</p>`
-          : nothing}
+        ${
+          this.title
+            ? html`<p id=${`${this.progressbarId}-title`} class=${titleClasses}>${this.title}</p>`
+            : nothing
+        }
 
         <div class="pkt-progressbar__bar-wrapper">
           <div class=${barClasses}></div>
         </div>
 
-        ${hasStatus
-          ? html`<div class=${statusClasses}>
-              <span class=${placementClasses} ${ref(this.labelRef)}>
-                ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
-              </span>
-            </div>`
-          : nothing}
+        ${
+          hasStatus
+            ? html`<div class=${statusClasses}>
+                <span class=${placementClasses} ${ref(this.labelRef)}>
+                  ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
+                </span>
+              </div>`
+            : nothing
+        }
       </div>
     </div>`
   }
-
 }
 
 export default PktProgressbar

package/src/components/textinput/index.ts

@@ -1,4 +1,5 @@
 import { PktTextinput } from './textinput'
 
 export { PktTextinput }
+export type { IPktTextinput } from './textinput'
 export default PktTextinput

package/src/components/textinput/textinput.test.ts

@@ -67,7 +67,7 @@ describe('PktTextinput', () => {
       const { textinput } = await createTextinputTest()
       expect(textinput.type).toBe('text')
       expect(textinput.value).toBe('')
-      expect(textinput.autocomplete).toBe(null) // Property defaults to null, template sets 'off'
+      expect(textinput.autocomplete).toBe('off')
     })
 
     test('renders input element', async () => {

package/src/components/textinput/textinput.ts

@@ -10,6 +10,7 @@ import { forwardSlots } from '@/directives/slot-content'
 import '@/components/input-wrapper'
 import '@/components/icon'
 import { describedByIds } from 'shared-utils/forms/described-by'
+import { TEXTINPUT_DEFAULTS, type Booleanish, type IPktTextinputBase } from 'shared-types'
 
 type Props = ElementProps<
   PktTextinput,
@@ -23,17 +24,58 @@ type Props = ElementProps<
   | 'omitSearchIcon'
 >
 
-export class PktTextinput extends PktInputElement<Props> {
+export interface IPktTextinput extends Omit<
+  IPktTextinputBase,
+  | 'form'
+  | 'label'
+  | 'placeholder'
+  | 'size'
+  | 'prefix'
+  | 'suffix'
+  | 'iconNameRight'
+  | 'min'
+  | 'max'
+  | 'minLength'
+  | 'maxLength'
+  | 'step'
+  | 'readOnly'
+  | 'autoComplete'
+  | 'ariaDescribedby'
+  | 'ariaLabelledby'
+  | 'helptextDropdownButton'
+  | 'useWrapper'
+> {
+  label?: string | null
+  placeholder?: string | null
+  size?: number | null
+  prefix?: string | null
+  suffix?: string | null
+  iconNameRight?: string | null
+  min?: string | number | null
+  max?: string | number | null
+  minlength?: number | null
+  maxlength?: number | null
+  step?: number | null
+  readonly?: boolean
+  autocomplete?: string | null
+  ariaDescribedby?: string | null
+  ariaLabelledby?: string | null
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
+  helptextDropdownButton?: string | null
+  useWrapper?: Booleanish
+}
+
+export class PktTextinput extends PktInputElement<Props> implements IPktTextinput {
   inputRef: Ref<HTMLTextAreaElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''
-  @property({ type: String }) type: string = 'text'
+  @property({ type: String }) type: string = TEXTINPUT_DEFAULTS.type
   @property({ type: Number }) size: number | null = null
-  @property({ type: String }) autocomplete: string | null = null
+  @property({ type: String }) autocomplete: string | null = TEXTINPUT_DEFAULTS.autoComplete
   @property({ type: String }) iconNameRight: string | null = null
   @property({ type: String }) prefix: string | null = null
   @property({ type: String }) suffix: string | null = null
-  @property({ type: Boolean }) omitSearchIcon: boolean = false
+  @property({ type: Boolean }) omitSearchIcon: boolean = TEXTINPUT_DEFAULTS.omitSearchIcon
 
   @state() counterCurrent = 0
 

package/dist/if-defined-CiML3MTM.cjs

@@ -1 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs");var t=t=>t??e.h;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});

package/dist/progressbar-YfHSPmqI.cjs

@@ -1,31 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs");require("./icon-CrG6o7ZE.cjs");const n=require("./if-defined-CiML3MTM.cjs"),r=require("./ref-CB7e9nMY.cjs"),i=require("./utils-63cRpWut.cjs");var a=`important`,o=` !`+a,s=e.f(class extends e.p{constructor(t){if(super(t),t.type!==e.m.ATTRIBUTE||t.name!==`style`||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,n)=>{let r=e[n];return r==null?t:t+`${n=n.includes(`-`)?n:n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,`-$&`).toLowerCase()}:${r};`},``)}update(t,[n]){let{style:r}=t.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(let e of this.ft)n[e]??(this.ft.delete(e),e.includes(`-`)?r.removeProperty(e):r[e]=null);for(let e in n){let t=n[e];if(t!=null){this.ft.add(e);let n=typeof t==`string`&&t.endsWith(o);e.includes(`-`)||n?r.setProperty(e,n?t.slice(0,-11):t,n?a:``):r[e]=t}}return e.g}}),c=class extends e.t{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive=`polite`,this.id=i.n(),this.role=`progressbar`,this.skin=`dark-blue`,this.statusPlacement=`following`,this.statusType=`none`,this.title=``,this.titlePosition=`left`,this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.labelWidth=0,this.progressbarId=this.id,this.resolvedRole=`progressbar`,this.labelRef=r.t(),this.progressBarRef=r.t(),this.containerRef=r.t()}willUpdate(e){super.willUpdate(e),this.id&&(this.progressbarId=this.id);let t=this.getAttribute(`role`);t?(this.resolvedRole=t,this.removeAttribute(`role`)):this.role&&(this.resolvedRole=this.role)}updated(e){if(super.updated(e),e.has(`valueCurrent`)&&this.labelRef.value){let e=this.labelRef.value.getBoundingClientRect().width||0;e!==this.labelWidth&&(this.labelWidth=e,this.containerRef.value?.style.setProperty(`--pkt-progress-label-width`,`${e}px`))}}render(){let i=this.statusType!==`none`,a=this.valueMax-this.valueMin,o=this.valueCurrent/a*100,c=this.statusType===`fraction`?Math.round(o):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),l=`${this.valueCurrent} av ${a}`,u=this.statusType===`fraction`&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||``,d=this.ariaLabel?void 0:this.ariaLabelledby||`${this.progressbarId}-title`,f=t.t({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),p=t.t({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition===`center`}),m=t.t({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement===`center`}),h=t.t({"pkt-progressbar__status-placement--following":this.statusPlacement===`following`,"pkt-progressbar__status-placement--center":this.statusPlacement===`center`,"pkt-progressbar__status-placement--left":this.statusPlacement===`left`});return e._`<div
-      ${r.n(this.progressBarRef)}
-      role=${this.resolvedRole}
-      aria-live=${n.t(this.ariaLive||void 0)}
-      aria-atomic="true"
-      aria-valuenow=${this.valueCurrent}
-      aria-valuemin=${this.valueMin}
-      aria-valuemax=${this.valueMax}
-      aria-valuetext=${n.t(u||void 0)}
-      aria-label=${n.t(this.ariaLabel||void 0)}
-      aria-labelledby=${n.t(d)}
-      class="pkt-progressbar"
-    >
-      <div
-        ${r.n(this.containerRef)}
-        class="pkt-progressbar__container"
-        style=${s({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${c}%`})}
-      >
-        ${this.title?e._`<p id=${`${this.progressbarId}-title`} class=${p}>${this.title}</p>`:e.h}
-
-        <div class="pkt-progressbar__bar-wrapper">
-          <div class=${f}></div>
-        </div>
-
-        ${i?e._`<div class=${m}>
-              <span class=${h} ${r.n(this.labelRef)}>
-                ${this.statusType===`percentage`?`${c}%`:l}
-              </span>
-            </div>`:e.h}
-      </div>
-    </div>`}};e.n([e.u({type:String})],c.prototype,`ariaLabel`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`ariaLabelledby`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`ariaValueText`,void 0),e.n([e.u({type:String})],c.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`id`,void 0),e.n([e.u({type:String})],c.prototype,`role`,void 0),e.n([e.u({type:String})],c.prototype,`skin`,void 0),e.n([e.u({type:String})],c.prototype,`statusPlacement`,void 0),e.n([e.u({type:String})],c.prototype,`statusType`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`title`,void 0),e.n([e.u({type:String})],c.prototype,`titlePosition`,void 0),e.n([e.u({type:Number,reflect:!0})],c.prototype,`valueCurrent`,void 0),e.n([e.u({type:Number})],c.prototype,`valueMax`,void 0),e.n([e.u({type:Number})],c.prototype,`valueMin`,void 0),e.n([e.l()],c.prototype,`progressbarId`,void 0),e.n([e.l()],c.prototype,`resolvedRole`,void 0);try{e.d(`pkt-progressbar`)(c)}catch{console.warn(`Forsøker å definere <pkt-progressbar>, men den er allerede definert`)}var l=c;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});