@sb1/indeks-web 0.16.0 → 0.18.0

package/dist/npm/lib/components/combobox/IxCombobox.d.ts

@@ -80,6 +80,7 @@ export declare class IxCombobox extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
+    focus(options?: FocusOptions): void;
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
     get multiple(): boolean;
     set multiple(value: boolean);

package/dist/npm/lib/components/date-field/IxDateField.d.ts

@@ -0,0 +1,67 @@
+/**
+ * IxDateField — datofelt: formatert tekst-input (dd.mm.åååå) + native OS-kalender.
+ *
+ * ## Designfilosofi
+ *
+ * Hybrid av to mønstre. `ix-date-field` ligger NØSTET inne i `ix-field` (som
+ * `ix-combobox`), og `ix-field` gjør ARIA-limet: kobler label↔input,
+ * aria-describedby, feilmelding, OG formateringen (`data-format="date"` →
+ * normaliserer til dd.mm.åååå på blur; brukeren kan taste `1.1.2026` like gjerne
+ * som `01.01.2026`). `ix-date-field` dupliserer ingenting av dette. Dens ENESTE
+ * jobb er å gjøre feltet til et datofelt:
+ *
+ *   1. GENERERE to instrumentelle elementer inn i `.ix-text-field` (idempotent):
+ *      - `.ix-date-field__toggle`  kalenderknapp (CSS gir ikonet)
+ *      - `.ix-date-field__native`  overlagt gjennomsiktig `<input type="date">`
+ *        som bærer ISO-verdien, gir min/max-validering og åpner OS-kalenderen
+ *   2. To-veis synk mellom den synlige dd.mm.åååå-inputen og den native ISO-inputen.
+ *   3. Speile min/max/disabled/readonly ned til den native inputen.
+ *   4. Knapp-klikk → `native.showPicker?.()`; tap/klikk treffer uansett den
+ *      gjennomsiktige native-inputen som ligger over knappen (mobil).
+ *
+ * ## Verdi-kontrakt
+ *
+ * Utad er verdien ISO (`åååå-mm-dd`): den native inputen bærer den, `change`
+ * emitter den, og `name` settes på den native inputen så form-innsending gir ISO.
+ * Den synlige inputen viser `dd.mm.åååå` og har bevisst INGEN `name` (ville
+ * kollidert med ix-field sin formaterings-speiling ved innsending).
+ *
+ * ## Delelementer (light DOM)
+ *   - .ix-text-field > input               → synlig dd.mm.åååå-input (forfatteren)
+ *   - .ix-date-field__toggle               → kalenderknapp (WC genererer)
+ *   - .ix-date-field__native (input[date]) → skjult ISO-input (WC genererer)
+ *
+ * @example
+ * <ix-field>
+ *   <label>Fødselsdato</label>
+ *   <span data-field="description">dd.mm.åååå</span>
+ *   <ix-date-field data-open-label="Åpne kalender" name="fodt">
+ *     <div class="ix-text-field">
+ *       <input inputmode="numeric" data-format="date" />
+ *     </div>
+ *   </ix-date-field>
+ *   <span data-field="error"></span>
+ * </ix-field>
+ */
+export declare class IxDateField extends HTMLElement {
+    private _input;
+    private _toggle;
+    private _native;
+    private _syncing;
+    private _lastEmitted;
+    private _onVisibleInput;
+    private _onNativeInput;
+    private _onToggleClick;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    private _wire;
+    private _handleVisibleInput;
+    private _handleNativeInput;
+    private _emitIfChanged;
+    private _seedFromIso;
+    private _openPicker;
+    private _syncControlState;
+    private _syncToggleLabel;
+}

package/dist/npm/lib/components/field/formats.d.ts

@@ -59,13 +59,18 @@ export interface FieldFormatter {
 /**
  * Lager en formatter fra en pattern-streng.
  *
- * `format` fyller slots med matchende tegn fra den rå verdien og setter inn
- * separatorer først når neste slot faktisk fylles (ingen dinglende separator på
- * slutten mens man skriver). Tegn som ikke passer neste slot — enten fordi
- * brukeren skrev flere tegn enn patternet har plasser, eller skrev noe som ikke
- * hører hjemme (bokstav i et sifferfelt) — droppes IKKE: den ledende delen som
- * passer formateres, og resten legges uformatert på til slutt i samme
- * rekkefølge brukeren skrev. Alt brukeren skriver forblir synlig.
+ * `format` fyller slots med matchende tegn fra den rå verdien og setter inn en
+ * separator så snart gruppen foran er fylt OG resten av verdien er konsumert —
+ * separatoren dukker altså opp med én gang gruppen er komplett ("24" → "24.",
+ * "2412" → "24.12."), ikke først når neste siffer skrives. En separator legges
+ * aldri til for en halvfylt gruppe, og heller ikke når vi stoppet fordi neste
+ * tegn ikke passet sloten (da ville vi doblet separatoren ved innliming av
+ * allerede formatert tekst). Tegn som ikke passer neste slot — enten fordi
+ * brukeren skrev flere tegn enn
+ * patternet har plasser, eller skrev noe som ikke hører hjemme (bokstav i et
+ * sifferfelt) — droppes IKKE: den ledende delen som passer formateres, og resten
+ * legges uformatert på til slutt i samme rekkefølge brukeren skrev. Alt brukeren
+ * skriver forblir synlig.
  *
  * `parse` er tapsfri: den fjerner kun separator-tegnene patternet definerer
  * (literal-tokens) og beholder alt annet i rekkefølge — ingen cap på antall
@@ -73,6 +78,42 @@ export interface FieldFormatter {
  * (bokstav i et sifferfelt) i den rå verdien og kan fanges av validering.
  */
 export declare function createPatternFormatter(pattern: string): FieldFormatter;
+export interface DateParts {
+    day: string;
+    month: string;
+    year: string;
+}
+/**
+ * Kanonisk dato-parser — den ENE sannheten for hvordan en dato-streng tolkes.
+ * Både ix-field sin synlige formatering og IxDateField sin ISO-utleding går
+ * gjennom denne, så de aldri kan drifte fra hverandre.
+ *
+ * Komplett dato → nullutfylte deler; ufullstendig/tvetydig → `null`.
+ *
+ *   - Med punktum: nøyaktig 3 rent-numeriske segmenter, dag/måned 1-2 sifre,
+ *     år 2 eller 4 sifre. Dag/måned nullutfylles; 2-sifret år utvides til `20xx`
+ *     (`"26"` → `"2026"`). `"1.1.2026"` og `"1.1.26"` → begge 01/01/2026.
+ *   - Uten punktum: nøyaktig 8 sifre tolkes som ddmmåååå (`"01012026"`). Annen
+ *     lengde uten skilletegn (f.eks. `"112026"`) er tvetydig — vi kan ikke vite
+ *     hvor grensene går uten punktum — og regnes ufullstendig → `null`.
+ *   - Bokstaver, ekstra punktum eller feil segmentantall → `null`.
+ */
+export declare function parseDate(display: string): DateParts | null;
+/** Komplett dato → visning `dd.mm.åååå` (nullutfylt); ellers strengen verbatim. */
+export declare function normalizeDateDisplay(display: string): string;
+/** Komplett dato → ISO `åååå-mm-dd`; ellers tom streng. */
+export declare function isoFromDate(display: string): string;
+/**
+ * Formatter for datofelt. `parse` er identitet — punktumet er en meningsfull
+ * tastet grense, ikke en separator å fjerne (trivielt tapsfri). `format`
+ * nullutfyller til `dd.mm.åååå` når datoen er komplett, ellers vises alt verbatim.
+ *
+ * Invariant-unntak: `parse(format(raw)) === raw` gjelder IKKE her, fordi
+ * nullutfylling (`"1"` → `"01"`) ikke er reversibel. Blur-syklusen krever i
+ * stedet at `format` er idempotent på allerede-normaliserte verdier —
+ * `format("01.01.2026") === "01.01.2026"` — som holder.
+ */
+export declare function createDateFormatter(): FieldFormatter;
 /**
  * Beløp er ikke en fast-lengde pattern-maske: lengden varierer og tusenskillet
  * forskyver seg mens man skriver. Derfor en egen formatter.
@@ -99,3 +140,10 @@ export declare function amountFormatterForLocale(locale: string): FieldFormatter
 export declare function registerFormat(name: string, formatter: FieldFormatter): void;
 /** Slår opp en registrert formatter. Returnerer `undefined` om navnet er ukjent. */
 export declare function resolveFormat(name: string): FieldFormatter | undefined;
+/**
+ * Navnene på de innebygde formatvariantene. Eksporteres slik at typelaget
+ * (indeks-react dupliserer denne listen for autocomplete på `format`) kan holdes
+ * i synk via en sync-test — React importerer ikke web-runtime ellers.
+ */
+export declare const BUILTIN_FORMAT_NAMES: readonly ["phone", "amount", "account", "orgnr", "ssn", "date"];
+export type BuiltInFormatName = (typeof BUILTIN_FORMAT_NAMES)[number];

package/dist/npm/lib/components/phone-number-field/IxPhoneNumberField.d.ts

@@ -0,0 +1,33 @@
+export declare class IxPhoneNumberField extends HTMLElement {
+    private _errorObserver;
+    private _childObserver;
+    private _instanceId;
+    private _filling;
+    private _ownDisabled;
+    private _ownReadonly;
+    private _ownRequired;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attr: string, _oldValue: string | null, _newValue: string | null): void;
+    private _wire;
+    private _wireDescribedBy;
+    private _containsControl;
+    private _containsGroupField;
+    private _combobox;
+    private _numberInput;
+    private _syncInvalid;
+    private _syncDataState;
+    private _syncHostStateToControls;
+    private _syncRequired;
+    private _applyState;
+    private _applyFlag;
+    private _fillCombobox;
+    private _refillCombobox;
+    private _applyPreselection;
+    private _buildOption;
+    private _preselectValue;
+    private _resolveCountryOptions;
+    private _listbox;
+    private _stampNumberDefaults;
+}

package/dist/npm/lib/components/phone-number-field/countries.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Landvalg for <ix-phone-number-field>. `value` er landkoden (uten `+`) og
+ * brukes som verdi/`data-country-code`. `label` er kalle-koden (`+47`) — den
+ * vises som valgt verdi i input og er primærtekst. `description` er landnavnet
+ * (sekundær tekst i lista, som skjermleseren leser etter kallekoden).
+ */
+export type CountryOption = {
+    /** Landkode uten `+` (option-value, f.eks. `"47"`). */
+    value: string;
+    /** Kalle-kode vist som primærtekst (`"+47"`). */
+    label: string;
+    /** Landnavn — sekundær beskrivelse i lista. */
+    description?: string;
+};
+/** Språk for den innebygde landlista. */
+export type CountryLocale = 'nb' | 'nn' | 'en';
+/**
+ * Bygger standard landliste for en gitt `locale`. Rekkefølge: Norge først,
+ * deretter Norden (Sverige, Danmark, Finland, Island), deretter resten
+ * alfabetisk etter lokalisert landnavn (locale-bevisst `Intl.Collator`, som
+ * håndterer æ/ø/å).
+ *
+ * @default locale = 'nb'
+ */
+export declare function getDefaultCountries(locale?: CountryLocale): CountryOption[];
+/** Normaliserer en `data-locale`-attributt til en gyldig `CountryLocale`. */
+export declare function normalizeLocale(value: string | null): CountryLocale;

package/dist/npm/lib/components/progress-bar/IxProgressBar.d.ts

@@ -23,6 +23,7 @@
  * og verdien bakes inn i `aria-label` (samme mønster som u-elements sin
  * u-progress). Desktop beholder ekte progressbar-semantikk.
  */
+export type ProgressBarState = 'active' | 'success' | 'error';
 export declare class IxProgressBar extends HTMLElement {
     private _instanceId;
     private _header;

package/dist/npm/lib/utils/cn.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `cn` — slår sammen betingede CSS-klassenavn til én streng.
+ *
+ * Intern erstatning for `clsx`. Vi implementerer bare mønstrene Indeks faktisk
+ * bruker, ikke hele clsx-API-et:
+ *   - strenger som varargs:            cn('ix-a', 'ix-b')            → 'ix-a ix-b'
+ *   - falsy filtreres bort:            cn('ix-a', false, undefined)  → 'ix-a'
+ *     (typisk fra `&&`-uttrykk og valgfrie props)
+ *   - objekt med truthy-verdi:         cn({ 'ix-a': true, 'ix-b': 0 }) → 'ix-a'
+ *     (inkl. computed/template-literal-nøkler)
+ *   - flate (og nøstede) arrays:       cn('ix-a', ['ix-b'])          → 'ix-a ix-b'
+ *
+ * Returnerer alltid en `string` — tom streng når ingenting matcher, slik at
+ * mønsteret `cn(className) || undefined` fungerer.
+ */
+export interface ClassDictionary {
+    [key: string]: unknown;
+}
+export type ClassValue = string | number | boolean | null | undefined | ClassDictionary | ClassValue[];
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",