@oslokommune/punkt-elements 16.9.0 → 16.10.0

package/dist/tests/component-registry.d.ts

@@ -0,0 +1,64 @@
+import { PktAlert } from '../components/alert/alert';
+import { PktBackLink } from '../components/backlink/backlink';
+import { PktBreadcrumbs } from '../components/breadcrumbs/breadcrumbs';
+import { PktButton } from '../components/button/button';
+import { PktCard } from '../components/card/card';
+import { PktAccordion } from '../components/accordion/accordion';
+import { PktAccordionItem } from '../components/accordion/accordionitem';
+import { PktCalendar } from '../components/calendar/calendar';
+import { PktCheckbox } from '../components/checkbox/checkbox';
+import { PktCombobox } from '../components/combobox/combobox';
+import { PktConsent } from '../components/consent/consent';
+import { PktDatepicker } from '../components/datepicker/datepicker';
+import { PktHeading } from '../components/heading/heading';
+import { PktHelptext } from '../components/helptext/helptext';
+import { PktIcon } from '../components/icon/icon';
+import { PktInputWrapper } from '../components/input-wrapper/input-wrapper';
+import { PktLink } from '../components/link/link';
+import { PktLinkCard } from '../components/linkcard/linkcard';
+import { PktListbox } from '../components/listbox/listbox';
+import { PktLoader } from '../components/loader/loader';
+import { PktMessagebox } from '../components/messagebox/messagebox';
+import { PktModal } from '../components/modal/modal';
+import { PktProgressbar } from '../components/progressbar/progressbar';
+import { PktRadioButton } from '../components/radiobutton/radiobutton';
+import { PktSelect } from '../components/select/select';
+import { PktTag } from '../components/tag/tag';
+import { PktTextarea } from '../components/textarea/textarea';
+import { PktTextinput } from '../components/textinput/textinput';
+import { PktTimepicker } from '../components/timepicker/timepicker';
+import { PktHeaderService } from '../components';
+export declare const customElementComponentRegistry: {
+    readonly 'pkt-alert': typeof PktAlert;
+    readonly 'pkt-accordion': typeof PktAccordion;
+    readonly 'pkt-accordion-item': typeof PktAccordionItem;
+    readonly 'pkt-backlink': typeof PktBackLink;
+    readonly 'pkt-breadcrumbs': typeof PktBreadcrumbs;
+    readonly 'pkt-button': typeof PktButton;
+    readonly 'pkt-card': typeof PktCard;
+    readonly 'pkt-calendar': typeof PktCalendar;
+    readonly 'pkt-checkbox': typeof PktCheckbox;
+    readonly 'pkt-combobox': typeof PktCombobox;
+    readonly 'pkt-consent': typeof PktConsent;
+    readonly 'pkt-datepicker': typeof PktDatepicker;
+    readonly 'pkt-header-service': typeof PktHeaderService;
+    readonly 'pkt-heading': typeof PktHeading;
+    readonly 'pkt-helptext': typeof PktHelptext;
+    readonly 'pkt-icon': typeof PktIcon;
+    readonly 'pkt-input-wrapper': typeof PktInputWrapper;
+    readonly 'pkt-link': typeof PktLink;
+    readonly 'pkt-linkcard': typeof PktLinkCard;
+    readonly 'pkt-listbox': typeof PktListbox;
+    readonly 'pkt-loader': typeof PktLoader;
+    readonly 'pkt-messagebox': typeof PktMessagebox;
+    readonly 'pkt-modal': typeof PktModal;
+    readonly 'pkt-progressbar': typeof PktProgressbar;
+    readonly 'pkt-radiobutton': typeof PktRadioButton;
+    readonly 'pkt-select': typeof PktSelect;
+    readonly 'pkt-tag': typeof PktTag;
+    readonly 'pkt-textarea': typeof PktTextarea;
+    readonly 'pkt-textinput': typeof PktTextinput;
+    readonly 'pkt-timepicker': typeof PktTimepicker;
+};
+export type CustomElementName = keyof typeof customElementComponentRegistry;
+export type CustomElementFor<T extends CustomElementName> = InstanceType<(typeof customElementComponentRegistry)[T]>;

package/dist/tests/test-framework.d.ts

@@ -0,0 +1,29 @@
+import { PktElement } from '../base-elements/element';
+import { CustomElementName } from './component-registry';
+import { vi } from 'vitest';
+export declare const setupConsoleMocking: (options?: {
+    mockError?: boolean;
+    mockWarn?: boolean;
+    mockLog?: boolean;
+}) => void;
+export declare const restoreConsoleMocking: () => void;
+export declare const getConsoleErrorMock: () => ReturnType<typeof vi.fn>;
+export declare const getConsoleWarnMock: () => ReturnType<typeof vi.fn>;
+export declare const getConsoleLogMock: () => ReturnType<typeof vi.fn>;
+export interface BaseTestConfig {
+    content?: string;
+}
+/**
+ * Generic test factory for any PktElement
+ *
+ * Creates type-safe, escaped HTML with proper lifecycle management.
+ * Replaces manual string concatenation with structured config objects.
+ *
+ * @param customElementName - Tag name (e.g., 'pkt-linkcard')
+ * @param config - Component properties + test options
+ * @returns Rendered element ready for testing
+ */
+export declare const createElementTest: <T extends PktElement, C extends BaseTestConfig>(customElementName: CustomElementName, config?: C) => Promise<{
+    container: HTMLElement;
+    element: T;
+}>;

package/dist/textarea.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/textinput.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/timepicker.d.ts

@@ -1 +1 @@
-export { }
+export {}

package/dist/translations/no.json.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+  "example": {
+    "hi": "Hei!"
+  },
+  "generic": {
+    "from": "Fra",
+    "to": "Til"
+  },
+  "calendar": {
+    "buttonAltText": "Åpne kalender",
+    "deleteDate": "Fjern dato"
+  },
+  "dates": {
+    "month": "Måned",
+    "year": "År",
+    "days": ["Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag", "Søndag"],
+    "daysShort": ["Man", "Tir", "Ons", "Tor", "Fre", "Lør", "Søn"],
+    "months": [
+      "Januar",
+      "Februar",
+      "Mars",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "Desember"
+    ],
+    "monthsShort": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Des"
+    ],
+    "week": "Uke",
+    "prevMonth": "Forrige måned",
+    "nextMonth": "Neste måned"
+  },
+  "timepicker": {
+    "hours": "Timer",
+    "minutes": "Minutter",
+    "openPicker": "Åpne tidspunkt-velger",
+    "prevTime": "Forrige tidspunkt",
+    "nextTime": "Neste tidspunkt",
+    "selectTime": "Velg tidspunkt"
+  },
+  "forms": {
+    "search": {
+      "placeholder": "Søk…"
+    },
+    "labels": {
+      "optional": "Valgfritt",
+      "required": "Må fylles ut"
+    },
+    "messages": {
+      "required": "Dette feltet er påkrevd",
+      "invalid": "Ugyldig verdi",
+      "invalidPattern": "Ugyldig format",
+      "tooShort": "For kort",
+      "tooLong": "For lang",
+      "rangeUnderflow": "For lav verdi",
+      "rangeOverflow": "For høy verdi",
+      "stepMismatch": "Må treffe på steget som er definert i elementet",
+      "timeStepMismatch": "Må treffe på et steg, for eksempel 0, {step} minutter",
+      "timeStepMismatchHour": "Må treffe på hver hele time",
+      "timeStepMismatchHalfHour": "Må treffe på hver hele eller halve time",
+      "rangeUnderflowMin": "Verdien må være større enn eller lik {min}.",
+      "rangeOverflowMax": "Verdien må være mindre enn eller lik {max}.",
+      "dateUnderflow": "For tidlig dato",
+      "dateOverflow": "For sen dato"
+    },
+    "helptext": {
+      "helptextDropdownButton": "Les mer"
+    },
+    "date": {
+      "multiple": "Her kan du velge flere datoer. Trykk komma eller enter når du har skrevet inn en dato."
+    }
+  }
+}
+;
+
+export default _default;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import { TPktSize } from './size';
+import { TAriaLive } from '../shared-types';
+export type { TPktSize };
+export type { TAriaLive };

package/dist/types/size.d.ts

@@ -0,0 +1 @@
+export type TPktSize = 'small' | 'medium' | 'large';

package/dist/types/typeUtils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * We define all props as optional. Native HTML attributes are optional by default,
+ * but the TS definition require either null or value. This way we can support showing a value as optional
+ * and define a default value on the element itself
+ */
+export type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;

package/dist/utils/classutils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Oppdaterer `class`-attributtet på et element ved å legge til eller fjerne en gitt klasse.
+ *
+ * Denne funksjonen kan brukes til å sette og fjerne klasser på det ytterste elementet,
+ * for eksempel ved bruk av `pkt-hide`. Hvis vi ikke setter denne klassen direkte på
+ * custom elementet, kan skjermlesere potensielt fortsatt lese opp noe av innholdet.
+ *
+ * @param element - HTML-elementet som skal oppdateres.
+ * @param className - Klassen som skal legges til eller fjernes.
+ * @param condition - Hvis `true`, legges klassen til; hvis `false`, fjernes den.
+ */
+export declare function updateClassAttribute(element: Element, className: string, condition: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.9.0",
+  "version": "16.10.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -16,7 +16,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && node scripts/bundle-shared-types.js",
     "build-app": "tsc && vite build --config vite.config-app.ts",
     "preview": "vite preview --outDir dist-app",
     "test": "vitest",
@@ -78,5 +78,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "b5986d27e787fefda72f847d65bb9b7de2ab5316"
+  "gitHead": "7d339c3bc11d0da4291536496aebb6761dd519cb"
 }

package/src/components/modal/modal.ts

@@ -9,6 +9,8 @@ import { TPktSize } from '@/types/size'
 import specs from 'componentSpecs/modal.json'
 import '@/components/icon'
 
+type ModalSize = TPktSize | 'fit-content'
+
 export interface IPktModal {
   open?: boolean
   headingText?: string
@@ -16,7 +18,7 @@ export interface IPktModal {
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
   closeButtonSkin?: 'blue' | 'yellow-filled'
-  size?: TPktSize
+  size?: ModalSize
   variant?: 'dialog' | 'drawer'
   drawerPosition?: 'left' | 'right'
   transparentBackdrop?: boolean
@@ -31,7 +33,7 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
   @property({ type: Boolean })
   closeOnBackdropClick?: boolean = specs.props.closeOnBackdropClick.default
   @property({ type: String }) closeButtonSkin?: 'blue' | 'yellow-filled' = 'blue'
-  @property({ type: String }) size?: TPktSize = specs.props.size.default as TPktSize
+  @property({ type: String }) size?: ModalSize = specs.props.size.default as ModalSize
   @property({ type: String }) variant?: 'dialog' | 'drawer' = 'dialog'
   @property({ type: String }) drawerPosition?: 'left' | 'right' = 'right'
   @property({ type: Boolean }) transparentBackdrop?: boolean = false
@@ -200,10 +202,9 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
               </div>`
             : nothing}
           <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${classMap(contentClasses)}
-            >${slotContent(this)}</div>
+            <div id="pkt-modal__content" class=${classMap(contentClasses)}>
+              ${slotContent(this)}
+            </div>
           </div>
         </div>
       </dialog>

package/dist/modal-DS_wUOIv.cjs

@@ -1,36 +0,0 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./ref-BaJ0mBT_.cjs`);var i={name:`pkt-modal`,react:`PktModal`,"css-class":`pkt-modal`,isElement:!0,isPureReact:!0,events:{"background-click":{description:`Event som trigges når bakgrunnen trykkes på`},close:{description:`Event som trigges når meldingsboksen lukkes`}},props:{open:{name:`Åpen`,description:`Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.`,type:`boolean`,category:`tech`,default:!1},headingText:{name:`Heading text`,description:`Heading tekst på modalen`,type:`string`,category:`contents`},hideCloseButton:{name:`Gjem 'Lukk'-knapp`,description:`Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.`,type:`boolean`,category:`ui`,default:!1},closeOnBackdropClick:{name:`Lukk modalen når bakgrunnen trykkes på`,description:`Lukk modalen når bakgrunnen trykkes på`,type:`boolean`,category:`tech`,default:!1},closeButtonSkin:{name:`Stil på lukkeknappen`,description:`Stil på lukkeknappen`,type:[`blue`,`yellow-filled`],category:`ui`,default:`blue`},size:{name:`Størrelse`,description:`Størrelsen på modalen`,type:[`small`,`medium`,`large`],category:`ui`,default:`medium`},variant:{name:`Variant`,description:`Standard dialog eller skuff`,type:[`dialog`,`drawer`],category:`ui`,default:`dialog`},drawerPosition:{name:`Skuffposisjon`,description:`Posisjonen til skuffen`,type:[`left`,`right`],category:`ui`,default:`right`},transparentBackdrop:{name:`Gjennomsiktig bakgrunn`,description:`Bakgrunnen er gjennomsiktig`,type:`boolean`,category:`ui`,default:!1},removePadding:{name:`Fjern padding`,description:`Fjerner paddingen rundt innholdet i modalen`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen.`}}},a=class extends n.t{constructor(){super(),this.open=!1,this.headingText=``,this.removePadding=!1,this.hideCloseButton=i.props.hideCloseButton.default,this.closeOnBackdropClick=i.props.closeOnBackdropClick.default,this.closeButtonSkin=`blue`,this.size=i.props.size.default,this.variant=`dialog`,this.drawerPosition=`right`,this.transparentBackdrop=!1,this.dialogRef=r.t(),this._isOpen=!1,this.close=(e,t=!1)=>{if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove(`pkt-modal--open`);let n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:`smooth`,block:`nearest`}),this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),t||this.dialogRef.value?.close(),this.requestUpdate()},this.showModal=(e=null)=>{this._isOpen=!0,this.open=!0,this.dialogRef.value?.showModal(),document.body.classList.add(`pkt-modal--open`),this.dispatchEvent(new CustomEvent(`showModal`,{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener(`keydown`,this.handleKeyDown.bind(this)),document.addEventListener(`click`,this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`click`,this.handleBackdropClick)}updated(e){super.updated(e),e.has(`open`)&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event(`close`),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&(`document`in window&&`createElement`in document&&(await Promise.resolve().then(()=>require(`./dialog-polyfill.esm-D3Oinvk0.cjs`)).then(e=>e.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener(`close`,()=>{this.close(new Event(`close`),!0)}))}handleKeyDown(e){e.key===`Escape`&&this.close(e)}handleBackdropClick(e){this.closeOnBackdropClick&&e.target===this.dialogRef?.value&&this.close(e)}isElementInViewport(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){let i={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===``||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin===`yellow-filled`,"pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant===`drawer`},a={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin===`blue`,c={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return e.d`
-      <dialog
-        class=${t.t(i)}
-        ${r.n(this.dialogRef)}
-        aria-labelledby=${this.headingText?`pkt-modal__headingText`:e.l}
-        aria-describedby="pkt-modal__content"
-        @close=${e=>this.close(e,!0)}
-      >
-        <div class="pkt-modal__wrapper">
-          ${this.headingText||!this.hideCloseButton?e.d`<div class="pkt-modal__header">
-                <div class="pkt-modal__header-background"></div>
-                ${this.headingText?e.d`<h1 id="pkt-modal__headingText" class=${t.t(a)}>
-                      ${this.headingText}
-                    </h1>`:e.d`<div class="pkt-modal__headingText"></div>`}
-                ${this.hideCloseButton?e.d`<div class="pkt-modal__noCloseButton"></div>`:e.d`<div class="${t.t(c)}">
-                      <pkt-button
-                        @click=${e=>this.close(e)}
-                        aria-label="close"
-                        iconname="close"
-                        variant="icon-only"
-                        size="medium"
-                        skin=${s?`tertiary`:`primary`}
-                      >
-                        Lukk
-                      </pkt-button>
-                    </div>`}
-              </div>`:e.l}
-          <div class="pkt-modal__container">
-            <div
-              id="pkt-modal__content"
-              class=${t.t(o)}
-            >${n.n(this)}</div>
-          </div>
-        </div>
-      </dialog>
-    `}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`open`,void 0),e.r([e.s({type:String})],a.prototype,`headingText`,void 0),e.r([e.s({type:Boolean})],a.prototype,`removePadding`,void 0),e.r([e.s({type:Boolean})],a.prototype,`hideCloseButton`,void 0),e.r([e.s({type:Boolean})],a.prototype,`closeOnBackdropClick`,void 0),e.r([e.s({type:String})],a.prototype,`closeButtonSkin`,void 0),e.r([e.s({type:String})],a.prototype,`size`,void 0),e.r([e.s({type:String})],a.prototype,`variant`,void 0),e.r([e.s({type:String})],a.prototype,`drawerPosition`,void 0),e.r([e.s({type:Boolean})],a.prototype,`transparentBackdrop`,void 0),e.r([e.o()],a.prototype,`_isOpen`,void 0);try{e.c(`pkt-modal`)(a)}catch{console.warn(`Forsøker å definere <pkt-modal>, 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}});