@quartzds/core 1.0.0-beta.119 → 1.0.0-beta.120
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/CHANGELOG.md +50 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -1
- package/components/index.js.map +1 -1
- package/components/{p--RtuuN-f.js → p-5RFBIepu.js} +4 -4
- package/components/{p--RtuuN-f.js.map → p-5RFBIepu.js.map} +1 -1
- package/components/{p-BcuDZbUA.js → p-B03FWheS.js} +23 -27
- package/components/p-B03FWheS.js.map +1 -0
- package/components/{p-Bv_uu0s1.js → p-BkBJDD6Y.js} +7 -7
- package/components/p-BkBJDD6Y.js.map +1 -0
- package/components/{p-B_6Kulw9.js → p-BkgfW_tl.js} +4 -4
- package/components/{p-B_6Kulw9.js.map → p-BkgfW_tl.js.map} +1 -1
- package/components/{p-DdqipBK9.js → p-Bnc7Puxx.js} +10 -10
- package/components/p-Bnc7Puxx.js.map +1 -0
- package/components/{p-CXI7fTbm.js → p-CFVg7I9T.js} +6 -6
- package/components/p-CFVg7I9T.js.map +1 -0
- package/components/{p-kI1bxLGk.js → p-CRVPDKfO.js} +7 -7
- package/components/p-CRVPDKfO.js.map +1 -0
- package/{dist/esm/helpers-BVuIKvSk.js → components/p-CXP6q9Mr.js} +13 -11
- package/components/p-CXP6q9Mr.js.map +1 -0
- package/components/{p-CndRvQiV.js → p-DeRqCYmp.js} +5 -5
- package/components/{p-CndRvQiV.js.map → p-DeRqCYmp.js.map} +1 -1
- package/components/{p-aWJYkykh.js → p-DnZdwX0l.js} +7 -7
- package/components/{p-aWJYkykh.js.map → p-DnZdwX0l.js.map} +1 -1
- package/components/{p-BWYKuRRD.js → p-Dsc0-aXK.js} +5 -5
- package/components/{p-BWYKuRRD.js.map → p-Dsc0-aXK.js.map} +1 -1
- package/components/{p-C80aM3BN.js → p-DwxIJEUj.js} +3 -3
- package/components/{p-C80aM3BN.js.map → p-DwxIJEUj.js.map} +1 -1
- package/components/{p-FsslOC0B.js → p-U2Q0vF-d.js} +3 -3
- package/components/p-U2Q0vF-d.js.map +1 -0
- package/components/{p-D4vlGPhk.js → p-eFhV8w2l.js} +6 -4
- package/components/p-eFhV8w2l.js.map +1 -0
- package/components/qds-action-item.js +4 -4
- package/components/qds-action-item.js.map +1 -1
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-badge-indicator.js +1 -1
- package/components/qds-breadcrumb-item.js +13 -7
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +39 -10
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +4 -4
- package/components/qds-dialog.js +7 -7
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +3 -3
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.d.ts +11 -0
- package/components/qds-icon-tab.js +278 -0
- package/components/qds-icon-tab.js.map +1 -0
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +5 -5
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +27 -8
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +24 -19
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +1 -1
- package/components/qds-menu-item.js +7 -7
- package/components/qds-menu-item.js.map +1 -1
- package/components/qds-mini-button.js +1 -1
- package/components/qds-progress-bar.js +1 -1
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +6 -6
- package/components/qds-select.js.map +1 -1
- package/components/qds-standalone-link.js +5 -5
- package/components/qds-standalone-link.js.map +1 -1
- package/components/qds-switch.js +6 -6
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.js +20 -87
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +10 -10
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +2 -2
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +4 -4
- package/components/qds-textarea.js.map +1 -1
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/{helpers-wsiRak3m.js → helpers-BIL8yXqA.js} +13 -11
- package/dist/cjs/helpers-BIL8yXqA.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +2 -2
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media_3.cjs.entry.js +7 -7
- package/dist/cjs/qds-badge-counter.qds-badge-indicator.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +1 -1
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +11 -5
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +33 -6
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +3 -3
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +2 -2
- package/dist/cjs/qds-dropdown.cjs.entry.js +3 -2
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +2 -2
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-tab.cjs.entry.js +214 -0
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-icon.cjs.entry.js +2 -2
- package/dist/cjs/qds-inline-link.cjs.entry.js +4 -4
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +22 -6
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +4 -4
- package/dist/cjs/qds-label.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +14 -9
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +4 -4
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +2 -2
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +5 -5
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js +4 -4
- package/dist/cjs/qds-standalone-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +5 -5
- package/dist/cjs/qds-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +10 -70
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +5 -5
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag.cjs.entry.js +110 -0
- package/dist/cjs/qds-tag.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-textarea.cjs.entry.js +4 -4
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/{qds-tag_2.cjs.entry.js → qds-title.cjs.entry.js} +3 -103
- package/dist/cjs/qds-title.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tooltip.cjs.entry.js +21 -24
- package/dist/cjs/qds-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +717 -157
- package/dist/docs.json +841 -131
- package/{components/p--gmRsVWR.js → dist/esm/helpers-BgaJNF9u.js} +13 -11
- package/dist/esm/helpers-BgaJNF9u.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +2 -2
- package/dist/esm/qds-action-item.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media_3.entry.js +7 -7
- package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -1
- package/dist/esm/qds-badge-counter_2.entry.js +1 -1
- package/dist/esm/qds-breadcrumb-item.entry.js +11 -5
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +33 -6
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +1 -1
- package/dist/esm/qds-dialog.entry.js +3 -3
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +2 -2
- package/dist/esm/qds-dropdown.entry.js +3 -2
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +2 -2
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +212 -0
- package/dist/esm/qds-icon-tab.entry.js.map +1 -0
- package/dist/esm/qds-icon.entry.js +2 -2
- package/dist/esm/qds-inline-link.entry.js +4 -4
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +22 -6
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +4 -4
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +14 -9
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +4 -4
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +2 -2
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +5 -5
- package/dist/esm/qds-select.entry.js.map +1 -1
- package/dist/esm/qds-standalone-link.entry.js +4 -4
- package/dist/esm/qds-standalone-link.entry.js.map +1 -1
- package/dist/esm/qds-switch.entry.js +5 -5
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +10 -70
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +5 -5
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag.entry.js +108 -0
- package/dist/esm/qds-tag.entry.js.map +1 -0
- package/dist/esm/qds-textarea.entry.js +4 -4
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/{qds-tag_2.entry.js → qds-title.entry.js} +5 -104
- package/dist/esm/qds-title.entry.js.map +1 -0
- package/dist/esm/qds-tooltip.entry.js +21 -24
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/button/button.d.ts +7 -0
- package/dist/types/components/dropdown/dropdown.d.ts +4 -4
- package/dist/types/components/icon-tab/icon-tab.d.ts +110 -0
- package/dist/types/components/input/input.d.ts +13 -1
- package/dist/types/components/list-item/list-item.d.ts +2 -2
- package/dist/types/components/tab/tab.d.ts +2 -9
- package/dist/types/components/tooltip/tooltip.d.ts +1 -2
- package/dist/types/components.d.ts +232 -21
- package/dist/types/helpers.d.ts +4 -9
- package/dist/vscode.html-custom-data.json +158 -7
- package/hydrate/index.js +631 -400
- package/hydrate/index.mjs +631 -400
- package/package.json +1 -1
- package/components/p--gmRsVWR.js.map +0 -1
- package/components/p-BcuDZbUA.js.map +0 -1
- package/components/p-Bv_uu0s1.js.map +0 -1
- package/components/p-CXI7fTbm.js.map +0 -1
- package/components/p-D4vlGPhk.js.map +0 -1
- package/components/p-DdqipBK9.js.map +0 -1
- package/components/p-FsslOC0B.js.map +0 -1
- package/components/p-kI1bxLGk.js.map +0 -1
- package/dist/cjs/helpers-wsiRak3m.js.map +0 -1
- package/dist/cjs/qds-tag.qds-title.entry.cjs.js.map +0 -1
- package/dist/esm/helpers-BVuIKvSk.js.map +0 -1
- package/dist/esm/qds-tag.qds-title.entry.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-tag.entry.js","sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-tag {\n align-items: center;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n max-width: inherit;\n min-width: inherit;\n width: inherit;\n}\n\n.qds-text {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n[data-status='error'] {\n color: var(--qds-theme-feedback-message-critical);\n}\n\n[data-status='success'] {\n color: var(--qds-theme-feedback-message-success);\n}\n\n[data-status='warning'] {\n color: var(--qds-theme-feedback-message-important);\n}\n\n[data-status='info'] {\n color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='neutral'] {\n color: var(--qds-theme-feedback-message-neutral);\n}\n\n[data-importance='subdued'] .qds-text {\n color: var(--qds-theme-text-standard);\n}\n\n[data-importance='standard'] {\n &[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical-dimmed);\n }\n\n &[data-status='success'] {\n background-color: var(--qds-theme-feedback-message-success-dimmed);\n }\n\n &[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important-dimmed);\n }\n\n &[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational-dimmed);\n }\n\n &[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral-dimmed);\n }\n}\n\n[data-importance='emphasized'] {\n &[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical);\n color: var(--qds-theme-feedback-message-critical-contrast);\n }\n\n &[data-status='success'] {\n background-color: var(--qds-theme-feedback-message-success);\n color: var(--qds-theme-feedback-message-success-contrast);\n }\n\n &[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important);\n color: var(--qds-theme-feedback-message-important-contrast);\n }\n\n &[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-size='small'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-small-text);\n gap: var(--qds-feedback-tag-small-gap-internal);\n min-height: var(--qds-feedback-tag-small-height);\n border-radius: var(--qds-feedback-tag-small-border-radius);\n }\n\n &.qds-padding {\n padding: var(--qds-feedback-tag-small-padding-vertical)\n var(--qds-feedback-tag-small-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-small-icon-size);\n height: var(--qds-feedback-tag-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-standard-text);\n gap: var(--qds-feedback-tag-standard-gap-internal);\n min-height: var(--qds-feedback-tag-standard-height);\n border-radius: var(--qds-feedback-tag-standard-border-radius);\n }\n\n &.qds-padding {\n padding: var(--qds-feedback-tag-large-padding-vertical)\n var(--qds-feedback-tag-standard-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-standard-icon-size);\n height: var(--qds-feedback-tag-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-large-text);\n gap: var(--qds-feedback-tag-large-gap-internal);\n min-height: var(--qds-feedback-tag-large-height);\n border-radius: var(--qds-feedback-tag-large-border-radius);\n }\n\n &.qds-padding {\n padding: var(--qds-feedback-tag-large-padding-vertical)\n var(--qds-feedback-tag-large-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-large-icon-size);\n height: var(--qds-feedback-tag-large-icon-size);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, Fragment, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type TagStatus = Status | 'neutral'\n\n/**\n * The `<qds-tag>` element is a static descriptor used for items that need to\n * be labeled, categorized, or organized using keywords that describe them.\n *\n * @see https://quartz.se.com/build/components/tag\n */\n@Component({\n tag: 'qds-tag',\n shadow: true,\n styleUrl: 'tag.css',\n})\nexport class Tag implements ComponentInterface {\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The tag's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The tag's status.\n */\n @Prop() public readonly status?: TagStatus = 'neutral'\n\n /**\n * The tag's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The tag's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Provides a text description of the icon for screen readers.\n */\n @Prop() public readonly iconDescription?: string\n\n /**\n * Displays an indicator if `true`.\n */\n @Prop() public readonly badge?: boolean = false\n\n /**\n * The indicator badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): TagStatus {\n switch (this.status) {\n case 'error':\n case 'info':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return 'neutral'\n }\n }\n }\n\n get #hasBadge(): boolean {\n return (this.badge ?? false) && this.importance !== 'emphasized'\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-tag': true,\n 'qds-padding': this.importance !== 'subdued',\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' ? (\n <>\n {this.iconDescription !== undefined &&\n this.iconDescription !== '' && (\n <span class=\"qds-sr-only\">{this.iconDescription}</span>\n )}\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n </>\n ) : (\n this.#hasBadge && (\n <qds-badge-indicator\n status={this.#computedStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )\n )}\n <span class=\"qds-text\">{this.text}</span>\n </span>\n )\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { i as invariant, p as pickFocusEventAttributes,
|
|
7
|
+
import { i as invariant, p as pickFocusEventAttributes, e as pickInputEventAttributes, c as inheritAriaAttributes } from './helpers-BgaJNF9u.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-CZRW1LV_.js';
|
|
9
9
|
|
|
10
|
-
const textareaCss = ":host([hidden]){display:none!important}:host{display:inline-block;resize:both}slot{display:none}.qds-textarea{background-color:var(--qds-theme-form-input-background-active);border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-
|
|
10
|
+
const textareaCss = ":host([hidden]){display:none!important}:host{display:inline-block;resize:both}slot{display:none}.qds-textarea{background-color:var(--qds-theme-form-input-background-active);border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-form-input-border-radius);box-sizing:border-box;color:var(--qds-theme-control-text-standard);height:100%;padding-inline:var(--qds-control-input-padding-horizontal);resize:inherit;width:100%}.qds-textarea:hover{background-color:var(--qds-theme-form-input-background-hover);border-color:var(--qds-theme-form-input-border-hover)}.qds-textarea:disabled{background-color:var(--qds-theme-form-input-background-default);opacity:var(--qds-theme-disabled);pointer-events:none}.qds-textarea:read-only{background-color:var(--qds-theme-form-input-background-default);border-color:var(--qds-theme-form-input-border-disabled)}.qds-textarea:focus-visible{box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-textarea:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-textarea:not(:focus):user-invalid{border-color:var(--qds-theme-form-input-border-error)}.qds-textarea[data-status=success]{border-color:var(--qds-theme-form-input-border-success)}.qds-textarea[data-status=warning]{border-color:var(--qds-theme-form-input-border-warning)}.qds-textarea[data-status=error]{border-color:var(--qds-theme-form-input-border-error)}[data-size=small]{font:var(--qds-control-small-text);padding-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text);padding-block:var(--qds-control-large-padding-auto-height)}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -266,9 +266,9 @@ const TextArea = class {
|
|
|
266
266
|
this.valueChanged();
|
|
267
267
|
}
|
|
268
268
|
render() {
|
|
269
|
-
return (h(Host, { key: '
|
|
269
|
+
return (h(Host, { key: 'd3fb4b50124d583054365845989dd4a267a7c878' }, h("textarea", { key: 'e92506a523021d0f3e7f280bf24e9a095443109e', autoCapitalize: this.host.autocapitalize, autoComplete: this.autoComplete,
|
|
270
270
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
271
|
-
autoFocus: this.host.autofocus, class: "qds-textarea", cols: this.cols, "data-size": this.size ?? 'standard', "data-status": __classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedStatus_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, onBlur: __classPrivateFieldGet(this, _TextArea_onBlur, "f"), onChange: __classPrivateFieldGet(this, _TextArea_onChange, "f"), onFocus: __classPrivateFieldGet(this, _TextArea_onFocus, "f"), onInput: __classPrivateFieldGet(this, _TextArea_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _TextArea_ref, "f"), readOnly: this.readonly, rows: this.rows, spellcheck: this.host.spellcheck, tabIndex: __classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedDisabled_get) ? undefined : this.tabIndex, wrap: this.wrap, ...__classPrivateFieldGet(this, _TextArea_inheritedAttributes, "f") }), h("slot", { key: '
|
|
271
|
+
autoFocus: this.host.autofocus, class: "qds-textarea", cols: this.cols, "data-size": this.size ?? 'standard', "data-status": __classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedStatus_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, onBlur: __classPrivateFieldGet(this, _TextArea_onBlur, "f"), onChange: __classPrivateFieldGet(this, _TextArea_onChange, "f"), onFocus: __classPrivateFieldGet(this, _TextArea_onFocus, "f"), onInput: __classPrivateFieldGet(this, _TextArea_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _TextArea_ref, "f"), readOnly: this.readonly, rows: this.rows, spellcheck: this.host.spellcheck, tabIndex: __classPrivateFieldGet(this, _TextArea_instances, "a", _TextArea_computedDisabled_get) ? undefined : this.tabIndex, wrap: this.wrap, ...__classPrivateFieldGet(this, _TextArea_inheritedAttributes, "f") }), h("slot", { key: '2a6775f2cd7e90c03dc93e8b3c72a05fb17fb61a', onSlotchange: __classPrivateFieldGet(this, _TextArea_onSlotchange, "f") })));
|
|
272
272
|
}
|
|
273
273
|
static get delegatesFocus() { return true; }
|
|
274
274
|
static get formAssociated() { return true; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-textarea.entry.js","sources":["src/components/textarea/textarea.css?tag=qds-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n resize: both;\n}\n\nslot {\n display: none;\n}\n\n.qds-textarea {\n background-color: var(--qds-theme-form-input-background-active);\n border-radius: var(--qds-control-border-radius);\n border: var(--qds-form-input-border-width-default) solid\n var(--qds-theme-form-input-border-default);\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n height: 100%;\n padding-inline: var(--qds-control-input-padding-horizontal);\n resize: inherit;\n width: 100%;\n\n &:hover {\n background-color: var(--qds-theme-form-input-background-hover);\n border-color: var(--qds-theme-form-input-border-hover);\n }\n\n &:disabled {\n background-color: var(--qds-theme-form-input-background-default);\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n }\n\n &:read-only {\n background-color: var(--qds-theme-form-input-background-default);\n border-color: var(--qds-theme-form-input-border-disabled);\n }\n\n &:focus-visible {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n }\n\n &:placeholder-shown {\n color: var(--qds-theme-control-text-placeholder);\n }\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-form-input-border-error);\n }\n\n &[data-status='success'] {\n border-color: var(--qds-theme-form-input-border-success);\n }\n\n &[data-status='warning'] {\n border-color: var(--qds-theme-form-input-border-warning);\n }\n\n &[data-status='error'] {\n border-color: var(--qds-theme-form-input-border-error);\n }\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n padding-block: var(--qds-control-small-padding-auto-height);\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n padding-block: var(--qds-control-standard-padding-auto-height);\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n padding-block: var(--qds-control-large-padding-auto-height);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { EnterKeyHint, InputMode, Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size, Status } from '../shared'\n\nexport type TextAreaAutoComplete = 'off' | 'on'\n// TODO: `hard` value isn't supported by Firefox or Safari\nexport type Wrap = 'off' | 'soft'\nexport type TextAreaStatus = Exclude<Status, 'info'>\n\n/**\n * The `<qds-textarea>` element represents a multi-line plain-text editing\n * control, useful when you want to allow users to enter a sizeable amount of\n * free-form text, for example a comment on a review or feedback form.\n *\n * @see https://quartz.se.com/build/components/textarea\n */\n@Component({\n tag: 'qds-textarea',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'textarea.css',\n})\nexport class TextArea implements ComponentInterface {\n /**\n * The textarea's size.\n *\n * > **_NOTE:_** The native [`size` HTML attribute][] is not supported. CSS\n * `width` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The textarea's status.\n */\n @Prop() public readonly status?: TextAreaStatus\n\n /**\n * Indicates whether the value of the textarea can be automatically completed\n * by the browser. Possible values:\n *\n * `off`: The user must explicitly enter a value into this field for every\n * use, or the document provides its own auto-completion method; the browser\n * does not automatically complete the entry.\n * `on`: The browser can automatically complete the value based on values\n * that the user has entered during previous uses.\n *\n * If the `autocomplete` attribute is not specified on a `<qds-textarea>`\n * element, then the browser uses the `autocomplete` attribute value of the\n * `<qds-textarea>` element's form owner. The form owner is either the\n * [`<form>`][] element that this `<qds-textarea>` element is a descendant of\n * or the form element whose `id` is specified by the `form` attribute of the\n * `qds-textarea` element. For more information, see the [`autocomplete`]\n * attribute in [`<form>`][].\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n * [`autocomplete`]: https://developer.mozilla.org/docs/Web/HTML/Element/form#autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: TextAreaAutoComplete\n\n /**\n * The visible width of the text control, in average character widths. If it\n * is specified, it must be a positive integer. If it is not specified, the\n * default value is `20`.\n *\n * @webnative\n */\n @Prop() public readonly cols?: number\n\n /**\n * Prevents the textarea from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public disabled?: boolean\n\n /**\n * Prevents the user from changing the value of the textarea.\n */\n @Prop() public readonly readonly?: boolean\n\n /**\n * What action label (or icon) to present for the enter key on virtual\n * keyboards. Possible values:\n *\n * - `\"done\"`: Typically meaning there is nothing more to input and the input\n * method editor (IME) will be closed.\n * - `\"enter\"`:\tTypically inserting a new line.\n * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n * they typed.\n * - `\"next\"`: \tTypically taking the user to the next field that will accept\n * text.\n * - `\"previous\"`: Typically taking the user to the previous field that will\n * accept text.\n * - `\"search\"`: Typically taking the user to the results of searching for\n * the text they have typed.\n * - `\"send\"`: Typically delivering the text to its target.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n /**\n * The [`<form>`][] element to associate the input with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-textarea>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-textarea>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Provide a hint to browsers as to the type of virtual keyboard\n * configuration to use when editing this element or its contents.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n @Prop() public readonly inputmode?: InputMode\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-textarea` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /**\n * The maximum number of characters (as UTF-16 code units) the user can enter\n * into the textarea. This must be an non-negative integer value. If no\n * `maxlength` is specified, or an invalid value is specified, the textarea\n * has no maximum length.\n *\n * The textarea will fail [constraint validation][] if the length of the text\n * entered into the field is greater than `maxlength` UTF-16 code units long.\n * By default, browsers prevent users from entering more characters than\n * allowed by the `maxlength` attribute. See [Client-side validation][] for\n * more information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n /**\n * The minimum number of characters (as UTF-16 code units) the user can enter\n * into the textarea. This must be an non-negative integer value smaller than\n * or equal to the value specified by `maxlength`. If no `minlength` is\n * specified, or an invalid value is specified, the textarea has no minimum\n * length.\n *\n * The textarea will fail [constraint validation][] if the length of the text\n * entered into the field is fewer than `minlength` UTF-16 code units long,\n * preventing form submission. See [Client-side validation][] for more\n * information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n /**\n * The name of the textarea, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Text that appears in the textarea when it has no value set.\n *\n * @webnative\n */\n @Prop() public readonly placeholder?: string\n\n /**\n * A value must be specified for the textarea before the owning form can be\n * submitted.\n *\n * See [Client-side validation][] and the [HTML attribute: `required`][] for\n * more information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The number of visible text lines for the control. If it is specified, it\n * must be a positive integer. If it is not specified, the default value is\n * `2`.\n *\n * @webnative\n */\n @Prop() public readonly rows?: number\n\n /**\n * Get or set the selection direction of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // FIXME: Use `HTMLTextAreaElement['selectionDirection']` instead.\n // eslint-disable-next-line unicorn/no-null\n public selectionDirection: HTMLInputElement['selectionDirection'] = null\n\n /**\n * Get or set the ending position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // FIXME: Use `HTMLTextAreaElement['selectionEnd']` instead.\n // eslint-disable-next-line unicorn/no-null\n public selectionEnd: HTMLInputElement['selectionEnd'] = null\n\n /**\n * Get or set the starting position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // FIXME: Use `HTMLTextAreaElement['selectionStart']` instead.\n // eslint-disable-next-line unicorn/no-null\n public selectionStart: HTMLInputElement['selectionStart'] = null\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-select>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the textarea.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * True if `<qds-textarea>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n /**\n * Indicates how the control should wrap the value for form submission.\n * Possible values are:\n *\n * - `hard`: The browser automatically inserts line breaks (`CR+LF`) so that\n * each line is no longer than the width of the control; the `cols` attribute\n * must be specified for this to take effect\n * - `soft`: The browser ensures that all line breaks in the entered value\n * are a `CR+LF` pair, but no additional line breaks are added to the value.\n * - `off`: Like `soft` but changes appearance to `white-space: pre` so line\n * segments exceeding `cols` are not wrapped and the `<qds-textarea>` becomes\n * horizontally scrollable.\n *\n * If this attribute is not specified, `soft` is its default value.\n *\n * @webnative\n */\n @Prop() public readonly wrap?: Wrap\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the textarea's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the textarea gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the textarea's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #textarea?: HTMLTextAreaElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedValue(): Parameters<ElementInternals['setFormValue']>[0] {\n if (typeof this.value === 'number') return this.value.toString()\n // eslint-disable-next-line unicorn/no-null\n return this.value === undefined ? null : this.value\n }\n\n get #computedStatus(): TextAreaStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectionDirection')\n protected selectionDirectionChanged(): void {\n invariant(this.#textarea)\n\n // @ts-expect-error: `null` is a valid value according to the HTML spec.\n this.#textarea.selectionDirection = this.selectionDirection\n }\n\n @Watch('selectionEnd')\n protected selectionEndChanged(): void {\n invariant(this.#textarea)\n\n // @ts-expect-error: `null` is a valid value according to the HTML spec.\n this.#textarea.selectionEnd = this.selectionEnd\n }\n\n @Watch('selectionStart')\n protected selectionStartChanged(): void {\n invariant(this.#textarea)\n\n // @ts-expect-error: `null` is a valid value according to the HTML spec.\n this.#textarea.selectionStart = this.selectionStart\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('maxLength')\n @Watch('minLength')\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#textarea)\n\n if (this.maxLength !== undefined) this.#textarea.maxLength = this.maxLength\n if (this.minLength !== undefined) this.#textarea.minLength = this.minLength\n this.#textarea.required = this.required ?? false\n // eslint-disable-next-line unicorn/no-null\n if (this.value != null) this.#textarea.value = this.value.toString()\n\n const { valid } = this.#textarea.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#textarea)\n else\n this.internals.setValidity(\n this.#textarea.validity,\n this.#textarea.validationMessage,\n this.#textarea,\n )\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (!this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('status')\n protected statusChanged(): void {\n this.internals.ariaInvalid = (this.#computedStatus === 'error').toString()\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.#defineGetter('selectionDirection', this.#getSelectionDirection)\n this.#defineGetter('selectionStart', this.#getSelectionStart)\n this.#defineGetter('selectionEnd', this.#getSelectionEnd)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.statusChanged()\n }\n\n public componentDidLoad(): void {\n invariant(this.#textarea)\n\n this.validationChanged()\n this.valueChanged()\n }\n\n public render() {\n return (\n <Host>\n <textarea\n autoCapitalize={this.host.autocapitalize}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n class=\"qds-textarea\"\n cols={this.cols}\n data-size={this.size ?? 'standard'}\n data-status={this.#computedStatus}\n disabled={this.disabled}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxLength}\n minLength={this.minLength}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n placeholder={this.placeholder}\n ref={this.#ref}\n readOnly={this.readonly}\n rows={this.rows}\n spellcheck={this.host.spellcheck}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n wrap={this.wrap}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <slot onSlotchange={this.#onSlotchange} />\n </Host>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLTextAreaElement['setCustomValidity'] = (\n error,\n ) => {\n invariant(this.#textarea)\n\n this.#textarea.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#textarea)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public select: HTMLTextAreaElement['select'] = () => {\n invariant(this.#textarea)\n\n this.#textarea.select()\n }\n\n public setRangeText = (\n replacement: string,\n start: number,\n end: number,\n selectionMode?: SelectionMode,\n ): void => {\n invariant(this.#textarea)\n\n this.#textarea.setRangeText(replacement, start, end, selectionMode)\n\n if (this.value !== this.#textarea.value) {\n this.value = this.#textarea.value\n this.inputEmitter.emit()\n this.changeEmitter.emit()\n }\n }\n\n public setSelectionRange: HTMLTextAreaElement['setSelectionRange'] = (\n start,\n end,\n direction,\n ) => {\n invariant(this.#textarea)\n\n this.#textarea.setSelectionRange(start, end, direction)\n }\n\n readonly #getSelectionDirection: () => HTMLTextAreaElement['selectionDirection'] =\n () => {\n invariant(this.#textarea)\n\n return this.#textarea.selectionDirection\n }\n\n readonly #getSelectionStart: () => HTMLTextAreaElement['selectionStart'] =\n () => {\n invariant(this.#textarea)\n\n return this.#textarea.selectionStart\n }\n\n readonly #getSelectionEnd: () => HTMLTextAreaElement['selectionEnd'] = () => {\n invariant(this.#textarea)\n\n return this.#textarea.selectionEnd\n }\n\n readonly #ref = (textarea?: HTMLTextAreaElement): void => {\n this.#textarea = textarea\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#textarea)\n\n this.value = this.#textarea.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (): void => {\n invariant(this.#textarea)\n this.#textarea.innerHTML = this.host.innerHTML\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-textarea.entry.js","sources":["src/components/textarea/textarea.css?tag=qds-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n resize: both;\n}\n\nslot {\n display: none;\n}\n\n.qds-textarea {\n background-color: var(--qds-theme-form-input-background-active);\n border-radius: var(--qds-form-input-border-radius);\n border: var(--qds-form-input-border-width-default) solid\n var(--qds-theme-form-input-border-default);\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n height: 100%;\n padding-inline: var(--qds-control-input-padding-horizontal);\n resize: inherit;\n width: 100%;\n\n &:hover {\n background-color: var(--qds-theme-form-input-background-hover);\n border-color: var(--qds-theme-form-input-border-hover);\n }\n\n &:disabled {\n background-color: var(--qds-theme-form-input-background-default);\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n }\n\n &:read-only {\n background-color: var(--qds-theme-form-input-background-default);\n border-color: var(--qds-theme-form-input-border-disabled);\n }\n\n &:focus-visible {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n }\n\n &:placeholder-shown {\n color: var(--qds-theme-control-text-placeholder);\n }\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-form-input-border-error);\n }\n\n &[data-status='success'] {\n border-color: var(--qds-theme-form-input-border-success);\n }\n\n &[data-status='warning'] {\n border-color: var(--qds-theme-form-input-border-warning);\n }\n\n &[data-status='error'] {\n border-color: var(--qds-theme-form-input-border-error);\n }\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n padding-block: var(--qds-control-small-padding-auto-height);\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n padding-block: var(--qds-control-standard-padding-auto-height);\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n padding-block: var(--qds-control-large-padding-auto-height);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { EnterKeyHint, InputMode, Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size, Status } from '../shared'\n\nexport type TextAreaAutoComplete = 'off' | 'on'\n// TODO: `hard` value isn't supported by Firefox or Safari\nexport type Wrap = 'off' | 'soft'\nexport type TextAreaStatus = Exclude<Status, 'info'>\n\n/**\n * The `<qds-textarea>` element represents a multi-line plain-text editing\n * control, useful when you want to allow users to enter a sizeable amount of\n * free-form text, for example a comment on a review or feedback form.\n *\n * @see https://quartz.se.com/build/components/textarea\n */\n@Component({\n tag: 'qds-textarea',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'textarea.css',\n})\nexport class TextArea implements ComponentInterface {\n /**\n * The textarea's size.\n *\n * > **_NOTE:_** The native [`size` HTML attribute][] is not supported. CSS\n * `width` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The textarea's status.\n */\n @Prop() public readonly status?: TextAreaStatus\n\n /**\n * Indicates whether the value of the textarea can be automatically completed\n * by the browser. Possible values:\n *\n * `off`: The user must explicitly enter a value into this field for every\n * use, or the document provides its own auto-completion method; the browser\n * does not automatically complete the entry.\n * `on`: The browser can automatically complete the value based on values\n * that the user has entered during previous uses.\n *\n * If the `autocomplete` attribute is not specified on a `<qds-textarea>`\n * element, then the browser uses the `autocomplete` attribute value of the\n * `<qds-textarea>` element's form owner. The form owner is either the\n * [`<form>`][] element that this `<qds-textarea>` element is a descendant of\n * or the form element whose `id` is specified by the `form` attribute of the\n * `qds-textarea` element. For more information, see the [`autocomplete`]\n * attribute in [`<form>`][].\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n * [`autocomplete`]: https://developer.mozilla.org/docs/Web/HTML/Element/form#autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: TextAreaAutoComplete\n\n /**\n * The visible width of the text control, in average character widths. If it\n * is specified, it must be a positive integer. If it is not specified, the\n * default value is `20`.\n *\n * @webnative\n */\n @Prop() public readonly cols?: number\n\n /**\n * Prevents the textarea from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public disabled?: boolean\n\n /**\n * Prevents the user from changing the value of the textarea.\n */\n @Prop() public readonly readonly?: boolean\n\n /**\n * What action label (or icon) to present for the enter key on virtual\n * keyboards. Possible values:\n *\n * - `\"done\"`: Typically meaning there is nothing more to input and the input\n * method editor (IME) will be closed.\n * - `\"enter\"`:\tTypically inserting a new line.\n * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n * they typed.\n * - `\"next\"`: \tTypically taking the user to the next field that will accept\n * text.\n * - `\"previous\"`: Typically taking the user to the previous field that will\n * accept text.\n * - `\"search\"`: Typically taking the user to the results of searching for\n * the text they have typed.\n * - `\"send\"`: Typically delivering the text to its target.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n /**\n * The [`<form>`][] element to associate the input with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-textarea>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-textarea>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Provide a hint to browsers as to the type of virtual keyboard\n * configuration to use when editing this element or its contents.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n @Prop() public readonly inputmode?: InputMode\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-textarea` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /**\n * The maximum number of characters (as UTF-16 code units) the user can enter\n * into the textarea. This must be an non-negative integer value. If no\n * `maxlength` is specified, or an invalid value is specified, the textarea\n * has no maximum length.\n *\n * The textarea will fail [constraint validation][] if the length of the text\n * entered into the field is greater than `maxlength` UTF-16 code units long.\n * By default, browsers prevent users from entering more characters than\n * allowed by the `maxlength` attribute. See [Client-side validation][] for\n * more information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n /**\n * The minimum number of characters (as UTF-16 code units) the user can enter\n * into the textarea. This must be an non-negative integer value smaller than\n * or equal to the value specified by `maxlength`. If no `minlength` is\n * specified, or an invalid value is specified, the textarea has no minimum\n * length.\n *\n * The textarea will fail [constraint validation][] if the length of the text\n * entered into the field is fewer than `minlength` UTF-16 code units long,\n * preventing form submission. See [Client-side validation][] for more\n * information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n /**\n * The name of the textarea, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Text that appears in the textarea when it has no value set.\n *\n * @webnative\n */\n @Prop() public readonly placeholder?: string\n\n /**\n * A value must be specified for the textarea before the owning form can be\n * submitted.\n *\n * See [Client-side validation][] and the [HTML attribute: `required`][] for\n * more information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The number of visible text lines for the control. If it is specified, it\n * must be a positive integer. If it is not specified, the default value is\n * `2`.\n *\n * @webnative\n */\n @Prop() public readonly rows?: number\n\n /**\n * Get or set the selection direction of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // FIXME: Use `HTMLTextAreaElement['selectionDirection']` instead.\n // eslint-disable-next-line unicorn/no-null\n public selectionDirection: HTMLInputElement['selectionDirection'] = null\n\n /**\n * Get or set the ending position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // FIXME: Use `HTMLTextAreaElement['selectionEnd']` instead.\n // eslint-disable-next-line unicorn/no-null\n public selectionEnd: HTMLInputElement['selectionEnd'] = null\n\n /**\n * Get or set the starting position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // FIXME: Use `HTMLTextAreaElement['selectionStart']` instead.\n // eslint-disable-next-line unicorn/no-null\n public selectionStart: HTMLInputElement['selectionStart'] = null\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-select>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the textarea.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * True if `<qds-textarea>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n /**\n * Indicates how the control should wrap the value for form submission.\n * Possible values are:\n *\n * - `hard`: The browser automatically inserts line breaks (`CR+LF`) so that\n * each line is no longer than the width of the control; the `cols` attribute\n * must be specified for this to take effect\n * - `soft`: The browser ensures that all line breaks in the entered value\n * are a `CR+LF` pair, but no additional line breaks are added to the value.\n * - `off`: Like `soft` but changes appearance to `white-space: pre` so line\n * segments exceeding `cols` are not wrapped and the `<qds-textarea>` becomes\n * horizontally scrollable.\n *\n * If this attribute is not specified, `soft` is its default value.\n *\n * @webnative\n */\n @Prop() public readonly wrap?: Wrap\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the textarea's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the textarea gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the textarea's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #textarea?: HTMLTextAreaElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedValue(): Parameters<ElementInternals['setFormValue']>[0] {\n if (typeof this.value === 'number') return this.value.toString()\n // eslint-disable-next-line unicorn/no-null\n return this.value === undefined ? null : this.value\n }\n\n get #computedStatus(): TextAreaStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectionDirection')\n protected selectionDirectionChanged(): void {\n invariant(this.#textarea)\n\n // @ts-expect-error: `null` is a valid value according to the HTML spec.\n this.#textarea.selectionDirection = this.selectionDirection\n }\n\n @Watch('selectionEnd')\n protected selectionEndChanged(): void {\n invariant(this.#textarea)\n\n // @ts-expect-error: `null` is a valid value according to the HTML spec.\n this.#textarea.selectionEnd = this.selectionEnd\n }\n\n @Watch('selectionStart')\n protected selectionStartChanged(): void {\n invariant(this.#textarea)\n\n // @ts-expect-error: `null` is a valid value according to the HTML spec.\n this.#textarea.selectionStart = this.selectionStart\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('maxLength')\n @Watch('minLength')\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#textarea)\n\n if (this.maxLength !== undefined) this.#textarea.maxLength = this.maxLength\n if (this.minLength !== undefined) this.#textarea.minLength = this.minLength\n this.#textarea.required = this.required ?? false\n // eslint-disable-next-line unicorn/no-null\n if (this.value != null) this.#textarea.value = this.value.toString()\n\n const { valid } = this.#textarea.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#textarea)\n else\n this.internals.setValidity(\n this.#textarea.validity,\n this.#textarea.validationMessage,\n this.#textarea,\n )\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (!this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('status')\n protected statusChanged(): void {\n this.internals.ariaInvalid = (this.#computedStatus === 'error').toString()\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.#defineGetter('selectionDirection', this.#getSelectionDirection)\n this.#defineGetter('selectionStart', this.#getSelectionStart)\n this.#defineGetter('selectionEnd', this.#getSelectionEnd)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.statusChanged()\n }\n\n public componentDidLoad(): void {\n invariant(this.#textarea)\n\n this.validationChanged()\n this.valueChanged()\n }\n\n public render() {\n return (\n <Host>\n <textarea\n autoCapitalize={this.host.autocapitalize}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n class=\"qds-textarea\"\n cols={this.cols}\n data-size={this.size ?? 'standard'}\n data-status={this.#computedStatus}\n disabled={this.disabled}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxLength}\n minLength={this.minLength}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n placeholder={this.placeholder}\n ref={this.#ref}\n readOnly={this.readonly}\n rows={this.rows}\n spellcheck={this.host.spellcheck}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n wrap={this.wrap}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <slot onSlotchange={this.#onSlotchange} />\n </Host>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLTextAreaElement['setCustomValidity'] = (\n error,\n ) => {\n invariant(this.#textarea)\n\n this.#textarea.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#textarea)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public select: HTMLTextAreaElement['select'] = () => {\n invariant(this.#textarea)\n\n this.#textarea.select()\n }\n\n public setRangeText = (\n replacement: string,\n start: number,\n end: number,\n selectionMode?: SelectionMode,\n ): void => {\n invariant(this.#textarea)\n\n this.#textarea.setRangeText(replacement, start, end, selectionMode)\n\n if (this.value !== this.#textarea.value) {\n this.value = this.#textarea.value\n this.inputEmitter.emit()\n this.changeEmitter.emit()\n }\n }\n\n public setSelectionRange: HTMLTextAreaElement['setSelectionRange'] = (\n start,\n end,\n direction,\n ) => {\n invariant(this.#textarea)\n\n this.#textarea.setSelectionRange(start, end, direction)\n }\n\n readonly #getSelectionDirection: () => HTMLTextAreaElement['selectionDirection'] =\n () => {\n invariant(this.#textarea)\n\n return this.#textarea.selectionDirection\n }\n\n readonly #getSelectionStart: () => HTMLTextAreaElement['selectionStart'] =\n () => {\n invariant(this.#textarea)\n\n return this.#textarea.selectionStart\n }\n\n readonly #getSelectionEnd: () => HTMLTextAreaElement['selectionEnd'] = () => {\n invariant(this.#textarea)\n\n return this.#textarea.selectionEnd\n }\n\n readonly #ref = (textarea?: HTMLTextAreaElement): void => {\n this.#textarea = textarea\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#textarea)\n\n this.value = this.#textarea.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (): void => {\n invariant(this.#textarea)\n this.#textarea.innerHTML = this.host.innerHTML\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,106 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { r as registerInstance, h
|
|
7
|
-
import { b as inheritAriaAttributes } from './helpers-BVuIKvSk.js';
|
|
8
|
-
|
|
9
|
-
const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;max-width:inherit;min-width:inherit;width:inherit}.qds-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.qds-icon{flex-shrink:0}[data-status=error]{color:var(--qds-theme-feedback-message-critical)}[data-status=success]{color:var(--qds-theme-feedback-message-success)}[data-status=warning]{color:var(--qds-theme-feedback-message-important)}[data-status=info]{color:var(--qds-theme-feedback-message-informational)}[data-status=neutral]{color:var(--qds-theme-feedback-message-neutral)}[data-importance=subdued] .qds-text{color:var(--qds-theme-text-standard)}[data-importance=standard][data-status=error]{background-color:var(--qds-theme-feedback-message-critical-dimmed)}[data-importance=standard][data-status=success]{background-color:var(--qds-theme-feedback-message-success-dimmed)}[data-importance=standard][data-status=warning]{background-color:var(--qds-theme-feedback-message-important-dimmed)}[data-importance=standard][data-status=info]{background-color:var(--qds-theme-feedback-message-informational-dimmed)}[data-importance=standard][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral-dimmed)}[data-importance=emphasized][data-status=error]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}[data-importance=emphasized][data-status=success]{background-color:var(--qds-theme-feedback-message-success);color:var(--qds-theme-feedback-message-success-contrast)}[data-importance=emphasized][data-status=warning]{background-color:var(--qds-theme-feedback-message-important);color:var(--qds-theme-feedback-message-important-contrast)}[data-importance=emphasized][data-status=info]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=emphasized][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-tag[data-size=small]{border-radius:var(--qds-feedback-tag-small-border-radius);font:var(--qds-feedback-tag-small-text);gap:var(--qds-feedback-tag-small-gap-internal);min-height:var(--qds-feedback-tag-small-height)}.qds-padding[data-size=small]{padding:var(--qds-feedback-tag-small-padding-vertical) var(--qds-feedback-tag-small-padding-horizontal)}.qds-icon[data-size=small]{height:var(--qds-feedback-tag-small-icon-size);width:var(--qds-feedback-tag-small-icon-size)}.qds-tag[data-size=standard]{border-radius:var(--qds-feedback-tag-standard-border-radius);font:var(--qds-feedback-tag-standard-text);gap:var(--qds-feedback-tag-standard-gap-internal);min-height:var(--qds-feedback-tag-standard-height)}.qds-padding[data-size=standard]{padding:var(--qds-feedback-tag-large-padding-vertical) var(--qds-feedback-tag-standard-padding-horizontal)}.qds-icon[data-size=standard]{height:var(--qds-feedback-tag-standard-icon-size);width:var(--qds-feedback-tag-standard-icon-size)}.qds-tag[data-size=large]{border-radius:var(--qds-feedback-tag-large-border-radius);font:var(--qds-feedback-tag-large-text);gap:var(--qds-feedback-tag-large-gap-internal);min-height:var(--qds-feedback-tag-large-height)}.qds-padding[data-size=large]{padding:var(--qds-feedback-tag-large-padding-vertical) var(--qds-feedback-tag-large-padding-horizontal)}.qds-icon[data-size=large]{height:var(--qds-feedback-tag-large-icon-size);width:var(--qds-feedback-tag-large-icon-size)}";
|
|
10
|
-
|
|
11
|
-
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
12
|
-
//
|
|
13
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
14
|
-
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
15
|
-
if (kind === "m")
|
|
16
|
-
throw new TypeError("Private method is not writable");
|
|
17
|
-
if (kind === "a" && !f)
|
|
18
|
-
throw new TypeError("Private accessor was defined without a setter");
|
|
19
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
20
|
-
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
21
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
22
|
-
};
|
|
23
|
-
var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
24
|
-
if (kind === "a" && !f)
|
|
25
|
-
throw new TypeError("Private accessor was defined without a getter");
|
|
26
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
27
|
-
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
28
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
29
|
-
};
|
|
30
|
-
var _Tag_instances, _Tag_inheritedAttributes, _Tag_computedImportance_get, _Tag_computedSize_get, _Tag_computedStatus_get, _Tag_hasBadge_get;
|
|
31
|
-
const Tag = class {
|
|
32
|
-
constructor(hostRef) {
|
|
33
|
-
registerInstance(this, hostRef);
|
|
34
|
-
_Tag_instances.add(this);
|
|
35
|
-
/**
|
|
36
|
-
* The name of a registered icon library.
|
|
37
|
-
*/
|
|
38
|
-
this.iconLibrary = 'default';
|
|
39
|
-
/**
|
|
40
|
-
* The tag's importance.
|
|
41
|
-
*/
|
|
42
|
-
this.importance = 'standard';
|
|
43
|
-
/**
|
|
44
|
-
* The tag's status.
|
|
45
|
-
*/
|
|
46
|
-
this.status = 'neutral';
|
|
47
|
-
/**
|
|
48
|
-
* The tag's size.
|
|
49
|
-
*/
|
|
50
|
-
this.size = 'standard';
|
|
51
|
-
/**
|
|
52
|
-
* Displays an indicator if `true`.
|
|
53
|
-
*/
|
|
54
|
-
this.badge = false;
|
|
55
|
-
_Tag_inheritedAttributes.set(this, {});
|
|
56
|
-
}
|
|
57
|
-
componentWillLoad() {
|
|
58
|
-
__classPrivateFieldSet(this, _Tag_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
59
|
-
}
|
|
60
|
-
render() {
|
|
61
|
-
return (h("span", { key: 'c712be657d0ea1f92d159f39aaf8ac6e09f955c7', class: {
|
|
62
|
-
'qds-tag': true,
|
|
63
|
-
'qds-padding': this.importance !== 'subdued',
|
|
64
|
-
}, "data-importance": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedImportance_get), "data-size": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), "data-status": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedStatus_get), ...__classPrivateFieldGet$1(this, _Tag_inheritedAttributes, "f") }, this.iconName !== undefined && this.iconName !== '' ? (h(Fragment, null, this.iconDescription !== undefined &&
|
|
65
|
-
this.iconDescription !== '' && (h("span", { class: "qds-sr-only" }, this.iconDescription)), h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), library: this.iconLibrary, name: this.iconName }))) : (__classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_hasBadge_get) && (h("qds-badge-indicator", { status: __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedStatus_get), description: this.badgeDescription, size: __classPrivateFieldGet$1(this, _Tag_instances, "a", _Tag_computedSize_get), strokeRing: true }))), h("span", { key: '5a604ea77bfdc5e9f8ca948a1c972eaa8aed4a93', class: "qds-text" }, this.text)));
|
|
66
|
-
}
|
|
67
|
-
get host() { return getElement(this); }
|
|
68
|
-
};
|
|
69
|
-
_Tag_inheritedAttributes = new WeakMap(), _Tag_instances = new WeakSet(), _Tag_computedImportance_get = function _Tag_computedImportance_get() {
|
|
70
|
-
switch (this.importance) {
|
|
71
|
-
case 'subdued':
|
|
72
|
-
case 'emphasized': {
|
|
73
|
-
return this.importance;
|
|
74
|
-
}
|
|
75
|
-
default: {
|
|
76
|
-
return 'standard';
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}, _Tag_computedSize_get = function _Tag_computedSize_get() {
|
|
80
|
-
switch (this.size) {
|
|
81
|
-
case 'standard':
|
|
82
|
-
case 'small':
|
|
83
|
-
case 'large': {
|
|
84
|
-
return this.size;
|
|
85
|
-
}
|
|
86
|
-
default: {
|
|
87
|
-
return 'standard';
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}, _Tag_computedStatus_get = function _Tag_computedStatus_get() {
|
|
91
|
-
switch (this.status) {
|
|
92
|
-
case 'error':
|
|
93
|
-
case 'info':
|
|
94
|
-
case 'success':
|
|
95
|
-
case 'warning': {
|
|
96
|
-
return this.status;
|
|
97
|
-
}
|
|
98
|
-
default: {
|
|
99
|
-
return 'neutral';
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}, _Tag_hasBadge_get = function _Tag_hasBadge_get() {
|
|
103
|
-
return (this.badge ?? false) && this.importance !== 'emphasized';
|
|
104
|
-
};
|
|
105
|
-
Tag.style = tagCss;
|
|
6
|
+
import { r as registerInstance, h } from './index-Hg1Liloy.js';
|
|
106
7
|
|
|
107
8
|
const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"f\"}.qds-titles.qds-has-kicker{grid-template-areas:\"g\" \"f\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"f\" \"h\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"g\" \"f\" \"h\"}.qds-has-icon{grid-template-areas:\"i f\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". g\" \"i f\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"i f\" \". h\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". g\" \"i f\" \". h\"}.qds-title,.qds-titles{hyphens:inherit}.qds-kicker,.qds-subtitle{hyphens:manual}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:f}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:h}.qds-kicker{color:var(--qds-theme-kicker);grid-area:g}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:i}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-standard-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
|
|
108
9
|
|
|
@@ -151,14 +52,14 @@ const Title = class {
|
|
|
151
52
|
const level = `qds-${this.level ?? 'section'}`;
|
|
152
53
|
const Tag = this.tag ?? 'h2';
|
|
153
54
|
const hasIcon = this.iconName !== undefined && this.iconName !== '';
|
|
154
|
-
return (h("hgroup", { key: '
|
|
55
|
+
return (h("hgroup", { key: 'ff4f9d1cd9fc8f4922a2ccc421d5b45793b9e13d', "data-alignment": this.alignment ?? 'start', "data-variant": this.variant, class: {
|
|
155
56
|
[layer]: true,
|
|
156
57
|
[level]: true,
|
|
157
58
|
'qds-titles': true,
|
|
158
59
|
'qds-has-icon': hasIcon,
|
|
159
60
|
'qds-has-kicker': __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasKicker_get),
|
|
160
61
|
'qds-has-subtitle': __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasSubtitle_get),
|
|
161
|
-
}, role: "none" }, h(Tag, { key: '
|
|
62
|
+
}, role: "none" }, h(Tag, { key: '6f600b1db8f96f47a7790d18d9d84fdbe9666b03', class: "qds-title", "data-variant": this.variant }, h("slot", { key: '586544e82840ec73a591d4d1607cae9f74859f91' })), __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasKicker_get) && h("p", { key: '98838b7fcfb9c77d2934570a42207570f75fad5e', class: "qds-kicker" }, this.kicker), __classPrivateFieldGet(this, _Title_instances, "a", _Title_hasSubtitle_get) && h("p", { key: 'a4492cf072c3331f0b925f0ddde5f71204c5827c', class: "qds-subtitle" }, this.subtitle), hasIcon && (h("qds-icon", { key: 'e4b22065cf8172eb27dc063bc3abece0cfac105d', "aria-hidden": "true", class: "qds-icon", name: this.iconName, library: this.iconLibrary }))));
|
|
162
63
|
}
|
|
163
64
|
};
|
|
164
65
|
_Title_instances = new WeakSet(), _Title_hasSubtitle_get = function _Title_hasSubtitle_get() {
|
|
@@ -168,5 +69,5 @@ _Title_instances = new WeakSet(), _Title_hasSubtitle_get = function _Title_hasSu
|
|
|
168
69
|
};
|
|
169
70
|
Title.style = titleCss;
|
|
170
71
|
|
|
171
|
-
export {
|
|
172
|
-
//# sourceMappingURL=qds-
|
|
72
|
+
export { Title as qds_title };
|
|
73
|
+
//# sourceMappingURL=qds-title.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-title.entry.js","sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-titles,\n.qds-title {\n hyphens: inherit;\n}\n\n.qds-subtitle,\n.qds-kicker {\n hyphens: initial;\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-standard-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { AttachInternals, Component, h, Prop } from '@stencil/core'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n | 'web-main-section-display'\n | 'web-main-section-hero'\n | 'web-main-section-promo'\n | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The alignment of the title.\n */\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n /**\n * The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'group'\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n role=\"none\"\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,02SAA02S;;ACA33S;AACA;AACA;;;;;;;;;MAyBa,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;AAME;;AAEG;AACqB,QAAA,IAAS,CAAA,SAAA,GAAe,OAAO;AASvD;;AAEG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAW,SAAS;AAO/B,QAAA,IAAK,CAAA,KAAA,GAAW,MAAM;AAEtB,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAOjD;;AAEG;AACqB,QAAA,IAAG,CAAA,GAAA,GAAS,IAAI;AAyDzC;IAxCQ,iBAAiB,GAAA;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,OAAO;;IAGxB,MAAM,GAAA;QACX,MAAM,KAAK,GAAG,CAAO,IAAA,EAAA,IAAI,CAAC,KAAK,IAAI,MAAM,CAAA,CAAE;QAC3C,MAAM,KAAK,GAAG,CAAO,IAAA,EAAA,IAAI,CAAC,KAAK,IAAI,SAAS,CAAA,CAAE;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI;AAC5B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;QAEnE,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,gBAAA,EACkB,IAAI,CAAC,SAAS,IAAI,OAAO,EAAA,cAAA,EAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;AACb,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,sBAAA,CAAA,IAAI,EAAW,gBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA;gBACjC,kBAAkB,EAAE,sBAAA,CAAA,IAAI,EAAa,gBAAA,EAAA,GAAA,EAAA,sBAAA,CAAA;AACtC,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAC,WAAW,EAAe,cAAA,EAAA,IAAI,CAAC,OAAO,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EACL,sBAAA,CAAA,IAAI,EAAW,gBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA,IAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,MAAM,CAAK,EAC1D,sBAAA,CAAA,IAAI,EAAa,gBAAA,EAAA,GAAA,EAAA,sBAAA,CAAA,IAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,CAAA,CACH,CACM;;;;IA5CX,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;AAC5D,CAAC,EAAA,oBAAA,GAAA,SAAA,oBAAA,GAAA;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE;AACxD,CAAC;;;;;"}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Hg1Liloy.js';
|
|
7
7
|
import { o as offset, f as flip, s as shift, b as arrow, c as computePosition, a as autoUpdate, l as limitShift } from './floating-ui.dom-Bv2vPjgL.js';
|
|
8
|
-
import {
|
|
8
|
+
import { j as ignorePromise, k as propertyToPx, i as invariant, r as resolveTarget, l as isTouchDevice } from './helpers-BgaJNF9u.js';
|
|
9
9
|
|
|
10
|
-
const tooltipCss = ":host([hidden]){display:none!important}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border:none;border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-accessory-elevation);box-sizing:border-box;color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);margin:0;overflow:initial;padding:0}:host:before{content:\"\";
|
|
10
|
+
const tooltipCss = ":host([hidden]){display:none!important}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border:none;border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-accessory-elevation);box-sizing:border-box;color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);inset:unset;margin:0;overflow:initial;padding:0}:host:before{content:\"\";position:absolute}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side=bottom]):before,:host([data-side=top]):before{height:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px));top:100%;width:100%}:host([data-side=bottom]):before{top:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}:host([data-side=left]):before,:host([data-side=right]):before{left:100%;width:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))}:host([data-side=right]):before{left:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}.qds-arrow{height:var(--qds-signature-triangle-pointer-size-height);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.qds-arrow:before{background-color:var(--qds-theme-accessory-background);clip-path:polygon(0 0,100% 0,50% 100%);height:100%}.qds-arrow:after,.qds-arrow:before{content:\"\";position:absolute;width:100%}.qds-arrow:after{background-color:var(--qds-theme-accessory-border);bottom:calc(var(--qds-accessory-border-width)*-1);clip-path:polygon(0 10%,100% 10%,50% 100%);height:calc(100% + var(--qds-accessory-border-width));z-index:-1}.qds-arrow[data-side=bottom]{top:calc((var(--qds-signature-triangle-pointer-size-height) - var(--qds-accessory-effect-section-position-y))*-1);transform:rotate(180deg)}.qds-arrow[data-side=left]{right:calc((var(--qds-accessory-gap-floating) + var(--qds-signature-triangle-pointer-size-height))*-1 + var(--qds-accessory-effect-section-position-y));transform:rotate(-90deg)}.qds-arrow[data-side=right]{left:calc((var(--qds-accessory-gap-floating) + var(--qds-signature-triangle-pointer-size-height))*-1 + var(--qds-accessory-effect-section-position-y));transform:rotate(90deg)}.qds-arrow[data-side=top]{bottom:calc((var(--qds-signature-triangle-pointer-size-height) - var(--qds-accessory-effect-section-position-y))*-1)}.qds-tooltip{align-items:inherit;border:var(--qds-accessory-border-width) solid var(--qds-theme-accessory-border);border-radius:var(--qds-accessory-border-radius);display:inherit;flex-direction:inherit;flex-wrap:inherit;gap:inherit;justify-content:inherit;max-width:var(--qds-accessory-max-width);padding:var(--qds-accessory-padding-top) var(--qds-accessory-padding-end) var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start)}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -122,12 +122,13 @@ const Tooltip = class {
|
|
|
122
122
|
async show() {
|
|
123
123
|
if (__classPrivateFieldGet(this, _Tooltip_open, "f"))
|
|
124
124
|
return;
|
|
125
|
+
if (!__classPrivateFieldGet(this, _Tooltip_opened, "f")) {
|
|
126
|
+
await this.updateArrow();
|
|
127
|
+
__classPrivateFieldSet(this, _Tooltip_opened, true, "f");
|
|
128
|
+
}
|
|
129
|
+
this.startAutoUpdate();
|
|
125
130
|
__classPrivateFieldSet(this, _Tooltip_open, true, "f");
|
|
126
131
|
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_setAriaExpanded).call(this);
|
|
127
|
-
this.startAutoUpdate();
|
|
128
|
-
if (!__classPrivateFieldGet(this, _Tooltip_opened, "f"))
|
|
129
|
-
await this.updateArrow();
|
|
130
|
-
__classPrivateFieldSet(this, _Tooltip_opened, true, "f");
|
|
131
132
|
}
|
|
132
133
|
/**
|
|
133
134
|
* Close the tooltip.
|
|
@@ -136,11 +137,11 @@ const Tooltip = class {
|
|
|
136
137
|
if (!__classPrivateFieldGet(this, _Tooltip_open, "f"))
|
|
137
138
|
return;
|
|
138
139
|
this.closeEmitter.emit();
|
|
140
|
+
if (__classPrivateFieldGet(this, _Tooltip_cleanup, "f"))
|
|
141
|
+
__classPrivateFieldGet(this, _Tooltip_cleanup, "f").call(this);
|
|
139
142
|
__classPrivateFieldSet(this, _Tooltip_open, false, "f");
|
|
140
143
|
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_setAriaExpanded).call(this);
|
|
141
144
|
__classPrivateFieldSet(this, _Tooltip_clickedTooltip, false, "f");
|
|
142
|
-
if (__classPrivateFieldGet(this, _Tooltip_cleanup, "f"))
|
|
143
|
-
__classPrivateFieldGet(this, _Tooltip_cleanup, "f").call(this);
|
|
144
145
|
}
|
|
145
146
|
/**
|
|
146
147
|
* Update the tooltip's arrow.
|
|
@@ -178,14 +179,7 @@ const Tooltip = class {
|
|
|
178
179
|
element: __classPrivateFieldGet(this, _Tooltip_arrow, "f"),
|
|
179
180
|
padding: __classPrivateFieldGet(this, _Tooltip_arrowPadding, "f"),
|
|
180
181
|
}),
|
|
181
|
-
]
|
|
182
|
-
await this.updatePosition();
|
|
183
|
-
}
|
|
184
|
-
updateAriaHasPopup() {
|
|
185
|
-
__classPrivateFieldSet(this, _Tooltip_referenceElement, resolveTarget(this.target), "f");
|
|
186
|
-
if (__classPrivateFieldGet(this, _Tooltip_referenceElement, "f") instanceof globalThis.Element &&
|
|
187
|
-
this.host.role === 'dialog')
|
|
188
|
-
__classPrivateFieldGet(this, _Tooltip_referenceElement, "f").ariaHasPopup = 'dialog';
|
|
182
|
+
], "f");
|
|
189
183
|
}
|
|
190
184
|
async updateReferenceElement() {
|
|
191
185
|
var _a;
|
|
@@ -235,7 +229,6 @@ const Tooltip = class {
|
|
|
235
229
|
}
|
|
236
230
|
async updatePosition() {
|
|
237
231
|
invariant(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"));
|
|
238
|
-
invariant(__classPrivateFieldGet(this, _Tooltip_arrow, "f"));
|
|
239
232
|
const { x, y, middlewareData, placement, strategy } = await computePosition(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), this.host, {
|
|
240
233
|
middleware: __classPrivateFieldGet(this, _Tooltip_middleware, "f"),
|
|
241
234
|
placement: this.placement,
|
|
@@ -243,16 +236,21 @@ const Tooltip = class {
|
|
|
243
236
|
});
|
|
244
237
|
const [side] = placement.split('-');
|
|
245
238
|
this.host.dataset.side = side;
|
|
246
|
-
this.host.style
|
|
247
|
-
|
|
239
|
+
Object.assign(this.host.style, {
|
|
240
|
+
position: strategy,
|
|
241
|
+
left: `${x}px`,
|
|
242
|
+
top: `${y}px`,
|
|
243
|
+
});
|
|
248
244
|
if (middlewareData.arrow === undefined)
|
|
249
245
|
return;
|
|
250
246
|
invariant(__classPrivateFieldGet(this, _Tooltip_arrow, "f"));
|
|
251
247
|
const { x: aX, y: aY, centerOffset } = middlewareData.arrow;
|
|
252
248
|
__classPrivateFieldGet(this, _Tooltip_arrow, "f").dataset.side = side;
|
|
253
|
-
__classPrivateFieldGet(this, _Tooltip_arrow, "f").style
|
|
254
|
-
|
|
255
|
-
|
|
249
|
+
Object.assign(__classPrivateFieldGet(this, _Tooltip_arrow, "f").style, {
|
|
250
|
+
display: centerOffset === 0 ? '' : 'none',
|
|
251
|
+
left: aX === undefined ? '' : `${aX}px`,
|
|
252
|
+
top: aY === undefined ? '' : `${aY}px`,
|
|
253
|
+
});
|
|
256
254
|
}
|
|
257
255
|
startAutoUpdate() {
|
|
258
256
|
invariant(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"));
|
|
@@ -277,7 +275,7 @@ const Tooltip = class {
|
|
|
277
275
|
__classPrivateFieldGet(this, _Tooltip_referenceElement, "f").removeAttribute('aria-describedby');
|
|
278
276
|
}
|
|
279
277
|
render() {
|
|
280
|
-
return (h(Host, { key: '
|
|
278
|
+
return (h(Host, { key: 'd988515f748a96c82aa9d06e5147e5d0bca5b15a', onKeyDown: __classPrivateFieldGet(this, _Tooltip_boundKeyDown, "f"), onPointerDown: __classPrivateFieldGet(this, _Tooltip_boundTooltipPointerDown, "f") }, h("div", { key: '8a4b87f814af050b52659eb14f04f377a704e19d', class: "qds-tooltip" }, h("slot", { key: 'e4e89b12134a6ed44eb8ae0e6f76d9843341cabe' })), h("div", { key: '3bff9e45b53659775dcdc5ef89d2132951cac5a9', class: "qds-arrow", ref: __classPrivateFieldGet(this, _Tooltip_arrowRef, "f") })));
|
|
281
279
|
}
|
|
282
280
|
get host() { return getElement(this); }
|
|
283
281
|
static get watchers() { return {
|
|
@@ -286,7 +284,6 @@ const Tooltip = class {
|
|
|
286
284
|
"noShift": ["updateMiddleware"],
|
|
287
285
|
"offsetOptions": ["updateMiddleware"],
|
|
288
286
|
"shiftOptions": ["updateMiddleware"],
|
|
289
|
-
"role": ["updateAriaHasPopup"],
|
|
290
287
|
"target": ["updateReferenceElement"],
|
|
291
288
|
"trigger": ["updateEventListeners"],
|
|
292
289
|
"middleware": ["updatePosition"],
|