@helsevestikt/hviktor-angular 0.0.16 → 0.0.17

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@helsevestikt/hviktor-angular",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=17.0.0 <22.0.0",
     "@angular/core": ">=17.0.0 <22.0.0"
   },
   "dependencies": {
-    "@digdir/designsystemet-css": "^1.11.1",
-    "@floating-ui/dom": "^1.7.5",
+    "@digdir/designsystemet-css": "^1.12.1",
+    "@floating-ui/dom": "^1.7.6",
     "@u-elements/u-details": "^0.1.5",
     "@u-elements/u-tabs": "^0.1.2",
     "tslib": "^2.3.0"

package/types/helsevestikt-hviktor-angular.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, AfterViewInit, OnChanges, OnInit, OnDestroy, TemplateRef, AfterContentInit, ElementRef, QueryList } from '@angular/core';
-import { FormGroup, ValidatorFn, ReactiveFormsModule, ControlValueAccessor } from '@angular/forms';
+import { EventEmitter, OnInit, OnDestroy, AfterViewInit, OnChanges, TemplateRef, AfterContentInit, ElementRef, QueryList } from '@angular/core';
 import { Placement } from '@floating-ui/dom';
+import { FormGroup, ValidatorFn, ReactiveFormsModule, ControlValueAccessor } from '@angular/forms';
 
 /**
  * Alert provides users with information that is especially important for them to see and understand.
@@ -55,6 +55,28 @@ declare class HviAvatar {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviAvatar, "hvi-avatar", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * @summary
+ * AvatarStack stabler en samling Avatar elementer
+ *
+ * @example
+ * ```html
+ * <hvi-avatar-stack></hvi-avatar-stack>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/en/components/docs/avatar-stack/code}
+ */
+declare class HviAvatarStack {
+    /** variant */
+    variant?: 'square' | 'circle';
+    /** Plassering av popover relativt til trigger */
+    expandable?: 'true' | 'fixed';
+    suffix?: string;
+    gap?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviAvatarStack, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HviAvatarStack, "figure[hviAvatarStack]", never, { "variant": { "alias": "variant"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class HviBadgePosition {
     /** Overlap of the badge */
     overlap: 'rectangle' | 'circle';
@@ -323,6 +345,59 @@ declare class HviDivider {
     static ɵdir: i0.ɵɵDirectiveDeclaration<HviDivider, "hr[hviDivider]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * @summary
+ * Dropdown er en generisk nedtrekksliste. Den legger grunnmuren for å bygge menyer og lister..
+ *
+ * @example
+ * ```html
+ * <button hviButton popovertarget="myDropdown">Åpne dropdown</button
+ * <hvi-dropdown id="myDropdown" popover>
+ *  <ul>
+ *    <li>
+ *     <button hviButton variant="tertiary">Menylenke</button>
+ *   </li>
+ *   <li>
+ *    <button hviButton variant="tertiary">Menylenke</button>
+ *  </li>
+ * </ul>
+ * </hvi-dropdown>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/en/components/docs/dropdown/code}
+ */
+declare class HviDropdown implements OnInit, OnDestroy {
+    private el;
+    private cleanupAutoUpdate?;
+    private boundHandleClick?;
+    private boundHandleKeydown?;
+    /**ID to target the popover */
+    id?: string;
+    /** variant */
+    variant?: 'default' | 'tertiary';
+    /** Plassering av popover relativt til trigger */
+    dropdownPlacement: Placement;
+    /** Aktiver automatisk repositjonering hvis det ikke er plass */
+    autoPlacement: boolean;
+    /** Event når popover åpnes */
+    opened: EventEmitter<void>;
+    /** Event når popover lukkes */
+    closed: EventEmitter<void>;
+    private get dropdownElement();
+    private get triggerElement();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private setupEventListeners;
+    private removeEventListeners;
+    private handleBeforeToggle;
+    private handleToggle;
+    private updatePosition;
+    private startAutoUpdate;
+    private stopAutoUpdate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviDropdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviDropdown, "hvi-dropdown", never, { "id": { "alias": "id"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "dropdownPlacement": { "alias": "dropdownPlacement"; "required": false; }; "autoPlacement": { "alias": "autoPlacement"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
 type HviValidationMessages = Partial<Record<string, string>>;
 declare class HviValidationMessage {
     /**
@@ -970,6 +1045,83 @@ declare class HviList {
     static ɵdir: i0.ɵɵDirectiveDeclaration<HviList, "ol[hviList], ul[hviList]", never, {}, {}, never, never, true, never>;
 }
 
+/** A single SVG path with fill type */
+interface LogoPath {
+    /** SVG path data string */
+    d: string;
+    /**
+     * 'accent' = always #6CACE4 (blue dots)
+     * 'themed' = switches between dark (#003087) and light (white) via currentColor
+     */
+    fill: 'themed' | 'accent';
+}
+/** Defines the SVG structure for a single logo */
+interface LogoDefinition {
+    /** SVG viewBox attribute */
+    viewBox: string;
+    /** Default width */
+    width: number;
+    /** Default height */
+    height: number;
+    /** Accessible label for the logo */
+    label: string;
+    /** SVG path elements */
+    paths: LogoPath[];
+}
+/** Available logo sizes */
+type LogoSize = 'sm' | 'md' | 'lg';
+
+/** Available company identifiers for the logo component */
+type LogoCompany = keyof typeof LOGOS;
+/**
+ * Path data and metadata for all logos.
+ *
+ * Individual logo definitions live in their own files (logo-hve.ts, logo-hvikt.ts, etc.)
+ * to keep file sizes manageable. This registry assembles them.
+ */
+declare const LOGOS: {
+    dots: LogoDefinition;
+    hvikt: LogoDefinition;
+    hve: LogoDefinition;
+    hbe: LogoDefinition;
+    'hbe-hus': LogoDefinition;
+    hfd: LogoDefinition;
+    hfo: LogoDefinition;
+    hst: LogoDefinition;
+    'hst-sus': LogoDefinition;
+    sav: LogoDefinition;
+};
+
+/** Builds a dots-first logo: [dots] [themed dot] [HELSE] [unique company text] */
+declare function buildLogo(label: string, companyPaths: LogoPath[], viewBox?: string, width?: number, height?: number): LogoDefinition;
+
+/**
+ * Logo displays a Helse Vest company logo with automatic light/dark mode support.
+ *
+ * The themed paths (text and dark dot) use `currentColor` so they respond to the
+ * CSS `color` property, while accent paths (blue dots) keep a fixed color.
+ *
+ * The component automatically responds to `data-color-scheme` set by the application
+ * (via Designsystemet), so no manual mode switching is needed.
+ *
+ * @example
+ * ```html
+ * <hvi-logo company="hve" />
+ * <hvi-logo company="hve" size="lg" />
+ * ```
+ */
+declare class HviLogo {
+    /** Which company logo to display */
+    readonly company: i0.InputSignal<"dots" | "hvikt" | "hve" | "hbe" | "hbe-hus" | "hfd" | "hfo" | "hst" | "hst-sus" | "sav">;
+    /** Logo size — sm (40px), md (65px, default), lg (82px) height */
+    readonly size: i0.InputSignal<LogoSize>;
+    /** Override the default accessible label */
+    readonly ariaLabel: i0.InputSignal<string | undefined>;
+    protected readonly logo: i0.Signal<LogoDefinition>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviLogo, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviLogo, "hvi-logo", never, { "company": { "alias": "company"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /** Type for hvert element i pagineringslisten */
 type PaginationItem = {
     type: 'page';
@@ -1124,6 +1276,31 @@ declare class HviPopover implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviPopover, "hvi-popover", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "autoPlacement": { "alias": "autoPlacement"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
+/**
+ * RequiredTag brukes sammen med labels i skjema for å indikere om et felt er
+ * påkrevd, valgfritt, eller om alle felt må fylles ut.
+ *
+ * Komponenten wrapper `HviTag` med forhåndsdefinerte tekster og farger basert på mode.
+ *
+ * @example
+ * ```html
+ * <hvi-required-tag />
+ * <hvi-required-tag mode="optional" />
+ * <hvi-required-tag mode="all-required" />
+ * ```
+ */
+declare class HviRequiredTag {
+    /**
+     * Bestemmer tekst og farge på taggen.
+     * - `required` (default): "Må fylles ut" (warning)
+     * - `optional`: "Valgfritt" (info)
+     * - `all-required`: "Alle felt må fylles ut" (warning)
+     */
+    mode: 'all-required' | 'required' | 'optional';
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviRequiredTag, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviRequiredTag, "hvi-required-tag", never, { "mode": { "alias": "mode"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * @summary
  * SearchClear is a button directive for clearing the search input.
@@ -1606,6 +1783,91 @@ declare class HviTag {
     static ɵcmp: i0.ɵɵComponentDeclaration<HviTag, "hvi-tag", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Textfield gir brukere muligheten til å skrive fritekst eller tall.
+ *
+ * Dette er en sammensatt komponent som bruker Field, Input/Textarea og Label under panseret.
+ * Bruk `multiline` for å bytte mellom input og textarea.
+ *
+ * @example
+ * ```html
+ * <hvi-textfield label="Navn"></hvi-textfield>
+ * ```
+ *
+ * @example
+ * ```html
+ * <hvi-textfield label="Beskrivelse" [multiline]="true" [rows]="4"></hvi-textfield>
+ * ```
+ *
+ * @example
+ * ```html
+ * <hvi-textfield label="Pris" prefix="NOK" suffix="pr. mnd"></hvi-textfield>
+ * ```
+ *
+ * @see {@link https://designsystemet.no/en/components/docs/textfield/code}
+ */
+declare class HviTextfield implements ControlValueAccessor {
+    /** Label for the textfield */
+    label: string;
+    /** Description text below the label */
+    description?: string;
+    /** Prefix text displayed before the input */
+    prefix?: string;
+    /** Suffix text displayed after the input */
+    suffix?: string;
+    /** Error message for the field */
+    error?: string;
+    /** Character counter limit. Displays a counter below the field. */
+    counterLimit?: number;
+    /**
+     * Label text shown in a warning Tag next to the label when the field is required.
+     * E.g. "Må fylles ut". Also sets the `required` attribute on the input.
+     */
+    requiredLabel?: string;
+    /** Autocomplete attribute for the input, e.g. 'given-name', 'email'. */
+    autocomplete?: string;
+    /** Render a textarea instead of input for multiline support */
+    multiline: boolean;
+    /** Supported input types */
+    type: 'number' | 'hidden' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'month' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    /** Number of rows for textarea (multiline mode) */
+    rows?: number;
+    /** Width of input in character count */
+    size?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Name attribute for the input */
+    name?: string;
+    /** Id attribute for the input. Auto-generated if not provided. */
+    id?: string;
+    /** Max length attribute for the input */
+    maxLength?: number;
+    /** Initial value for the input */
+    set value(v: string);
+    _value: string;
+    _disabled: boolean;
+    _readOnly: boolean;
+    _required: boolean;
+    set required(value: boolean);
+    set disabled(value: boolean);
+    set readOnly(value: boolean);
+    private readonly _uniqueId;
+    private _onChange;
+    _onTouched: () => void;
+    get inputId(): string;
+    _handleInput(event: Event): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HviTextfield, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HviTextfield, "hvi-textfield", never, { "label": { "alias": "label"; "required": false; }; "description": { "alias": "description"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "error": { "alias": "error"; "required": false; }; "counterLimit": { "alias": "counterLimit"; "required": false; }; "requiredLabel": { "alias": "requiredLabel"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_multiline: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readOnly: unknown;
+}
+
 /**
  * @summary
  * ToggleGroup collects related options. The component consists of a group of
@@ -1766,5 +2028,5 @@ declare class HviTooltip implements OnInit, OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<HviTooltip, "[hviTooltip]", never, { "hviTooltip": { "alias": "hviTooltip"; "required": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "tooltipAutoPlacement": { "alias": "tooltipAutoPlacement"; "required": false; }; "tooltipType": { "alias": "tooltipType"; "required": false; }; "tooltipShowDelay": { "alias": "tooltipShowDelay"; "required": false; }; "tooltipHideDelay": { "alias": "tooltipHideDelay"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { HviAlert, HviAvatar, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldCounter, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviPagination, HviParagraph, HviPopover, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSortableColumn, HviSpinner, HviTab, HviTabPanel, HviTable, HviTabs, HviTag, HviToggleGroup, HviToggleGroupItem, HviToggleGroupItemToken, HviTooltip, HviValidationKit, HviValidationMessage, fieldObserver, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
-export type { HviErrorSummaryItem, HviErrorSummaryMessages, HviValidationMessages, HviValidatorBundle, HviValidatorConfig, PageChangeEvent, PaginationItem, SortDirection, SpinnerSize, TablePageEvent, TableSortEvent };
+export { HviAlert, HviAvatar, HviAvatarStack, HviBadge, HviBadgePosition, HviBreadcrumbs, HviButton, HviCard, HviCardBlock, HviChipButton, HviChipLabel, HviControlInvalid, HviDetails, HviDetailsContent, HviDetailsSummary, HviDialog, HviDialogBlock, HviDivider, HviDropdown, HviErrorSummary, HviField, HviFieldAffix, HviFieldAffixes, HviFieldCounter, HviFieldDescription, HviFieldKit, HviFieldOptional, HviFieldValidation, HviFieldset, HviForm, HviForms, HviHeading, HviIcon, HviInput, HviLabel, HviLink, HviList, HviLogo, HviPagination, HviParagraph, HviPopover, HviRequiredTag, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSortableColumn, HviSpinner, HviTab, HviTabPanel, HviTable, HviTabs, HviTag, HviTextfield, HviToggleGroup, HviToggleGroupItem, HviToggleGroupItemToken, HviTooltip, HviValidationKit, HviValidationMessage, LOGOS, buildLogo, fieldObserver, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators, isElement, isInputLike, isLabel };
+export type { HviErrorSummaryItem, HviErrorSummaryMessages, HviValidationMessages, HviValidatorBundle, HviValidatorConfig, LogoCompany, LogoDefinition, LogoPath, LogoSize, PageChangeEvent, PaginationItem, SortDirection, SpinnerSize, TablePageEvent, TableSortEvent };