@oslokommune/punkt-elements 18.0.0 → 18.1.0

package/src/components/accordion/accordion.ts

@@ -2,21 +2,13 @@ import { provide } from '@lit/context'
 import { html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import type { TAccordionSkin } from 'shared-types'
+import type { IPktAccordionBase, TAccordionSkin } from 'shared-types'
 
 import { accordionContext, type AccordionContext } from './accordion-context'
 
 export type TPktAccordionSkin = TAccordionSkin
 
-export interface IPktAccordion {
-  compact?: boolean
-  skin?: TPktAccordionSkin
-  ariaLabelledBy?: string
-  name?: string
-  /**
-   * @description A unique identifier to connect the accordion with a heading
-   */
-}
+export interface IPktAccordion extends IPktAccordionBase {}
 
 export class PktAccordion extends LitElement implements IPktAccordion {
   // Properties

package/src/components/accordion/accordionitem.ts

@@ -4,6 +4,7 @@ import { consume } from '@lit/context'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import type { IPktAccordionItemBase } from 'shared-types'
 import { TPktAccordionSkin } from './accordion'
 import { accordionContext, type AccordionContext } from './accordion-context'
 import { classMap } from 'lit/directives/class-map.js'
@@ -16,15 +17,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
  * to override the automatic toggling
  */
 
-export interface IPktAccordionItem {
-  defaultOpen?: boolean
-  id: string
-  title: string
-  skin?: TPktAccordionSkin
-  compact?: boolean
-  isOpen?: boolean
-  name?: string | undefined
-}
+export interface IPktAccordionItem extends IPktAccordionItemBase {}
 
 export class PktAccordionItem extends PktElementWithSlot implements IPktAccordionItem {
   @property({ type: Boolean }) defaultOpen: boolean = false

package/src/components/alert/alert.ts

@@ -3,9 +3,10 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
-import type { TAriaLive, TAlertSkin } from 'shared-types'
+import type { TAriaLive, TAlertSkin, TAlertSize } from 'shared-types'
 import { updateClassAttribute } from '@/utils/classutils'
-import specs from 'componentSpecs/alert.json'
+import { formatString } from 'shared-strings'
+import specs from 'componentSpecs/alert.spec'
 
 import '@/components/icon'
 import '@/components/button'
@@ -23,7 +24,7 @@ export interface IPktAlert {
    */
   compact?: boolean
   role?: string
-  size?: 'medium' | 'small' | 'xsmall'
+  size?: TAlertSize
 }
 export class PktAlert extends PktElementWithSlot implements IPktAlert {
   constructor() {
@@ -33,14 +34,20 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
 
   // Properties
 
-  @property({ type: Boolean, reflect: false }) compact = specs.deprecated.compact.default
+  @property({ type: Boolean, reflect: false })
+  compact = specs.deprecated!.compact.default as boolean
   @property({ type: String, reflect: true }) title: string = ''
-  @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
-    .default as TAlertSkin
-  @property({ type: String }) ariaLive: TAriaLive = specs.props.ariaLive.default as TAriaLive
+  @property({ type: String, reflect: true }) skin: TAlertSkin = (
+    specs.props!.skin as { default: TAlertSkin }
+  ).default
+  @property({ type: String }) ariaLive: TAriaLive = (
+    specs.props!.ariaLive as { default: TAriaLive }
+  ).default
   @property({ type: String, reflect: true, attribute: 'aria-live' })
   ariaLiveAttr: TAriaLive | null = null
-  @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
+  @property({ type: Boolean, reflect: true }) closeAlert = (
+    specs.props!.closeAlert as { default: boolean }
+  ).default
   @property({ type: String, reflect: true }) date: string | null = null
   @property({ type: String, reflect: true }) role: string = 'status'
   @property({ type: String, attribute: 'size' })
@@ -110,7 +117,7 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
                     variant="icon-only"
                     @click=${this.close}
                   >
-                    <span class="sr-only">Lukk</span>
+                    <span class="sr-only">${this.pktStrings.get('generic').close}</span>
                   </pkt-button>
                 </div>
               `
@@ -120,7 +127,9 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
           <div class="pkt-alert__text">${slotContent(this)}</div>
 
           ${this.date
-            ? html`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`
+            ? html`<div class="pkt-alert__date">
+                ${formatString(this.pktStrings.get('alert').lastUpdated, { date: this.date })}
+              </div>`
             : nothing}
         </div>
       </div>

package/src/components/backlink/backlink.test.ts

@@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations)
 export interface BacklinkTestConfig extends BaseTestConfig {
   href?: string
   text?: string
-  ariaLabel?: string
+  ariaLabel?: string | null
 }
 
 // Use shared framework
@@ -70,7 +70,7 @@ describe('PktBackLink', () => {
 
       expect(backlink.href).toBe('')
       expect(backlink.text).toBe('Forsiden')
-      expect(backlink.ariaLabel).toBe('')
+      expect(backlink.ariaLabel).toBe(null)
 
       const nav = backlink.querySelector('nav')
       const link = nav?.querySelector('a')
@@ -133,7 +133,7 @@ describe('PktBackLink', () => {
     test('uses default aria-label when none provided', async () => {
       const { backlink } = await createBacklinkTest()
 
-      expect(backlink.ariaLabel).toBe('')
+      expect(backlink.ariaLabel).toBe(null)
 
       const nav = backlink.querySelector('nav')
       expect(nav?.getAttribute('aria-label')).toBe('Gå tilbake til forrige side')

package/src/components/backlink/backlink.ts

@@ -2,21 +2,19 @@ import { PktElement } from '@/base-elements/element'
 import { html } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import type { IPktBackLinkBase } from 'shared-types'
 
 import '@/components/icon'
 
-export interface IPktBackLink {
-  href?: string
-  text?: string
-  ariaLabel?: string
-}
+export interface IPktBackLink extends IPktBackLinkBase {}
 
 export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
   // Properties
 
   @property({ type: String }) href: string = ''
   @property({ type: String }) text: string = 'Forsiden'
-  @property({ type: String }) ariaLabel: string = ''
+  /** @deprecated Bruk `strings={{ backlink: { label: '…' } }}` eller `setPktStrings()`. */
+  @property({ type: String }) ariaLabel: string | null = null
 
   // Lifecycle
 

package/src/components/breadcrumbs/breadcrumbs.ts

@@ -1,22 +1,21 @@
 import { customElement, property } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
 import { PktElement } from '@/base-elements/element'
+import type { IBreadcrumb, IPktBreadcrumbsBase } from 'shared-types'
 
 import '@/components/icon'
 
-export interface IBreadcrumbItem {
-  text: string
-  href: string
-}
+export type { IBreadcrumb }
 
-export interface IPktBreadcrumbs {
-  breadcrumbs: IBreadcrumbItem[]
-}
+/** @deprecated Use `IBreadcrumb`. */
+export type IBreadcrumbItem = IBreadcrumb
+
+export interface IPktBreadcrumbs extends IPktBreadcrumbsBase {}
 
 export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
-  @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []
+  @property({ type: Array }) breadcrumbs: IBreadcrumb[] = []
 
-  private handleLinkClick(event: MouseEvent, item: IBreadcrumbItem, index: number) {
+  private handleLinkClick(event: MouseEvent, item: IBreadcrumb, index: number) {
     const navigateEvent = new CustomEvent('navigate', {
       detail: { item, index, originalEvent: event },
       bubbles: true,

package/src/components/breadcrumbs/index.ts

@@ -1,2 +1,2 @@
 export { PktBreadcrumbs } from './breadcrumbs'
-export type { IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'
+export type { IBreadcrumb, IBreadcrumbItem, IPktBreadcrumbs } from './breadcrumbs'

package/src/components/fileupload/fileupload-base.ts

@@ -13,7 +13,6 @@ import {
 
 import { PktElement } from '@/base-elements/element'
 import converters from '../../helpers/converters'
-import specs from 'componentSpecs/fileupload.json'
 
 import type {
   FileItem,
@@ -45,8 +44,9 @@ export abstract class PktFileUploadBase
   /** Expandable help text (dropdown) shown by `pkt-input-wrapper`. */
   @property({ type: String, attribute: 'helptext-dropdown' }) helptextDropdown: string = ''
   /** Button label for expandable help text. */
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
   @property({ type: String, attribute: 'helptext-dropdown-button' })
-  helptextDropdownButton: string = specs.props.helptextDropdownButton.default
+  helptextDropdownButton?: string
   /** Mark input as required in form strategy. */
   @property({ type: Boolean, reflect: true }) required = false
   /** Allow selecting/dropping multiple files. */
@@ -98,8 +98,9 @@ export abstract class PktFileUploadBase
   /** Show "Må fylles ut" tag in the input wrapper. */
   @property({ type: Boolean, attribute: 'required-tag' }) requiredTag = false
   /** Label text for the required tag. */
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   @property({ type: String, attribute: 'required-text' })
-  requiredText: string = specs.props.requiredText.default
+  requiredText?: string
   /** Extra tag next to the label. */
   @property({ type: String, attribute: 'tag-text' }) tagText: string | null = null
   /** Trailing characters to keep when middle-truncating long filenames. Set to `0` to disable. */

package/src/components/fileupload/fileupload-types.ts

@@ -5,6 +5,7 @@ import type {
   IFileTransfer,
   IFileValidateDetail,
   IFilesChangedDetail,
+  IPktFileUploadBase,
   ITransferCancelledDetail,
   TFilesChangedReason,
   TFileUploadItemRenderer,
@@ -50,49 +51,11 @@ export type TQueueItemOperation = {
   renderHidden?: (context: TQueueOperationContext) => TemplateResult | null
 }
 
-export interface IPktFileUpload {
-  id?: string
+export interface IPktFileUpload extends Omit<IPktFileUploadBase, 'extraOperations' | 'name'> {
   name?: string
-  label?: string
-  helptext?: string
-  /** Expandable help text (dropdown) in input-wrapper. */
-  helptextDropdown?: string
-  /** Button label for expandable help text. */
-  helptextDropdownButton?: string
-  required?: boolean
-  multiple?: boolean
-  disabled?: boolean
-  fullwidth?: boolean
-  uploadStrategy?: TUploadStrategy
-  itemRenderer?: TFileUploadItemRenderer
+  /** Custom element id — required for `uploadStrategy="custom"`. */
+  id?: string
+  /** HTML `accept` attribute on the native file input. */
   accept?: string
-  allowedFormats?: string[]
-  formatErrorMessage?: string
-  maxFileSize?: string | number
-  sizeErrorMessage?: string
-  onFileValidation?: TFileValidator
-  /** External error state (combined with internal validation errors). */
-  hasError?: boolean
-  /** External error message shown under the component. */
-  errorMessage?: string
-  /** Show "Valgfritt" tag in input-wrapper. */
-  optionalTag?: boolean
-  /** Label text for the optional tag. */
-  optionalText?: string
-  /** Show "Må fylles ut" tag in input-wrapper. */
-  requiredTag?: boolean
-  /** Label text for the required tag. */
-  requiredText?: string
-  /** Extra tag next to the label. */
-  tagText?: string | null
-  /** Trailing characters to keep when truncating long filenames. */
-  truncateTail?: number
-  /** Transfer states keyed by `fileId` (custom strategy progress/error/cancel rendering). */
-  transfers?: TFileTransfer[]
-  addCommentsEnabled?: boolean
-  renameFilesEnabled?: boolean
   extraOperations?: TQueueItemOperation[]
-  enableImagePreview?: boolean
-  value?: FileItem[]
-  defaultValue?: FileItem[]
 }

package/src/components/index.ts

@@ -97,7 +97,7 @@ export type { IPktSelectOption, TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'
 
-export type { IPktBreadcrumbs, IBreadcrumbItem } from '@/components/breadcrumbs'
+export type { IPktBreadcrumbs, IBreadcrumb, IBreadcrumbItem } from '@/components/breadcrumbs'
 
 export type { IPktLoader, TPktLoaderVariant } from '@/components/loader'
 
@@ -140,4 +140,4 @@ export {
   setPktStrings,
   subscribePktStrings,
 } from 'shared-strings'
-export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride } from 'shared-strings'
+export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride, IPktStringsProps } from 'shared-strings'

package/src/components/link/link.ts

@@ -3,18 +3,23 @@ import { slotContent } from '@/directives/slot-content'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
-import specs from 'componentSpecs/link.json'
+import specs from 'componentSpecs/link.spec'
+import type { TPropObject } from 'componentSpecs/lib/define-component-spec'
 import '@/components/icon'
 
+/** Spec defaults — narrow cast for `@property` initializers. */
+const specDefaults = specs.props! as Record<string, TPropObject>
+
 export class PktLink extends PktElementWithSlot {
   /**
    * Element attributes
    */
-  @property({ type: String, reflect: true }) href: string = specs.props.href.default
+  @property({ type: String, reflect: true }) href: string = specDefaults.href.default as string
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
   @property({ type: Boolean, reflect: true }) external: boolean = false
-  @property({ type: String, reflect: true }) target: string | null = specs.props.target.default
+  @property({ type: String, reflect: true }) target: string | null =
+    specDefaults.target.default as string
 
   render() {
     const classes = {

package/dist/alert-COeHz6o2.cjs

@@ -1,33 +0,0 @@
-const e=require("./element-B8OGznK0.cjs"),t=require("./class-map-CzCE5pqG.cjs"),n=require("./element-with-slot-DTxILHVv.cjs"),r=require("./classutils-CbklAJDe.cjs");require("./icon-BmMC09mi.cjs"),require("./button-CR4CXtnj.cjs");var i={name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{description:`React: Klikk-event for 'Lukk'-knappen`},close:{description:`Vue: Klikk-event for 'Lukk'-knappen`}},props:{title:{name:`Tittel`,description:`Tittelen som vises øverst i på meldingen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Hvordan type melding er dette?`,type:[`info`,`success`,`warning`,`error`],default:`info`,category:`ui`},date:{name:`Sist oppdatert`,description:`Dato som vises nederst i på meldingen`,type:`string`,category:`contents`},ariaLive:{name:`aria-live`,description:`Hvordan skal skjermleseren lese opp meldingen?`,type:[`off`,`polite`,`assertive`],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[`medium`,`small`,`xsmall`],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}},deprecated:{compact:{name:`Kompakt (deprecated)`,description:`Bruk size i stedet; uten eksplisitt size gir compact størrelsen 'small'.`,type:`boolean`,category:`ui`,default:!1}}},a=class extends n.t{constructor(){super(),this.compact=i.deprecated.compact.default,this.title=``,this.skin=i.props.skin.default,this.ariaLive=i.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=i.props.closeAlert.default,this.date=null,this.role=`status`,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!0,composed:!0}))},this._isClosed=!1}connectedCallback(){super.connectedCallback(),this.ariaLiveAttr=this.getAttribute(`aria-live`)||this.ariaLive}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){let r=this.size??(this.compact?`small`:`medium`),i={"pkt-alert":!0,[`pkt-alert--${r}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},a={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
-      <div class=${t.t(i)} aria-live=${this.ariaLiveAttr}>
-        <div class=${t.t(a)}>
-          <pkt-icon
-            class="pkt-alert__icon"
-            aria-hidden="true"
-            name=${this.skin===`info`?`alert-information`:`alert-${this.skin}`}
-          ></pkt-icon>
-
-          ${this.closeAlert?e._`
-                <div class="pkt-alert__close">
-                  <pkt-button
-                    tabindex="0"
-                    aria-label="close"
-                    size=${r}
-                    type="button"
-                    skin="tertiary"
-                    iconName="close"
-                    variant="icon-only"
-                    @click=${this.close}
-                  >
-                    <span class="sr-only">Lukk</span>
-                  </pkt-button>
-                </div>
-              `:e.h}
-          ${this.title?e._`<div class="pkt-alert__title">${this.title}</div>`:e.h}
-
-          <div class="pkt-alert__text">${n.n(this)}</div>
-
-          ${this.date?e._`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.h}
-        </div>
-      </div>
-    `}};e.n([e.u({type:Boolean,reflect:!1})],a.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.n([e.u({type:String})],a.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],a.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`date`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`role`,void 0),e.n([e.u({type:String,attribute:`size`})],a.prototype,`size`,void 0),e.n([e.l()],a.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(a)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/if-defined-CVYApOgK.cjs

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

package/dist/link-11g2ZNin.cjs

@@ -1,7 +0,0 @@
-const e=require("./element-B8OGznK0.cjs"),t=require("./class-map-CzCE5pqG.cjs"),n=require("./element-with-slot-DTxILHVv.cjs");require("./icon-BmMC09mi.cjs");var r={name:`pkt-link`,react:`PktLink`,"css-class":`pkt-link`,"dark-mode":!0,isElement:!0,props:{href:{name:`URL`,description:`URL til lenken`,type:`string`,default:`#`,category:`contents`},target:{name:`Mål`,description:`Mål for lenken`,type:[`_blank`,`_self`,`_parent`,`_top`],default:`_self`,category:`tech`},iconName:{name:`Ikon`,description:`Ikon som skal vises ved siden av lenketeksten`,type:`icon`,category:`ui`},iconPosition:{name:`Ikonposisjon`,description:`Posisjonen til ikonet i forhold til lenketeksten`,type:[`left`,`right`],category:`ui`},renderLink:{name:`Egendefinert lenkekomponent`,description:`React: Funksjon for å rendre en egendefinert lenkekomponent (f.eks. Next.js Link eller React Router Link). Mottar et objekt med href, className, children og props. Standard er et vanlig <a>-element.`,type:`function`,required:!1,category:`tech`,reactOnly:!0}},slots:{default:{description:`Innholdet i lenken`}}},i=class extends n.t{constructor(...e){super(...e),this.href=r.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=!1,this.target=r.props.target.default}render(){let r={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition===`left`||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition===`right`,"pkt-link--external":this.external};return e._`<a
-      class=${t.t(r)}
-      href=${this.href}
-      .target=${this.target}
-      .rel=${this.external?`noopener noreferrer`:e.h}
-      >${this.iconName?e._`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:``} <span>${n.n(this)}</span></a
-    >`}};e.n([e.u({type:String,reflect:!0})],i.prototype,`href`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`iconName`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`iconPosition`,void 0),e.n([e.u({type:Boolean,reflect:!0})],i.prototype,`external`,void 0),e.n([e.u({type:String,reflect:!0})],i.prototype,`target`,void 0);try{e.d(`pkt-link`)(i)}catch{console.warn(`Forsøker å definere <pkt-link>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});