@folkehelseinstituttet/designsystem 0.30.0 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +621 -571
- package/fhi-body.js +10 -10
- package/fhi-body.js.map +1 -1
- package/fhi-button.js +12 -8
- package/fhi-button.js.map +1 -1
- package/fhi-date-input.js +62 -24
- package/fhi-date-input.js.map +1 -1
- package/fhi-display.js +13 -9
- package/fhi-display.js.map +1 -1
- package/fhi-headline.js +13 -9
- package/fhi-headline.js.map +1 -1
- package/fhi-label.js +10 -10
- package/fhi-label.js.map +1 -1
- package/fhi-modal-dialog.js +2 -2
- package/fhi-modal-dialog.js.map +1 -1
- package/fhi-tag.js +1 -1
- package/fhi-tag.js.map +1 -1
- package/fhi-text-input.js +88 -52
- package/fhi-text-input.js.map +1 -1
- package/fhi-title.js +13 -9
- package/fhi-title.js.map +1 -1
- package/fhi-tooltip.js +397 -395
- package/fhi-tooltip.js.map +1 -1
- package/index.js +354 -354
- package/package.json +12 -47
- package/web-types.json +280 -260
package/fhi-date-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /**\n * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) max?: FhiDateValue = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string | undefined = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n\n set name(newName: string | undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /**\n * The default value of the input field, formatted as `YYYY-MM-DD`.\n *\n * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n <div class=\"input-container\">\n <input\n type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${this.value ?? ''}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n @keydown=${this._handleKeyDown}\n />\n <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n\n --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n /* label */\n --color-label-text: var(--fhi-color-neutral-text-default);\n --color-label-text-error: var(--fhi-color-danger-text-default);\n\n --typography-label-font-family: var(--fhi-typography-label-small-font);\n --typography-label-font-weight: var(\n --fhi-typography-label-small-font-weight\n );\n --typography-label-font-size: var(--fhi-typography-label-small-size);\n --typography-label-line-height: var(\n --fhi-typography-label-small-line-height\n );\n --typography-label-letter-spacing: var(\n --fhi-typography-label-small-letter-spacing\n );\n\n --dimension-label-padding-bottom: var(--fhi-spacing-050);\n\n /* input */\n --color-input-text: var(--fhi-color-neutral-text-default);\n --color-input-text-error: var(--fhi-color-danger-text-default);\n --color-input-background: var(--fhi-color-neutral-background-default);\n --color-input-background-active: var(\n --fhi-color-accent-background-default\n );\n --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n --color-input-background-error: var(\n --fhi-color-danger-background-default\n );\n --color-input-border: var(--fhi-color-neutral-border-default);\n --color-input-border-hover: var(--fhi-color-accent-border-default);\n --color-input-border-active: var(--fhi-color-accent-border-strong);\n --color-input-border-error: var(--fhi-color-danger-border-strong);\n --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n --color-input-selection-background: var(\n --fhi-color-accent-surface-active\n );\n\n --typography-input-font-weight: var(\n --fhi-typography-body-medium-font-weight\n );\n --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-input-line-height: var(\n --fhi-typography-body-medium-line-height\n );\n --typography-input-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n --dimension-input-height: var(--fhi-spacing-500);\n --dimension-input-border-radius: var(--fhi-border-radius-050);\n --dimension-input-padding-left: var(--fhi-spacing-150);\n --dimension-input-padding-right: var(--fhi-spacing-150);\n\n --motion-input-transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n /* icon */\n --dimension-icon-margin-right: var(--fhi-spacing-100);\n --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n /* message */\n --color-message-text: var(--fhi-color-neutral-text-default);\n --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n --typography-message-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-message-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-message-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-message-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n\n --dimension-message-margin-top: var(--fhi-spacing-050);\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n width: var(--dimension-width);\n\n label {\n font-weight: var(--typography-label-font-weight);\n font-size: var(--typography-label-font-size);\n line-height: var(--typography-label-line-height);\n letter-spacing: var(--typography-label-letter-spacing);\n color: var(--color-label-text);\n padding-bottom: var(--dimension-label-padding-bottom);\n }\n\n input[type='date'] {\n font-family: var(--typography-font-family);\n font-weight: var(--typography-input-font-weight);\n font-size: var(--typography-input-font-size);\n line-height: var(--typography-input-line-height);\n letter-spacing: var(--typography-input-letter-spacing);\n box-sizing: border-box;\n height: var(--dimension-input-height);\n border: var(--dimension-input-border-width) solid\n var(--color-input-border);\n border-radius: var(--dimension-input-border-radius);\n padding: 0 var(--dimension-input-padding-right) 0\n var(--dimension-input-padding-left);\n color: var(--color-input-text);\n background-color: var(--color-input-background);\n transition: var(--motion-input-transition);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n outline: none;\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n }\n .message {\n margin: var(--dimension-message-margin-top) 0 0 0;\n color: var(--color-message-text);\n font-weight: var(--typography-message-font-weight);\n font-size: var(--typography-message-font-size);\n line-height: var(--typography-message-line-height);\n letter-spacing: var(--typography-message-letter-spacing);\n }\n [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--dimension-input-height);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--dimension-icon-margin-right);\n height: fit-content;\n transition: var(--motion-input-transition);\n border-radius: var(--dimension-icon-border-radius);\n &:focus {\n outline: solid var(--color-icon-focus-outline);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--dimension-input-border-width) solid\n var(--color-input-border);\n &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input[type='date'] {\n border-color: var(--color-input-border-error);\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n .message {\n color: var(--color-message-text-error);\n }\n .date-icon {\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The help-text shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /**\n * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) max?: FhiDateValue = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string | undefined = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n\n set name(newName: string | undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /**\n * The default value of the input field, formatted as `YYYY-MM-DD`.\n *\n * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n <div class=\"input-container\">\n <input\n type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${this.value ?? ''}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n @keydown=${this._handleKeyDown}\n />\n <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n\n --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n /* label */\n --color-label-text: var(--fhi-color-neutral-text-default);\n --color-label-text-error: var(--fhi-color-danger-text-default);\n\n --typography-label-font-family: var(--fhi-typography-label-small-font);\n --typography-label-font-weight: var(\n --fhi-typography-label-small-font-weight\n );\n --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n --typography-label-line-height: var(\n --fhi-typography-label-small-line-height\n );\n --typography-label-letter-spacing: var(\n --fhi-typography-label-small-letter-spacing\n );\n --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n /* input */\n --color-input-text: var(--fhi-color-neutral-text-default);\n --color-input-text-error: var(--fhi-color-danger-text-default);\n --color-input-background: var(--fhi-color-neutral-background-default);\n --color-input-background-active: var(\n --fhi-color-accent-background-default\n );\n --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n --color-input-background-error: var(\n --fhi-color-danger-background-default\n );\n --color-input-border: var(--fhi-color-neutral-border-default);\n --color-input-border-hover: var(--fhi-color-accent-border-default);\n --color-input-border-active: var(--fhi-color-accent-border-strong);\n --color-input-border-error: var(--fhi-color-danger-border-strong);\n --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n --color-input-selection-background: var(\n --fhi-color-accent-surface-active\n );\n\n --typography-input-font-weight: var(\n --fhi-typography-body-medium-font-weight\n );\n --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-input-line-height: var(\n --fhi-typography-body-medium-line-height\n );\n --typography-input-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n --dimension-input-height: var(--fhi-spacing-500);\n --dimension-input-border-radius: var(--fhi-border-radius-050);\n --dimension-input-padding-left: var(--fhi-spacing-150);\n --dimension-input-padding-right: var(--fhi-spacing-150);\n\n --motion-input-transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n /* icon */\n --dimension-icon-margin-right: var(--fhi-spacing-100);\n --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n /* message */\n --color-message-text: var(--fhi-color-neutral-text-default);\n --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n --typography-message-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-message-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-message-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-message-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n\n --dimension-message-margin-top: var(--fhi-spacing-050);\n\n /* help-text */\n --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n --color-help-text-text-error: var(--fhi-color-danger-text-default);\n\n --typography-help-text-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-help-text-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-help-text-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-help-text-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n --dimension-help-text-margin-bottom: var(--fhi-spacing-050);\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n width: var(--dimension-width);\n\n label {\n font-weight: var(--typography-label-font-weight);\n font-size: var(--typography-label-font-size);\n line-height: var(--typography-label-line-height);\n letter-spacing: var(--typography-label-letter-spacing);\n color: var(--color-label-text);\n margin: 0 0 var(--dimension-label-margin-bottom) 0;\n }\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input[type='date'] {\n font-family: var(--typography-font-family);\n font-weight: var(--typography-input-font-weight);\n font-size: var(--typography-input-font-size);\n line-height: var(--typography-input-line-height);\n letter-spacing: var(--typography-input-letter-spacing);\n box-sizing: border-box;\n height: var(--dimension-input-height);\n border: var(--dimension-input-border-width) solid\n var(--color-input-border);\n border-radius: var(--dimension-input-border-radius);\n padding: 0 var(--dimension-input-padding-right) 0\n var(--dimension-input-padding-left);\n margin-top: var(--dimension-input-margin-top);\n color: var(--color-input-text);\n background-color: var(--color-input-background);\n transition: var(--motion-input-transition);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n outline: none;\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n }\n .message {\n margin: var(--dimension-message-margin-top) 0 0 0;\n color: var(--color-message-text);\n font-weight: var(--typography-message-font-weight);\n font-size: var(--typography-message-font-size);\n line-height: var(--typography-message-line-height);\n letter-spacing: var(--typography-message-letter-spacing);\n }\n\n .help-text {\n margin: var(--dimension-help-text-margin-top) 0 0 0;\n color: var(--color-help-text-text);\n font-weight: var(--typography-help-text-font-weight);\n font-size: var(--typography-help-text-font-size);\n line-height: var(--typography-help-text-line-height);\n letter-spacing: var(--typography-help-text-letter-spacing);\n margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n }\n [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--dimension-input-height);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--dimension-icon-margin-right);\n height: fit-content;\n transition: var(--motion-input-transition);\n border-radius: var(--dimension-icon-border-radius);\n &:focus {\n outline: solid var(--color-icon-focus-outline);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--dimension-input-border-width) solid\n var(--color-input-border);\n &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input[type='date'] {\n border-color: var(--color-input-border-error);\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n .message {\n color: var(--color-message-text-error);\n }\n .help-text {\n color: var(--color-help-text-text-error);\n }\n .date-icon {\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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A;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA/MYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfX,EASiB,WAAA,SAAA,CAAA;AAOAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfX,EAgBiB,WAAA,WAAA,CAAA;AAOwBU,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvBvCX,EAuByC,WAAA,YAAA,CAAA;AAOxBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9BfX,EA8BiB,WAAA,OAAA,CAAA;AAMAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfX,EAoCiB,WAAA,OAAA,CAAA;AASeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7C9BX,EA6CgC,WAAA,UAAA,CAAA;AAOCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BX,EAoDiC,WAAA,YAAA,CAAA;AAOAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BX,EA2DiC,WAAA,YAAA,CAAA;AAGpCU,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GA7DZZ,EA8DH,WAAA,UAAA,CAAA;AAcJU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3E9BX,EA4EP,WAAA,QAAA,CAAA;AAwBAU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnGfX,EAoGP,WAAA,SAAA,CAAA;AApGOA,IAANU,EAAA;AAAA,EADNG,EAAcd,CAAoB;AAAA,GACtBC,CAAA;"}
|
package/fhi-display.js
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import { i as n, n as p, a as g, b as
|
|
1
|
+
import { i as n, n as p, a as g, b as f, t as y } from "./property-DGdAXcEz.js";
|
|
2
2
|
import { o as m } from "./unsafe-html-lUureUEN.js";
|
|
3
|
-
var
|
|
4
|
-
for (var t = a > 1 ? void 0 : a ?
|
|
3
|
+
var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (e, l, s, a) => {
|
|
4
|
+
for (var t = a > 1 ? void 0 : a ? d(l, s) : l, o = e.length - 1, h; o >= 0; o--)
|
|
5
5
|
(h = e[o]) && (t = (a ? h(l, s, t) : h(t)) || t);
|
|
6
|
-
return a && t &&
|
|
6
|
+
return a && t && v(l, s, t), t;
|
|
7
7
|
};
|
|
8
|
-
const
|
|
8
|
+
const u = "fhi-display";
|
|
9
9
|
let i = class extends g {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
13
13
|
updated(e) {
|
|
14
|
-
super.updated(e), e.has("
|
|
14
|
+
super.updated(e), e.has("level") && (typeof this.level != "number" || this.level < 1 || this.level > 6) && console.error(
|
|
15
|
+
new TypeError(
|
|
16
|
+
`The level property must be set to a valid value. invalid value: ${this.level}`
|
|
17
|
+
)
|
|
18
|
+
), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
15
19
|
}
|
|
16
20
|
render() {
|
|
17
21
|
const e = `
|
|
@@ -19,7 +23,7 @@ let i = class extends g {
|
|
|
19
23
|
<slot></slot>
|
|
20
24
|
</h${this.level}>
|
|
21
25
|
`;
|
|
22
|
-
return
|
|
26
|
+
return f`${m(e)}`;
|
|
23
27
|
}
|
|
24
28
|
};
|
|
25
29
|
i.styles = n`
|
|
@@ -94,10 +98,10 @@ r([
|
|
|
94
98
|
p({ type: Number })
|
|
95
99
|
], i.prototype, "level", 2);
|
|
96
100
|
i = r([
|
|
97
|
-
|
|
101
|
+
y(u)
|
|
98
102
|
], i);
|
|
99
103
|
export {
|
|
100
104
|
i as FhiDisplay,
|
|
101
|
-
|
|
105
|
+
u as FhiDisplaySelector
|
|
102
106
|
};
|
|
103
107
|
//# sourceMappingURL=fhi-display.js.map
|
package/fhi-display.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-display.js","sources":["../../src/components/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('
|
|
1
|
+
{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n if (typeof this.level !== 'number' || this.level < 1 || this.level > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a valid value. invalid value: ${this.level}`,\n ),\n );\n }\n }\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-display-large-font-size);\n --font-weight-large: var(--fhi-typography-display-large-font-weight);\n --line-height-large: var(--fhi-typography-display-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-display-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-display-medium-font-size);\n --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n --line-height-medium: var(--fhi-typography-display-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-display-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-display-small-font-size);\n --font-weight-small: var(--fhi-typography-display-small-font-weight);\n --line-height-small: var(--fhi-typography-display-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-display-small-letter-spacing\n );\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .display {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .display {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAkB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC3B,OAAO,KAAK,SAAU,YAAY,KAAK,QAAQ,KAAK,KAAK,QAAQ,MACnE,QAAQ;AAAA,MACN,IAAI;AAAA,QACF,mEAAmE,KAAK,KAAK;AAAA,MAAA;AAAA,IAC/E,GAKFA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA9HaH,EAgEJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA1D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMgC,WAAA,QAAA,CAAA;AAoBfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfR,EA0BiB,WAAA,SAAA,CAAA;AAMAO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfR,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAkB;AAAA,GACpBC,CAAA;"}
|
package/fhi-headline.js
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import { i as g, n as s, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
|
|
2
|
-
import { o as
|
|
3
|
-
var
|
|
4
|
-
for (var t = a > 1 ? void 0 : a ?
|
|
2
|
+
import { o as v } from "./unsafe-html-lUureUEN.js";
|
|
3
|
+
var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, l, h, a) => {
|
|
4
|
+
for (var t = a > 1 ? void 0 : a ? y(l, h) : l, n = e.length - 1, o; n >= 0; n--)
|
|
5
5
|
(o = e[n]) && (t = (a ? o(l, h, t) : o(t)) || t);
|
|
6
|
-
return a && t &&
|
|
6
|
+
return a && t && d(l, h, t), t;
|
|
7
7
|
};
|
|
8
|
-
const
|
|
8
|
+
const u = "fhi-headline";
|
|
9
9
|
let i = class extends p {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
13
13
|
updated(e) {
|
|
14
|
-
super.updated(e), e.has("
|
|
14
|
+
super.updated(e), e.has("level") && (typeof this.level != "number" || this.level < 1 || this.level > 6) && console.error(
|
|
15
|
+
new TypeError(
|
|
16
|
+
`The level property must be set to a valid value. invalid value: ${this.level}`
|
|
17
|
+
)
|
|
18
|
+
), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
15
19
|
}
|
|
16
20
|
render() {
|
|
17
21
|
const e = `
|
|
@@ -19,7 +23,7 @@ let i = class extends p {
|
|
|
19
23
|
<slot></slot>
|
|
20
24
|
</h${this.level}>
|
|
21
25
|
`;
|
|
22
|
-
return f`${
|
|
26
|
+
return f`${v(e)}`;
|
|
23
27
|
}
|
|
24
28
|
};
|
|
25
29
|
i.styles = g`
|
|
@@ -94,10 +98,10 @@ r([
|
|
|
94
98
|
s({ type: Number })
|
|
95
99
|
], i.prototype, "level", 2);
|
|
96
100
|
i = r([
|
|
97
|
-
m(
|
|
101
|
+
m(u)
|
|
98
102
|
], i);
|
|
99
103
|
export {
|
|
100
104
|
i as FhiHeadline,
|
|
101
|
-
|
|
105
|
+
u as FhiHeadlineSelector
|
|
102
106
|
};
|
|
103
107
|
//# sourceMappingURL=fhi-headline.js.map
|
package/fhi-headline.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-headline.js","sources":["../../src/components/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('
|
|
1
|
+
{"version":3,"file":"fhi-headline.js","sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n if (typeof this.level !== 'number' || this.level < 1 || this.level > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a valid value. invalid value: ${this.level}`,\n ),\n );\n }\n }\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-headline-large-font-size);\n --font-weight-large: var(--fhi-typography-headline-large-font-weight);\n --line-height-large: var(--fhi-typography-headline-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-headline-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-headline-medium-font-size);\n --font-weight-medium: var(--fhi-typography-headline-medium-font-weight);\n --line-height-medium: var(--fhi-typography-headline-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-headline-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-headline-small-font-size);\n --font-weight-small: var(--fhi-typography-headline-small-font-weight);\n --line-height-small: var(--fhi-typography-headline-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-headline-small-letter-spacing\n );\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .headline {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .headline {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAkB5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC3B,OAAO,KAAK,SAAU,YAAY,KAAK,QAAQ,KAAK,KAAK,QAAQ,MACnE,QAAQ;AAAA,MACN,IAAI;AAAA,QACF,mEAAmE,KAAK,KAAK;AAAA,MAAA;AAAA,IAC/E,GAKFA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA9HaH,EAgEJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA1D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMgC,WAAA,QAAA,CAAA;AAoBfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfR,EA0BiB,WAAA,SAAA,CAAA;AAMAO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfR,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANO,EAAA;AAAA,EADNE,EAAcV,CAAmB;AAAA,GACrBC,CAAA;"}
|
package/fhi-label.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { i as g, n, a as
|
|
2
|
-
var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor,
|
|
3
|
-
for (var e = i > 1 ? void 0 : i ? v(a, r) : a, o = t.length - 1,
|
|
4
|
-
(
|
|
1
|
+
import { i as g, n, a as f, b as p, t as m } from "./property-DGdAXcEz.js";
|
|
2
|
+
var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
|
|
3
|
+
for (var e = i > 1 ? void 0 : i ? v(a, r) : a, o = t.length - 1, h; o >= 0; o--)
|
|
4
|
+
(h = t[o]) && (e = (i ? h(a, r, e) : h(e)) || e);
|
|
5
5
|
return i && e && y(a, r, e), e;
|
|
6
6
|
};
|
|
7
7
|
const c = "fhi-label";
|
|
8
|
-
let l = class extends
|
|
8
|
+
let l = class extends f {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments), this.size = "medium";
|
|
11
11
|
}
|
|
12
12
|
updated(t) {
|
|
13
|
-
super.updated(t), t.has("color") && typeof this.color == "string"
|
|
13
|
+
super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return
|
|
16
|
+
return p`
|
|
17
17
|
<span class="label">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</span>
|
|
@@ -78,13 +78,13 @@ l.styles = g`
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
`;
|
|
81
|
-
|
|
81
|
+
s([
|
|
82
82
|
n({ type: String, reflect: !0 })
|
|
83
83
|
], l.prototype, "size", 2);
|
|
84
|
-
|
|
84
|
+
s([
|
|
85
85
|
n({ type: String })
|
|
86
86
|
], l.prototype, "color", 2);
|
|
87
|
-
l =
|
|
87
|
+
l = s([
|
|
88
88
|
m(c)
|
|
89
89
|
], l);
|
|
90
90
|
export {
|
package/fhi-label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-label.js","sources":["../../src/components/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color')
|
|
1
|
+
{"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n return html`\n <span class=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-label-large-font-size);\n --font-weight-large: var(--fhi-typography-label-large-font-weight);\n --line-height-large: var(--fhi-typography-label-large-line-height);\n --letter-spacing-large: var(--fhi-typography-label-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-label-medium-font-size);\n --font-weight-medium: var(--fhi-typography-label-medium-font-weight);\n --line-height-medium: var(--fhi-typography-label-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-label-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-label-small-font-size);\n --font-weight-small: var(--fhi-typography-label-small-font-weight);\n --line-height-small: var(--fhi-typography-label-small-line-height);\n --letter-spacing-small: var(--fhi-typography-label-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .label {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .label {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .label {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA4DF;AAzGaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAgB;AAAA,GAClBC,CAAA;"}
|
package/fhi-modal-dialog.js
CHANGED
|
@@ -14,11 +14,11 @@ let o = class extends p {
|
|
|
14
14
|
super(...arguments), this.open = !1, this.size = "medium", this.closeButtonLabel = "", this.heading = "", this._triggerElement = null, this._bodyOverflowStyle = "", this._mouseDownInsideDialog = !1;
|
|
15
15
|
}
|
|
16
16
|
updated(e) {
|
|
17
|
-
if (super.updated(e), e.has("open") && (this.open ? this.show() : this.close()), typeof this.closeButtonLabel != "string" || this.closeButtonLabel.length === 0)
|
|
17
|
+
if (super.updated(e), e.has("open") && (this.open ? this.show() : this.close()), e.has("size") && this.size !== "small" && this.size !== "medium" && (this.size = "medium"), e.has("closeButtonLabel") && (typeof this.closeButtonLabel != "string" || this.closeButtonLabel.length === 0))
|
|
18
18
|
throw new TypeError(
|
|
19
19
|
"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."
|
|
20
20
|
);
|
|
21
|
-
if (typeof this.heading != "string" || this.heading.length === 0)
|
|
21
|
+
if (e.has("closeButtonLabel") && (typeof this.heading != "string" || this.heading.length === 0))
|
|
22
22
|
throw new TypeError(
|
|
23
23
|
"The heading property must be set to a non-empty string. This heading describes the purpose of the dialog."
|
|
24
24
|
);
|
package/fhi-modal-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-modal-dialog.js","sources":["../../src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '../fhi-button/fhi-button.component';\nimport '../icons/fhi-icon-x.component';\nimport '../fhi-headline/fhi-headline.component';\n\nexport const FhiModalDialogSelector = 'fhi-modal-dialog';\n\n/**\n * ## FHI Modal Dialog\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs}\n *\n * The `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\n * It overlays the main content and usually requires user interaction before returning to the underlying page.\n *\n * @tag fhi-modal-dialog\n * @element fhi-modal-dialog\n *\n * @slot body - The main content of the dialog. Typically contains text or form elements.\n * @slot footer - The footer content of the dialog, typically containing action buttons.\n */\n@customElement(FhiModalDialogSelector)\nexport class FhiModalDialog extends LitElement {\n /**\n * Decides whether the dialog is open or closed.\n * By setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n *\n * This property is reflected as an attribute and will therefor also change if the user toggles the dialog or\n * if you use the `show()` and `close()` methods.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n /**\n * Sets the maximum width of the dialog.\n * @type {'small' | 'medium'`}\n */\n @property({ type: String, attribute: 'size', reflect: true })\n size: 'small' | 'medium' = 'medium';\n\n /**\n * Label for the close button.\n * @type {string}\n */\n @property({ type: String, attribute: 'close-button-label' })\n closeButtonLabel: string = '';\n\n /**\n * The heading text of the dialog. This is displayed at the top of the dialog.\n * @type {string}\n */\n @property({ type: String })\n heading: string = '';\n\n @query('dialog')\n private _dialog!: HTMLDialogElement;\n\n @query('footer')\n private _footer!: HTMLElement;\n\n @query('slot[name=\"footer\"]')\n private _footerSlot!: HTMLSlotElement;\n\n private _triggerElement: HTMLElement | null = null;\n private _bodyOverflowStyle: string = '';\n private _mouseDownInsideDialog: boolean = false;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n if (\n typeof this.closeButtonLabel !== 'string' ||\n this.closeButtonLabel.length === 0\n ) {\n throw new TypeError(\n '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.',\n );\n }\n\n if (typeof this.heading !== 'string' || this.heading.length === 0) {\n throw new TypeError(\n 'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',\n );\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n this._toggleFooter();\n }\n\n /**\n * Programmatically opens the dialog.\n * You can also open the dialog by instead setting the `open` property to `true`.\n */\n public show() {\n this._triggerElement = document.activeElement as HTMLElement | null;\n this._bodyOverflowStyle = document.body.style.overflow;\n\n if (!this.open) {\n this.open = true;\n }\n\n document.body.style.overflow = 'hidden';\n\n this._dialog.showModal();\n\n // Delay focus to make sure the windows screen reader properly detects the dialog\n setTimeout(() => {\n this._focusDialog();\n }, 10);\n\n this._dispatchToggleEvent();\n\n this.addEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n /**\n * Programmatically closes the dialog.\n * You can also close the dialog by instead setting the `open` property to `false`.\n */\n public close() {\n if (this.open) {\n this.open = false;\n }\n\n document.body.style.overflow = this._bodyOverflowStyle;\n\n this._dialog.close();\n\n this._dispatchToggleEvent();\n this._dispatchCloseEvent();\n\n this._triggerElement?.focus();\n\n this.removeEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n private _focusDialog() {\n this._dialog.focus();\n }\n\n private _dispatchToggleEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `toggle`\n * This event is fired whenever the dialog is opened or closed.\n * */\n this.dispatchEvent(\n new ToggleEvent('toggle', {\n newState: this.open ? 'open' : 'closed',\n oldState: this.open ? 'closed' : 'open',\n }),\n );\n }\n\n private _dispatchCloseEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `close`\n * This event is fired whenever the dialog is closed.\n * */\n this.dispatchEvent(new CloseEvent('close'));\n }\n\n private _handleDialogMouseUp(event: MouseEvent) {\n if (this._mouseDownInsideDialog) {\n this._mouseDownInsideDialog = false;\n return;\n }\n\n if (event.target === this._dialog) {\n this.close();\n }\n\n event.stopPropagation();\n }\n\n private _handleCloseButtonClick() {\n this.close();\n }\n\n private _handleDialogContentMouseDown() {\n this._mouseDownInsideDialog = true;\n }\n\n private _handleFooterSlotChange() {\n this._toggleFooter();\n }\n\n private handleKeyPress(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n }\n }\n\n private _toggleFooter() {\n const nodes = this._footerSlot.assignedNodes({ flatten: true });\n\n if (nodes.length === 0) {\n this._footer.style.display = 'none';\n } else {\n this._footer.style.display = 'flex';\n }\n }\n\n render() {\n return html` <dialog\n @mouseup=${this._handleDialogMouseUp}\n aria-modal=\"true\"\n aria-labelledby=\"dialog-label\"\n closedby=\"none\"\n role=\"dialog\"\n >\n <section\n class=\"dialog-content\"\n @mousedown=${this._handleDialogContentMouseDown}\n >\n <header>\n <fhi-headline ?hidden=${!this.heading} id=\"dialog-label\" level=\"1\"\n >${this.heading}\n </fhi-headline>\n <fhi-button\n variant=\"text\"\n color=\"neutral\"\n size=\"small\"\n @click=${this._handleCloseButtonClick}\n >\n ${this.closeButtonLabel}\n <fhi-icon-x></fhi-icon-x>\n </fhi-button>\n </header>\n <slot name=\"body\"></slot>\n <footer>\n <slot\n name=\"footer\"\n @slotchange=${this._handleFooterSlotChange}\n ></slot>\n </footer>\n </section>\n </dialog>`;\n }\n\n static styles = css`\n @keyframes fhi-dialog-fade-in {\n from {\n opacity: 0;\n }\n }\n\n :host {\n --dimension-dialog-border-width: var(--fhi-dimension-border-width);\n --dimension-dialog-border-radius: var(--fhi-border-radius-200);\n --dimension-dialog-header-padding: var(--fhi-spacing-500)\n var(--fhi-spacing-500) 0 var(--fhi-spacing-500);\n --dimension-dialog-header-gap: var(--fhi-spacing-050);\n --dimension-dialog-body-padding: var(--fhi-spacing-500);\n --dimension-dialog-footer-padding: 0 var(--fhi-spacing-500)\n var(--fhi-spacing-500) var(--fhi-spacing-500);\n --dimension-dialog-footer-gap: var(--fhi-spacing-050);\n\n --dimension-dialog-width-small: 28rem;\n --dimension-dialog-width-medium: 40rem;\n\n --color-backdrop: var(--fhi-color-neutral-surface-active);\n --color-dialog-border: var(--fhi-color-neutral-border-subtle);\n\n --motion-transition: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default);\n }\n\n :host {\n display: none;\n position: absolute;\n\n dialog {\n display: flex;\n overflow: hidden;\n border: var(--dimension-dialog-border-width) solid\n var(--color-dialog-border);\n border-radius: var(--dimension-dialog-border-radius);\n animation: var(--motion-transition) fhi-dialog-fade-in;\n padding: 0;\n .dialog-content {\n overflow: auto;\n flex: 1;\n }\n header {\n display: flex;\n justify-content: space-between;\n align-items: start;\n gap: var(--dimension-dialog-header-gap);\n padding: var(--dimension-dialog-header-padding);\n }\n slot[name='body'] {\n display: block;\n padding: var(--dimension-dialog-body-padding);\n }\n footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--dimension-dialog-footer-gap);\n flex-wrap: wrap;\n padding: var(--dimension-dialog-footer-padding);\n }\n &::backdrop {\n background-color: var(--color-backdrop);\n opacity: var(--fhi-opacity-disabled);\n animation: var(--motion-transition) fhi-dialog-fade-in;\n }\n }\n }\n\n :host([open]) {\n display: block;\n }\n\n :host([size='small']) {\n dialog {\n width: var(--dimension-dialog-width-small);\n }\n }\n\n :host([size='medium']) {\n dialog {\n width: var(--dimension-dialog-width-medium);\n }\n }\n `;\n}\n"],"names":["FhiModalDialogSelector","FhiModalDialog","LitElement","changedProperties","_changedProperties","_a","event","html","css","__decorateClass","property","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fhi-modal-dialog.js","sources":["../../src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '../fhi-button/fhi-button.component';\nimport '../icons/fhi-icon-x.component';\nimport '../typography/fhi-headline/fhi-headline.component';\n\nexport const FhiModalDialogSelector = 'fhi-modal-dialog';\n\n/**\n * ## FHI Modal Dialog\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs}\n *\n * The `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\n * It overlays the main content and usually requires user interaction before returning to the underlying page.\n *\n * @tag fhi-modal-dialog\n * @element fhi-modal-dialog\n *\n * @slot body - The main content of the dialog. Typically contains text or form elements.\n * @slot footer - The footer content of the dialog, typically containing action buttons.\n */\n@customElement(FhiModalDialogSelector)\nexport class FhiModalDialog extends LitElement {\n /**\n * Decides whether the dialog is open or closed.\n * By setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n *\n * This property is reflected as an attribute and will therefor also change if the user toggles the dialog or\n * if you use the `show()` and `close()` methods.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n /**\n * Sets the maximum width of the dialog.\n * @type {'small' | 'medium'`}\n */\n @property({ type: String, attribute: 'size', reflect: true })\n size: 'small' | 'medium' = 'medium';\n\n /**\n * Label for the close button.\n * @type {string}\n */\n @property({ type: String, attribute: 'close-button-label' })\n closeButtonLabel: string = '';\n\n /**\n * The heading text of the dialog. This is displayed at the top of the dialog.\n * @type {string}\n */\n @property({ type: String })\n heading: string = '';\n\n @query('dialog')\n private _dialog!: HTMLDialogElement;\n\n @query('footer')\n private _footer!: HTMLElement;\n\n @query('slot[name=\"footer\"]')\n private _footerSlot!: HTMLSlotElement;\n\n private _triggerElement: HTMLElement | null = null;\n private _bodyOverflowStyle: string = '';\n private _mouseDownInsideDialog: boolean = false;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n // if invalid size is provided, default to 'medium'\n if (changedProperties.has('size')) {\n if (this.size !== 'small' && this.size !== 'medium') {\n this.size = 'medium';\n }\n }\n\n if (changedProperties.has('closeButtonLabel')) {\n if (\n typeof this.closeButtonLabel !== 'string' ||\n this.closeButtonLabel.length === 0\n ) {\n throw new TypeError(\n '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.',\n );\n }\n }\n\n if (changedProperties.has('closeButtonLabel')) {\n if (typeof this.heading !== 'string' || this.heading.length === 0) {\n throw new TypeError(\n 'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',\n );\n }\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n this._toggleFooter();\n }\n\n /**\n * Programmatically opens the dialog.\n * You can also open the dialog by instead setting the `open` property to `true`.\n */\n public show() {\n this._triggerElement = document.activeElement as HTMLElement | null;\n this._bodyOverflowStyle = document.body.style.overflow;\n\n if (!this.open) {\n this.open = true;\n }\n\n document.body.style.overflow = 'hidden';\n\n this._dialog.showModal();\n\n // Delay focus to make sure the windows screen reader properly detects the dialog\n setTimeout(() => {\n this._focusDialog();\n }, 10);\n\n this._dispatchToggleEvent();\n\n this.addEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n /**\n * Programmatically closes the dialog.\n * You can also close the dialog by instead setting the `open` property to `false`.\n */\n public close() {\n if (this.open) {\n this.open = false;\n }\n\n document.body.style.overflow = this._bodyOverflowStyle;\n\n this._dialog.close();\n\n this._dispatchToggleEvent();\n this._dispatchCloseEvent();\n\n this._triggerElement?.focus();\n\n this.removeEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n private _focusDialog() {\n this._dialog.focus();\n }\n\n private _dispatchToggleEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `toggle`\n * This event is fired whenever the dialog is opened or closed.\n * */\n this.dispatchEvent(\n new ToggleEvent('toggle', {\n newState: this.open ? 'open' : 'closed',\n oldState: this.open ? 'closed' : 'open',\n }),\n );\n }\n\n private _dispatchCloseEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `close`\n * This event is fired whenever the dialog is closed.\n * */\n this.dispatchEvent(new CloseEvent('close'));\n }\n\n private _handleDialogMouseUp(event: MouseEvent) {\n if (this._mouseDownInsideDialog) {\n this._mouseDownInsideDialog = false;\n return;\n }\n\n if (event.target === this._dialog) {\n this.close();\n }\n\n event.stopPropagation();\n }\n\n private _handleCloseButtonClick() {\n this.close();\n }\n\n private _handleDialogContentMouseDown() {\n this._mouseDownInsideDialog = true;\n }\n\n private _handleFooterSlotChange() {\n this._toggleFooter();\n }\n\n private handleKeyPress(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n }\n }\n\n private _toggleFooter() {\n const nodes = this._footerSlot.assignedNodes({ flatten: true });\n\n if (nodes.length === 0) {\n this._footer.style.display = 'none';\n } else {\n this._footer.style.display = 'flex';\n }\n }\n\n render() {\n return html` <dialog\n @mouseup=${this._handleDialogMouseUp}\n aria-modal=\"true\"\n aria-labelledby=\"dialog-label\"\n closedby=\"none\"\n role=\"dialog\"\n >\n <section\n class=\"dialog-content\"\n @mousedown=${this._handleDialogContentMouseDown}\n >\n <header>\n <fhi-headline ?hidden=${!this.heading} id=\"dialog-label\" level=\"1\"\n >${this.heading}\n </fhi-headline>\n <fhi-button\n variant=\"text\"\n color=\"neutral\"\n size=\"small\"\n @click=${this._handleCloseButtonClick}\n >\n ${this.closeButtonLabel}\n <fhi-icon-x></fhi-icon-x>\n </fhi-button>\n </header>\n <slot name=\"body\"></slot>\n <footer>\n <slot\n name=\"footer\"\n @slotchange=${this._handleFooterSlotChange}\n ></slot>\n </footer>\n </section>\n </dialog>`;\n }\n\n static styles = css`\n @keyframes fhi-dialog-fade-in {\n from {\n opacity: 0;\n }\n }\n\n :host {\n --dimension-dialog-border-width: var(--fhi-dimension-border-width);\n --dimension-dialog-border-radius: var(--fhi-border-radius-200);\n --dimension-dialog-header-padding: var(--fhi-spacing-500)\n var(--fhi-spacing-500) 0 var(--fhi-spacing-500);\n --dimension-dialog-header-gap: var(--fhi-spacing-050);\n --dimension-dialog-body-padding: var(--fhi-spacing-500);\n --dimension-dialog-footer-padding: 0 var(--fhi-spacing-500)\n var(--fhi-spacing-500) var(--fhi-spacing-500);\n --dimension-dialog-footer-gap: var(--fhi-spacing-050);\n\n --dimension-dialog-width-small: 28rem;\n --dimension-dialog-width-medium: 40rem;\n\n --color-backdrop: var(--fhi-color-neutral-surface-active);\n --color-dialog-border: var(--fhi-color-neutral-border-subtle);\n\n --motion-transition: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default);\n }\n\n :host {\n display: none;\n position: absolute;\n\n dialog {\n display: flex;\n overflow: hidden;\n border: var(--dimension-dialog-border-width) solid\n var(--color-dialog-border);\n border-radius: var(--dimension-dialog-border-radius);\n animation: var(--motion-transition) fhi-dialog-fade-in;\n padding: 0;\n .dialog-content {\n overflow: auto;\n flex: 1;\n }\n header {\n display: flex;\n justify-content: space-between;\n align-items: start;\n gap: var(--dimension-dialog-header-gap);\n padding: var(--dimension-dialog-header-padding);\n }\n slot[name='body'] {\n display: block;\n padding: var(--dimension-dialog-body-padding);\n }\n footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--dimension-dialog-footer-gap);\n flex-wrap: wrap;\n padding: var(--dimension-dialog-footer-padding);\n }\n &::backdrop {\n background-color: var(--color-backdrop);\n opacity: var(--fhi-opacity-disabled);\n animation: var(--motion-transition) fhi-dialog-fade-in;\n }\n }\n }\n\n :host([open]) {\n display: block;\n }\n\n :host([size='small']) {\n dialog {\n width: var(--dimension-dialog-width-small);\n }\n }\n\n :host([size='medium']) {\n dialog {\n width: var(--dimension-dialog-width-medium);\n }\n }\n `;\n}\n"],"names":["FhiModalDialogSelector","FhiModalDialog","LitElement","changedProperties","_changedProperties","_a","event","html","css","__decorateClass","property","query","customElement"],"mappings":"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"}
|
package/fhi-tag.js
CHANGED
package/fhi-tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /**\n * Sets the color of the tag.\n * @reflect\n * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n */\n @property({ type: String, reflect: true }) color:\n | 'neutral'\n | 'accent'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info' = 'neutral';\n\n private _handleSlotChange(event: Event): void {\n const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n const validNodes = nodes.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes.length === 0) {\n return;\n }\n\n const firstNode: Node = validNodes[0];\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n icon.setAttribute('size', '1rem');\n icon.style.marginLeft = 'var(--dimension-icon-offset)';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --dimension-icon-offset: calc(-1 * var(--fhi-spacing-050));\n --dimension-border-radius: var(--fhi-border-radius-050);\n --dimension-gap: var(--fhi-spacing-050);\n --dimension-padding: 0 calc(var(--fhi-spacing-100) - 1px);\n --dimension-height: calc(var(--fhi-spacing-300) - 2px);\n\n --color-border: transparent;\n\n --color-neutral-text: var(--fhi-color-neutral-text-default);\n --color-neutral-background: var(--fhi-color-neutral-surface-default);\n\n --color-accent-text: var(--fhi-color-accent-text-default);\n --color-accent-background: var(--fhi-color-accent-surface-default);\n\n --color-success-text: var(--fhi-color-success-text-default);\n --color-success-background: var(--fhi-color-success-surface-default);\n\n --color-warning-text: var(--fhi-color-warning-text-default);\n --color-warning-background: var(--fhi-color-warning-surface-default);\n\n --color-danger-text: var(--fhi-color-danger-text-default);\n --color-danger-background: var(--fhi-color-danger-surface-default);\n\n --color-info-text: var(--fhi-color-info-text-default);\n --color-info-background: var(--fhi-color-info-surface-default);\n }\n\n :host {\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--color-border);\n border-radius: var(--dimension-border-radius);\n\n height: var(--dimension-height);\n padding: var(--dimension-padding);\n\n .slot-container {\n display: flex;\n align-items: center;\n\n gap: var(--dimension-gap);\n }\n\n & fhi-body {\n color: inherit;\n }\n }\n\n :host
|
|
1
|
+
{"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /**\n * Sets the color of the tag.\n * @reflect\n * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n */\n @property({ type: String, reflect: true }) color:\n | 'neutral'\n | 'accent'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info' = 'neutral';\n\n private _handleSlotChange(event: Event): void {\n const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n const validNodes = nodes.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes.length === 0) {\n return;\n }\n\n const firstNode: Node = validNodes[0];\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n icon.setAttribute('size', '1rem');\n icon.style.marginLeft = 'var(--dimension-icon-offset)';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --dimension-icon-offset: calc(-1 * var(--fhi-spacing-050));\n --dimension-border-radius: var(--fhi-border-radius-050);\n --dimension-gap: var(--fhi-spacing-050);\n --dimension-padding: 0 calc(var(--fhi-spacing-100) - 1px);\n --dimension-height: calc(var(--fhi-spacing-300) - 2px);\n\n --color-border: transparent;\n\n --color-neutral-text: var(--fhi-color-neutral-text-default);\n --color-neutral-background: var(--fhi-color-neutral-surface-default);\n\n --color-accent-text: var(--fhi-color-accent-text-default);\n --color-accent-background: var(--fhi-color-accent-surface-default);\n\n --color-success-text: var(--fhi-color-success-text-default);\n --color-success-background: var(--fhi-color-success-surface-default);\n\n --color-warning-text: var(--fhi-color-warning-text-default);\n --color-warning-background: var(--fhi-color-warning-surface-default);\n\n --color-danger-text: var(--fhi-color-danger-text-default);\n --color-danger-background: var(--fhi-color-danger-surface-default);\n\n --color-info-text: var(--fhi-color-info-text-default);\n --color-info-background: var(--fhi-color-info-surface-default);\n }\n\n :host {\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--color-border);\n border-radius: var(--dimension-border-radius);\n\n height: var(--dimension-height);\n padding: var(--dimension-padding);\n\n .slot-container {\n display: flex;\n align-items: center;\n\n gap: var(--dimension-gap);\n }\n\n & fhi-body {\n color: inherit;\n }\n }\n\n :host {\n color: var(--color-neutral-text);\n background-color: var(--color-neutral-background);\n }\n\n :host([color='accent']) {\n color: var(--color-accent-text);\n background-color: var(--color-accent-background);\n }\n\n :host([color='success']) {\n color: var(--color-success-text);\n background-color: var(--color-success-background);\n }\n\n :host([color='warning']) {\n color: var(--color-warning-text);\n background-color: var(--color-warning-background);\n }\n\n :host([color='danger']) {\n color: var(--color-danger-text);\n background-color: var(--color-danger-background);\n }\n\n :host([color='info']) {\n color: var(--color-info-text);\n background-color: var(--color-info-background);\n }\n `;\n}\n"],"names":["FhiTagSelector","FhiTag","LitElement","event","validNodes","node","_a","firstNode","icon","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAiB;AAevB,IAAMC,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,QAM9B;AAAA,EAAA;AAAA,EAEL,kBAAkBC,GAAoB;AAG5C,UAAMC,IAFSD,EAAM,OAA2B,cAAA,EAEvB;AAAA,MACvB,CAAAE,MAAA;;AACE,eAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,eAAaC,IAAAD,EAAK,gBAAL,gBAAAC,EAAkB;AAAA;AAAA,IAAK;AAGhE,QAAIF,EAAW,WAAW;AACxB;AAGF,UAAMG,IAAkBH,EAAW,CAAC;AAEpC,QACEG,EAAU,aAAa,KAAK,gBAC3BA,EAAsB,QAAQ,YAAA,EAAc,WAAW,UAAU,GAClE;AACA,YAAMC,IAAOD;AAEb,MAAAC,EAAK,aAAa,QAAQ,MAAM,GAChCA,EAAK,MAAM,aAAa;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIa,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI5C;AAoFF;AArIaR,EAmDJ,SAASS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7C2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BX,EAMgC,WAAA,SAAA,CAAA;AANhCA,IAANU,EAAA;AAAA,EADNE,EAAcb,CAAc;AAAA,GAChBC,CAAA;"}
|