@helsevestikt/hviktor-angular 0.0.27 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @helsevestikt/hviktor-angular
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@helsevestikt/hviktor-angular)
|
|
4
|
-
[](https://github.com/HelseVestIKT/
|
|
4
|
+
[](https://github.com/HelseVestIKT/hviktor/blob/main/projects/hviktor/LICENSE)
|
|
5
5
|
|
|
6
6
|
> ⚠️ **Denne pakken er under aktiv utvikling.** API-et kan endres uten forvarsel. Bruk på egen risiko i produksjon.
|
|
7
7
|
|
|
@@ -47,6 +47,52 @@ import { HviButton } from '@helsevestikt/hviktor-angular';
|
|
|
47
47
|
export class MyComponent {}
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
+
## Tilgjengelige komponenter
|
|
51
|
+
|
|
52
|
+
| Komponent | Beskrivelse |
|
|
53
|
+
| ------------ | --------------------------------------------------------- |
|
|
54
|
+
| Alert | Varselmeldinger for å informere brukeren |
|
|
55
|
+
| Avatar | Profilbilde eller initialer |
|
|
56
|
+
| AvatarStack | AvatarStack |
|
|
57
|
+
| Badge | Små indikatorer og tellere |
|
|
58
|
+
| Breadcrumbs | Navigasjonssti |
|
|
59
|
+
| Button | Knapper for handlinger |
|
|
60
|
+
| Card | Kort for gruppering av innhold |
|
|
61
|
+
| Checkbox | Avkrysningsbokser for ett eller flere valg |
|
|
62
|
+
| Chip | Kompakte elementer for valg og filtrering |
|
|
63
|
+
| Details | Utvidbart innhold |
|
|
64
|
+
| Dialog | Modale dialogbokser |
|
|
65
|
+
| Divider | Skillelinjer mellom innhold |
|
|
66
|
+
| ErrorSummary | ErrorSummary er en oppsummering av feil i et skjema. |
|
|
67
|
+
| Field | Field komponent |
|
|
68
|
+
| Fieldset | Fieldset komponent |
|
|
69
|
+
| Forms | Skjemakomponenter og validering |
|
|
70
|
+
| Heading | Overskrifter |
|
|
71
|
+
| Icon | Ikoner |
|
|
72
|
+
| Input | Input komponent |
|
|
73
|
+
| Label | Etiketter |
|
|
74
|
+
| Link | Lenker |
|
|
75
|
+
| List | Lister |
|
|
76
|
+
| Logo | Logo komponent |
|
|
77
|
+
| Pagination | Pagination komponent |
|
|
78
|
+
| Paragraph | Avsnitt |
|
|
79
|
+
| Popover | Popup-innhold |
|
|
80
|
+
| Radio | Radio komponent |
|
|
81
|
+
| RequiredTag | RequiredTag komponent |
|
|
82
|
+
| Search | Search komponent |
|
|
83
|
+
| Select | Nedtrekksliste for valg fra en liste |
|
|
84
|
+
| Skeleton | Placeholder mens innhold lastes |
|
|
85
|
+
| SkipLink | SkipLink komponent |
|
|
86
|
+
| Spinner | Spinner komponent |
|
|
87
|
+
| Suggestion | Søkbar select med mulighet for å velge flere alternativer |
|
|
88
|
+
| Switch | Switch komponent |
|
|
89
|
+
| Table | Table komponent |
|
|
90
|
+
| Tag | Merkelapper for kategorisering |
|
|
91
|
+
| Textarea | Textarea komponent |
|
|
92
|
+
| Textfield | Textfield komponent |
|
|
93
|
+
| ToggleGroup | ToggleGroup komponent |
|
|
94
|
+
| Tooltip | Tooltip komponent |
|
|
95
|
+
|
|
50
96
|
## Dokumentasjon
|
|
51
97
|
|
|
52
98
|
Se [helsevestikt.github.io/hviktor](https://helsevestikt.github.io/hviktor/) for tilgjengelige komponenter, eksempler og API-dokumentasjon.
|
|
@@ -58,11 +104,11 @@ Se [helsevestikt.github.io/hviktor](https://helsevestikt.github.io/hviktor/) for
|
|
|
58
104
|
|
|
59
105
|
## Endringslogg
|
|
60
106
|
|
|
61
|
-
Se [CHANGELOG.md](https://github.com/HelseVestIKT/
|
|
107
|
+
Se [CHANGELOG.md](https://github.com/HelseVestIKT/hviktor/blob/main/projects/hviktor/CHANGELOG.md) for alle versjonsendringer.
|
|
62
108
|
|
|
63
109
|
## Bidra
|
|
64
110
|
|
|
65
|
-
Se [CONTRIBUTING.md](https://github.com/HelseVestIKT/
|
|
111
|
+
Se [CONTRIBUTING.md](https://github.com/HelseVestIKT/hviktor/blob/main/CONTRIBUTING.md) for utviklingsprosess og retningslinjer.
|
|
66
112
|
|
|
67
113
|
## Lisens
|
|
68
114
|
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, Directive, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, signal, computed, input, HostBinding, numberAttribute, ViewChild, ContentChildren, forwardRef } from '@angular/core';
|
|
2
|
+
import { Input, Component, Directive, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, inject, ElementRef, HostListener, Output, signal, computed, input, HostBinding, numberAttribute, viewChild, contentChildren, ViewChild, ContentChildren, forwardRef } from '@angular/core';
|
|
3
3
|
import '@u-elements/u-details';
|
|
4
4
|
import '@digdir/designsystemet-web';
|
|
5
5
|
import { Validators, FormGroupDirective, NgControl, ControlContainer, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
|
-
import '@u-elements/u-tabs';
|
|
7
6
|
import { NgTemplateOutlet } from '@angular/common';
|
|
7
|
+
import '@u-elements/u-datalist';
|
|
8
|
+
import '@u-elements/u-combobox';
|
|
9
|
+
import '@u-elements/u-tabs';
|
|
8
10
|
|
|
9
11
|
/**
|
|
10
12
|
* Alert provides users with information that is especially important for them to see and understand.
|
|
@@ -3747,6 +3749,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
3747
3749
|
type: Input
|
|
3748
3750
|
}] } });
|
|
3749
3751
|
|
|
3752
|
+
class HviSuggestionOption {
|
|
3753
|
+
templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
|
|
3754
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3755
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3756
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSuggestionOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3757
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: HviSuggestionOption, isStandalone: true, selector: "hvi-suggestion-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true });
|
|
3758
|
+
}
|
|
3759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSuggestionOption, decorators: [{
|
|
3760
|
+
type: Component,
|
|
3761
|
+
args: [{
|
|
3762
|
+
selector: 'hvi-suggestion-option',
|
|
3763
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
3764
|
+
template: ` <ng-template #tpl><ng-content /></ng-template> `,
|
|
3765
|
+
host: {},
|
|
3766
|
+
}]
|
|
3767
|
+
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
|
|
3768
|
+
|
|
3769
|
+
class HviSuggestionDatalist {
|
|
3770
|
+
options = contentChildren(HviSuggestionOption, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
|
|
3771
|
+
value;
|
|
3772
|
+
label;
|
|
3773
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSuggestionDatalist, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: HviSuggestionDatalist, isStandalone: true, selector: "hvi-suggestion-datalist", inputs: { value: "value", label: "label" }, host: { styleAttribute: "display: contents;" }, queries: [{ propertyName: "options", predicate: HviSuggestionOption, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3775
|
+
<u-datalist>
|
|
3776
|
+
@for (option of options(); track option) {
|
|
3777
|
+
<u-option [attr.data-value]="value" [attr.data-label]="label">
|
|
3778
|
+
<ng-container *ngTemplateOutlet="option.templateRef()" />
|
|
3779
|
+
</u-option>
|
|
3780
|
+
}
|
|
3781
|
+
</u-datalist>
|
|
3782
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
3783
|
+
}
|
|
3784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSuggestionDatalist, decorators: [{
|
|
3785
|
+
type: Component,
|
|
3786
|
+
args: [{
|
|
3787
|
+
selector: 'hvi-suggestion-datalist',
|
|
3788
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
3789
|
+
imports: [NgTemplateOutlet],
|
|
3790
|
+
template: `
|
|
3791
|
+
<u-datalist>
|
|
3792
|
+
@for (option of options(); track option) {
|
|
3793
|
+
<u-option [attr.data-value]="value" [attr.data-label]="label">
|
|
3794
|
+
<ng-container *ngTemplateOutlet="option.templateRef()" />
|
|
3795
|
+
</u-option>
|
|
3796
|
+
}
|
|
3797
|
+
</u-datalist>
|
|
3798
|
+
`,
|
|
3799
|
+
host: {
|
|
3800
|
+
style: 'display: contents;',
|
|
3801
|
+
},
|
|
3802
|
+
}]
|
|
3803
|
+
}], propDecorators: { options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HviSuggestionOption), { ...{
|
|
3804
|
+
descendants: true,
|
|
3805
|
+
}, isSignal: true }] }], value: [{
|
|
3806
|
+
type: Input
|
|
3807
|
+
}], label: [{
|
|
3808
|
+
type: Input
|
|
3809
|
+
}] } });
|
|
3810
|
+
|
|
3811
|
+
/**
|
|
3812
|
+
* @summary
|
|
3813
|
+
* Suggestion component description.
|
|
3814
|
+
*
|
|
3815
|
+
* @example
|
|
3816
|
+
* ```html
|
|
3817
|
+
* <hvi-suggestion></hvi-suggestion>
|
|
3818
|
+
* ```
|
|
3819
|
+
*
|
|
3820
|
+
* @see {@link https://designsystemet.no/en/components/docs/suggestion/code}
|
|
3821
|
+
*/
|
|
3822
|
+
class HviSuggestion {
|
|
3823
|
+
/** Mulighet for flervalg fra suggestion */
|
|
3824
|
+
multiple = false;
|
|
3825
|
+
empty = 'Ingen valgte';
|
|
3826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: HviSuggestion, isStandalone: true, selector: "hvi-suggestion", inputs: { multiple: "multiple", empty: "empty" }, ngImport: i0, template: `
|
|
3828
|
+
<ds-suggestion
|
|
3829
|
+
class="ds-suggestion"
|
|
3830
|
+
[attr.data-multiple]="multiple || undefined"
|
|
3831
|
+
[attr.data-empty]="empty"
|
|
3832
|
+
>
|
|
3833
|
+
<ng-content />
|
|
3834
|
+
</ds-suggestion>
|
|
3835
|
+
`, isInline: true });
|
|
3836
|
+
}
|
|
3837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: HviSuggestion, decorators: [{
|
|
3838
|
+
type: Component,
|
|
3839
|
+
args: [{
|
|
3840
|
+
selector: 'hvi-suggestion',
|
|
3841
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
3842
|
+
standalone: true,
|
|
3843
|
+
template: `
|
|
3844
|
+
<ds-suggestion
|
|
3845
|
+
class="ds-suggestion"
|
|
3846
|
+
[attr.data-multiple]="multiple || undefined"
|
|
3847
|
+
[attr.data-empty]="empty"
|
|
3848
|
+
>
|
|
3849
|
+
<ng-content />
|
|
3850
|
+
</ds-suggestion>
|
|
3851
|
+
`,
|
|
3852
|
+
host: {},
|
|
3853
|
+
}]
|
|
3854
|
+
}], propDecorators: { multiple: [{
|
|
3855
|
+
type: Input
|
|
3856
|
+
}], empty: [{
|
|
3857
|
+
type: Input
|
|
3858
|
+
}] } });
|
|
3859
|
+
|
|
3750
3860
|
/**
|
|
3751
3861
|
* @summary
|
|
3752
3862
|
* Table brukes for å vise strukturert informasjon på en ryddig og oversiktlig måte.
|
|
@@ -5024,5 +5134,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
5024
5134
|
* Generated bundle index. Do not edit.
|
|
5025
5135
|
*/
|
|
5026
5136
|
|
|
5027
|
-
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, 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, analyzeFormRequired, buildLogo, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators };
|
|
5137
|
+
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, HviInput, HviLabel, HviLink, HviList, HviLogo, HviPagination, HviParagraph, HviPopover, HviRequiredTag, HviSearch, HviSearchClear, HviSelect, HviSkeleton, HviSkipLink, HviSortableColumn, HviSpinner, HviSuggestion, HviSuggestionDatalist, HviSuggestionOption, HviTab, HviTabPanel, HviTable, HviTabs, HviTag, HviTextfield, HviToggleGroup, HviToggleGroupItem, HviToggleGroupItemToken, HviTooltip, HviValidationKit, HviValidationMessage, LOGOS, analyzeFormRequired, buildLogo, hviCustom, hviEmail, hviExtractMessages, hviExtractValidators, hviMax, hviMaxLength, hviMin, hviMinLength, hviNullValidator, hviPattern, hviRequired, hviRequiredTrue, hviValidators };
|
|
5028
5138
|
//# sourceMappingURL=helsevestikt-hviktor-angular.mjs.map
|