@swisspost/design-system-components 1.3.4 → 1.3.6
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/dist/cjs/{index-126f28cf.js → index-f95ab17b.js} +62 -20
- package/dist/cjs/index-f95ab17b.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/{package-3838cb5b.js → package-79d607b8.js} +2 -2
- package/dist/cjs/{package-3838cb5b.js.map → package-79d607b8.js.map} +1 -1
- package/dist/cjs/post-collapsible.cjs.entry.js +3 -3
- package/dist/cjs/post-collapsible.cjs.entry.js.map +1 -1
- package/dist/cjs/post-components.cjs.js +3 -3
- package/dist/cjs/post-components.cjs.js.map +1 -1
- package/dist/cjs/post-icon.cjs.entry.js +17 -84
- package/dist/cjs/post-icon.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/post-collapsible/post-collapsible.css +1187 -48
- package/dist/collection/components/post-icon/post-icon.css +11 -3
- package/dist/collection/components/post-icon/post-icon.js +14 -82
- package/dist/collection/components/post-icon/post-icon.js.map +1 -1
- package/dist/collection/utils/property-checkers/tests/check-non-empty.spec.js +36 -0
- package/dist/collection/utils/property-checkers/tests/check-non-empty.spec.js.map +1 -0
- package/dist/collection/utils/property-checkers/tests/check-one-of.spec.js +13 -0
- package/dist/collection/utils/property-checkers/tests/check-one-of.spec.js.map +1 -0
- package/dist/collection/utils/property-checkers/tests/check-type.spec.js +103 -0
- package/dist/collection/utils/property-checkers/tests/check-type.spec.js.map +1 -0
- package/dist/collection/utils/property-checkers/tests/empty-or.spec.js +23 -0
- package/dist/collection/utils/property-checkers/tests/empty-or.spec.js.map +1 -0
- package/dist/collection/utils/tests/should-reduce-motion.spec.js +16 -0
- package/dist/collection/utils/tests/should-reduce-motion.spec.js.map +1 -0
- package/dist/components/package.js +1 -1
- package/dist/components/post-collapsible.js +2 -2
- package/dist/components/post-collapsible.js.map +1 -1
- package/dist/components/post-icon.js +16 -84
- package/dist/components/post-icon.js.map +1 -1
- package/dist/docs.json +3 -3
- package/dist/esm/{index-286143e7.js → index-0cfe0348.js} +62 -20
- package/dist/esm/index-0cfe0348.js.map +1 -0
- package/dist/esm/loader.js +4 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/{package-fb4a74d0.js → package-ba1192d8.js} +2 -2
- package/dist/esm/{package-fb4a74d0.js.map → package-ba1192d8.js.map} +1 -1
- package/dist/esm/post-collapsible.entry.js +3 -3
- package/dist/esm/post-collapsible.entry.js.map +1 -1
- package/dist/esm/post-components.js +4 -4
- package/dist/esm/post-components.js.map +1 -1
- package/dist/esm/post-icon.entry.js +17 -84
- package/dist/esm/post-icon.entry.js.map +1 -1
- package/dist/post-components/p-2f408d84.entry.js +2 -0
- package/dist/post-components/{p-7dd960f1.entry.js.map → p-2f408d84.entry.js.map} +1 -1
- package/dist/post-components/p-75734ad5.entry.js +2 -0
- package/dist/post-components/p-75734ad5.entry.js.map +1 -0
- package/dist/post-components/p-8f4d1bc9.js +3 -0
- package/dist/post-components/p-8f4d1bc9.js.map +1 -0
- package/dist/post-components/{p-87bf3416.js → p-a6796794.js} +2 -2
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/post-components/post-components.esm.js.map +1 -1
- package/dist/types/components/post-icon/post-icon.d.ts +0 -8
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/loader/index.d.ts +1 -1
- package/package.json +13 -14
- package/dist/cjs/index-126f28cf.js.map +0 -1
- package/dist/esm/index-286143e7.js.map +0 -1
- package/dist/post-components/p-0c286590.js +0 -3
- package/dist/post-components/p-0c286590.js.map +0 -1
- package/dist/post-components/p-6e225c16.entry.js +0 -2
- package/dist/post-components/p-6e225c16.entry.js.map +0 -1
- package/dist/post-components/p-7dd960f1.entry.js +0 -2
- /package/dist/post-components/{p-87bf3416.js.map → p-a6796794.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"post-collapsible.entry.cjs.js","mappings":"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","names":["checkType","checkOneOf","h","Host","version"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string | string[] = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","export function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\nimport { version } from '../../../package.json';\n\nlet nextId = 0;\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n private collapsibleElement: HTMLElement;\n private isLoaded = false;\n\n @Element() host: HTMLPostCollapsibleElement;\n\n @State() collapseClasses: string;\n @State() collapseHeight: string | null = null;\n @State() collapsibleId: string;\n @State() hasHeader: boolean;\n @State() headingTag: string | undefined;\n @State() isOpen = true;\n @State() onAccordionButtonClick = () => this.toggle();\n\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() readonly collapsed?: boolean = false;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkType(newValue, 'boolean', 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n if (!this.isLoaded) {\n this.isOpen = !newValue;\n this.collapseClasses = this.getCollapseClasses();\n } else {\n setTimeout(() => {\n this.toggle(!newValue);\n });\n }\n }\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() readonly headingLevel?: number = 2;\n\n @Watch('headingLevel')\n validateHeadingLevel(newValue = this.headingLevel) {\n checkOneOf(\n newValue,\n [1, 2, 3, 4, 5, 6],\n 'The post-collapsible element requires a heading level between 1 and 6.',\n );\n\n this.headingTag = `h${newValue}`;\n }\n\n componentWillLoad() {\n this.validateCollapsed();\n this.validateHeadingLevel();\n\n this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n if (!this.hasHeader) {\n console.warn(\n 'Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility',\n );\n }\n\n this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n this.collapseClasses = this.getCollapseClasses();\n }\n\n componentDidLoad() {\n this.isLoaded = true;\n this.collapsibleElement = this.host.shadowRoot.querySelector(\n `#${this.collapsibleId}--collapse`,\n );\n }\n\n /**\n * Triggers the collapse programmatically.\n */\n @Method()\n async toggle(open = !this.isOpen): Promise<boolean> {\n if (open !== this.isOpen) {\n this.isOpen = !this.isOpen;\n\n this.startTransition();\n\n await onTransitionEnd(this.collapsibleElement).then(() => {\n this.collapseHeight = null;\n this.collapseClasses = this.getCollapseClasses();\n });\n\n return this.isOpen;\n }\n }\n\n private startTransition() {\n const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n this.collapseClasses = 'collapsing';\n\n setTimeout(() => {\n this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n }, 50);\n }\n\n private getCollapseClasses() {\n return this.isOpen ? 'collapse show' : 'collapse';\n }\n\n render() {\n if (!this.hasHeader) {\n return (\n <div\n id={`${this.collapsibleId}--collapse`}\n class={this.collapseClasses}\n style={{ height: this.collapseHeight }}\n >\n <slot />\n </div>\n );\n }\n\n return (\n <Host data-version={version}>\n <div class=\"accordion-item\">\n <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n <button\n class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n type=\"button\"\n aria-expanded={`${this.isOpen}`}\n aria-controls={`${this.collapsibleId}--collapse`}\n onClick={this.onAccordionButtonClick}\n >\n <slot name=\"header\" />\n </button>\n </this.headingTag>\n <div\n id={`${this.collapsibleId}--collapse`}\n class={`accordion-collapse ${this.collapseClasses}`}\n style={{ height: this.collapseHeight }}\n aria-labelledby={`${this.collapsibleId}--header`}\n >\n <div class=\"accordion-body\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"post-collapsible.entry.cjs.js","mappings":"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","names":["checkType","checkOneOf","h","Host","version"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string | string[] = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","export function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\nimport { version } from '../../../package.json';\n\nlet nextId = 0;\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n private collapsibleElement: HTMLElement;\n private isLoaded = false;\n\n @Element() host: HTMLPostCollapsibleElement;\n\n @State() collapseClasses: string;\n @State() collapseHeight: string | null = null;\n @State() collapsibleId: string;\n @State() hasHeader: boolean;\n @State() headingTag: string | undefined;\n @State() isOpen = true;\n @State() onAccordionButtonClick = () => this.toggle();\n\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() readonly collapsed?: boolean = false;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkType(newValue, 'boolean', 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n if (!this.isLoaded) {\n this.isOpen = !newValue;\n this.collapseClasses = this.getCollapseClasses();\n } else {\n setTimeout(() => {\n this.toggle(!newValue);\n });\n }\n }\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() readonly headingLevel?: number = 2;\n\n @Watch('headingLevel')\n validateHeadingLevel(newValue = this.headingLevel) {\n checkOneOf(\n newValue,\n [1, 2, 3, 4, 5, 6],\n 'The post-collapsible element requires a heading level between 1 and 6.',\n );\n\n this.headingTag = `h${newValue}`;\n }\n\n componentWillLoad() {\n this.validateCollapsed();\n this.validateHeadingLevel();\n\n this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n if (!this.hasHeader) {\n console.warn(\n 'Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility',\n );\n }\n\n this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n this.collapseClasses = this.getCollapseClasses();\n }\n\n componentDidLoad() {\n this.isLoaded = true;\n this.collapsibleElement = this.host.shadowRoot.querySelector(\n `#${this.collapsibleId}--collapse`,\n );\n }\n\n /**\n * Triggers the collapse programmatically.\n */\n @Method()\n async toggle(open = !this.isOpen): Promise<boolean> {\n if (open !== this.isOpen) {\n this.isOpen = !this.isOpen;\n\n this.startTransition();\n\n await onTransitionEnd(this.collapsibleElement).then(() => {\n this.collapseHeight = null;\n this.collapseClasses = this.getCollapseClasses();\n });\n\n return this.isOpen;\n }\n }\n\n private startTransition() {\n const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n this.collapseClasses = 'collapsing';\n\n setTimeout(() => {\n this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n }, 50);\n }\n\n private getCollapseClasses() {\n return this.isOpen ? 'collapse show' : 'collapse';\n }\n\n render() {\n if (!this.hasHeader) {\n return (\n <div\n id={`${this.collapsibleId}--collapse`}\n class={this.collapseClasses}\n style={{ height: this.collapseHeight }}\n >\n <slot />\n </div>\n );\n }\n\n return (\n <Host data-version={version}>\n <div class=\"accordion-item\">\n <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n <button\n class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n type=\"button\"\n aria-expanded={`${this.isOpen}`}\n aria-controls={`${this.collapsibleId}--collapse`}\n onClick={this.onAccordionButtonClick}\n >\n <slot name=\"header\" />\n </button>\n </this.headingTag>\n <div\n id={`${this.collapsibleId}--collapse`}\n class={`accordion-collapse ${this.collapseClasses}`}\n style={{ height: this.collapseHeight }}\n aria-labelledby={`${this.collapsibleId}--header`}\n >\n <div class=\"accordion-body\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-f95ab17b.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Browser v3.
|
|
8
|
+
Stencil Client Patch Browser v3.3.1 | MIT Licensed | https://stenciljs.com
|
|
9
9
|
*/
|
|
10
10
|
const patchBrowser = () => {
|
|
11
11
|
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('post-components.cjs.js', document.baseURI).href));
|
|
@@ -20,7 +20,7 @@ const patchBrowser = () => {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
patchBrowser().then(options => {
|
|
23
|
-
return index.bootstrapLazy([["post-collapsible.cjs",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-icon.cjs",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"
|
|
23
|
+
return index.bootstrapLazy([["post-collapsible.cjs",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-icon.cjs",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]}]]]], options);
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
exports.setNonce = index.setNonce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"post-components.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@3.
|
|
1
|
+
{"file":"post-components.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@3.3.1/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const _package = require('./package-
|
|
5
|
+
const index = require('./index-f95ab17b.js');
|
|
6
|
+
const _package = require('./package-79d607b8.js');
|
|
7
7
|
|
|
8
8
|
const EMPTY_VALUES = [undefined, null, ''];
|
|
9
9
|
|
|
@@ -24,7 +24,7 @@ function checkNonEmpty(value, error) {
|
|
|
24
24
|
const checkEmptyOrOneOf = emptyOr(_package.checkOneOf);
|
|
25
25
|
const checkEmptyOrType = emptyOr(_package.checkType);
|
|
26
26
|
|
|
27
|
-
const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]:not([flip-h=false]))
|
|
27
|
+
const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb 0.75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:0.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:0.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
|
|
28
28
|
|
|
29
29
|
const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
|
|
30
30
|
const ANIMATION_NAMES = [
|
|
@@ -39,8 +39,6 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
|
|
|
39
39
|
const PostIcon = class {
|
|
40
40
|
constructor(hostRef) {
|
|
41
41
|
index.registerInstance(this, hostRef);
|
|
42
|
-
this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
|
|
43
|
-
this.pathForceCDN = false;
|
|
44
42
|
this.svgStyles = undefined;
|
|
45
43
|
this.svgOutput = undefined;
|
|
46
44
|
this.animation = null;
|
|
@@ -84,94 +82,29 @@ const PostIcon = class {
|
|
|
84
82
|
this.validateAnimation();
|
|
85
83
|
}
|
|
86
84
|
componentWillRender() {
|
|
87
|
-
this.createIconFromStorage();
|
|
88
|
-
// create path dependant on the props
|
|
89
85
|
this.setPath();
|
|
90
|
-
// fetch icon if the prop "name" is defined and
|
|
91
|
-
// the path has not allready been loaded
|
|
92
|
-
if (this.name && this.path !== this.loadedPath) {
|
|
93
|
-
this.loadedPath = this.path;
|
|
94
|
-
this.fetchIcon()
|
|
95
|
-
.then(successfullyLoaded => {
|
|
96
|
-
// create icon only if an svg has been loaded successfully
|
|
97
|
-
if (successfullyLoaded)
|
|
98
|
-
this.createIcon();
|
|
99
|
-
})
|
|
100
|
-
.catch(error => {
|
|
101
|
-
console.error(error);
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
86
|
}
|
|
105
87
|
setPath() {
|
|
88
|
+
var _a, _b, _c, _d;
|
|
106
89
|
// Construct icon path from different possible sources
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
basePath = metaBase.getAttribute('data-post-icon-base');
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
116
|
-
basePath = CDN_URL;
|
|
117
|
-
}
|
|
118
|
-
// use "basePath" only if "pathForceCDN" state is "false"
|
|
119
|
-
this.path = this.getPath(this.pathForceCDN ? CDN_URL : basePath);
|
|
120
|
-
// reset "pathForceCDN" after every try
|
|
121
|
-
this.pathForceCDN = false;
|
|
90
|
+
const metaBase = (_b = (_a = document.head
|
|
91
|
+
.querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
|
|
92
|
+
const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
|
|
93
|
+
const fileName = `${this.name}.svg#icon`;
|
|
94
|
+
const filePath = `${fileBase}${fileName}`;
|
|
95
|
+
this.path = new URL(filePath, window.location.origin).toString();
|
|
122
96
|
}
|
|
123
|
-
|
|
124
|
-
return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
|
|
125
|
-
}
|
|
126
|
-
fetchIcon() {
|
|
127
|
-
return new Promise((resolve, reject) => {
|
|
128
|
-
fetch(this.path)
|
|
129
|
-
.then(response => response.text())
|
|
130
|
-
.then(textResponse => {
|
|
131
|
-
// match "svg" out of "textResponse"
|
|
132
|
-
const match = textResponse.match(/^<svg\b([\s\S]*)><\/svg>/);
|
|
133
|
-
if (match !== null) {
|
|
134
|
-
// set "svgSource" and return "successfullyLoaded" with true
|
|
135
|
-
this.svgSource = match[0];
|
|
136
|
-
window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);
|
|
137
|
-
resolve(true);
|
|
138
|
-
}
|
|
139
|
-
else if (this.path !== this.getPath(CDN_URL)) {
|
|
140
|
-
// if used "path" is not CDN path, and fetch has loaded something else than a "svg", try to reload it from the CDN
|
|
141
|
-
console.warn(`Warning in <post-icon/>: The path "${this.path}" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`);
|
|
142
|
-
// trigger a component update, which will result in a refetch of the icon with the "CDN_URL"
|
|
143
|
-
this.pathForceCDN = true;
|
|
144
|
-
// return "successfullyLoaded" with false
|
|
145
|
-
resolve(false);
|
|
146
|
-
}
|
|
147
|
-
})
|
|
148
|
-
.catch(reject);
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
createIconFromStorage() {
|
|
152
|
-
const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);
|
|
153
|
-
if (storedIcon) {
|
|
154
|
-
this.svgSource = storedIcon !== null && storedIcon !== void 0 ? storedIcon : this.svgSource;
|
|
155
|
-
this.createIcon();
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
createIcon() {
|
|
159
|
-
// create svg element from svgSource string
|
|
160
|
-
const domParser = new DOMParser();
|
|
161
|
-
this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');
|
|
97
|
+
render() {
|
|
162
98
|
// create inline styles for some properties
|
|
163
99
|
const svgStyles = Object.entries({
|
|
164
|
-
|
|
165
|
-
|
|
100
|
+
'-webkit-mask-image': `url('${this.path}')`,
|
|
101
|
+
'mask-image': `url('${this.path}')`,
|
|
102
|
+
'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
|
|
103
|
+
'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
|
|
166
104
|
})
|
|
167
105
|
.filter(([_key, value]) => value !== null)
|
|
168
|
-
.
|
|
169
|
-
|
|
170
|
-
this.svgElement.setAttribute('style', svgStyles);
|
|
171
|
-
this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;
|
|
172
|
-
}
|
|
173
|
-
render() {
|
|
174
|
-
return index.h(index.Host, { "data-version": _package.version });
|
|
106
|
+
.reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
|
|
107
|
+
return (index.h(index.Host, { "data-version": _package.version }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", style: svgStyles })));
|
|
175
108
|
}
|
|
176
109
|
get host() { return index.getElement(this); }
|
|
177
110
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"post-icon.entry.cjs.js","mappings":"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","names":["checkOneOf","checkType","h","Host","version"],"sources":["./src/utils/property-checkers/constants.ts","./src/utils/property-checkers/empty-or.ts","./src/utils/property-checkers/check-non-empty.ts","./src/utils/property-checkers/index.ts","./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n","import { EMPTY_VALUES } from './constants';\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n return (...args: T) => {\n const value = args[0];\n if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n };\n}\n","import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n if (EMPTY_VALUES.some(v => v === value)) {\n throw new Error(error);\n }\n}\n","import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-type';\n","@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,\n 'spin': icon-animation-spin 2s linear infinite normal,\n 'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n 'fade': icon-animation-fade 0.75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb 0.75s ease-in-out infinite alternate,\n);\n\n:host {\n display: inline-block;\n width: 1em;\n vertical-align: -0.15em;\n}\n\nsvg {\n display: block;\n width: 100%;\n fill: currentColor;\n}\n\n// flip\n\n:host([flip-h]:not([flip-h='false'])) {\n svg {\n scale: -1 1;\n }\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n svg {\n scale: 1 -1;\n }\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n svg {\n scale: -1;\n }\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation='#{$key}']) {\n animation: $value;\n }\n}\n\n@keyframes icon-animation-cylon {\n from {\n transform: translateX(-25%);\n }\n to {\n transform: translateX(25%);\n }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from {\n transform: translateY(25%);\n }\n to {\n transform: translateY(-25%);\n }\n}\n\n@keyframes icon-animation-fade {\n from {\n opacity: 0.1;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes icon-animation-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: 0.5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_NAMES = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n tag: 'post-icon',\n styleUrl: 'post-icon.scss',\n shadow: true,\n})\nexport class PostIcon {\n private path: string;\n private loadedPath: string;\n private svgSource = '<svg viewBox=\"0 0 16 16\"></svg>';\n private svgElement: SVGElement;\n\n @Element() host: HTMLPostIconElement;\n\n @State() pathForceCDN = false;\n @State() svgStyles: string;\n @State() svgOutput: string;\n\n /**\n * The name of the animation.\n */\n @Prop() readonly animation?: Animation | null = null;\n\n @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined)\n checkEmptyOrOneOf(\n newValue,\n ANIMATION_KEYS,\n `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n ', ',\n )}.`,\n );\n }\n\n /**\n * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.\n */\n @Prop() readonly base?: string | null = null;\n\n @Watch('base')\n validateBase(newValue = this.base) {\n checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n }\n\n /**\n * When set to `true`, the icon will be flipped horizontally.\n */\n @Prop() readonly flipH?: boolean = false;\n\n @Watch('flipH')\n validateFlipH(newValue = this.flipH) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n }\n\n /**\n * When set to `true`, the icon will be flipped vertically.\n */\n @Prop() readonly flipV?: boolean = false;\n\n @Watch('flipV')\n validateFlipV(newValue = this.flipV) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n }\n\n /**\n * The name/id of the icon (e.g. 1000, 1001, ...).\n */\n @Prop() readonly name!: string;\n\n @Watch('name')\n validateName(newValue = this.name) {\n checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n }\n\n /**\n * The number of degree for the css rotate transformation.\n */\n @Prop() readonly rotate?: number | null = null;\n\n @Watch('rotate')\n validateRotate(newValue = this.rotate) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n }\n\n /**\n * The number for the css scale transformation.\n */\n @Prop() readonly scale?: number | null = null;\n\n @Watch('scale')\n validateScale(newValue = this.scale) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n }\n\n componentWillLoad() {\n this.validateBase();\n this.validateName();\n this.validateFlipH();\n this.validateFlipV();\n this.validateScale();\n this.validateRotate();\n this.validateAnimation();\n }\n\n componentWillRender() {\n this.createIconFromStorage();\n\n // create path dependant on the props\n this.setPath();\n\n // fetch icon if the prop \"name\" is defined and\n // the path has not allready been loaded\n if (this.name && this.path !== this.loadedPath) {\n this.loadedPath = this.path;\n\n this.fetchIcon()\n .then(successfullyLoaded => {\n // create icon only if an svg has been loaded successfully\n if (successfullyLoaded) this.createIcon();\n })\n .catch(error => {\n console.error(error);\n });\n }\n }\n\n private setPath() {\n // Construct icon path from different possible sources\n let basePath: string;\n const metaBase = document.head.querySelector(\n 'meta[name=\"design-system-settings\"][data-post-icon-base]',\n );\n\n if (this.base) {\n basePath = this.base;\n } else if (metaBase) {\n basePath = metaBase.getAttribute('data-post-icon-base');\n } else {\n basePath = CDN_URL;\n }\n\n // use \"basePath\" only if \"pathForceCDN\" state is \"false\"\n this.path = this.getPath(this.pathForceCDN ? CDN_URL : basePath);\n // reset \"pathForceCDN\" after every try\n this.pathForceCDN = false;\n }\n\n private getPath(basePath: string) {\n return new URL(\n [...basePath.split('/'), `${this.name}.svg#icon`].join('/'),\n window.location.origin,\n ).toString();\n }\n\n private fetchIcon() {\n return new Promise((resolve, reject) => {\n fetch(this.path)\n .then(response => response.text())\n .then(textResponse => {\n // match \"svg\" out of \"textResponse\"\n const match = textResponse.match(/^<svg\\b([\\s\\S]*)><\\/svg>/);\n\n if (match !== null) {\n // set \"svgSource\" and return \"successfullyLoaded\" with true\n this.svgSource = match[0];\n window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);\n resolve(true);\n } else if (this.path !== this.getPath(CDN_URL)) {\n // if used \"path\" is not CDN path, and fetch has loaded something else than a \"svg\", try to reload it from the CDN\n console.warn(\n `Warning in <post-icon/>: The path \"${this.path}\" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`,\n );\n // trigger a component update, which will result in a refetch of the icon with the \"CDN_URL\"\n this.pathForceCDN = true;\n // return \"successfullyLoaded\" with false\n resolve(false);\n }\n })\n .catch(reject);\n });\n }\n\n private createIconFromStorage() {\n const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);\n\n if (storedIcon) {\n this.svgSource = storedIcon ?? this.svgSource;\n this.createIcon();\n }\n }\n\n private createIcon() {\n // create svg element from svgSource string\n const domParser = new DOMParser();\n this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');\n\n // create inline styles for some properties\n const svgStyles = Object.entries({\n scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n rotate: this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n })\n .filter(([_key, value]) => value !== null)\n .map(([key, value]) => `${key}: ${value}`)\n .join(';');\n\n this.svgElement.setAttribute('style', svgStyles);\n this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;\n }\n\n render() {\n return <Host data-version={version} />;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"post-icon.entry.cjs.js","mappings":"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","names":["checkOneOf","checkType","h","Host","version"],"sources":["./src/utils/property-checkers/constants.ts","./src/utils/property-checkers/empty-or.ts","./src/utils/property-checkers/check-non-empty.ts","./src/utils/property-checkers/index.ts","./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n","import { EMPTY_VALUES } from './constants';\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n return (...args: T) => {\n const value = args[0];\n if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n };\n}\n","import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n if (EMPTY_VALUES.some(v => v === value)) {\n throw new Error(error);\n }\n}\n","import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-type';\n","@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,\n 'spin': icon-animation-spin 2s linear infinite normal,\n 'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n 'fade': icon-animation-fade 0.75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb 0.75s ease-in-out infinite alternate,\n);\n\n:host {\n display: inline-block;\n width: 1em;\n vertical-align: -0.15em;\n}\n\nsvg {\n display: block;\n width: 100%;\n height: 100%;\n fill: currentColor;\n background-color: currentColor;\n -webkit-mask-position: center center;\n mask-position: center center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100%;\n mask-size: 100%;\n}\n\n// flip\n\n:host([flip-h]:not([flip-h='false'])) {\n scale: -1 1;\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n scale: 1 -1;\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n scale: -1;\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation='#{$key}']) {\n animation: $value;\n }\n}\n\n@keyframes icon-animation-cylon {\n from {\n transform: translateX(-25%);\n }\n to {\n transform: translateX(25%);\n }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from {\n transform: translateY(25%);\n }\n to {\n transform: translateY(-25%);\n }\n}\n\n@keyframes icon-animation-fade {\n from {\n opacity: 0.1;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes icon-animation-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: 0.5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_NAMES = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n tag: 'post-icon',\n styleUrl: 'post-icon.scss',\n shadow: true,\n})\nexport class PostIcon {\n private path: string;\n\n @Element() host: HTMLPostIconElement;\n\n @State() svgStyles: string;\n @State() svgOutput: string;\n\n /**\n * The name of the animation.\n */\n @Prop() readonly animation?: Animation | null = null;\n\n @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined)\n checkEmptyOrOneOf(\n newValue,\n ANIMATION_KEYS,\n `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n ', ',\n )}.`,\n );\n }\n\n /**\n * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.\n */\n @Prop() readonly base?: string | null = null;\n\n @Watch('base')\n validateBase(newValue = this.base) {\n checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n }\n\n /**\n * When set to `true`, the icon will be flipped horizontally.\n */\n @Prop() readonly flipH?: boolean = false;\n\n @Watch('flipH')\n validateFlipH(newValue = this.flipH) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n }\n\n /**\n * When set to `true`, the icon will be flipped vertically.\n */\n @Prop() readonly flipV?: boolean = false;\n\n @Watch('flipV')\n validateFlipV(newValue = this.flipV) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n }\n\n /**\n * The name/id of the icon (e.g. 1000, 1001, ...).\n */\n @Prop() readonly name!: string;\n\n @Watch('name')\n validateName(newValue = this.name) {\n checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n }\n\n /**\n * The number of degree for the css rotate transformation.\n */\n @Prop() readonly rotate?: number | null = null;\n\n @Watch('rotate')\n validateRotate(newValue = this.rotate) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n }\n\n /**\n * The number for the css scale transformation.\n */\n @Prop() readonly scale?: number | null = null;\n\n @Watch('scale')\n validateScale(newValue = this.scale) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n }\n\n componentWillLoad() {\n this.validateBase();\n this.validateName();\n this.validateFlipH();\n this.validateFlipV();\n this.validateScale();\n this.validateRotate();\n this.validateAnimation();\n }\n\n componentWillRender() {\n this.setPath();\n }\n\n private setPath() {\n // Construct icon path from different possible sources\n const metaBase =\n document.head\n .querySelector('meta[name=\"design-system-settings\"][data-post-icon-base]')\n ?.getAttribute('data-post-icon-base') ?? null;\n\n const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\\/\\/$/, '/');\n const fileName = `${this.name}.svg#icon`;\n const filePath = `${fileBase}${fileName}`;\n\n this.path = new URL(filePath, window.location.origin).toString();\n }\n\n render() {\n // create inline styles for some properties\n const svgStyles = Object.entries({\n '-webkit-mask-image': `url('${this.path}')`,\n 'mask-image': `url('${this.path}')`,\n 'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n 'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n })\n .filter(([_key, value]) => value !== null)\n .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});\n\n return (\n <Host data-version={version}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style={svgStyles}>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
|