@quartzds/core 1.0.0-beta.27 → 1.0.0-beta.29
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/components/icon.js +17 -17
- package/components/icon.js.map +1 -1
- package/components/qds-button.js +5 -3
- package/components/qds-button.js.map +1 -1
- package/components/qds-inline-link.js +1 -1
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-standalone-link.js +1 -1
- package/components/qds-standalone-link.js.map +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/library-889bd72a.js +78 -0
- package/dist/cjs/library-889bd72a.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +4 -3
- package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js.map +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +20 -6
- package/dist/docs.json +43 -13
- package/dist/esm/index.js +1 -1
- package/dist/esm/library-8e3e4e5f.js +74 -0
- package/dist/esm/library-8e3e4e5f.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-button.entry.js +4 -3
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-standalone-link.entry.js +1 -1
- package/dist/esm/qds-standalone-link.entry.js.map +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/button/button.d.ts +5 -1
- package/dist/types/components/inline-link/inline-link.d.ts +1 -1
- package/dist/types/components/standalone-link/standalone-link.d.ts +1 -1
- package/dist/types/components.d.ts +11 -3
- package/dist/vscode.html-custom-data.json +4 -0
- package/hydrate/index.js +24 -22
- package/package.json +2 -2
- package/dist/cjs/library-5e0013b5.js +0 -78
- package/dist/cjs/library-5e0013b5.js.map +0 -1
- package/dist/esm/library-7a30e588.js +0 -74
- package/dist/esm/library-7a30e588.js.map +0 -1
package/components/icon.js
CHANGED
|
@@ -6,34 +6,34 @@
|
|
|
6
6
|
import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
7
7
|
import { i as inheritAriaAttributes } from './helpers.js';
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const checkedSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im04LjEzIDEyLjk3IDQuNzYtNy4yNC44NC41NC01Ljc5IDguOC0uMzUtLjg4di0uMDFsLS4wMS0uMDJhNy4wOCA3LjA4IDAgMCAwLS4xNi0uMzYgOS4zNSA5LjM1IDAgMCAwLTEuMDYtMS44N2MtLjIzLS4zLS40My0uNDgtLjU5LS41N2wuNDYtLjg4Yy4zNi4xOC42Ny41LjkyLjg0YTguNjIgOC42MiAwIDAgMSAuOTggMS42NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
|
|
10
10
|
|
|
11
|
-
const
|
|
11
|
+
const dropdownSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im0uODUgNSA4LjY3IDguNjdjLjI3LjI2LjcuMjYuOTcgMEwxOS4xNSA1bC43LjctOC42NiA4LjY2Yy0uNjUuNjYtMS43Mi42Ni0yLjM3IDBMLjE1IDUuN2wuNy0uN1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
|
|
12
12
|
|
|
13
|
-
const
|
|
13
|
+
const externalLinkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4xNiAwSDIwdjYuNzJoLTEuMDNWMS43NmwtNi40NiA2LjQ2LS43My0uNzMgNi40Ni02LjQ2aC01LjA4VjBaTTAgM2gxMS4wNXYxLjAySDEuMDN2MTQuOTVoMTVWOC41M2gxLjAyVjIwSDBWM1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
|
|
14
14
|
|
|
15
|
-
const
|
|
15
|
+
const indeterminateSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCAxMEg2VjloOHYxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+';
|
|
16
16
|
|
|
17
|
-
const
|
|
17
|
+
const nextSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42NiA5LjUxIDUgLjg1bC43LS43IDguNjYgOC42NmMuNjYuNjUuNjYgMS43MiAwIDIuMzdMNS43IDE5Ljg1bC0uNy0uNyA4LjY2LTguNjdhLjY4LjY4IDAgMCAwIDAtLjk3WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+';
|
|
18
18
|
|
|
19
|
-
const
|
|
19
|
+
const statusErrorSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im05Ljg3IDkuMiAzLjItMy4yLjcxLjctMy4yIDMuMjEgMy4yIDMuMi0uNzEuNy0zLjItMy4yLTMuMTYgMy4xNi0uNy0uN0w5LjE2IDkuOSA2IDYuNzRsLjctLjdMOS44NyA5LjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=';
|
|
20
20
|
|
|
21
|
-
const
|
|
21
|
+
const statusInfoSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNOSA0aDIuNDF2Mi4xNUg5VjRabS4xMyAxMi41MVY3Ljk3aDIuMTh2OC41NEg5LjEzWiIvPjwvc3ZnPg==';
|
|
22
22
|
|
|
23
|
-
const
|
|
23
|
+
const statusWarningSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJtOS4zMiAxMi41NC0uNy04Ljg5IDIuNzcuMDItLjcgOC44N0g5LjMyWm0tLjU4IDEuMzRoMi41MnYyLjQ4SDguNzR2LTIuNDhaIi8+PC9zdmc+';
|
|
24
24
|
|
|
25
25
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
26
26
|
const icons = {
|
|
27
27
|
/* eslint-disable @typescript-eslint/naming-convention */
|
|
28
|
-
'external-link':
|
|
29
|
-
checked:
|
|
30
|
-
indeterminate:
|
|
31
|
-
dropdown:
|
|
32
|
-
next:
|
|
33
|
-
'status-error':
|
|
34
|
-
'status-info':
|
|
35
|
-
'status-success':
|
|
36
|
-
'status-warning':
|
|
28
|
+
'external-link': externalLinkSvg,
|
|
29
|
+
checked: checkedSvg,
|
|
30
|
+
indeterminate: indeterminateSvg,
|
|
31
|
+
dropdown: dropdownSvg,
|
|
32
|
+
next: nextSvg,
|
|
33
|
+
'status-error': statusErrorSvg,
|
|
34
|
+
'status-info': statusInfoSvg,
|
|
35
|
+
'status-success': checkedSvg,
|
|
36
|
+
'status-warning': statusWarningSvg,
|
|
37
37
|
/* eslint-enable @typescript-eslint/naming-convention */
|
|
38
38
|
};
|
|
39
39
|
const coreLibrary = {
|
package/components/icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"icon.js","mappings":"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","names":["externalLink","checked","indeterminate","dropdown","next","statusError","statusInfo","statusWarning","defaultLibrary"],"sources":["../../node_modules/@quartzds/generic-icons-core/dist/arrow-top-right-on-square.svg","../../node_modules/@quartzds/generic-icons-core/dist/caret-down.svg","../../node_modules/@quartzds/generic-icons-core/dist/check.svg","../../node_modules/@quartzds/generic-icons-core/dist/chevron-right.svg","../../node_modules/@quartzds/generic-icons-core/dist/exclamation.svg","../../node_modules/@quartzds/generic-icons-core/dist/information.svg","../../node_modules/@quartzds/generic-icons-core/dist/minus.svg","../../node_modules/@quartzds/generic-icons-core/dist/x-mark.svg","src/components/icon/core-library.ts","src/components/icon/default-library.ts","src/components/icon/library.ts","src/components/icon/request.ts","src/components/icon/icon.css?tag=qds-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.03 13.01H3.02v-9h5.97v-1H2.03v11h10.99V6.98h-.99v6.03ZM10.99 1.98v1h1.36L9.1 6.23l.71.7 3.16-3.16-.01 1.21 1 .01.04-3.01h-3.01Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8 11 1.95 5.04 14.09 5 8 11.01V11ZM4.38 6.03 8 9.6l3.64-3.59-7.27.02h.01Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6.31 11.86 3.08 8.63l.71-.71 2.52 2.52 5.9-5.94.71.7-6.61 6.66Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m4.77 13.97-.62-.78 6.62-5.23-6.62-5.11.61-.79 7.63 5.89-7.62 6.02Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.129 12.06a.83.83 0 0 1 .239-.612c.16-.157.378-.246.667-.246.289 0 .498.079.667.246.16.158.239.365.239.611s-.08.434-.24.591c-.158.158-.377.237-.666.237-.289 0-.508-.08-.667-.237a.797.797 0 0 1-.24-.59Zm1.573-2.04H7.328l-.15-6.68h1.683l-.16 6.68Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6.18 13.12v-.25c.95-.16.99-.24.99-1.51V7.97c0-1.04-.06-1.11-.82-1.32v-.21c.88-.12 1.73-.33 2.48-.62-.02.35-.03 1.32-.03 2.01v3.53c0 1.25.09 1.33 1.02 1.51v.25H6.18Zm1.69-8.36c-.48 0-.9-.41-.9-.94 0-.56.42-.94.92-.94.54 0 .94.38.94.94 0 .56-.4.94-.95.94h-.01Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M13 7.5H3.01v1H13v-1Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m11.43 5.26-.71-.7-2.74 2.76-2.73-2.76-.71.7 2.74 2.77-2.74 2.77.71.71 2.73-2.77 2.74 2.77.71-.71-2.74-2.77 2.74-2.77Z\"/></svg>","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\n// FIXME: TypeScript and Webpack can resolve exports from the package.json\n// `exports` field but Rollup can't. `@quartzds/generic-icons-core/*.svg`\n// _should_ work but it doesn't.\n/* eslint-disable import/no-unresolved */\nimport externalLink from '@quartzds/generic-icons-core/dist/arrow-top-right-on-square.svg'\nimport dropdown from '@quartzds/generic-icons-core/dist/caret-down.svg'\nimport checked from '@quartzds/generic-icons-core/dist/check.svg'\nimport next from '@quartzds/generic-icons-core/dist/chevron-right.svg'\nimport statusWarning from '@quartzds/generic-icons-core/dist/exclamation.svg'\nimport statusInfo from '@quartzds/generic-icons-core/dist/information.svg'\nimport indeterminate from '@quartzds/generic-icons-core/dist/minus.svg'\nimport statusError from '@quartzds/generic-icons-core/dist/x-mark.svg'\n\n/* eslint-enable import/no-unresolved */\nimport type { IconLibrary } from './library'\n\nconst icons: Record<string, string | undefined> = {\n /* eslint-disable @typescript-eslint/naming-convention */\n 'external-link': externalLink,\n checked,\n indeterminate,\n dropdown,\n next,\n 'status-error': statusError,\n 'status-info': statusInfo,\n 'status-success': checked,\n 'status-warning': statusWarning,\n /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nconst coreLibrary: IconLibrary = {\n name: 'core',\n resolver: (name) => icons[name] ?? '',\n}\n\nexport default coreLibrary\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getAssetPath } from '@stencil/core'\n\nimport type { IconLibrary } from './library'\n\nconst library: IconLibrary = {\n name: 'default',\n resolver: (name) => getAssetPath(`icons/${name}.svg`),\n}\n\nexport default library\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Except } from 'type-fest'\n\nimport coreLibrary from './core-library'\nimport defaultLibrary from './default-library'\n\nexport type IconLibraryResolver = (name: string) => string\nexport interface IconLibrary {\n name: string\n resolver: IconLibraryResolver\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, coreLibrary]\n\n/**\n * Returns a library from the registry.\n */\nexport const getIconLibrary = (name: string): IconLibrary | undefined =>\n registry.find((library) => library.name === name)\n\n/**\n * Removes an icon library from the registry.\n */\nexport const unregisterIconLibrary = (name: string): void => {\n registry = registry.filter((library) => library.name !== name)\n}\n\n/**\n * Adds an icon library to the registry or overrides an existing one.\n */\nexport const registerIconLibrary = (\n name: string,\n options: Except<IconLibrary, 'name'>,\n): void => {\n unregisterIconLibrary(name)\n registry.push({\n name,\n ...options,\n })\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\ninterface Request {\n ok: boolean\n data: string\n}\n\ninterface IconRequestOk {\n ok: true\n data: string\n}\n\ninterface IconRequestError {\n ok: false\n data: undefined\n}\n\ntype IconRequest = IconRequestError | IconRequestOk\n\ninterface IconRequestUnknown {\n ok: boolean\n data?: string\n}\n\nconst request = async (source: string): Promise<Request> => {\n const response = await fetch(source, { mode: 'cors' })\n return {\n ok: response.ok,\n data: await response.text(),\n }\n}\n\nconst cachedIconRequests = new Map<string, IconRequest>()\n\nconst requestIcon = async (url: string): Promise<IconRequest> => {\n const cachedIconRequest = cachedIconRequests.get(url)\n if (cachedIconRequest) return cachedIconRequest\n\n const fileData = await request(url)\n const iconFileData: IconRequestUnknown = {\n ok: fileData.ok,\n }\n if (fileData.ok) {\n const div = document.createElement('div')\n div.innerHTML = fileData.data\n const child = div.firstElementChild\n iconFileData.data =\n child?.tagName.toLowerCase() === 'svg' ? child.outerHTML : ''\n }\n\n cachedIconRequests.set(url, iconFileData as IconRequest)\n return iconFileData as IconRequest\n}\n\nexport default requestIcon\n","/*\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 contain: strict;\n display: inline-block;\n height: 1em;\n width: 1em;\n}\n\n.qds-wrapper {\n display: contents;\n}\n\nsvg {\n display: block;\n fill: currentcolor;\n height: 100%;\n width: 100%;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport { getIconLibrary } from './library'\nimport requestIcon from './request'\n\nlet parser: DOMParser | undefined\n\n/**\n * @experimental\n */\n@Component({\n tag: 'qds-icon',\n shadow: true,\n styleUrl: 'icon.css',\n})\nexport class Icon 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 name!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly library: string = 'default'\n\n /**\n * Emitted when the icon has loaded.\n */\n @Event({ eventName: 'qdsLoad', cancelable: false })\n private readonly loadEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the icon fails to load due to an error.\n */\n @Event({ eventName: 'qdsError', cancelable: false })\n private readonly errorEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsIconElement\n\n @State() private svg = ''\n\n private inheritedAttributes: Attributes = {}\n\n @Watch('name')\n @Watch('library')\n private async setIcon(): Promise<void> {\n if (!this.name) return\n\n const library = getIconLibrary(this.library)\n if (!library) return\n\n const url = library.resolver(this.name)\n if (!url) {\n this.svg = ''\n return\n }\n\n try {\n const request = await requestIcon(url)\n if (!request.ok) {\n this.svg = ''\n this.errorEmitter.emit()\n return\n }\n\n // Create an instance of the DOM parser. We do it here instead of at the\n // top-level to support SSR while maintaining a single parser instance\n // for optimal performance.\n parser ||= new DOMParser()\n const document = parser.parseFromString(request.data, 'text/html')\n const svgElement = document.body.querySelector('svg')\n if (svgElement === null) {\n this.svg = ''\n this.errorEmitter.emit()\n } else {\n for (const [key, value] of Object.entries(this.inheritedAttributes))\n if (value !== undefined) svgElement.setAttribute(key, value)\n this.svg = svgElement.outerHTML\n this.loadEmitter.emit()\n }\n } catch {\n this.errorEmitter.emit()\n }\n }\n\n public async componentWillLoad(): Promise<void> {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n await this.setIcon()\n }\n\n public render() {\n return <span class=\"qds-wrapper\" innerHTML={this.svg} />\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"icon.js","mappings":"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","names":["externalLink","checked","indeterminate","dropdown","next","statusError","statusInfo","statusWarning","defaultLibrary"],"sources":["../../node_modules/@quartzds/generic-icons-core/dist/checked.svg","../../node_modules/@quartzds/generic-icons-core/dist/dropdown.svg","../../node_modules/@quartzds/generic-icons-core/dist/external-link.svg","../../node_modules/@quartzds/generic-icons-core/dist/indeterminate.svg","../../node_modules/@quartzds/generic-icons-core/dist/next.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-error.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-info.svg","../../node_modules/@quartzds/generic-icons-core/dist/status-warning.svg","src/components/icon/core-library.ts","src/components/icon/default-library.ts","src/components/icon/library.ts","src/components/icon/request.ts","src/components/icon/icon.css?tag=qds-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m8.13 12.97 4.76-7.24.84.54-5.79 8.8-.35-.88v-.01l-.01-.02a7.08 7.08 0 0 0-.16-.36 9.35 9.35 0 0 0-1.06-1.87c-.23-.3-.43-.48-.59-.57l.46-.88c.36.18.67.5.92.84a8.62 8.62 0 0 1 .98 1.65Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m.85 5 8.67 8.67c.27.26.7.26.97 0L19.15 5l.7.7-8.66 8.66c-.65.66-1.72.66-2.37 0L.15 5.7l.7-.7Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.16 0H20v6.72h-1.03V1.76l-6.46 6.46-.73-.73 6.46-6.46h-5.08V0ZM0 3h11.05v1.02H1.03v14.95h15V8.53h1.02V20H0V3Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 10H6V9h8v1Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.66 9.51 5 .85l.7-.7 8.66 8.66c.66.65.66 1.72 0 2.37L5.7 19.85l-.7-.7 8.66-8.67a.68.68 0 0 0 0-.97Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m9.87 9.2 3.2-3.2.71.7-3.2 3.21 3.2 3.2-.71.7-3.2-3.2-3.16 3.16-.7-.7L9.16 9.9 6 6.74l.7-.7L9.87 9.2Z\" clip-rule=\"evenodd\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"M9 4h2.41v2.15H9V4Zm.13 12.51V7.97h2.18v8.54H9.13Z\"/></svg>","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" d=\"m9.32 12.54-.7-8.89 2.77.02-.7 8.87H9.32Zm-.58 1.34h2.52v2.48H8.74v-2.48Z\"/></svg>","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\n// FIXME: TypeScript and Webpack can resolve exports from the package.json\n// `exports` field but Rollup can't. `@quartzds/generic-icons-core/*.svg`\n// _should_ work but it doesn't.\n/* eslint-disable import/no-unresolved */\nimport checked from '@quartzds/generic-icons-core/dist/checked.svg'\nimport dropdown from '@quartzds/generic-icons-core/dist/dropdown.svg'\nimport externalLink from '@quartzds/generic-icons-core/dist/external-link.svg'\nimport indeterminate from '@quartzds/generic-icons-core/dist/indeterminate.svg'\nimport next from '@quartzds/generic-icons-core/dist/next.svg'\nimport statusError from '@quartzds/generic-icons-core/dist/status-error.svg'\nimport statusInfo from '@quartzds/generic-icons-core/dist/status-info.svg'\nimport statusWarning from '@quartzds/generic-icons-core/dist/status-warning.svg'\n\n/* eslint-enable import/no-unresolved */\nimport type { IconLibrary } from './library'\n\nconst icons: Record<string, string | undefined> = {\n /* eslint-disable @typescript-eslint/naming-convention */\n 'external-link': externalLink,\n checked,\n indeterminate,\n dropdown,\n next,\n 'status-error': statusError,\n 'status-info': statusInfo,\n 'status-success': checked,\n 'status-warning': statusWarning,\n /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nconst coreLibrary: IconLibrary = {\n name: 'core',\n resolver: (name) => icons[name] ?? '',\n}\n\nexport default coreLibrary\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getAssetPath } from '@stencil/core'\n\nimport type { IconLibrary } from './library'\n\nconst library: IconLibrary = {\n name: 'default',\n resolver: (name) => getAssetPath(`icons/${name}.svg`),\n}\n\nexport default library\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Except } from 'type-fest'\n\nimport coreLibrary from './core-library'\nimport defaultLibrary from './default-library'\n\nexport type IconLibraryResolver = (name: string) => string\nexport interface IconLibrary {\n name: string\n resolver: IconLibraryResolver\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, coreLibrary]\n\n/**\n * Returns a library from the registry.\n */\nexport const getIconLibrary = (name: string): IconLibrary | undefined =>\n registry.find((library) => library.name === name)\n\n/**\n * Removes an icon library from the registry.\n */\nexport const unregisterIconLibrary = (name: string): void => {\n registry = registry.filter((library) => library.name !== name)\n}\n\n/**\n * Adds an icon library to the registry or overrides an existing one.\n */\nexport const registerIconLibrary = (\n name: string,\n options: Except<IconLibrary, 'name'>,\n): void => {\n unregisterIconLibrary(name)\n registry.push({\n name,\n ...options,\n })\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\ninterface Request {\n ok: boolean\n data: string\n}\n\ninterface IconRequestOk {\n ok: true\n data: string\n}\n\ninterface IconRequestError {\n ok: false\n data: undefined\n}\n\ntype IconRequest = IconRequestError | IconRequestOk\n\ninterface IconRequestUnknown {\n ok: boolean\n data?: string\n}\n\nconst request = async (source: string): Promise<Request> => {\n const response = await fetch(source, { mode: 'cors' })\n return {\n ok: response.ok,\n data: await response.text(),\n }\n}\n\nconst cachedIconRequests = new Map<string, IconRequest>()\n\nconst requestIcon = async (url: string): Promise<IconRequest> => {\n const cachedIconRequest = cachedIconRequests.get(url)\n if (cachedIconRequest) return cachedIconRequest\n\n const fileData = await request(url)\n const iconFileData: IconRequestUnknown = {\n ok: fileData.ok,\n }\n if (fileData.ok) {\n const div = document.createElement('div')\n div.innerHTML = fileData.data\n const child = div.firstElementChild\n iconFileData.data =\n child?.tagName.toLowerCase() === 'svg' ? child.outerHTML : ''\n }\n\n cachedIconRequests.set(url, iconFileData as IconRequest)\n return iconFileData as IconRequest\n}\n\nexport default requestIcon\n","/*\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 contain: strict;\n display: inline-block;\n height: 1em;\n width: 1em;\n}\n\n.qds-wrapper {\n display: contents;\n}\n\nsvg {\n display: block;\n fill: currentcolor;\n height: 100%;\n width: 100%;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport { getIconLibrary } from './library'\nimport requestIcon from './request'\n\nlet parser: DOMParser | undefined\n\n/**\n * @experimental\n */\n@Component({\n tag: 'qds-icon',\n shadow: true,\n styleUrl: 'icon.css',\n})\nexport class Icon 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 name!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly library: string = 'default'\n\n /**\n * Emitted when the icon has loaded.\n */\n @Event({ eventName: 'qdsLoad', cancelable: false })\n private readonly loadEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the icon fails to load due to an error.\n */\n @Event({ eventName: 'qdsError', cancelable: false })\n private readonly errorEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsIconElement\n\n @State() private svg = ''\n\n private inheritedAttributes: Attributes = {}\n\n @Watch('name')\n @Watch('library')\n private async setIcon(): Promise<void> {\n if (!this.name) return\n\n const library = getIconLibrary(this.library)\n if (!library) return\n\n const url = library.resolver(this.name)\n if (!url) {\n this.svg = ''\n return\n }\n\n try {\n const request = await requestIcon(url)\n if (!request.ok) {\n this.svg = ''\n this.errorEmitter.emit()\n return\n }\n\n // Create an instance of the DOM parser. We do it here instead of at the\n // top-level to support SSR while maintaining a single parser instance\n // for optimal performance.\n parser ||= new DOMParser()\n const document = parser.parseFromString(request.data, 'text/html')\n const svgElement = document.body.querySelector('svg')\n if (svgElement === null) {\n this.svg = ''\n this.errorEmitter.emit()\n } else {\n for (const [key, value] of Object.entries(this.inheritedAttributes))\n if (value !== undefined) svgElement.setAttribute(key, value)\n this.svg = svgElement.outerHTML\n this.loadEmitter.emit()\n }\n } catch {\n this.errorEmitter.emit()\n }\n }\n\n public async componentWillLoad(): Promise<void> {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n await this.setIcon()\n }\n\n public render() {\n return <span class=\"qds-wrapper\" innerHTML={this.svg} />\n }\n}\n"],"version":3}
|
package/components/qds-button.js
CHANGED
|
@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
|
|
|
7
7
|
import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
|
|
8
8
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
9
9
|
|
|
10
|
-
const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-icon-gap);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{
|
|
10
|
+
const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-icon-gap);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-icon-gap);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-icon-gap);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-icon-gap);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
|
|
11
11
|
|
|
12
12
|
const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
|
|
13
13
|
constructor() {
|
|
@@ -24,6 +24,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
24
24
|
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
25
25
|
};
|
|
26
26
|
this.action = undefined;
|
|
27
|
+
this.badge = undefined;
|
|
27
28
|
this.iconName = undefined;
|
|
28
29
|
this.iconLibrary = 'default';
|
|
29
30
|
this.importance = 'standard';
|
|
@@ -39,7 +40,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
39
40
|
this.formTarget = '_self';
|
|
40
41
|
this.href = undefined;
|
|
41
42
|
this.name = undefined;
|
|
42
|
-
this.target =
|
|
43
|
+
this.target = undefined;
|
|
43
44
|
this.type = undefined;
|
|
44
45
|
this.value = undefined;
|
|
45
46
|
}
|
|
@@ -136,13 +137,14 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
136
137
|
return (h(Tag, { "aria-disabled": this.computedDisabled.toString(), class: {
|
|
137
138
|
'qds-button': true,
|
|
138
139
|
'qds-icon-only': this.iconOnly,
|
|
139
|
-
}, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, "data-variant": this.variant, library: this.iconLibrary, name: this.iconName })), this.text, this.computedAction !== undefined && (h("qds-icon", { class: "qds-icon", library: "core", name: this.computedAction }))));
|
|
140
|
+
}, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, "data-variant": this.variant, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (h("div", { class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (h("qds-icon", { class: "qds-icon", library: "core", name: this.computedAction }))));
|
|
140
141
|
}
|
|
141
142
|
static get delegatesFocus() { return true; }
|
|
142
143
|
get element() { return this; }
|
|
143
144
|
static get style() { return buttonCss; }
|
|
144
145
|
}, [17, "qds-button", {
|
|
145
146
|
"action": [1],
|
|
147
|
+
"badge": [1],
|
|
146
148
|
"iconName": [1, "icon-name"],
|
|
147
149
|
"iconLibrary": [1, "icon-library"],
|
|
148
150
|
"importance": [1],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-button.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,0hJAA0hJ;;MCgC/hJ,MAAM;;;;;;;QA4NT,wBAAmB,GAAe,EAAE,CAAA;QAuJ3B,WAAM,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;;;2BAzW6C,SAAS;0BAKL,UAAU;oBAKtB,UAAU;;;;;;;;8BAyFN,KAAK;0BA4BkB,OAAO;;;sBAmCH,OAAO;;;;IA4C5E,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;cAC9C,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;cACvC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;KACjC;IAED,IAAY,UAAU;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAA;QAC1E,OAAO,IAAI,CAAC,IAAI,CAAA;KACjB;IAED,IAAY,QAAQ;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QACnE,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAA;QAE9D,OAAO,OAAO,IAAI,UAAU,CAAA;KAC7B;IAED,IAAY,cAAc;QACxB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,EAAE;gBACX,OAAO,IAAI,CAAC,MAAM,CAAA;aACnB;YACD,SAAS;gBACP,OAAO,SAAS,CAAA;aACjB;SACF;KACF;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;KAC9B;IAED,IAAY,kBAAkB;QAC5B,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa;YAAE,OAAO,SAAS,CAAA;QAEpD,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,YAAY,CAAC;YAClB,KAAK,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC,UAAU,CAAA;aACvB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAED,IAAY,YAAY;QACtB,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO,SAAS,CAAA;QAE7C,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,UAAU,CAAC;YAChB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO,EAAE;gBACZ,OAAO,IAAI,CAAC,IAAI,CAAA;aACjB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAED,IAAY,gBAAgB;QAC1B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,IAAI,GAAG,EACxC,EAAE,CACH,CAAA;QACD,OAAO,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KACnD;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAM;QAC7D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;QACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAA;QACjC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QACxD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3D,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;YAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAC1E,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;YAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAC1E,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAA;QAC/C,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QACvC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;QAEjC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QACnC,UAAU,CAAC,KAAK,EAAE,CAAA;QAClB,UAAU,CAAC,MAAM,EAAE,CAAA;KACpB;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,CAAA;QAEpD,QACE,EAAC,GAAG,qBACa,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAC/C,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,qBACgB,IAAI,CAAC,kBAAkB,eAC7B,IAAI,CAAC,YAAY,kBACd,IAAI,CAAC,OAAO,EAC1B,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EACjD,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACjD,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACzC,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACzC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,qBAAqB,GAAG,SAAS,EACpD,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,QAAQ,GAAG,SAAS,EACxC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAC5D,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC7C,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,EAC/C,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,KAEvC,IAAI,CAAC,mBAAmB,IAE3B,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,eACL,IAAI,CAAC,YAAY,kBACd,IAAI,CAAC,OAAO,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACA,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,cAAc,KAAK,SAAS,KAChC,gBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,CAAC,cAAc,GACzB,CACH,CACG,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-icon-gap);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n padding-inline: 0;\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-icon-gap);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n padding-inline: 0;\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-icon-gap);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n padding-inline: 0;\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-button {\n padding-inline: 0;\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n}\n\n[data-importance='standard'] {\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n color: var(--qds-theme-control-text-standard);\n\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n}\n\n[data-variant='destructive'] {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n}\n\n[data-variant='hero'] {\n font: var(--qds-control-hero-text);\n\n &.qds-button {\n gap: var(--qds-control-hero-icon-gap);\n height: var(--qds-control-hero-height);\n border-radius: var(--qds-control-hero-border-radius);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n padding-inline: 0;\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown' | 'next'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type ButtonVariant = 'destructive' | 'hero'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /**\n * The name of the action icon to render.\n */\n @Prop() public readonly action?: Action\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 * The button's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The button's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The button's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * The button's variant.\n */\n @Prop() public readonly variant?: ButtonVariant\n\n /**\n * Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled?: boolean\n\n /**\n * Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly download?: string\n\n /**\n * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button 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 `<button>` is associated with\n * its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<button>` 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 * @webnative\n */\n @Prop() public readonly form?: string\n\n /**\n * The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n *\n * @webnative\n */\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /**\n * If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n *\n * - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n *\n * If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n *\n * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n *\n * @webnative\n */\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /**\n * If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n *\n * @webnative\n */\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /**\n * If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n *\n * - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n *\n * @webnative\n */\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target: LiteralUnion<ButtonTarget, string> = '_self'\n\n /**\n * The type of button.\n *\n * `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n *\n * `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n *\n * `reset`: The button resets all the controls to their initial values.\n *\n * @webnative\n */\n @Prop() public readonly type?: ButtonType\n\n /**\n * Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly value?: string\n\n /**\n * Emitted when the button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement | null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined || this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action | undefined {\n switch (this.action) {\n case 'dropdown':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance | undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size | undefined {\n if (this.variant === 'hero') return undefined\n\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 private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n\n if (this.buttonType === 'button' || !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-icon-gap);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-icon-gap);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-icon-gap);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-icon-gap);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown' | 'next'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type FormMethod = 'dialog' | 'get' | 'post'\nexport type ButtonVariant = 'destructive' | 'hero'\n\n/**\n * The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/button\n */\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /**\n * The name of the action icon to render.\n */\n @Prop() public readonly action?: Action\n\n /**\n * The button's badge text.\n */\n @Prop() public readonly badge?: string\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 * The button's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The button's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The button's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * The button's variant.\n */\n @Prop() public readonly variant?: ButtonVariant\n\n /**\n * Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled?: boolean\n\n /**\n * Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly download?: string\n\n /**\n * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button 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 `<button>` is associated with\n * its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<button>` 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 * @webnative\n */\n @Prop() public readonly form?: string\n\n /**\n * The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n *\n * @webnative\n */\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /**\n * If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n *\n * - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n *\n * If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n *\n * [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n *\n * @webnative\n */\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /**\n * If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n *\n * @webnative\n */\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /**\n * If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n *\n * - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n *\n * @webnative\n */\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /**\n * The type of button.\n *\n * `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n *\n * `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n *\n * `reset`: The button resets all the controls to their initial values.\n *\n * @webnative\n */\n @Prop() public readonly type?: ButtonType\n\n /**\n * Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly value?: string\n\n /**\n * Emitted when the button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement | null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined || this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action | undefined {\n switch (this.action) {\n case 'dropdown':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance | undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size | undefined {\n if (this.variant === 'hero') return undefined\n\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 private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n\n if (this.buttonType === 'button' || !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
@@ -30,7 +30,7 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTM
|
|
|
30
30
|
this.hreflang = undefined;
|
|
31
31
|
this.referrerPolicy = undefined;
|
|
32
32
|
this.rel = undefined;
|
|
33
|
-
this.target =
|
|
33
|
+
this.target = undefined;
|
|
34
34
|
}
|
|
35
35
|
get computedImportance() {
|
|
36
36
|
switch (this.importance) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-inline-link.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,ysEAAysE;;MCiCltE,UAAU;;;;;;;QA0Mb,wBAAmB,GAAe,EAAE,CAAA;QA6D3B,WAAM,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;wBAxQ2C,KAAK;0BAKC,UAAU;;;;;;sBAgLG,OAAO;;IAkBtE,IAAY,kBAAkB;QAC5B,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,SAAS,CAAC;YACf,KAAK,YAAY,EAAE;gBACjB,OAAO,IAAI,CAAC,UAAU,CAAA;aACvB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAED,IAAY,gBAAgB;QAC1B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,IAAI,GAAG,EACxC,EAAE,CACH,CAAA;QACD,OAAO,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KACnD;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;KACF;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG;YACzB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;YACtC,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;SACjD,CAAA;KACF;IAEM,MAAM;QACX,QACE,0BACiB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EACvC,KAAK,EAAC,iBAAiB,qBACN,IAAI,CAAC,kBAAkB,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,KAEf,IAAI,CAAC,mBAAmB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,IAEpD,eAAQ,EACR,gBAAU,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,CACnE,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-link.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-external {\n display: none;\n height: 1.25em;\n margin-inline-start: var(--qds-text-icon-gap);\n vertical-align: text-top;\n width: 1.25em;\n}\n\n.qds-inline-link {\n border-radius: var(--qds-focus-border-radius);\n box-sizing: border-box;\n\n &[rel~='external'] > .qds-external {\n display: inline-block;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-importance='subdued'] {\n &.qds-inline-link {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited {\n color: var(--qds-theme-link-subdued-visited);\n }\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-subdued-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-subdued-visited-pressed);\n }\n }\n}\n\n[data-importance='standard'] {\n &.qds-inline-link {\n color: var(--qds-theme-link-standard-default);\n\n &:visited {\n color: var(--qds-theme-link-standard-visited);\n }\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-standard-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-standard-visited-pressed);\n }\n }\n}\n\n[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:visited {\n color: var(--qds-theme-link-emphasized-visited);\n }\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-emphasized-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-emphasized-visited-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, Target } from '../shared'\n\n/**\n * `<qds-inline-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n tag: 'qds-inline-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n /**\n * Prevents the inline link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The inline link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the inline link points to. Inline links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the inline link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target: LiteralUnion<Target, string> = '_self'\n\n /**\n * Emitted when the inline link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the inline link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsInlineLinkElement\n\n private inheritedAttributes: Attributes = {}\n\n private 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 private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <a\n aria-disabled={this.disabled.toString()}\n class=\"qds-inline-link\"\n data-importance={this.computedImportance}\n download={this.download}\n href={this.href}\n hrefLang={this.hreflang}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n target={this.target}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n tabIndex={this.disabled ? -1 : this.computedTabIndex}\n >\n <slot />\n <qds-icon class=\"qds-external\" library=\"core\" name=\"external-link\" />\n </a>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-inline-link.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,ysEAAysE;;MCiCltE,UAAU;;;;;;;QA0Mb,wBAAmB,GAAe,EAAE,CAAA;QA6D3B,WAAM,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,CAAA;QAEgB,YAAO,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,CAAA;wBAxQ2C,KAAK;0BAKC,UAAU;;;;;;;;IAkM5D,IAAY,kBAAkB;QAC5B,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,SAAS,CAAC;YACf,KAAK,YAAY,EAAE;gBACjB,OAAO,IAAI,CAAC,UAAU,CAAA;aACvB;YACD,SAAS;gBACP,OAAO,UAAU,CAAA;aAClB;SACF;KACF;IAED,IAAY,gBAAgB;QAC1B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,IAAI,GAAG,EACxC,EAAE,CACH,CAAA;QACD,OAAO,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;KACnD;IAGS,OAAO,CAAC,KAAiB;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;KACF;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG;YACzB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;YACtC,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;SACjD,CAAA;KACF;IAEM,MAAM;QACX,QACE,0BACiB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EACvC,KAAK,EAAC,iBAAiB,qBACN,IAAI,CAAC,kBAAkB,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,KAEf,IAAI,CAAC,mBAAmB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,IAEpD,eAAQ,EACR,gBAAU,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,CACnE,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-link.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-external {\n display: none;\n height: 1.25em;\n margin-inline-start: var(--qds-text-icon-gap);\n vertical-align: text-top;\n width: 1.25em;\n}\n\n.qds-inline-link {\n border-radius: var(--qds-focus-border-radius);\n box-sizing: border-box;\n\n &[rel~='external'] > .qds-external {\n display: inline-block;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-importance='subdued'] {\n &.qds-inline-link {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited {\n color: var(--qds-theme-link-subdued-visited);\n }\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-subdued-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-subdued-visited-pressed);\n }\n }\n}\n\n[data-importance='standard'] {\n &.qds-inline-link {\n color: var(--qds-theme-link-standard-default);\n\n &:visited {\n color: var(--qds-theme-link-standard-visited);\n }\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-standard-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-standard-visited-pressed);\n }\n }\n}\n\n[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:visited {\n color: var(--qds-theme-link-emphasized-visited);\n }\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-emphasized-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-emphasized-visited-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, Target } from '../shared'\n\n/**\n * `<qds-inline-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n tag: 'qds-inline-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n /**\n * Prevents the inline link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The inline link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the inline link points to. Inline links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the inline link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * Emitted when the inline link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the inline link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsInlineLinkElement\n\n private inheritedAttributes: Attributes = {}\n\n private 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 private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <a\n aria-disabled={this.disabled.toString()}\n class=\"qds-inline-link\"\n data-importance={this.computedImportance}\n download={this.download}\n href={this.href}\n hrefLang={this.hreflang}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n target={this.target}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n tabIndex={this.disabled ? -1 : this.computedTabIndex}\n >\n <slot />\n <qds-icon class=\"qds-external\" library=\"core\" name=\"external-link\" />\n </a>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
@@ -33,7 +33,7 @@ const StandaloneLink = /*@__PURE__*/ proxyCustomElement(class StandaloneLink ext
|
|
|
33
33
|
this.hreflang = undefined;
|
|
34
34
|
this.referrerPolicy = undefined;
|
|
35
35
|
this.rel = undefined;
|
|
36
|
-
this.target =
|
|
36
|
+
this.target = undefined;
|
|
37
37
|
}
|
|
38
38
|
get computedImportance() {
|
|
39
39
|
switch (this.importance) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-standalone-link.js","mappings":"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","names":[],"sources":["src/components/standalone-link/standalone-link.css?tag=qds-standalone-link&encapsulation=shadow","src/components/standalone-link/standalone-link.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-chevron,\n.qds-icon,\n.qds-external {\n vertical-align: text-bottom;\n}\n\n.qds-external {\n display: none;\n}\n\n.qds-standalone-link {\n align-items: center;\n border-radius: var(--qds-focus-border-radius);\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n print-color-adjust: exact;\n text-decoration: none;\n white-space: nowrap;\n width: 100%;\n\n &[rel~='external'] > .qds-external {\n display: inline-block;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &[data-importance='emphasized'],\n &:hover,\n &:active,\n &:visited {\n text-decoration: underline;\n }\n\n &[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited {\n color: var(--qds-theme-link-subdued-visited);\n }\n\n &:visited:hover {\n color: var(\n --qds-theme-link-subdued-visited-hover,\n var(--qds-theme-link-subdued-visited)\n );\n }\n\n &:visited:active {\n color: var(\n --qds-theme-link-subdued-visited-pressed,\n var(--qds-theme-link-subdued-visited)\n );\n }\n }\n\n &[data-importance='standard'] {\n color: var(--qds-theme-link-standard-default);\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited {\n color: var(--qds-theme-link-standard-visited);\n }\n\n &:visited:hover {\n color: var(\n --qds-theme-link-standard-visited-hover,\n var(--qds-theme-link-standard-visited)\n );\n }\n\n &:visited:active {\n color: var(\n --qds-theme-link-standard-visited-pressed,\n var(--qds-theme-link-standard-visited)\n );\n }\n }\n\n &[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited {\n color: var(--qds-theme-link-emphasized-visited);\n }\n\n &:visited:hover {\n color: var(\n --qds-theme-link-emphasized-visited-hover,\n var(--qds-theme-link-emphasized-visited)\n );\n }\n\n &:visited:active {\n color: var(\n --qds-theme-link-emphasized-visited-pressed,\n var(--qds-theme-link-emphasized-visited)\n );\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-chevron,\n &.qds-external,\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n margin-inline-start: var(--qds-control-small-icon-gap);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-standalone-link {\n font: var(--qds-control-small-text);\n gap: var(--qds-control-small-icon-gap);\n height: var(--qds-control-small-height);\n }\n}\n\n[data-size='standard'] {\n &.qds-chevron,\n &.qds-external,\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n margin-inline-start: var(--qds-control-standard-icon-gap);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-standalone-link {\n font: var(--qds-control-standard-text);\n gap: var(--qds-control-standard-icon-gap);\n height: var(--qds-control-standard-height);\n }\n}\n\n[data-size='large'] {\n &.qds-chevron,\n &.qds-external,\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n margin-inline-start: var(--qds-control-large-icon-gap);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-standalone-link {\n font: var(--qds-control-large-text);\n gap: var(--qds-control-large-icon-gap);\n height: var(--qds-control-large-height);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, Size, Target } from '../shared'\n\n/**\n * `<qds-standalone-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-standalone-link>` *should* indicate the standalone link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-standalone-link>` element will activate it.\n *\n * @slot Content to display for the standalone link.\n * @see https://quartz.se.com/build/components/standalone-link\n */\n@Component({\n tag: 'qds-standalone-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'standalone-link.css',\n})\nexport class StandaloneLink implements ComponentInterface {\n /**\n * Prevents the standalone link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\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 * The standalone link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The standalone link's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the standalone link points to. Standalone links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the standalone link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target: LiteralUnion<Target, string> = '_self'\n\n /**\n * Emitted when the standalone link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the standalone link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsStandaloneLinkElement\n\n private inheritedAttributes: Attributes = {}\n\n private 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 private get computedSize(): Size | undefined {\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 private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <a\n aria-disabled={this.disabled.toString()}\n class=\"qds-standalone-link\"\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n download={this.download}\n href={this.href}\n hrefLang={this.hreflang}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n target={this.target}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n tabIndex={this.disabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <slot />\n <qds-icon class=\"qds-external\" library=\"core\" name=\"external-link\" />\n <qds-icon class=\"qds-chevron\" library=\"core\" name=\"next\" />\n </a>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-standalone-link.js","mappings":"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","names":[],"sources":["src/components/standalone-link/standalone-link.css?tag=qds-standalone-link&encapsulation=shadow","src/components/standalone-link/standalone-link.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-chevron,\n.qds-icon,\n.qds-external {\n vertical-align: text-bottom;\n}\n\n.qds-external {\n display: none;\n}\n\n.qds-standalone-link {\n align-items: center;\n border-radius: var(--qds-focus-border-radius);\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n print-color-adjust: exact;\n text-decoration: none;\n white-space: nowrap;\n width: 100%;\n\n &[rel~='external'] > .qds-external {\n display: inline-block;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &[data-importance='emphasized'],\n &:hover,\n &:active,\n &:visited {\n text-decoration: underline;\n }\n\n &[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited {\n color: var(--qds-theme-link-subdued-visited);\n }\n\n &:visited:hover {\n color: var(\n --qds-theme-link-subdued-visited-hover,\n var(--qds-theme-link-subdued-visited)\n );\n }\n\n &:visited:active {\n color: var(\n --qds-theme-link-subdued-visited-pressed,\n var(--qds-theme-link-subdued-visited)\n );\n }\n }\n\n &[data-importance='standard'] {\n color: var(--qds-theme-link-standard-default);\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited {\n color: var(--qds-theme-link-standard-visited);\n }\n\n &:visited:hover {\n color: var(\n --qds-theme-link-standard-visited-hover,\n var(--qds-theme-link-standard-visited)\n );\n }\n\n &:visited:active {\n color: var(\n --qds-theme-link-standard-visited-pressed,\n var(--qds-theme-link-standard-visited)\n );\n }\n }\n\n &[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited {\n color: var(--qds-theme-link-emphasized-visited);\n }\n\n &:visited:hover {\n color: var(\n --qds-theme-link-emphasized-visited-hover,\n var(--qds-theme-link-emphasized-visited)\n );\n }\n\n &:visited:active {\n color: var(\n --qds-theme-link-emphasized-visited-pressed,\n var(--qds-theme-link-emphasized-visited)\n );\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-chevron,\n &.qds-external,\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n margin-inline-start: var(--qds-control-small-icon-gap);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-standalone-link {\n font: var(--qds-control-small-text);\n gap: var(--qds-control-small-icon-gap);\n height: var(--qds-control-small-height);\n }\n}\n\n[data-size='standard'] {\n &.qds-chevron,\n &.qds-external,\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n margin-inline-start: var(--qds-control-standard-icon-gap);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-standalone-link {\n font: var(--qds-control-standard-text);\n gap: var(--qds-control-standard-icon-gap);\n height: var(--qds-control-standard-height);\n }\n}\n\n[data-size='large'] {\n &.qds-chevron,\n &.qds-external,\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n margin-inline-start: var(--qds-control-large-icon-gap);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-standalone-link {\n font: var(--qds-control-large-text);\n gap: var(--qds-control-large-icon-gap);\n height: var(--qds-control-large-height);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, Size, Target } from '../shared'\n\n/**\n * `<qds-standalone-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-standalone-link>` *should* indicate the standalone link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-standalone-link>` element will activate it.\n *\n * @slot Content to display for the standalone link.\n * @see https://quartz.se.com/build/components/standalone-link\n */\n@Component({\n tag: 'qds-standalone-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'standalone-link.css',\n})\nexport class StandaloneLink implements ComponentInterface {\n /**\n * Prevents the standalone link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\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 * The standalone link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The standalone link's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the standalone link points to. Standalone links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the standalone link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * Emitted when the standalone link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the standalone link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsStandaloneLinkElement\n\n private inheritedAttributes: Attributes = {}\n\n private 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 private get computedSize(): Size | undefined {\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 private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <a\n aria-disabled={this.disabled.toString()}\n class=\"qds-standalone-link\"\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n download={this.download}\n href={this.href}\n hrefLang={this.hreflang}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n target={this.target}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n tabIndex={this.disabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <slot />\n <qds-icon class=\"qds-external\" library=\"core\" name=\"external-link\" />\n <qds-icon class=\"qds-chevron\" library=\"core\" name=\"next\" />\n </a>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
9
9
|
|
|
10
|
-
const library = require('./library-
|
|
10
|
+
const library = require('./library-889bd72a.js');
|
|
11
11
|
require('./index-b70242ec.js');
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|