npm - @folkehelseinstituttet/designsystem - Versions diffs - 0.31.0 → 0.32.0 - Mend

@folkehelseinstituttet/designsystem 0.31.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.

Files changed (23) hide show

package/fhi-modal-dialog.js.map CHANGED Viewed

	@@ -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 Viewed

@@ -88,7 +88,7 @@ n.styles = s`
       }
     }
-    :host([color='neutral']) {
+    :host {
       color: var(--color-neutral-text);
       background-color: var(--color-neutral-background);
     }

package/fhi-tag.js.map CHANGED Viewed

	@@ -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~~([color='neutral'])~~ {\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;"}
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;"}

package/fhi-text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/*\n ## FHI Text Input\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n \n The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n \n @tag fhi-text-input\n * @element fhi-text-input\n /\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput 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 message 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 the placeholder text for the input field.\n * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n * @type {string}\n /\n @property({ type: String }) placeholder?: string = 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;\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 set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /\n The default value of the input field.\n \n You can fetch the current value of the text 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(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\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);\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 _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 handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\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') \|\| '';\n this._internals.setFormValue(this.value);\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 <input\n id=\"input-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\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 ${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 / 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-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-placeholder: var(--fhi-color-neutral-base-default);\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\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 / 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 --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\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\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input {\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 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 transition: var(--motion-input-transition);\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n &::placeholder {\n color: var(--color-input-placeholder);\n }\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 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 }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n label,\n input {\n cursor: not-allowed;\n }\n input {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input {\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 }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input {\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 }\n `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/*\n ## FHI Text Input\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n \n The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n \n @tag fhi-text-input\n * @element fhi-text-input\n /\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\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 message 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 the placeholder text for the input field.\n * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n * @type {string}\n /\n @property({ type: String }) placeholder?: string = 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;\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 set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /\n The default value of the input field.\n \n You can fetch the current value of the text 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(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\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);\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 _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 handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\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') \|\| '';\n this._internals.setFormValue(this.value);\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 <input\n id=\"input-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\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 ${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 / 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-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-placeholder: var(--fhi-color-neutral-base-default);\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\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 / 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 --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\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\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input {\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 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 transition: var(--motion-input-transition);\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n &::placeholder {\n color: var(--color-input-placeholder);\n }\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 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 }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n label,\n input {\n cursor: not-allowed;\n }\n input {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input {\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 }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input {\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 }\n `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}

package/fhi-title.js CHANGED Viewed

@@ -1,17 +1,21 @@
 import { i as g, n, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
-import { o as y } from "./unsafe-html-lUureUEN.js";
-var v = Object.defineProperty, c = Object.getOwnPropertyDescriptor, a = (t, l, o, r) => {
-  for (var e = r > 1 ? void 0 : r ? c(l, o) : l, h = t.length - 1, s; h >= 0; h--)
+import { o as v } from "./unsafe-html-lUureUEN.js";
+var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, a = (t, l, o, r) => {
+  for (var e = r > 1 ? void 0 : r ? u(l, o) : l, h = t.length - 1, s; h >= 0; h--)
     (s = t[h]) && (e = (r ? s(l, o, e) : s(e)) || e);
-  return r && e && v(l, o, e), e;
+  return r && e && y(l, o, e), e;
 };
-const u = "fhi-title";
+const c = "fhi-title";
 let i = class extends p {
   constructor() {
     super(...arguments), this.size = "medium";
   }
   updated(t) {
-    super.updated(t), t.has("color") && typeof this.color == "string" && (this.style.color = this.color);
+    super.updated(t), t.has("level") && (typeof this.level != "number" || this.level < 1 || this.level > 6) && console.error(
+      new TypeError(
+        `The level property must be set to a valid value. invalid value: ${this.level}`
+      )
+    ), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
   }
   render() {
     const t = `
@@ -19,7 +23,7 @@ let i = class extends p {
         <slot></slot>
       </h${this.level}>
     `;
-    return f`${y(t)}`;
+    return f`${v(t)}`;
   }
 };
 i.styles = g`
@@ -90,10 +94,10 @@ a([
   n({ type: Number })
 ], i.prototype, "level", 2);
 i = a([
-  m(u)
+  m(c)
 ], i);
 export {
   i as FhiTitle,
-  u as FhiTitleSelector
+  c as FhiTitleSelector
 };
 //# sourceMappingURL=fhi-title.js.map

package/fhi-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-title.js","sources":["../../src/components/fhi-title/fhi-title.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 FhiTitleSelector = 'fhi-title';\n\nexport type TitleLevel = 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n\n/*\n ## FHI Title\n \n {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview}\n \n The `<fhi-title>` component is used to display title 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-title\n * @element fhi-title\n \n @slot - The content of the fhi-title component. This should be pure text.\n /\n@customElement(FhiTitleSelector)\nexport class FhiTitle 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-title color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-title>\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!: TitleLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('~~color~~') && typeof this.~~color~~ == '~~string~~') {\n this.style.color = this.color;\n }\n }\n\n render() {\n const template = `\n <h${this.level} class=\"title\">\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-title-large-font-size);\n --font-weight-large: var(--fhi-typography-title-large-font-weight);\n --line-height-large: var(--fhi-typography-title-large-line-height);\n --letter-spacing-large: var(--fhi-typography-title-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-title-medium-font-size);\n --font-weight-medium: var(--fhi-typography-title-medium-font-weight);\n --line-height-medium: var(--fhi-typography-title-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-title-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-title-small-font-size);\n --font-weight-small: var(--fhi-typography-title-small-font-weight);\n --line-height-small: var(--fhi-typography-title-small-line-height);\n --letter-spacing-small: var(--fhi-typography-title-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .title {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .title {\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 .title {\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 .title {\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":["FhiTitleSelector","FhiTitle","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAmB;AAkBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,~~KAAK~~,OAAO,KAAK,~~SAAS~~,~~aACzD~~,KAAK,~~MAAM~~,QAAQ,KAAK;AAAA,~~EAE5B~~;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AA4DF;~~AA7GaH~~,~~EAmDJ~~,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;~~AA7C2BC~~,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,CAAgB;AAAA,GAClBC,CAAA;"}
1	+ {"version":3,"file":"fhi-title.js","sources":["../../src/components/typography/fhi-title/fhi-title.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 FhiTitleSelector = 'fhi-title';\n\nexport type TitleLevel = 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n\n/*\n ## FHI Title\n \n {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview}\n \n The `<fhi-title>` component is used to display title 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-title\n * @element fhi-title\n \n @slot - The content of the fhi-title component. This should be pure text.\n /\n@customElement(FhiTitleSelector)\nexport class FhiTitle 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-title color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-title>\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!: TitleLevel;\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=\"title\">\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-title-large-font-size);\n --font-weight-large: var(--fhi-typography-title-large-font-weight);\n --line-height-large: var(--fhi-typography-title-large-line-height);\n --letter-spacing-large: var(--fhi-typography-title-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-title-medium-font-size);\n --font-weight-medium: var(--fhi-typography-title-medium-font-weight);\n --line-height-medium: var(--fhi-typography-title-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-title-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-title-small-font-size);\n --font-weight-small: var(--fhi-typography-title-small-font-weight);\n --line-height-small: var(--fhi-typography-title-small-line-height);\n --letter-spacing-small: var(--fhi-typography-title-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .title {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .title {\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 .title {\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 .title {\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":["FhiTitleSelector","FhiTitle","LitElement","changedProperties","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAmB;AAkBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,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;AA4DF;AA1HaH,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;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,CAAgB;AAAA,GAClBC,CAAA;"}