@oslokommune/punkt-elements 19.19.1 → 19.20.0

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/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}});