@quartzds/core 1.0.0-beta.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,115 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const library = require('./library-4803c801.js');
+require('./index-f19b2823.js');
+
+// SPDX-FileCopyrightText: © 2023 Schneider Electric
+//
+// SPDX-License-Identifier: LGPL-2.1-only
+const toClassList = (value) => {
+  if (value === undefined)
+    return document.documentElement.classList;
+  if (typeof value === 'string')
+    return document.querySelector(value)?.classList ?? undefined;
+  return value.classList;
+};
+const getVariant = (type, classList) => {
+  if (!classList)
+    return undefined;
+  const prefix = `qds-${type}-`;
+  return [...classList]
+    .find((value) => value.startsWith(prefix))
+    ?.replace(prefix, '');
+};
+const setVariant = (type, value, element) => {
+  const classList = toClassList(element);
+  if (classList === undefined)
+    return;
+  const prefix = `qds-${type}-`;
+  const currentVariant = getVariant(type, classList);
+  if (currentVariant !== undefined)
+    classList.remove(`${prefix}${currentVariant}`);
+  classList.add(`${prefix}${value}`);
+};
+/**
+ * Get the currently set platform.
+ *
+ * @param element The element where the platform will be retrieved from. Can be
+ * either:
+ *
+ * - A non-empty CSS selector string
+ * - A reference to an
+ * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)
+ *
+ * By default, this is the root node of the current document.
+ *
+ * @returns The currently set platform if one is set, `undefined` otherwise.
+ */
+const getPlatform = (element) => getVariant('platform', toClassList(element));
+/**
+ * Sets the current platform.
+ *
+ * The current platform represented by a `qds-platform-`-prefixed CSS class
+ * will be removed.
+ *
+ * @param platform The platform to set. Must be a non-empty value.
+ * @param element The element where the platform will be set. Can be either:
+ *
+ * - A non-empty CSS selector string
+ * - A reference to an
+ * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)
+ *
+ * By default, this is the root node of the current document.
+ */
+const setPlatform = (platform, element) => {
+  setVariant('platform', platform, element);
+};
+/**
+ * Get the currently set theme.
+ *
+ * @param element The element where the theme will be retrieved from. Can be
+ * either:
+ *
+ * - A non-empty CSS selector string
+ * - A reference to an
+ * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)
+ *
+ * By default, this is the root node of the current document.
+ *
+ * @returns The currently set theme if one is set, `undefined` otherwise.
+ */
+const getTheme = (element) => getVariant('theme', toClassList(element));
+/**
+ * Sets the current theme.
+ *
+ * The current theme represented by a `qds-theme-`-prefixed CSS class will be
+ * removed.
+ *
+ * @param theme The theme to set. Must be a non-empty value.
+ * @param element The element where the theme will be set. Can be either:
+ *
+ * - A non-empty CSS selector string
+ * - A reference to an
+ * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)
+ *
+ * By default, this is the root node of the current document.
+ */
+const setTheme = (theme, element) => {
+  setVariant('theme', theme, element);
+};
+
+exports.registerIconLibrary = library.registerIconLibrary;
+exports.unregisterIconLibrary = library.unregisterIconLibrary;
+exports.getPlatform = getPlatform;
+exports.getTheme = getTheme;
+exports.setPlatform = setPlatform;
+exports.setTheme = setTheme;
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"file":"index.cjs.js","mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAEA,MAAM,WAAW,GAAG,CAAC,KAAwB;EAC3C,IAAI,KAAK,KAAK,SAAS;IAAE,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;EAClE,IAAI,OAAO,KAAK,KAAK,QAAQ;IAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,SAAS,CAAA;EAC9D,OAAO,KAAK,CAAC,SAAS,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,SAAoC;EAEpC,IAAI,CAAC,SAAS;IAAE,OAAO,SAAS,CAAA;EAEhC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,OAAO,CAAC,GAAG,SAAS,CAAC;KAClB,IAAI,CAAC,CAAC,KAAa,KAAsB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;MACjE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CACjB,IAAY,EACZ,KAAa,EACb,OAA0B;EAE1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;EACtC,IAAI,SAAS,KAAK,SAAS;IAAE,OAAM;EAEnC,MAAM,MAAM,GAAG,OAAO,IAAI,GAAG,CAAA;EAE7B,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;EAClD,IAAI,cAAc,KAAK,SAAS;IAC9B,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,cAAc,EAAE,CAAC,CAAA;EAChD,SAAS,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA;AAKD;;;;;;;;;;;;;;MAca,WAAW,GAAG,CACzB,OAAyB,KACF,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAErE;;;;;;;;;;;;;;;MAea,WAAW,GAAG,CAKzB,QAAqB,EACrB,OAAyB;EAEzB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC3C,EAAC;AAED;;;;;;;;;;;;;;MAca,QAAQ,GAAG,CACtB,OAAyB,KACF,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC;AAElE;;;;;;;;;;;;;;;MAea,QAAQ,GAAG,CAKtB,KAAkB,EAClB,OAAyB;EAEzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AACrC;;;;;;;;;","names":[],"sources":["./src/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nconst toClassList = (value?: Element | string): DOMTokenList | undefined => {\n  if (value === undefined) return document.documentElement.classList\n  if (typeof value === 'string')\n    return document.querySelector(value)?.classList ?? undefined\n  return value.classList\n}\n\nconst getVariant = (\n  type: string,\n  classList?: DOMTokenList | undefined,\n): string | undefined => {\n  if (!classList) return undefined\n\n  const prefix = `qds-${type}-`\n\n  return [...classList]\n    .find((value: string): value is string => value.startsWith(prefix))\n    ?.replace(prefix, '')\n}\n\nconst setVariant = (\n  type: string,\n  value: string,\n  element?: Element | string,\n): void => {\n  const classList = toClassList(element)\n  if (classList === undefined) return\n\n  const prefix = `qds-${type}-`\n\n  const currentVariant = getVariant(type, classList)\n  if (currentVariant !== undefined)\n    classList.remove(`${prefix}${currentVariant}`)\n  classList.add(`${prefix}${value}`)\n}\n\n// eslint-disable-next-line @typescript-eslint/no-type-alias\ntype NonEmpty<T extends string = string> = T extends '' ? never : T\n\n/**\n * Get the currently set platform.\n *\n * @param element The element where the platform will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set platform if one is set, `undefined` otherwise.\n */\nexport const getPlatform = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('platform', toClassList(element))\n\n/**\n * Sets the current platform.\n *\n * The current platform represented by a `qds-platform-`-prefixed CSS class\n * will be removed.\n *\n * @param platform The platform to set. Must be a non-empty value.\n * @param element The element where the platform will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setPlatform = <\n  P extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  platform: NonEmpty<P>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('platform', platform, element)\n}\n\n/**\n * Get the currently set theme.\n *\n * @param element The element where the theme will be retrieved from. Can be\n * either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n *\n * @returns The currently set theme if one is set, `undefined` otherwise.\n */\nexport const getTheme = <S extends string, E extends Element = Element>(\n  element?: E | NonEmpty<S>,\n): string | undefined => getVariant('theme', toClassList(element))\n\n/**\n * Sets the current theme.\n *\n * The current theme represented by a `qds-theme-`-prefixed CSS class will be\n * removed.\n *\n * @param theme The theme to set. Must be a non-empty value.\n * @param element The element where the theme will be set. Can be either:\n *\n * - A non-empty CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element)\n *\n * By default, this is the root node of the current document.\n */\nexport const setTheme = <\n  T extends string,\n  S extends string = string,\n  E extends Element = Element,\n>(\n  theme: NonEmpty<T>,\n  element?: E | NonEmpty<S>,\n): void => {\n  setVariant('theme', theme, element)\n}\n"],"version":3}

package/dist/cjs/library-4803c801.js

@@ -0,0 +1,62 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+'use strict';
+
+const index = require('./index-f19b2823.js');
+
+// SPDX-FileCopyrightText: © 2023 Schneider Electric
+const library = {
+  name: 'default',
+  resolver: (name) => index.getAssetPath(`icons/${name}.svg`),
+};
+
+const arrowTopRightOnSquareSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyLjAzIDEzLjAxSDMuMDJ2LTloNS45N3YtMUgyLjAzdjExaDEwLjk5VjYuOThoLS45OXY2LjAzWiIvPjxwYXRoIGQ9Ik0xMC45OSAxLjk4djFoMS4zNkw5LjEgNi4yM2wuNzEuNyAzLjE2LTMuMTYtLjAxIDEuMjEgMSAuMDEuMDQtMy4wMWgtMy4wMVoiLz48L3N2Zz4=';
+
+const checkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYuMzEgMTEuODYgMy4wOCA4LjYzbC43MS0uNzEgMi41MiAyLjUyIDUuOS01Ljk0LjcxLjctNi42MSA2LjY2WiIvPjwvc3ZnPg==';
+
+const minusSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDcuNUgzLjAxdjFIMTN2LTFaIi8+PC9zdmc+';
+
+// SPDX-FileCopyrightText: © 2023 Schneider Electric
+const icons = {
+  /* eslint-disable @typescript-eslint/naming-convention */
+  'arrow-top-right-on-square': arrowTopRightOnSquareSvg,
+  check: checkSvg,
+  minus: minusSvg,
+  /* eslint-enable @typescript-eslint/naming-convention */
+};
+const systemLibrary = {
+  name: 'system',
+  resolver: (name) => icons[name] ?? '',
+};
+
+// SPDX-FileCopyrightText: © 2023 Schneider Electric
+let registry = [library, systemLibrary];
+/**
+ * Returns a library from the registry.
+ */
+const getIconLibrary = (name) => registry.find((library) => library.name === name);
+/**
+ * Removes an icon library from the registry.
+ */
+const unregisterIconLibrary = (name) => {
+  registry = registry.filter((library) => library.name !== name);
+};
+/**
+ * Adds an icon library to the registry or overrides an existing one.
+ */
+const registerIconLibrary = (name, options) => {
+  unregisterIconLibrary(name);
+  registry.push({
+    name,
+    ...options,
+  });
+};
+
+exports.getIconLibrary = getIconLibrary;
+exports.registerIconLibrary = registerIconLibrary;
+exports.unregisterIconLibrary = unregisterIconLibrary;
+
+//# sourceMappingURL=library-4803c801.js.map

package/dist/cjs/library-4803c801.js.map

@@ -0,0 +1 @@
+{"file":"library-4803c801.js","mappings":";;;;;;;;;AAAA;AAQA,MAAM,OAAO,GAAgB;EAC3B,IAAI,EAAE,SAAS;EACf,QAAQ,EAAE,CAAC,IAAI,KAAKA,kBAAY,CAAC,SAAS,IAAI,MAAM,CAAC;CACtD;;ACXD,MAAM,wBAAwB,GAAG,oUAAoU;;ACArW,MAAM,QAAQ,GAAG,4NAA4N;;ACA7O,MAAM,QAAQ,GAAG,gKAAgK;;ACAjL;AAeA,MAAM,KAAK,GAAuC;;EAEhD,2BAA2B,EAAEC,wBAAqB;SAClDC,QAAK;SACLC,QAAK;;CAEN,CAAA;AAED,MAAM,aAAa,GAAgB;EACjC,IAAI,EAAE,QAAQ;EACd,QAAQ,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE;CACtC;;AC1BD;AAeA,IAAI,QAAQ,GAAkB,CAACC,OAAc,EAAE,aAAa,CAAC,CAAA;AAE7D;;;MAGa,cAAc,GAAG,CAAC,IAAY,KACzC,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,IAAI,EAAC;AAEnD;;;MAGa,qBAAqB,GAAG,CAAC,IAAY;EAChD,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;AAChE,EAAC;AAED;;;MAGa,mBAAmB,GAAG,CACjC,IAAY,EACZ,OAAoC;EAEpC,qBAAqB,CAAC,IAAI,CAAC,CAAA;EAC3B,QAAQ,CAAC,IAAI,CAAC;IACZ,IAAI;IACJ,GAAG,OAAO;GACX,CAAC,CAAA;AACJ;;;;;;","names":["getAssetPath","arrowTopRightOnSquare","check","minus","defaultLibrary"],"sources":["./src/components/icon/default-library.ts","../../node_modules/@quartzds/generic-icons-core/dist/arrow-top-right-on-square.svg","../../node_modules/@quartzds/generic-icons-core/dist/check.svg","../../node_modules/@quartzds/generic-icons-core/dist/minus.svg","./src/components/icon/system-library.ts","./src/components/icon/library.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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","<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.03Z\"/><path d=\"M10.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=\"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=\"M13 7.5H3.01v1H13v-1Z\"/></svg>","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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 arrowTopRightOnSquare from '@quartzds/generic-icons-core/dist/arrow-top-right-on-square.svg'\nimport check from '@quartzds/generic-icons-core/dist/check.svg'\nimport minus from '@quartzds/generic-icons-core/dist/minus.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  'arrow-top-right-on-square': arrowTopRightOnSquare,\n  check,\n  minus,\n  /* eslint-enable @typescript-eslint/naming-convention */\n}\n\nconst systemLibrary: IconLibrary = {\n  name: 'system',\n  resolver: (name) => icons[name] ?? '',\n}\n\nexport default systemLibrary\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { Except } from 'type-fest'\n\nimport defaultLibrary from './default-library'\nimport systemLibrary from './system-library'\n\nexport type IconLibraryResolver = (name: string) => string\nexport interface IconLibrary {\n  name: string\n  resolver: IconLibraryResolver\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, systemLibrary]\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"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,29 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f19b2823.js');
+
+/*
+ Stencil Client Patch Esm v3.2.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox.cjs",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+  });
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"file":"loader.cjs.js","mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAGA,MAAM,QAAQ,GAAG,MAAM;AAiBvB,IAAI,OAAOA,oBAAc,EAAE,CAAC;AAC5B,CAAC;;ACnBW,MAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AACtD,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC9D,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,GAAG,CAAC,CAAC;AACL;;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-esm.js","@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Esm v3.2.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD } from '@stencil/core/internal/app-data';\nimport { CSS, plt, win, promiseResolve } from '@stencil/core';\nconst patchEsm = () => {\n    // NOTE!! This fn cannot use async/await!\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    // @ts-ignore\n    if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {\n        // @ts-ignore\n        return import(/* webpackChunkName: \"polyfills-css-shim\" */ './css-shim.js').then(() => {\n            if ((plt.$cssShim$ = win.__cssshim)) {\n                // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n                return plt.$cssShim$.i();\n            }\n            else {\n                // for better minification\n                return 0;\n            }\n        });\n    }\n    return promiseResolve();\n};\nexport { patchEsm };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchEsm } from '@stencil/core/internal/client/patch-esm';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = (win, options) => {\n  if (typeof window === 'undefined') return Promise.resolve();\n  return patchEsm().then(() => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n  });\n};\n"],"version":3}

package/dist/cjs/qds-button.cjs.entry.js

@@ -0,0 +1,110 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f19b2823.js');
+const helpers = require('./helpers-0b23af3f.js');
+
+const buttonCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.button{-webkit-appearance:none;appearance:none;background-color:transparent;background-color:initial;border:none;padding-block:0;align-items:center;border-radius:var(--qds-control-border-radius);cursor:pointer;display:inline-flex;gap:var(--qds-control-button-gap-internal);justify-content:center;padding-inline:var(--qds-control-button-padding-horizontal);-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.button.icon-only{padding-inline:0}.button:link,.button:visited,area[href].button{-webkit-text-decoration:none;text-decoration:none}.button:any-link{-webkit-text-decoration:none;text-decoration:none}.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);height:var(--qds-control-small-height)}.icon-only[data-size='small']{width:var(--qds-control-small-height)}.icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.icon-only[data-size='large']{width:var(--qds-control-large-height)}.icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{border:var(--qds-control-border-width) solid transparent;color:var(--qds-theme-link-default)}.icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:hover{border:var(--qds-control-border-width) solid var(--qds-theme-link-default)}.icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='subdued']:active{border:var(--qds-control-border-width) solid var(--qds-theme-link-pressed);color:var(--qds-theme-link-pressed)}.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']{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);color:var(--qds-theme-control-text-standard)}[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}[data-importance='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}[data-importance='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}[data-importance='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}";
+
+const Button = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
+    this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
+    this.inheritedAttributes = {};
+    this.onClick = (event) => {
+      if (this.computedDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (this.buttonType === 'button' || !this.formElement)
+        return;
+      event.preventDefault();
+      const fakeButton = document.createElement('button');
+      fakeButton.type = this.buttonType;
+      if (this.name !== undefined)
+        fakeButton.name = this.name;
+      if (this.value !== undefined)
+        fakeButton.value = this.value;
+      if (this.formAction !== undefined)
+        fakeButton.formAction = this.formAction;
+      if (this.formMethod !== undefined)
+        fakeButton.formMethod = this.formMethod;
+      fakeButton.formNoValidate = this.formNoValidate;
+      fakeButton.formTarget = this.formTarget;
+      fakeButton.style.display = 'none';
+      this.formElement.append(fakeButton);
+      fakeButton.click();
+      fakeButton.remove();
+    };
+    this.onBlur = (event) => {
+      this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
+    };
+    this.onFocus = (event) => {
+      this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
+    };
+    this.iconName = undefined;
+    this.iconLibrary = 'default';
+    this.importance = 'standard';
+    this.size = 'standard';
+    this.text = undefined;
+    this.disabled = undefined;
+    this.download = undefined;
+    this.form = undefined;
+    this.formAction = undefined;
+    this.formMethod = undefined;
+    this.formNoValidate = false;
+    this.formTarget = '_self';
+    this.href = undefined;
+    this.name = undefined;
+    this.target = '_self';
+    this.type = undefined;
+    this.value = undefined;
+  }
+  get formElement() {
+    return this.form !== undefined && this.form !== ''
+      ? document.querySelector(`#${this.form}`)
+      : this.element.closest('form');
+  }
+  get buttonType() {
+    if (this.type === undefined)
+      return this.formElement ? 'submit' : 'button';
+    return this.type;
+  }
+  get iconOnly() {
+    const hasIcon = this.iconName !== undefined && this.iconName !== '';
+    const hasNoLabel = this.text === undefined || this.text === '';
+    return hasIcon && hasNoLabel;
+  }
+  get computedDisabled() {
+    return this.disabled ?? false;
+  }
+  get computedTabIndex() {
+    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10);
+    return Number.isNaN(parsedValue) ? 0 : parsedValue;
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = helpers.inheritAriaAttributes(this.element);
+  }
+  render() {
+    const Tag = this.href === undefined ? 'button' : 'a';
+    return (index.h(Tag, { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
+        button: true,
+        'icon-only': this.iconOnly,
+      }, "data-importance": this.importance, "data-size": this.size, 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, onClick: this.onClick, 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 !== '' && (index.h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconLibrary, name: this.iconName })), this.text));
+  }
+  static get delegatesFocus() { return true; }
+  get element() { return index.getElement(this); }
+};
+Button.style = buttonCss;
+
+exports.qds_button = Button;
+
+//# sourceMappingURL=qds-button.cjs.entry.js.map

package/dist/cjs/qds-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-button.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["./src/components/button/button.css?tag=qds-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.button {\n  appearance: none;\n  background-color: initial;\n  border: none;\n  padding-block: 0;\n  align-items: center;\n  border-radius: var(--qds-control-border-radius);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--qds-control-button-gap-internal);\n  justify-content: center;\n  padding-inline: var(--qds-control-button-padding-horizontal);\n  print-color-adjust: exact;\n  user-select: none;\n  white-space: nowrap;\n  width: 100%;\n\n  &.icon-only {\n    padding-inline: 0;\n  }\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  height: var(--qds-control-small-height);\n\n  &.icon-only {\n    width: var(--qds-control-small-height);\n  }\n\n  &.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  height: var(--qds-control-standard-height);\n\n  &.icon-only {\n    width: var(--qds-control-standard-height);\n  }\n\n  &.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  height: var(--qds-control-large-height);\n\n  &.icon-only {\n    width: var(--qds-control-large-height);\n  }\n\n  &.icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n}\n\n[data-importance='subdued'] {\n  border: var(--qds-control-border-width) solid transparent;\n  color: var(--qds-theme-link-default);\n\n  &.icon-only {\n    color: var(--qds-theme-control-text-standard);\n  }\n\n  &:hover {\n    border: var(--qds-control-border-width) solid var(--qds-theme-link-default);\n\n    &.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: var(--qds-control-border-width) solid var(--qds-theme-link-pressed);\n    color: var(--qds-theme-link-pressed);\n\n    &.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  &: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  &: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-importance='destructive'] {\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\n  &:active {\n    background-color: var(--qds-theme-feedback-action-destructive-pressed);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\n\nexport type ButtonType = 'button' | 'reset' | 'submit'\nexport type Importance = 'destructive' | 'emphasized' | 'standard' | 'subdued'\nexport type ButtonSize = 'large' | 'small' | 'standard'\nexport type FormMethod = 'get' | 'post'\nexport type ButtonTarget = '_blank' | '_parent' | '_self' | '_top'\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 icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconLibrary: string = 'default'\n\n  /**\n   * The button's importance.\n   */\n  @Prop({ reflect: true }) public readonly importance: Importance = 'standard'\n\n  /**\n   * The button's size.\n   */\n  @Prop({ reflect: true }) public readonly size: ButtonSize = 'standard'\n\n  /**\n   * The button's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Prevents the button from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public 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](https://developer.mozilla.org/docs/Web/HTTP/Methods) used to\n   * submit 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   *\n   * If specified, this attribute overrides the method attribute of the button's form owner.\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 computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10)\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\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 ? 'true' : 'false'}\n        class={{\n          button: true,\n          'icon-only': this.iconOnly,\n        }}\n        data-importance={this.importance}\n        data-size={this.size}\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        onClick={this.onClick}\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=\"icon\"\n            data-size={this.size}\n            library={this.iconLibrary}\n            name={this.iconName}\n          />\n        )}\n        {this.text}\n      </Tag>\n    )\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\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  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/qds-checkbox.cjs.entry.js

@@ -0,0 +1,116 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f19b2823.js');
+const helpers = require('./helpers-0b23af3f.js');
+
+const checkboxCss = ".sc-qds-checkbox-h{box-sizing:border-box}[hidden].sc-qds-checkbox-h{display:none !important}.sc-qds-checkbox-h *.sc-qds-checkbox,.sc-qds-checkbox-h *.sc-qds-checkbox::before,.sc-qds-checkbox-h *.sc-qds-checkbox::after{box-sizing:inherit}.sc-qds-checkbox-h{display:inline-block;line-height:0}.icon.sc-qds-checkbox{display:none;color:var(--qds-theme-signature-color-contrast);inset-inline-start:0;pointer-events:none;position:absolute}.label.sc-qds-checkbox{cursor:pointer;display:inline-flex;position:relative}.checkbox.sc-qds-checkbox{align-items:center;-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.checkbox.sc-qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.checkbox.sc-qds-checkbox::before{content:'';height:10px;position:absolute;width:10px}.checkbox.sc-qds-checkbox:hover::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-hover)}.checkbox.sc-qds-checkbox:active::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-pressed)}.checkbox.sc-qds-checkbox:checked~.checked.sc-qds-checkbox,.checkbox.sc-qds-checkbox:indeterminate~.indeterminate.sc-qds-checkbox{display:inline-block}.checkbox.sc-qds-checkbox:checked,.checkbox.sc-qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.checkbox.sc-qds-checkbox:checked:hover,.checkbox.sc-qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.checkbox.sc-qds-checkbox:checked:active,.checkbox.sc-qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true'].sc-qds-checkbox{opacity:var(--qds-theme-disabled);pointer-events:none}.icon[data-size='small'].sc-qds-checkbox,.checkbox[data-size='small'].sc-qds-checkbox{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.inline[data-size='small'].sc-qds-checkbox{margin-block:var(--qds-control-small-padding-auto-height)}.label[data-size='small'].sc-qds-checkbox{gap:var(--qds-control-small-gap-siblings-related)}.icon[data-size='standard'].sc-qds-checkbox,.checkbox[data-size='standard'].sc-qds-checkbox{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.inline[data-size='standard'].sc-qds-checkbox{margin-block:var(--qds-control-standard-padding-auto-height)}.label[data-size='standard'].sc-qds-checkbox{gap:var(--qds-control-standard-gap-siblings-related)}.icon[data-size='large'].sc-qds-checkbox,.checkbox[data-size='large'].sc-qds-checkbox{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.inline[data-size='large'].sc-qds-checkbox{margin-block:var(--qds-control-large-padding-auto-height)}.label[data-size='large'].sc-qds-checkbox{gap:var(--qds-control-large-gap-siblings-related)}";
+
+let autoIncrementingId = 1;
+const Checkbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
+    this.changeEmitter = index.createEvent(this, "qdsChange", 6);
+    this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
+    this.inheritedAttributes = {};
+    this.ref = (checkbox) => {
+      this.input = checkbox;
+    };
+    this.onBlur = (event) => {
+      this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
+    };
+    this.onFocus = (event) => {
+      this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
+    };
+    this.inline = false;
+    this.size = 'standard';
+    this.text = undefined;
+    this.autoFocus = undefined;
+    this.checked = undefined;
+    this.disabled = undefined;
+    this.form = undefined;
+    this.indeterminate = undefined;
+    this.name = `qds-checkbox-${autoIncrementingId}`;
+    this.required = undefined;
+    this.value = undefined;
+  }
+  get computedDisabled() {
+    return this.disabled ?? false;
+  }
+  get computedIndeterminate() {
+    return this.indeterminate ?? false;
+  }
+  get hasText() {
+    return ((this.text !== undefined && this.text !== '') || this.required === true);
+  }
+  /**
+   * Returns whether a form will validate this checkbox when it is submitted
+   * without having to submit it.
+   */
+  async checkValidity() {
+    helpers.invariant(this.input);
+    return this.input.checkValidity();
+  }
+  /**
+   * Returns true if the checkbox's value passes validity checks; otherwise,
+   * returns false, and (if the event isn't canceled) reports the problem to
+   * the user.
+   */
+  async reportValidity() {
+    helpers.invariant(this.input);
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validity message for the checkbox. If this message is not the
+   * empty string, then the checkbox is considered invalid.
+   */
+  async setCustomValidity(message) {
+    helpers.invariant(this.input);
+    this.input.setCustomValidity(message);
+  }
+  onClick(event) {
+    if (this.computedDisabled)
+      return;
+    event.preventDefault();
+    this.checked = this.computedIndeterminate ? true : !(this.checked ?? false);
+    this.changeEmitter.emit();
+    this.indeterminate = false;
+  }
+  componentWillLoad() {
+    autoIncrementingId += 1;
+    this.inheritedAttributes = {
+      ...helpers.inheritAriaAttributes(this.element),
+      ...helpers.inheritAttributes(this.element, ['tabindex']),
+    };
+  }
+  render() {
+    return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    index.h("label", { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
+        inline: this.inline,
+        label: true,
+      }, "data-size": this.size }, index.h("input", {
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "checkbox", "data-size": this.size, disabled: this.disabled, form: this.form, indeterminate: this.indeterminate, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes
+    }), index.h("qds-icon", { "aria-hidden": "true", class: {
+        icon: true,
+        checked: true,
+      }, "data-size": this.size, library: "system", name: "check" }), index.h("qds-icon", { "aria-hidden": "true", class: {
+        icon: true,
+        indeterminate: true,
+      }, "data-size": this.size, library: "system", name: "minus" }), this.hasText && (index.h("qds-label", { required: this.required, size: this.size, text: this.text }))));
+  }
+  get element() { return index.getElement(this); }
+};
+Checkbox.style = checkboxCss;
+
+exports.qds_checkbox = Checkbox;
+
+//# sourceMappingURL=qds-checkbox.cjs.entry.js.map

package/dist/cjs/qds-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-checkbox.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","invariant","inheritAriaAttributes","inheritAttributes","h"],"sources":["./src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.icon {\n  display: none;\n  color: var(--qds-theme-signature-color-contrast);\n  inset-inline-start: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n.label {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n}\n\n.checkbox {\n  align-items: center;\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  margin: 0;\n  print-color-adjust: exact;\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  &::before {\n    content: '';\n    height: 10px;\n    position: absolute;\n    width: 10px;\n  }\n\n  &:hover::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-hover);\n  }\n\n  &:active::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked ~ .checked,\n  &:indeterminate ~ .indeterminate {\n    display: inline-block;\n  }\n\n  &:checked,\n  &:indeterminate {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\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\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Method,\n  Prop,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n} from '../../helpers'\n\nexport type CheckboxValue = number | string | null\nexport type CheckboxSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n  tag: 'qds-checkbox',\n  scoped: true,\n  styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n  /**\n   * Adds vertical margin to the checkbox for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * The checkbox's size.\n   */\n  @Prop({ reflect: true }) public readonly size: CheckboxSize = 'standard'\n\n  /**\n   * The checkbox's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Specify whether the checkbox should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Sets the checkbox's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public checked?: boolean\n\n  /**\n   * Prevents the checkbox from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the checkbox with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-checkbox>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-checkbox>` 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   * Sets the checkbox to an indeterminate state. This is usually applied to\n   * checkboxes that represents a \"select all/none\" behavior when associated\n   * checkboxes have a mix of checked and unchecked states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public indeterminate?: boolean\n\n  /**\n   * The name of the checkbox, which is submitted with the form data. An\n   * incrementing ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-checkbox-${autoIncrementingId}`\n\n  /**\n   * A value must be specified for the checkbox before the owning form can be\n   * submitted.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The value of the checkbox, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: CheckboxValue\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the checkbox gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsCheckboxElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  private get hasText(): boolean {\n    return (\n      (this.text !== undefined && this.text !== '') || this.required === true\n    )\n  }\n\n  /**\n   * Returns whether a form will validate this checkbox when it is submitted\n   * without having to submit it.\n   */\n  @Method()\n  public async checkValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.checkValidity()\n  }\n\n  /**\n   * Returns true if the checkbox's value passes validity checks; otherwise,\n   * returns false, and (if the event isn't canceled) reports the problem to\n   * the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.reportValidity()\n  }\n\n  /**\n   * Sets a custom validity message for the checkbox. If this message is not the\n   * empty string, then the checkbox is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.input)\n\n    this.input.setCustomValidity(message)\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) return\n\n    event.preventDefault()\n\n    this.checked = this.computedIndeterminate ? true : !(this.checked ?? false)\n    this.changeEmitter.emit()\n    this.indeterminate = false\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled ? 'true' : 'false'}\n        class={{\n          inline: this.inline,\n          label: true,\n        }}\n        data-size={this.size}\n      >\n        <input\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          checked={this.computedIndeterminate ? false : this.checked}\n          class=\"checkbox\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          ref={this.ref}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class={{\n            icon: true,\n            checked: true,\n          }}\n          data-size={this.size}\n          library=\"system\"\n          name=\"check\"\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class={{\n            icon: true,\n            indeterminate: true,\n          }}\n          data-size={this.size}\n          library=\"system\"\n          name=\"minus\"\n        />\n        {this.hasText && (\n          <qds-label\n            required={this.required}\n            size={this.size}\n            text={this.text}\n          />\n        )}\n      </label>\n    )\n  }\n\n  private readonly ref = (checkbox?: HTMLInputElement): void => {\n    this.input = checkbox\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}