diff --git a/packages/fhi-designsystem/custom-elements-manifest.config.js b/packages/fhi-designsystem/custom-elements-manifest.config.js
index 5a5de394..cd9eaf63 100644
--- a/packages/fhi-designsystem/custom-elements-manifest.config.js
+++ b/packages/fhi-designsystem/custom-elements-manifest.config.js
@@ -1,39 +1,31 @@
import { cemSorterPlugin } from '@wc-toolkit/cem-sorter';
-import { typeParserPlugin } from '@wc-toolkit/type-parser';
+import { typeParserPlugin, getTsProgram } from '@wc-toolkit/type-parser';
import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
-const options = {
- outdir: './.temp/',
- webTypesFileName: 'web-types.json',
- descriptionSrc: 'description',
- hideSlotDocs: false,
- hideEventDocs: false,
- hideCssPropertiesDocs: false,
- hideCssPartsDocs: false,
- hideMethodDocs: true,
- excludeHtml: false,
- excludeCss: true,
- labels: {
- slots: 'Slot Section',
- events: 'Custom Events',
- cssProperties: 'CSS Variables',
- cssParts: 'Style Hooks',
- methods: 'Methods',
- },
- typesSrc: 'expandedType',
-};
-
export default {
globs: ['src/components/**/*.component.ts'],
exclude: ['**/*.test.ts', '**/*.stories.ts'],
outdir: './.temp/',
LitElement: true,
+ overrideModuleCreation({ ts, globs }) {
+ const program = getTsProgram(ts, globs, 'tsconfig.json');
+ return program
+ .getSourceFiles()
+ .filter(sourceFile =>
+ globs.find(glob => sourceFile.fileName.includes(glob)),
+ );
+ },
plugins: [
cemSorterPlugin({
deprecatedLast: true,
customFields: ['customProperty'],
}),
- typeParserPlugin({ propertyName: 'expandedType' }),
- customElementJetBrainsPlugin(options),
+ typeParserPlugin(),
+ customElementJetBrainsPlugin({
+ outdir: './.temp/',
+ webTypesFileName: 'web-types.json',
+ descriptionSrc: 'description',
+ typesSrc: 'parsedType',
+ }),
],
};
diff --git a/packages/fhi-designsystem/package.json b/packages/fhi-designsystem/package.json
index ccbe3abb..25073b74 100644
--- a/packages/fhi-designsystem/package.json
+++ b/packages/fhi-designsystem/package.json
@@ -38,13 +38,14 @@
"type": "module",
"scripts": {
"dev": "vite",
- "build": "pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean",
+ "build": "pnpm analyze && pnpm generate:angular-wrappers && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean",
"build:cdn": "tsc && cross-env DEPLOY_TARGET=cdn vite build",
"build:npm": "tsc && cross-env DEPLOY_TARGET=npm vite build",
"build:github": "tsc && cross-env DEPLOY_TARGET=github vite build",
"storybook": "storybook dev -p 6006",
"storybook:build": "pnpm analyze && storybook build",
"generate:icons": "node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder",
+ "generate:angular-wrappers": "node ./scripts/wrapper-generators/angular/generate-angular-wrappers.js --manifest .temp/custom-elements.json --output .temp/angular-wrappers",
"test": "wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit",
"lint": "pnpm lint:eslint && pnpm lint:prettier",
"lint:eslint": "eslint \"**/*.{js,ts}\"",
diff --git a/packages/fhi-designsystem/scripts/generate-icon-components.js b/packages/fhi-designsystem/scripts/generate-icon-components.js
index b47cad0c..1203c411 100644
--- a/packages/fhi-designsystem/scripts/generate-icon-components.js
+++ b/packages/fhi-designsystem/scripts/generate-icon-components.js
@@ -105,16 +105,14 @@ export class ${webComponentName} extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
*/
- @property({ type: String }) color: string = "currentcolor";
+ @property({ type: String }) color?: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
*/
- @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | \`\${number}px\` | \`\${number}rem\` = 'medium';
+ @property({ type: String }) size?: 'xsmall' | 'small' | 'medium' | 'large' | number | \`\${number}px\` | \`\${number}rem\` = 'medium';
private get _size(): string {
switch (this.size) {
diff --git a/packages/fhi-designsystem/scripts/wrapper-generators/angular/generate-angular-wrappers.js b/packages/fhi-designsystem/scripts/wrapper-generators/angular/generate-angular-wrappers.js
new file mode 100644
index 00000000..5409b464
--- /dev/null
+++ b/packages/fhi-designsystem/scripts/wrapper-generators/angular/generate-angular-wrappers.js
@@ -0,0 +1,253 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const snakeToPascal = text =>
+ text
+ .split('-')
+ .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+ .join('');
+
+const snakeToCamel = text => {
+ const pascal = snakeToPascal(text);
+ return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+};
+
+const generateFormAccessor = (
+ angularTagName,
+ webComponentTagName,
+ componentDescription,
+) => {
+ const accessorName = `${snakeToPascal(webComponentTagName)}ValueAccessor`;
+
+ let valueLocation;
+ switch (webComponentTagName) {
+ case 'fhi-text-input':
+ case 'fhi-date-input':
+ valueLocation = 'value';
+ break;
+ case 'fhi-checkbox':
+ case 'fhi-radio':
+ valueLocation = 'checked';
+ break;
+ case 'fhi-button':
+ break;
+ default:
+ throw new Error(
+ `No value location defined for web component ${webComponentTagName}`,
+ );
+ }
+
+ // We do not need a value accessor if there is no value to control on the form-associated web component. e.g fhi-button.
+ if (!valueLocation) {
+ return '';
+ }
+
+ return `
+ /** @description
+ * A ControlValueAccessor for writing a value and listening to changes on an ${webComponentTagName} element.
+ * ${componentDescription} */
+ @Directive({
+ selector: '${angularTagName}[formControlName],${angularTagName}[formControl],${angularTagName}[ngModel]',
+ standalone: true,
+ host: {'(change)': 'onChange($any($event.target).checked)', '(blur)': 'onTouched()'},
+ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ${accessorName}), multi: true }]
+ })
+ export class ${accessorName} implements ControlValueAccessor, AfterViewInit {
+ onChange: (value: unknown) => void = () => { };
+ onTouched: () => void = () => { };
+
+ private _host = inject(ElementRef);
+
+ private _initialValue: unknown = null;
+ private _initialDisabledState: boolean = false;
+ private _webComponent?: { [key: string]: unknown };
+
+ ngAfterViewInit(): void {
+ this._webComponent = this._host.nativeElement.querySelector('${webComponentTagName}');
+
+ if (!this._webComponent) {
+ console.error('Could not find ${webComponentTagName} web component within the ${angularTagName} host element.');
+ return;
+ }
+
+ this._webComponent["${valueLocation}"] = this._initialValue;
+ this._webComponent["disabled"] = this._initialDisabledState;
+ }
+
+ writeValue(value: unknown): void {
+ if (!this._webComponent) {
+ this._initialValue = value;
+ return;
+ }
+
+ this._webComponent["value"] = value;
+ }
+
+ setDisabledState(isDisabled: boolean): void {
+ if (!this._webComponent) {
+ this._initialDisabledState = isDisabled;
+ return;
+ }
+
+ this._webComponent["disabled"] = isDisabled;
+ }
+
+ registerOnTouched(fn: () => void): void {
+ this.onTouched = fn;
+ }
+
+ registerOnChange(fn: (value: unknown) => void): void {
+ this.onChange = fn;
+ }
+ }
+ `;
+};
+
+const isOptionalAttribute = attribute =>
+ attribute.type.text.includes('undefined') || attribute.default !== undefined;
+
+const main = ({ manifestPath, outputPath }) => {
+ const indexTsFile = [];
+
+ if (!manifestPath) {
+ console.error(
+ 'Please provide the --manifest argument with the path to the custom element manifest file.',
+ );
+ process.exit(1);
+ }
+
+ if (!outputPath) {
+ console.error(
+ 'Please provide the --output argument with the path to the output directory.',
+ );
+ process.exit(1);
+ }
+
+ if (!fs.existsSync(outputPath)) {
+ fs.mkdirSync(outputPath, { recursive: true });
+ }
+
+ const folderContent = fs.readdirSync(outputPath);
+
+ if (folderContent.length > 0) {
+ const folderContent = fs.readdirSync(outputPath);
+
+ folderContent.forEach(file => {
+ const filePath = path.join(outputPath, file);
+ if (fs.lstatSync(filePath).isFile()) {
+ fs.unlinkSync(filePath);
+ }
+ });
+ }
+
+ let manifest;
+ try {
+ manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+ } catch (error) {
+ console.error('Error reading manifest file:', error);
+ }
+
+ manifest.modules.forEach(module => {
+ const componentClass = module.declarations.find(
+ declaration => declaration.kind === 'class',
+ );
+
+ if (!componentClass || !componentClass.customElement) {
+ return;
+ }
+
+ const className = componentClass.name;
+ const componentDescription = componentClass.description || '';
+ const webComponentTagName = componentClass.tagName;
+ const attributes = componentClass.attributes || [];
+ const events = componentClass.events || [];
+ const slots = componentClass.slots || [];
+ const isFormAssociated = componentClass.members.some(
+ member => member.name === 'formAssociated',
+ );
+
+ if (!webComponentTagName) {
+ throw new Error(`No tagName found for component class ${className}`);
+ }
+
+ const angularTagName = webComponentTagName.split('fhi-').join('fhi-ng-');
+
+ const template = `
+ /** This file is autogenerated. Do not edit directly. **/
+ import { Component${attributes.length > 0 ? ', input' : ''}${events.length > 0 ? ', output' : ''}${isFormAssociated ? `, Directive, forwardRef, AfterViewInit, inject, ElementRef` : ''}, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+ import '../${webComponentTagName}';
+
+ ${isFormAssociated ? generateFormAccessor(angularTagName, webComponentTagName, componentDescription) : ''}
+
+ /** @description ${componentDescription} */
+ @Component({
+ selector: '${angularTagName}',
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ standalone: true,
+ template: ${`\`
+ <${webComponentTagName}
+ ${attributes.map(attribute => `[${attribute.fieldName}]="${attribute.fieldName}()"`).join(' ')}
+ ${events.map(event => `(${event.name})="handle${snakeToPascal(event.name)}($event)"`).join(' ')}
+ >
+ ${slots.map(slot => ``).join('\n')}
+
+ \``},
+ })
+ export class ${className}AngularWrapper {
+ ${attributes
+ .map(
+ attribute => `
+ /** ${attribute.description || ''} */
+ ${attribute.fieldName} = input${isOptionalAttribute(attribute) ? '' : '.required'}<${attribute.parsedType?.text ?? attribute.type.text}>( ${isOptionalAttribute(attribute) ? `${attribute.default}, ` : ''}{ alias: "${attribute.name}" })
+ `,
+ )
+ .join('')}
+
+ ${events
+ .map(
+ event => `
+ /** ${event.description || ''} */
+ ${snakeToCamel(event.name)}Output = output( { alias: "${event.name}" } )
+ handle${snakeToPascal(event.name)}(event: Event) {
+ event.stopPropagation();
+ this.${snakeToCamel(event.name)}Output.emit(event);
+ }
+ `,
+ )
+ .join('')}
+ }
+ `;
+
+ fs.writeFileSync(
+ `${path.join(outputPath, `${webComponentTagName}.component.ts`)}`,
+ template,
+ 'utf8',
+ );
+
+ indexTsFile.push(`export * from './${webComponentTagName}.component';`);
+ });
+
+ fs.writeFileSync(
+ path.join(outputPath, 'index.ts'),
+ indexTsFile.join('\n'),
+ 'utf8',
+ );
+
+ console.log(
+ `Successfully generated ${indexTsFile.length} Angular wrappers to ${outputPath}`,
+ );
+};
+
+main({
+ manifestPath:
+ process.argv.indexOf('--manifest') !== -1
+ ? process.argv[process.argv.indexOf('--manifest') + 1]
+ : undefined,
+ outputPath:
+ process.argv.indexOf('--output') !== -1
+ ? process.argv[process.argv.indexOf('--output') + 1]
+ : undefined,
+});
diff --git a/packages/fhi-designsystem/src/components/fhi-button/fhi-button.component.ts b/packages/fhi-designsystem/src/components/fhi-button/fhi-button.component.ts
index ae349897..33ca19de 100644
--- a/packages/fhi-designsystem/src/components/fhi-button/fhi-button.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-button/fhi-button.component.ts
@@ -26,7 +26,6 @@ export class FhiButton extends LitElement {
* See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}
*
* @reflect
- * @type {'accent' | 'neutral' | 'danger'}
*/
@property({ type: String, reflect: true }) color:
| 'accent'
@@ -40,9 +39,8 @@ export class FhiButton extends LitElement {
* See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}
*
* @reflect
- * @type {'strong' | 'subtle' | 'outlined' | 'text'}
*/
- @property({ type: String, reflect: true }) variant:
+ @property({ type: String, reflect: true }) variant?:
| 'strong'
| 'subtle'
| 'outlined'
@@ -54,9 +52,8 @@ export class FhiButton extends LitElement {
* See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}
*
* @reflect
- * @type {'large' | 'medium' | 'small'}
*/
- @property({ type: String, reflect: true }) size:
+ @property({ type: String, reflect: true }) size?:
| 'large'
| 'medium'
| 'small' = 'medium';
@@ -64,30 +61,25 @@ export class FhiButton extends LitElement {
/**
* Disables the button. This changes its appearance and makes it non-interactive.
* @reflect
- * @type {boolean}
*/
- @property({ type: Boolean, reflect: true }) disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled?: boolean = false;
/**
* Styles the button for icon-only content.
*
* If you only have an icon as the child of the button, then you should set this property to `true`.
*
- * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.
- *
- * @type {boolean}
*/
@property({ type: Boolean, attribute: 'icon-only' })
- iconOnly: boolean = false;
+ iconOnly?: boolean = false;
/**
* Sets the button's type. This determines the button's behavior when used within a form.
* The predefined types conform to standard HTML button types.
*
* For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}
- * @type {'button' | 'submit' | 'reset'}
*/
- @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';
+ @property({ type: String }) type?: 'button' | 'submit' | 'reset' = 'submit';
private _internals: ElementInternals;
@@ -165,7 +157,7 @@ export class FhiButton extends LitElement {
private _dispatchClickEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `click`.
+ * Standard DOM event with the type `click`.
* This event is dispatched when the button is clicked, either via mouse or keyboard interaction.
* */
this.dispatchEvent(
diff --git a/packages/fhi-designsystem/src/components/fhi-checkbox/fhi-checkbox.component.ts b/packages/fhi-designsystem/src/components/fhi-checkbox/fhi-checkbox.component.ts
index 12551140..a1307210 100644
--- a/packages/fhi-designsystem/src/components/fhi-checkbox/fhi-checkbox.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-checkbox/fhi-checkbox.component.ts
@@ -17,25 +17,21 @@ export const FhiCheckboxSelector = 'fhi-checkbox';
*/
@customElement(FhiCheckboxSelector)
export class FhiCheckbox extends LitElement {
- /** @internal */
static readonly formAssociated = true;
/**
* The text label assigned to and displayed next to the checkbox.
* You should always provide a label.
- * @type {string}
*/
@property({ type: String }) label?: string = undefined;
/**
* The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.
- * @type {string}
*/
@property({ type: String }) name?: string = undefined;
/**
* The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.
- * @type {string}
*/
@property({ type: String }) value: string = 'on';
@@ -43,22 +39,20 @@ export class FhiCheckbox extends LitElement {
* Sets the visual status of the checkbox. There is currently only one status available: `error`.
* The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.
* @reflect
- * @type {'error' | undefined}
+ *
*/
- @property({ type: String, reflect: true }) status?: 'error' | undefined;
+ @property({ type: String, reflect: true }) status?: 'error';
/**
* Whether the checkbox is checked or not.
- * @type {boolean}
*/
- @property({ type: Boolean }) checked? = false;
+ @property({ type: Boolean }) checked?: boolean = false;
/**
* Disables the checkbox. This changes its appearance and makes it non-interactive.
* @reflect
- * @type {boolean}
*/
- @property({ type: Boolean, reflect: true }) disabled? = false;
+ @property({ type: Boolean, reflect: true }) disabled?: boolean = false;
private _internals: ElementInternals;
@@ -91,7 +85,7 @@ export class FhiCheckbox extends LitElement {
private _dispatchChangeEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `change`.
+ * Standard DOM event with the type `change`.
* This event is dispatched when the checkbox is checked or unchecked.
*/
this.dispatchEvent(new Event('change', { bubbles: true }));
@@ -99,7 +93,7 @@ export class FhiCheckbox extends LitElement {
private _dispatchInputEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `input`.
+ * Standard DOM event with the type `input`.
* This event is dispatched when the checkbox is checked or unchecked.
*/
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
diff --git a/packages/fhi-designsystem/src/components/fhi-date-input/fhi-date-input.component.ts b/packages/fhi-designsystem/src/components/fhi-date-input/fhi-date-input.component.ts
index 02bd6fd0..b0d0e891 100644
--- a/packages/fhi-designsystem/src/components/fhi-date-input/fhi-date-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-date-input/fhi-date-input.component.ts
@@ -1,4 +1,4 @@
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, PropertyValues } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import '../icons/fhi-icon-calendar.component.js';
@@ -22,40 +22,34 @@ export type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-
*/
@customElement(FhiDateInputSelector)
export class FhiDateInput extends LitElement {
- /** @internal */
static readonly formAssociated = true;
/**
* The text that labels the input field.
* An input field should always have a label to ensure accessibility.
- * @type {string}
*/
@property({ type: String }) label?: string = undefined;
/**
* The message shown beneath the input field.
* This is often used to provide additional information or feedback to the user.
- * @type {string}
*/
@property({ type: String }) message?: string = undefined;
/**
* The help-text shown above the input field.
* This is often used to provide additional information to the user.
- * @type {string}
*/
@property({ type: String, attribute: 'help-text' }) helpText?: string =
undefined;
/**
* Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.
- * @type {string}
*/
@property({ type: String }) min?: FhiDateValue = undefined;
/**
* Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.
- * @type {string}
*/
@property({ type: String }) max?: FhiDateValue = undefined;
@@ -64,29 +58,25 @@ export class FhiDateInput extends LitElement {
*
* The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.
* @reflect
- * @type {'error'}
*/
@property({ type: String, reflect: true }) status?: 'error' = undefined;
/**
* Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.
* @reflect
- * @type {boolean}
+ *
*/
@property({ type: Boolean, reflect: true }) readonly? = false;
/**
* Disables the input. This changes its appearance and makes it non-interactive.
* @reflect
- * @type {boolean}
*/
@property({ type: Boolean, reflect: true }) disabled? = false;
@query('#input-element')
private _input!: HTMLInputElement;
- private _name?: string | undefined = undefined;
-
/**
* The name of the input. This is submitted with the form data as a `key`.
*
@@ -94,21 +84,9 @@ export class FhiDateInput extends LitElement {
* See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}
*
* @reflect
- * @type {string}
*/
@property({ type: String, reflect: true })
- get name(): string | undefined {
- return this._name;
- }
-
- set name(newName: string | undefined) {
- const oldName = this._name;
- this._name = newName;
- this.requestUpdate('name', oldName);
- this._internals.setFormValue(this.value ?? null);
- }
-
- private _value?: string = '';
+ name?: string = '';
/**
* The default value of the input field, formatted as `YYYY-MM-DD`.
@@ -117,20 +95,9 @@ export class FhiDateInput extends LitElement {
*
* This attribute conforms with the standard HTML `value` attribute for input fields.
* See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}
- *
- * @type {string}
*/
@property({ type: String })
- get value(): FhiDateValue {
- return this._value as FhiDateValue;
- }
-
- set value(newValue: FhiDateValue) {
- const oldValue = this._value;
- this._value = newValue;
- this.requestUpdate('value', oldValue);
- this._internals.setFormValue(this._value ?? null);
- }
+ value?: string = '';
private _internals: ElementInternals;
@@ -144,13 +111,19 @@ export class FhiDateInput extends LitElement {
this._internals.setFormValue(this.value ?? null);
}
+ protected updated(changedProperties: PropertyValues): void {
+ if (changedProperties.has('value') || changedProperties.has('name')) {
+ this._internals.setFormValue(this.value ?? null);
+ }
+ }
+
private _handleChange(): void {
this._dispatchChangeEvent();
}
private _dispatchChangeEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `change`.
+ * Standard DOM event with the type `change`.
* This event is dispatched when the value of the input changes.
*/
this.dispatchEvent(
@@ -163,14 +136,13 @@ export class FhiDateInput extends LitElement {
private _handleInput(event: Event): void {
this.value = this._input.value as FhiDateValue;
- this._internals.setFormValue(this.value ?? null);
event.stopPropagation();
this._dispatchInputEvent();
}
private _dispatchInputEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `input`.
+ * Standard DOM event with the type `input`.
* This event is dispatched when the value of the input changes.
*/
this.dispatchEvent(
diff --git a/packages/fhi-designsystem/src/components/fhi-flex/fhi-flex.component.ts b/packages/fhi-designsystem/src/components/fhi-flex/fhi-flex.component.ts
index 24bc0a67..b3695a58 100644
--- a/packages/fhi-designsystem/src/components/fhi-flex/fhi-flex.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-flex/fhi-flex.component.ts
@@ -25,9 +25,8 @@ export class FhiFlex extends LitElement {
* Sets the flex direction to either row or column.
* This determines the main axis along which the flex items are laid out.
* @reflect
- * @type {'row' | 'column'}
*/
- @property({ type: String, reflect: true }) direction: 'row' | 'column' =
+ @property({ type: String, reflect: true }) direction?: 'row' | 'column' =
'row';
/**
@@ -35,9 +34,8 @@ export class FhiFlex extends LitElement {
* It can be one of the preset values, a rem or px value, or a number.
* If you give a number, it will be treated as pixels.
* @reflect
- * @type {'small' | 'medium' | 'large' | number | string}
*/
- @property({ type: String, reflect: true }) gap:
+ @property({ type: String, reflect: true }) gap?:
| 'small'
| 'medium'
| 'large'
@@ -46,21 +44,18 @@ export class FhiFlex extends LitElement {
/**
* Enables wrapping of flex items onto multiple lines if they exceed the container's width.
* @reflect
- * @type {boolean}
*/
- @property({ type: Boolean, reflect: true }) wrap = false;
+ @property({ type: Boolean, reflect: true }) wrap?: boolean = false;
/**
* Justifies flex items along the main axis.
- * @type {'start' | 'center' | 'end'}
*/
- @property({ type: String }) justify: 'start' | 'center' | 'end' = 'start';
+ @property({ type: String }) justify?: 'start' | 'center' | 'end' = 'start';
/**
* Aligns flex items along the cross axis.
- * @type {'stretch' | 'start' | 'center' | 'end' | 'baseline'}
*/
- @property({ type: String }) align:
+ @property({ type: String }) align?:
| 'stretch'
| 'start'
| 'center'
diff --git a/packages/fhi-designsystem/src/components/fhi-grid/fhi-grid.component.ts b/packages/fhi-designsystem/src/components/fhi-grid/fhi-grid.component.ts
index 9b4eca26..206905e6 100644
--- a/packages/fhi-designsystem/src/components/fhi-grid/fhi-grid.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-grid/fhi-grid.component.ts
@@ -15,14 +15,12 @@ type FhiGapWidthUnit = `${number}${FhiUnitType}` | number;
*
* @tag fhi-grid
* @element fhi-grid
- *
*/
@customElement(FhiGridSelector)
export class FhiGrid extends LitElement {
/**
* Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.
* If you give a number, it will be treated as pixels.
- * @type {'small' | 'medium' | 'large' | number | string}
*/
@property({ type: String }) gap:
| 'small'
@@ -32,7 +30,6 @@ export class FhiGrid extends LitElement {
/**
* Sets the number of columns in the grid layout.
- * @type {number}
*/
@property({ type: Number }) columns = 12;
diff --git a/packages/fhi-designsystem/src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts b/packages/fhi-designsystem/src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts
index ecd48d04..9a7e9828 100644
--- a/packages/fhi-designsystem/src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts
@@ -30,31 +30,27 @@ export class FhiModalDialog extends LitElement {
* This property is reflected as an attribute and will therefor also change if the user toggles the dialog or
* if you use the `show()` and `close()` methods.
* @reflect
- * @type {boolean}
*/
@property({ type: Boolean, reflect: true })
- open: boolean = false;
+ open?: boolean = false;
/**
* Sets the maximum width of the dialog.
- * @type {'small' | 'medium'`}
*/
@property({ type: String, attribute: 'size', reflect: true })
- size: 'small' | 'medium' = 'medium';
+ size?: 'small' | 'medium' = 'medium';
/**
* Label for the close button.
- * @type {string}
*/
@property({ type: String, attribute: 'close-button-label' })
- closeButtonLabel: string = '';
+ closeButtonLabel!: string;
/**
* The heading text of the dialog. This is displayed at the top of the dialog.
- * @type {string}
*/
@property({ type: String })
- heading: string = '';
+ heading!: string;
@query('dialog')
private _dialog!: HTMLDialogElement;
@@ -70,8 +66,6 @@ export class FhiModalDialog extends LitElement {
private _mouseDownInsideDialog: boolean = false;
updated(changedProperties: PropertyValues) {
- super.updated(changedProperties);
-
if (changedProperties.has('open')) {
if (this.open) {
this.show();
@@ -87,24 +81,22 @@ export class FhiModalDialog extends LitElement {
}
}
- if (changedProperties.has('closeButtonLabel')) {
- if (
- typeof this.closeButtonLabel !== 'string' ||
- this.closeButtonLabel.length === 0
- ) {
- throw new TypeError(
- 'The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.',
- );
- }
+ if (
+ typeof this.closeButtonLabel !== 'string' ||
+ this.closeButtonLabel.length === 0
+ ) {
+ throw new TypeError(
+ 'The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.',
+ );
}
- if (changedProperties.has('closeButtonLabel')) {
- if (typeof this.heading !== 'string' || this.heading.length === 0) {
- throw new TypeError(
- 'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',
- );
- }
+ if (typeof this.heading !== 'string' || this.heading.length === 0) {
+ throw new TypeError(
+ 'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',
+ );
}
+
+ super.updated(changedProperties);
}
protected firstUpdated(_changedProperties: PropertyValues): void {
@@ -165,7 +157,7 @@ export class FhiModalDialog extends LitElement {
private _dispatchToggleEvent() {
/**
- * @type {Event} - Standard DOM event with the type `toggle`
+ * Standard DOM event with the type `toggle`
* This event is fired whenever the dialog is opened or closed.
* */
this.dispatchEvent(
@@ -178,10 +170,10 @@ export class FhiModalDialog extends LitElement {
private _dispatchCloseEvent() {
/**
- * @type {Event} - Standard DOM event with the type `close`
+ * Standard DOM event with the type `close`
* This event is fired whenever the dialog is closed.
* */
- this.dispatchEvent(new CloseEvent('close'));
+ this.dispatchEvent(new Event('close'));
}
private _handleDialogMouseUp(event: MouseEvent) {
diff --git a/packages/fhi-designsystem/src/components/fhi-radio/fhi-radio.component.ts b/packages/fhi-designsystem/src/components/fhi-radio/fhi-radio.component.ts
index 94323143..399d3af0 100644
--- a/packages/fhi-designsystem/src/components/fhi-radio/fhi-radio.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-radio/fhi-radio.component.ts
@@ -22,7 +22,6 @@ export class FhiRadio extends LitElement {
/**
* The text label assigned to and displayed next to the radio.
* You should always provide a label.
- * @type {string}
*/
@property({ type: String }) label?: string = undefined;
@@ -30,7 +29,6 @@ export class FhiRadio extends LitElement {
* The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.
* All `` components with the same name belong to the same group.
* @reflect
- * @type {string}
*/
@property({ type: String, reflect: true }) name?: string = undefined;
@@ -38,26 +36,22 @@ export class FhiRadio extends LitElement {
* Sets the visual status of the radio. There is currently only one status available: `error`.
* The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.
* @reflect
- * @type {'error' | undefined}
*/
@property({ type: String, reflect: true }) status?: 'error' = undefined;
/**
* Disables the radio. This changes its appearance and makes it non-interactive.
* @reflect
- * @type {boolean}
*/
@property({ type: Boolean, reflect: true }) disabled? = false;
/**
* Whether the radio button is checked or not.
- * @type {boolean}
*/
@property({ type: Boolean }) checked? = false;
/**
* The value of the radio. This is submitted with the form data as a `value` when the radio is checked.
- * @type {string}
*/
@property({ type: String }) value: string = 'on';
@@ -204,7 +198,7 @@ export class FhiRadio extends LitElement {
private _dispatchChangeEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `change`.
+ * Standard DOM event with the type `change`.
* This event is dispatched when the radio is checked or unchecked.
*/
this.dispatchEvent(new Event('change', { bubbles: true }));
@@ -212,7 +206,7 @@ export class FhiRadio extends LitElement {
private _dispatchInputEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `input`.
+ * Standard DOM event with the type `input`.
* This event is dispatched when the radio is checked or unchecked.
*/
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
diff --git a/packages/fhi-designsystem/src/components/fhi-tag/fhi-tag.component.ts b/packages/fhi-designsystem/src/components/fhi-tag/fhi-tag.component.ts
index fbe0056e..2ea07a25 100644
--- a/packages/fhi-designsystem/src/components/fhi-tag/fhi-tag.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-tag/fhi-tag.component.ts
@@ -21,7 +21,6 @@ export class FhiTag extends LitElement {
/**
* Sets the color of the tag.
* @reflect
- * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}
*/
@property({ type: String, reflect: true }) color:
| 'neutral'
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index df159d3a..2a1196c0 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -1,4 +1,4 @@
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, PropertyValues } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
@@ -22,21 +22,18 @@ export class FhiTextInput extends LitElement {
/**
* The text that labels the input field.
* An input field should always have a label to ensure accessibility.
- * @type {string}
*/
@property({ type: String }) label?: string = undefined;
/**
* The message shown beneath the input field.
* This is often used to provide additional information or feedback to the user.
- * @type {string}
*/
@property({ type: String }) message?: string = undefined;
/**
* The message shown above the input field.
* This is often used to provide additional information to the user.
- * @type {string}
*/
@property({ type: String, attribute: 'help-text' }) helpText?: string =
undefined;
@@ -44,7 +41,6 @@ export class FhiTextInput extends LitElement {
/**
* Sets the placeholder text for the input field.
* This text is displayed when the input field is empty, providing a hint to the user about the expected input.
- * @type {string}
*/
@property({ type: String }) placeholder?: string = undefined;
@@ -53,29 +49,21 @@ export class FhiTextInput extends LitElement {
*
* The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.
* @reflect
- * @type {'error'}
*/
@property({ type: String, reflect: true }) status?: 'error' = undefined;
/**
* Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.
* @reflect
- * @type {boolean}
*/
@property({ type: Boolean, reflect: true }) readonly? = false;
/**
* Disables the input. This changes its appearance and makes it non-interactive.
* @reflect
- * @type {boolean}
*/
@property({ type: Boolean, reflect: true }) disabled? = false;
- @query('#input-element')
- private _input!: HTMLInputElement;
-
- private _name?: string = undefined;
-
/**
* The name of the input. This is submitted with the form data as a `key`.
*
@@ -83,20 +71,9 @@ export class FhiTextInput extends LitElement {
* See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}
*
* @reflect
- * @type {string}
*/
@property({ type: String, reflect: true })
- get name(): string | undefined {
- return this._name;
- }
- set name(newName: string) {
- const oldName = this._name;
- this._name = newName;
- this.requestUpdate('name', oldName);
- this._internals.setFormValue(this._value);
- }
-
- private _value: string = '';
+ name: string = '';
/**
* The default value of the input field.
@@ -105,20 +82,12 @@ export class FhiTextInput extends LitElement {
*
* This attribute conforms with the standard HTML `value` attribute for input fields.
* See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}
- *
- * @type {string}
*/
@property({ type: String })
- get value(): string {
- return this._value;
- }
+ value: string = '';
- set value(newValue: string) {
- const oldValue = this._value;
- this._value = newValue;
- this.requestUpdate('value', oldValue);
- this._internals.setFormValue(this._value);
- }
+ @query('#input-element')
+ private _input!: HTMLInputElement;
private _internals: ElementInternals;
@@ -132,9 +101,15 @@ export class FhiTextInput extends LitElement {
this._internals.setFormValue(this.value);
}
+ protected updated(changedProperties: PropertyValues): void {
+ if (changedProperties.has('value') || changedProperties.has('name')) {
+ this._internals.setFormValue(this.value);
+ }
+ }
+
private _dispatchChangeEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `change`.
+ * Standard DOM event with the type `change`.
* This event is dispatched when the value of the input changes.
*/
this.dispatchEvent(
@@ -147,7 +122,7 @@ export class FhiTextInput extends LitElement {
private _dispatchInputEvent(): void {
/**
- * @type {Event} - Standard DOM event with the type `input`.
+ * Standard DOM event with the type `input`.
* This event is dispatched when the value of the input changes.
*/
this.dispatchEvent(
diff --git a/packages/fhi-designsystem/src/components/fhi-tooltip/fhi-tooltip.component.ts b/packages/fhi-designsystem/src/components/fhi-tooltip/fhi-tooltip.component.ts
index df821c19..8d071fae 100644
--- a/packages/fhi-designsystem/src/components/fhi-tooltip/fhi-tooltip.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-tooltip/fhi-tooltip.component.ts
@@ -41,31 +41,26 @@ export type TooltipPlacement =
export class FhiTooltip extends LitElement {
/**
* The content displayed inside the tooltip. This should be a brief, informative message.
- * @type {string}
*/
@property({ type: String }) message: string = '';
/**
* The placement of the tooltip relative to its trigger element.
- * @type {"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"}
*/
@property({ type: String }) placement: TooltipPlacement = 'top';
/**
* The delay in milliseconds before the tooltip appears on hover.
- * @type {number}
*/
@property({ type: Number }) delay: number = 500;
/**
* The event that triggers the tooltip to show. Can be 'hover' or 'click'.
- * @type {'click' | 'hover'}
*/
@property({ type: String }) trigger: 'click' | 'hover' = 'hover';
/**
* The maximum width of the tooltip.
- * @type {string}
*/
@property({ type: String, attribute: 'max-width' }) maxWidth? = '18.75rem';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-left.component.ts
index 05c39023..4e69c6fe 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowDownLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-right.component.ts
index d77e2a55..697c7bd7 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowDownRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down.component.ts
index 6868d3b0..f4215c47 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-down.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowDown extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-left.component.ts
index d3f730b2..5dec3103 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right-left.component.ts
index 40808631..03e1d838 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowRightLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right.component.ts
index a90019aa..40ebd967 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-down.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-down.component.ts
index 8006889d..d782b1a8 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-down.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-down.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowUpDown extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-left.component.ts
index 3d428a4f..322bc5a7 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowUpLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-right.component.ts
index 71335030..39e1d150 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowUpRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up.component.ts
index 05815266..3ec8e1e3 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-arrow-up.component.ts
@@ -21,14 +21,14 @@ export class FhiIconArrowUp extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-bell.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-bell.component.ts
index 27f12419..4f4692e1 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-bell.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-bell.component.ts
@@ -21,14 +21,14 @@ export class FhiIconBell extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar-clock.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar-clock.component.ts
index 4fd98fc0..49b7b99f 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar-clock.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar-clock.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCalendarClock extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar.component.ts
index 5eb07a31..b287d2d6 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-calendar.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCalendar extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar-stacked.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar-stacked.component.ts
index 45de6b9e..b2b5afb7 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar-stacked.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar-stacked.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartBarStacked extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar.component.ts
index 657c84ad..b3d3ae83 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-bar.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartBar extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column-stacked.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column-stacked.component.ts
index abec138e..5b8959a5 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column-stacked.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column-stacked.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartColumnStacked extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column.component.ts
index 1b2b440f..0ccac98b 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-column.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartColumn extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-line.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-line.component.ts
index 20056791..233b5a52 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-line.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-line.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartLine extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-no-axes-combined.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-no-axes-combined.component.ts
index 132b448a..cdbcee93 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-no-axes-combined.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-no-axes-combined.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartNoAxesCombined extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-pie.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-pie.component.ts
index 06150035..31945cb2 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-pie.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chart-pie.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChartPie extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-check.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-check.component.ts
index fd37e7c7..9b6971bd 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-check.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-check.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCheck extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-down.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-down.component.ts
index 4a53df53..81216c8c 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-down.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-down.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronDown extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-left.component.ts
index 1e25768e..822b0a69 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-right.component.ts
index 3afebd8c..51642cbb 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-up.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-up.component.ts
index 7c8efa2f..66e86f82 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-up.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevron-up.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronUp extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-down.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-down.component.ts
index 80378198..f73258d6 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-down.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-down.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronsDown extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-left.component.ts
index 1c696e3a..3909b92d 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronsLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-right.component.ts
index 0a347048..a692b3ae 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronsRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-up.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-up.component.ts
index aa58acf6..1d7e2cee 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-up.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-chevrons-up.component.ts
@@ -21,14 +21,14 @@ export class FhiIconChevronsUp extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-down.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-down.component.ts
index 1a6dadd6..f13a3aa9 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-down.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-down.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleArrowDown extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-left.component.ts
index 2e79dc07..7a29448e 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleArrowLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-right.component.ts
index 354d99c2..3281d44f 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleArrowRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-up.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-up.component.ts
index 3c3839dc..827b937b 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-up.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-arrow-up.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleArrowUp extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check-big.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check-big.component.ts
index e7c7376d..69f1b85c 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check-big.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check-big.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleCheckBig extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check.component.ts
index e7e3ea6c..b772dd58 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-check.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleCheck extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-down.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-down.component.ts
index 440284e0..4940c66d 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-down.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-down.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleChevronDown extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-left.component.ts
index f6a06976..ed13d65f 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleChevronLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-right.component.ts
index c2f32040..b7e1350d 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleChevronRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-up.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-up.component.ts
index bf5f1cd8..83b38bb3 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-up.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-chevron-up.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleChevronUp extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-exclamation.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-exclamation.component.ts
index af323d0e..0d64a068 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-exclamation.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-exclamation.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleExclamation extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-info.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-info.component.ts
index a13f23cf..ac1d7e65 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-info.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-info.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleInfo extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-minus.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-minus.component.ts
index b97e3706..2c5ee08f 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-minus.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-minus.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleMinus extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-plus.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-plus.component.ts
index b020266d..71806c80 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-plus.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-plus.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCirclePlus extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-question.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-question.component.ts
index 9262b28c..359b46b6 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-question.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-question.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleQuestion extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-x.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-x.component.ts
index 8cac1211..415ece3e 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-x.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle-x.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircleX extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle.component.ts
index e540eefa..c56bbb8a 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-circle.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-circle.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCircle extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-clock.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-clock.component.ts
index 5a1f686c..ec8dd37e 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-clock.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-clock.component.ts
@@ -21,14 +21,14 @@ export class FhiIconClock extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-copy.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-copy.component.ts
index 72dd8263..f8785cf4 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-copy.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-copy.component.ts
@@ -21,14 +21,14 @@ export class FhiIconCopy extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-download.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-download.component.ts
index af458389..985d4acc 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-download.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-download.component.ts
@@ -21,14 +21,14 @@ export class FhiIconDownload extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis-vertical.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis-vertical.component.ts
index 615c0dcd..626681fe 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis-vertical.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis-vertical.component.ts
@@ -21,14 +21,14 @@ export class FhiIconEllipsisVertical extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis.component.ts
index 2f2560d3..687c2b08 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-ellipsis.component.ts
@@ -21,14 +21,14 @@ export class FhiIconEllipsis extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-exclamation.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-exclamation.component.ts
index 9d20b302..56c6d1a8 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-exclamation.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-exclamation.component.ts
@@ -21,14 +21,14 @@ export class FhiIconExclamation extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-expand.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-expand.component.ts
index 3e6937d2..e6924650 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-expand.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-expand.component.ts
@@ -21,14 +21,14 @@ export class FhiIconExpand extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-external-link.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-external-link.component.ts
index f1edb49c..0f054899 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-external-link.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-external-link.component.ts
@@ -21,14 +21,14 @@ export class FhiIconExternalLink extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-eye-off.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-eye-off.component.ts
index 49933186..1954cafc 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-eye-off.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-eye-off.component.ts
@@ -21,14 +21,14 @@ export class FhiIconEyeOff extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-eye.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-eye.component.ts
index 66b21b2c..96f8f90a 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-eye.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-eye.component.ts
@@ -21,14 +21,14 @@ export class FhiIconEye extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-file.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-file.component.ts
index 1d8610b1..c1d42cb9 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-file.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-file.component.ts
@@ -21,14 +21,14 @@ export class FhiIconFile extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-filter.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-filter.component.ts
index 7f94ca4c..a529c87d 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-filter.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-filter.component.ts
@@ -21,14 +21,14 @@ export class FhiIconFilter extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-folder.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-folder.component.ts
index 97cf0bd8..0640babb 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-folder.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-folder.component.ts
@@ -21,14 +21,14 @@ export class FhiIconFolder extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-gear.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-gear.component.ts
index 56522466..2a301406 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-gear.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-gear.component.ts
@@ -21,14 +21,14 @@ export class FhiIconGear extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-grid-9-dots.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-grid-9-dots.component.ts
index 2670d04e..c1d3e638 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-grid-9-dots.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-grid-9-dots.component.ts
@@ -21,14 +21,14 @@ export class FhiIconGrid9Dots extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-horizontal.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-horizontal.component.ts
index 58f258fc..8bc39963 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-horizontal.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-horizontal.component.ts
@@ -21,14 +21,14 @@ export class FhiIconGripHorizontal extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-vertical.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-vertical.component.ts
index 1ee0ee35..d878d6f5 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-vertical.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-grip-vertical.component.ts
@@ -21,14 +21,14 @@ export class FhiIconGripVertical extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-history.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-history.component.ts
index c349f11b..797a1ce8 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-history.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-history.component.ts
@@ -21,14 +21,14 @@ export class FhiIconHistory extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-info.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-info.component.ts
index 636fc1b1..6040726d 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-info.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-info.component.ts
@@ -21,14 +21,14 @@ export class FhiIconInfo extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2-off.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2-off.component.ts
index 2579dae1..8fb7b177 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2-off.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2-off.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLink2Off extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2.component.ts
index 8458950e..88c769d8 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-link-2.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLink2 extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-link.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-link.component.ts
index 982d31b1..29edf849 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-link.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-link.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLink extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-lock-open.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-lock-open.component.ts
index de61fdf8..c274763b 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-lock-open.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-lock-open.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLockOpen extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-lock.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-lock.component.ts
index 16f65413..4e0112f5 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-lock.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-lock.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLock extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-log-in.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-log-in.component.ts
index 16c46a0f..cd571d98 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-log-in.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-log-in.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLogIn extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-log-out.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-log-out.component.ts
index 606e92dd..cf3303cd 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-log-out.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-log-out.component.ts
@@ -21,14 +21,14 @@ export class FhiIconLogOut extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-mail.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-mail.component.ts
index 0578b8df..ff5d5778 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-mail.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-mail.component.ts
@@ -21,14 +21,14 @@ export class FhiIconMail extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-map-pin.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-map-pin.component.ts
index f440b811..fdb41f0e 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-map-pin.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-map-pin.component.ts
@@ -21,14 +21,14 @@ export class FhiIconMapPin extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-menu.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-menu.component.ts
index 4f835ba1..37b348e0 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-menu.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-menu.component.ts
@@ -21,14 +21,14 @@ export class FhiIconMenu extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-message.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-message.component.ts
index 2eb7f218..614454d7 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-message.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-message.component.ts
@@ -21,14 +21,14 @@ export class FhiIconMessage extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-minus.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-minus.component.ts
index 5e5102d5..7ebf77c4 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-minus.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-minus.component.ts
@@ -21,14 +21,14 @@ export class FhiIconMinus extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-octagon-alert.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-octagon-alert.component.ts
index 8163c374..57d5614b 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-octagon-alert.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-octagon-alert.component.ts
@@ -21,14 +21,14 @@ export class FhiIconOctagonAlert extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-paperclip.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-paperclip.component.ts
index 06b7f761..c89acf28 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-paperclip.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-paperclip.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPaperclip extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-pencil.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-pencil.component.ts
index 34afca38..093f7b9f 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-pencil.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-pencil.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPencil extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-phone.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-phone.component.ts
index df2c20f2..8c83ea3b 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-phone.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-phone.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPhone extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-pin-off.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-pin-off.component.ts
index df661b8c..cd7b23e8 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-pin-off.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-pin-off.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPinOff extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-pin.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-pin.component.ts
index 3b74c1bf..63f7f7a9 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-pin.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-pin.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPin extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-plus.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-plus.component.ts
index 77f56705..92086c24 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-plus.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-plus.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPlus extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-printer.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-printer.component.ts
index 681cd3e3..c0af76c3 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-printer.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-printer.component.ts
@@ -21,14 +21,14 @@ export class FhiIconPrinter extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-question.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-question.component.ts
index 79f027e0..1ab6c8c6 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-question.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-question.component.ts
@@ -21,14 +21,14 @@ export class FhiIconQuestion extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-refresh.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-refresh.component.ts
index b840910c..f11022ab 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-refresh.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-refresh.component.ts
@@ -21,14 +21,14 @@ export class FhiIconRefresh extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-left.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-left.component.ts
index 8b38ae77..c76fdc51 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-left.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-left.component.ts
@@ -21,14 +21,14 @@ export class FhiIconRotateLeft extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-right.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-right.component.ts
index 9fdc7944..e23bf72d 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-right.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-rotate-right.component.ts
@@ -21,14 +21,14 @@ export class FhiIconRotateRight extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-search.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-search.component.ts
index 1753b93b..dbaa29d9 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-search.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-search.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSearch extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-send.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-send.component.ts
index 6b98c262..b47a38b3 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-send.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-send.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSend extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-share.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-share.component.ts
index a42cf5d6..623cc9ed 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-share.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-share.component.ts
@@ -21,14 +21,14 @@ export class FhiIconShare extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-sheet.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-sheet.component.ts
index 7c9b50a8..903d6ecd 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-sheet.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-sheet.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSheet extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check-big.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check-big.component.ts
index fec2507b..8d9bed52 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check-big.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check-big.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSquareCheckBig extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check.component.ts
index 7abe390c..a516db96 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-check.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSquareCheck extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-pen.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-pen.component.ts
index 28f4743b..83f35d82 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-pen.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-pen.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSquarePen extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-x.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-x.component.ts
index d5d0e481..40e149c3 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-square-x.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-square-x.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSquareX extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-square.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-square.component.ts
index ca2a6bed..6bba71e7 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-square.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-square.component.ts
@@ -21,14 +21,14 @@ export class FhiIconSquare extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-trash.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-trash.component.ts
index 1be1826f..d974adab 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-trash.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-trash.component.ts
@@ -21,14 +21,14 @@ export class FhiIconTrash extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-triangle-alert.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-triangle-alert.component.ts
index e0bcc968..6ca3f39e 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-triangle-alert.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-triangle-alert.component.ts
@@ -21,14 +21,14 @@ export class FhiIconTriangleAlert extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-upload.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-upload.component.ts
index 1e0271e6..2dc5776c 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-upload.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-upload.component.ts
@@ -21,14 +21,14 @@ export class FhiIconUpload extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-user.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-user.component.ts
index 82917e78..50f69230 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-user.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-user.component.ts
@@ -21,14 +21,14 @@ export class FhiIconUser extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/icons/fhi-icon-x.component.ts b/packages/fhi-designsystem/src/components/icons/fhi-icon-x.component.ts
index feb8ff14..99e9707b 100644
--- a/packages/fhi-designsystem/src/components/icons/fhi-icon-x.component.ts
+++ b/packages/fhi-designsystem/src/components/icons/fhi-icon-x.component.ts
@@ -21,14 +21,14 @@ export class FhiIconX extends LitElement {
/**
* Sets the color for the icon.
* Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)
- * @type {string}
+ *
*/
@property({ type: String }) color: string = "currentcolor";
/**
* Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.
* Number values are treated as px.
- * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}
+ *
*/
@property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';
diff --git a/packages/fhi-designsystem/src/components/typography/fhi-body/fhi-body.component.ts b/packages/fhi-designsystem/src/components/typography/fhi-body/fhi-body.component.ts
index 45c80a88..97dc61f1 100644
--- a/packages/fhi-designsystem/src/components/typography/fhi-body/fhi-body.component.ts
+++ b/packages/fhi-designsystem/src/components/typography/fhi-body/fhi-body.component.ts
@@ -21,9 +21,8 @@ export class FhiBody extends LitElement {
/**
* Sets the font size of the given text.
* @reflect
- * @type {'large' | 'medium' | 'small'}
*/
- @property({ type: String, reflect: true }) size:
+ @property({ type: String, reflect: true }) size?:
| 'large'
| 'medium'
| 'small' = 'medium';
@@ -40,8 +39,6 @@ export class FhiBody extends LitElement {
* This text will be in the primary text color.
*
* ```
- *
- * @type {string}
*/
@property({ type: String }) color?: string;
diff --git a/packages/fhi-designsystem/src/components/typography/fhi-display/fhi-display.component.ts b/packages/fhi-designsystem/src/components/typography/fhi-display/fhi-display.component.ts
index ae49fb20..d15cc434 100644
--- a/packages/fhi-designsystem/src/components/typography/fhi-display/fhi-display.component.ts
+++ b/packages/fhi-designsystem/src/components/typography/fhi-display/fhi-display.component.ts
@@ -24,9 +24,8 @@ export class FhiDisplay extends LitElement {
/**
* Sets the font size of the given text.
* @reflect
- * @type {'large' | 'medium' | 'small'}
*/
- @property({ type: String, reflect: true }) size:
+ @property({ type: String, reflect: true }) size?:
| 'large'
| 'medium'
| 'small' = 'medium';
@@ -43,14 +42,11 @@ export class FhiDisplay extends LitElement {
* This text will be in the primary text color.
*
* ```
- *
- * @type {string}
*/
@property({ type: String }) color?: string;
/**
* Sets the heading level for the text, corresponding to HTML heading elements `
` to `
`.
- * @type {1 | 2 | 3 | 4 | 5 | 6}
*/
@property({ type: Number }) level!: DisplayLevel;
diff --git a/packages/fhi-designsystem/src/components/typography/fhi-headline/fhi-headline.component.ts b/packages/fhi-designsystem/src/components/typography/fhi-headline/fhi-headline.component.ts
index 46dbc1ea..6c42e72b 100644
--- a/packages/fhi-designsystem/src/components/typography/fhi-headline/fhi-headline.component.ts
+++ b/packages/fhi-designsystem/src/components/typography/fhi-headline/fhi-headline.component.ts
@@ -24,7 +24,6 @@ export class FhiHeadline extends LitElement {
/**
* Sets the size of the text styles.
* @reflect
- * @type {'large' | 'medium' | 'small'}
*/
@property({ type: String, reflect: true }) size:
| 'large'
@@ -43,14 +42,11 @@ export class FhiHeadline extends LitElement {
* This text will be in the primary text color.
*
* ```
- *
- * @type {string}
*/
@property({ type: String }) color?: string;
/**
* Sets the heading level for the text, corresponding to HTML heading elements `
` to `
`.
- * @type {1 | 2 | 3 | 4 | 5 | 6}
*/
@property({ type: Number }) level!: HeadlineLevel;
diff --git a/packages/fhi-designsystem/src/components/typography/fhi-label/fhi-label.component.ts b/packages/fhi-designsystem/src/components/typography/fhi-label/fhi-label.component.ts
index b324ecbd..895bd5a0 100644
--- a/packages/fhi-designsystem/src/components/typography/fhi-label/fhi-label.component.ts
+++ b/packages/fhi-designsystem/src/components/typography/fhi-label/fhi-label.component.ts
@@ -21,7 +21,6 @@ export class FhiLabel extends LitElement {
/**
* Sets the font size of the given text.
* @reflect
- * @type {'large' | 'medium' | 'small'}
*/
@property({ type: String, reflect: true }) size:
| 'large'
@@ -40,8 +39,6 @@ export class FhiLabel extends LitElement {
* This text will be in the primary text color.
*
* ```
- *
- * @type {string}
*/
@property({ type: String }) color?: string;
diff --git a/packages/fhi-designsystem/src/components/typography/fhi-title/fhi-title.component.ts b/packages/fhi-designsystem/src/components/typography/fhi-title/fhi-title.component.ts
index 3ac15ea1..4e62a534 100644
--- a/packages/fhi-designsystem/src/components/typography/fhi-title/fhi-title.component.ts
+++ b/packages/fhi-designsystem/src/components/typography/fhi-title/fhi-title.component.ts
@@ -24,9 +24,8 @@ export class FhiTitle extends LitElement {
/**
* Sets the size of the text styles.
* @reflect
- * @type {'large' | 'medium' | 'small'}
*/
- @property({ type: String, reflect: true }) size:
+ @property({ type: String, reflect: true }) size?:
| 'large'
| 'medium'
| 'small' = 'medium';
@@ -43,14 +42,11 @@ export class FhiTitle extends LitElement {
* This text will be in the primary text color.
*
* ```
- *
- * @type {string}
*/
@property({ type: String }) color?: string;
/**
* Sets the heading level for the text, corresponding to HTML heading elements `
` to `
`.
- * @type {1 | 2 | 3 | 4 | 5 | 6}
*/
@property({ type: Number }) level!: TitleLevel;
diff --git a/packages/fhi-designsystem/src/storybook/get_started/angular.mdx b/packages/fhi-designsystem/src/storybook/get_started/angular.mdx
index 1a3cbf90..302a01a8 100644
--- a/packages/fhi-designsystem/src/storybook/get_started/angular.mdx
+++ b/packages/fhi-designsystem/src/storybook/get_started/angular.mdx
@@ -14,79 +14,58 @@ Kjør følgende kommando for å legge til komponentbiblioteket i prosjektet ditt
npm install @folkehelseinstituttet/designsystem
```
-**eller**, om `npm` ikke er et alternativ, kan du bruke vår CDN. Legg til følgende script og link tag under `` i hoved-HTML-filen for appen:
-
-```html
-
-
-
-```
-
-
- Vi anbefaler ikke å bruke CDN i produksjon.
- Det krever at klienten laster ned hele biblioteket, uavhengig av hvilke komponenter som faktisk brukes. Dette påvirker ytelsen og båndbreddebruken negativt.
-
- Bruk bare CDN hvis `npm` ikke er et alternativ.
-
-
Pakkene inneholder komponentene, en CSS-fil med våre design tokens og font-filen for skrifttypen Roboto Flex. Roboto Flex er allerede tatt i bruk i komponentene og er gjort tilgjengelig som en design token. Du trenger ikke å gjøre noe mer utover dette for å ta den i bruk.
-
- **Obs:** FHI Designsystem er fullt kompatibelt med Typescript, men det er ikke enda typesatt. Det betyr at intellisense for importering og bruk, samt typesjekking, er foreløpig begrenset. Se våre *Ofte stilte spørsmål* for [info om intellisense og typesjekking](/docs/ofte-stilte-spørsmål-typesjekking-intellisense--docs).
-
-
## Bruk
-Angular har innebygd støtte for webkomponenter. Du kan derfor bruke komponentene direkte i Angular-prosjektet ditt.
+For full _Intellisense_ og typestøtte i ditt Angular-prosjekt, anbefaler vi at du bruker Angular-wrappers som ligger i `@folkehelseinstituttet/designsystem/angular-wrappers`.
-Her er et eksempel av bruk av `fhi-button`-komponenten i et Angular-prosjekt. Vi tar utgangspunkt i at du har brukt `npm` da du installerte pakken.
+Angular wrappers må kompileres av Angular sin kompilator. Legg derfor til følgende i `tsconfig.app.json`-filen din for å inkludere wrapperne i kompileringen:
-Først importerer vi filen med [Design Tokens](?path=/docs/design-tokens-introduksjon--docs). Denne filen må importeres før du tar i bruk komponentbiblioteket, helst via angular.json, der en setter følgende property:
```json
-projects.[your-project].architect.build.options.styles: ["@folkehelseinstituttet/designsystem/theme/default.css"]
+{
+ "compilerOptions": {
+ "paths": {
+ "@folkehelseinstituttet/designsystem/angular-wrappers/*": [
+ "./node_modules/@folkehelseinstituttet/designsystem/angular-wrappers/*"
+ ],
+ }
+ },
+ "include": [
+ "./node_modules/@folkehelseinstituttet/designsystem/angular-wrappers/*"
+ ]
+}
```
-Så må vi fortelle Angular at vi bruker webkomponenter.
-Vi gjør dette ved å legge til CUSTOM_ELEMENTS_SCHEMA
-i Angular-komponent-filen sin komponentdekoratør.
+Bruker du `@angular/build:application` til å bygge applikasjonen din, må du ekskludere wrapperne fra `prebuild` i `angular.json`-filen din:
-```ts
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+```json
+ projects.[your-project].architect.serve.options.prebundle.exclude: ["@folkehelseinstituttet/designsystem/angular-wrappers/*"]
+```
-@Component({
- ...
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
+Her er et eksempel av bruk av `fhi-button`-komponenten i et Angular-prosjekt.
+Først importerer vi filen med [Design Tokens](?path=/docs/design-tokens-introduksjon--docs). Denne filen må importeres før du tar i bruk komponentbiblioteket, helst via `angular.json`, der en setter følgende property:
+```json
+projects.[your-project].architect.build.options.styles: ["@folkehelseinstituttet/designsystem/theme/default.css"]
```
-**Eller**, om du bruker Angular sitt gamle modulsystem, skal du legge til `CUSTOM_ELEMENTS_SCHEMA` i modulen din.
-
+Før du bruker komponenten må du først importere den. I dette tilfellet importerer vi wrapperen til `fhi-button`. Wrapperen vil automatisk importere, registrere og bruke den underleggende web-komponenten:
```ts
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FhiButtonAngularWrapper } from "@folkehelseinstituttet/designsystem/angular-wrappers/fhi-button.component";
-@NgModule({
+@Component({
...
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ imports: [FhiButtonAngularWrapper],
})
-
-```
-Før du bruker komponenten må du først importere den. Importér komponenten i Angular-komponentens Typescript-fil. I dette tilfellet importerer vi `fhi-button`:
-```ts
-import '@folkehelseinstituttet/designsystem/fhi-button';
```
-Nå kan du bruke komponenten som om det var et vanlig HTML-element i din Angular-komponents HTML-fil:
+**Merk:** Webkomponentene bruker `fhi-` som prefix. I Angular-wrapperene bruker vi `fhi-ng-` som prefix for å unngå navnekonflikter.
+
+Du kan nå bruke wrapperen i Angular-komponentens HTML-mal slik:
```html
-Click me!
+Click me!
```
_Obs: `handleClick` er brukt her som et eksempel. Du må selv lage en metode i Angular-komponenten som håndterer klikk-eventet._
diff --git a/packages/fhi-designsystem/vite.config.js b/packages/fhi-designsystem/vite.config.js
index 1438b78d..70e4b34c 100644
--- a/packages/fhi-designsystem/vite.config.js
+++ b/packages/fhi-designsystem/vite.config.js
@@ -141,11 +141,7 @@ export default defineConfig(({ mode }) => {
dest: './',
},
{
- src: '.temp/custom-elements.json',
- dest: './',
- },
- {
- src: '.temp/web-types.json',
+ src: '.temp/*',
dest: './',
},
],