@swisspost/design-system-components 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/cjs/check-type-f24cf91d.js +24 -0
  2. package/dist/cjs/check-type-f24cf91d.js.map +1 -0
  3. package/dist/cjs/{index-8880977f.js → index-a8b23f1b.js} +1 -1
  4. package/dist/cjs/{index-8880977f.js.map → index-a8b23f1b.js.map} +1 -1
  5. package/dist/cjs/loader.cjs.js +3 -3
  6. package/dist/cjs/loader.cjs.js.map +1 -1
  7. package/dist/cjs/post-collapsible.cjs.entry.js +11 -19
  8. package/dist/cjs/post-collapsible.cjs.entry.js.map +1 -1
  9. package/dist/cjs/post-components.cjs.js +3 -3
  10. package/dist/cjs/post-components.cjs.js.map +1 -1
  11. package/dist/cjs/post-icon.cjs.entry.js +39 -29
  12. package/dist/cjs/post-icon.cjs.entry.js.map +1 -1
  13. package/dist/collection/collection-manifest.json +1 -1
  14. package/dist/collection/components/post-collapsible/post-collapsible.css +1251 -3863
  15. package/dist/collection/components/post-collapsible/post-collapsible.js +12 -10
  16. package/dist/collection/components/post-collapsible/post-collapsible.js.map +1 -1
  17. package/dist/collection/components/post-icon/post-icon.js +41 -46
  18. package/dist/collection/components/post-icon/post-icon.js.map +1 -1
  19. package/dist/collection/utils/get-element-height.js +0 -3
  20. package/dist/collection/utils/get-element-height.js.map +1 -1
  21. package/dist/collection/utils/index.js +0 -3
  22. package/dist/collection/utils/index.js.map +1 -1
  23. package/dist/collection/utils/on-transition-end.js +0 -3
  24. package/dist/collection/utils/on-transition-end.js.map +1 -1
  25. package/dist/collection/utils/property-checkers/check-one-of.js +5 -0
  26. package/dist/collection/utils/property-checkers/check-one-of.js.map +1 -0
  27. package/dist/collection/utils/property-checkers/check-type.js +13 -0
  28. package/dist/collection/utils/property-checkers/check-type.js.map +1 -0
  29. package/dist/collection/utils/property-checkers/empty-or.js +9 -0
  30. package/dist/collection/utils/property-checkers/empty-or.js.map +1 -0
  31. package/dist/collection/utils/property-checkers/index.js +8 -0
  32. package/dist/collection/utils/property-checkers/index.js.map +1 -0
  33. package/dist/collection/utils/should-reduce-motion.js +0 -3
  34. package/dist/collection/utils/should-reduce-motion.js.map +1 -1
  35. package/dist/components/check-type.js +21 -0
  36. package/dist/components/check-type.js.map +1 -0
  37. package/dist/components/post-collapsible.js +12 -19
  38. package/dist/components/post-collapsible.js.map +1 -1
  39. package/dist/components/post-icon.js +37 -30
  40. package/dist/components/post-icon.js.map +1 -1
  41. package/dist/docs.json +2 -2
  42. package/dist/esm/check-type-67411ed3.js +21 -0
  43. package/dist/esm/check-type-67411ed3.js.map +1 -0
  44. package/dist/esm/{index-6d5a72fa.js → index-401f2d6a.js} +1 -1
  45. package/dist/esm/{index-6d5a72fa.js.map → index-401f2d6a.js.map} +1 -1
  46. package/dist/esm/loader.js +4 -4
  47. package/dist/esm/loader.js.map +1 -1
  48. package/dist/esm/post-collapsible.entry.js +10 -18
  49. package/dist/esm/post-collapsible.entry.js.map +1 -1
  50. package/dist/esm/post-components.js +4 -4
  51. package/dist/esm/post-components.js.map +1 -1
  52. package/dist/esm/post-icon.entry.js +35 -25
  53. package/dist/esm/post-icon.entry.js.map +1 -1
  54. package/dist/post-components/{p-d1bc7b0b.entry.js → p-07a51673.entry.js} +2 -2
  55. package/dist/post-components/p-07a51673.entry.js.map +1 -0
  56. package/dist/post-components/p-416f1e74.entry.js +2 -0
  57. package/dist/post-components/p-416f1e74.entry.js.map +1 -0
  58. package/dist/post-components/{p-a93114b9.js → p-f214c52a.js} +1 -1
  59. package/dist/post-components/{p-a93114b9.js.map → p-f214c52a.js.map} +1 -1
  60. package/dist/post-components/p-f549b3fc.js +2 -0
  61. package/dist/post-components/p-f549b3fc.js.map +1 -0
  62. package/dist/post-components/post-components.esm.js +1 -1
  63. package/dist/post-components/post-components.esm.js.map +1 -1
  64. package/dist/types/components/post-collapsible/post-collapsible.d.ts +14 -13
  65. package/dist/types/components/post-icon/post-icon.d.ts +22 -22
  66. package/dist/types/utils/property-checkers/check-one-of.d.ts +1 -0
  67. package/dist/types/utils/property-checkers/check-type.d.ts +2 -0
  68. package/dist/types/utils/property-checkers/empty-or.d.ts +1 -0
  69. package/dist/types/utils/property-checkers/index.d.ts +4 -0
  70. package/package.json +17 -11
  71. package/dist/cjs/property-checkers-586ad9d4.js +0 -40
  72. package/dist/cjs/property-checkers-586ad9d4.js.map +0 -1
  73. package/dist/collection/utils/property-checkers.js +0 -31
  74. package/dist/collection/utils/property-checkers.js.map +0 -1
  75. package/dist/components/property-checkers.js +0 -34
  76. package/dist/components/property-checkers.js.map +0 -1
  77. package/dist/esm/property-checkers-484ca671.js +0 -34
  78. package/dist/esm/property-checkers-484ca671.js.map +0 -1
  79. package/dist/post-components/p-7cd9c1ad.js +0 -2
  80. package/dist/post-components/p-7cd9c1ad.js.map +0 -1
  81. package/dist/post-components/p-b07185a3.entry.js +0 -2
  82. package/dist/post-components/p-b07185a3.entry.js.map +0 -1
  83. package/dist/post-components/p-d1bc7b0b.entry.js.map +0 -1
  84. package/dist/types/utils/property-checkers.d.ts +0 -5
@@ -1 +1 @@
1
- {"file":"post-collapsible.js","mappings":"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","names":["PostCollapsible"],"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":["/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport 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: any = []): 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","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nimport { 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, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkBoolean, checkOneOf, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() collapsed?: boolean = false;\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() headingLevel?: number = 2;\n\n @State() isOpen = true;\n @State() collapseClasses: string;\n @State() collapseHeight: string | null = null;\n @State() headingTag: string | undefined;\n @State() collapsibleId: string;\n @State() hasHeader: boolean;\n\n @Element() host: HTMLElement;\n\n isLoaded = false;\n collapsibleElement: HTMLElement;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkBoolean(newValue, '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 @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('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 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(`#${this.collapsibleId}--collapse`);\n }\n\n /**\n * Triggers the collapse programmatically.\n */\n @Method()\n async toggle(open: boolean = !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 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 <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.toggle()}\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 );\n }\n}\n"],"version":3}
1
+ {"file":"post-collapsible.js","mappings":"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","names":["PostCollapsible"],"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, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\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('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 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(`#${this.collapsibleId}--collapse`);\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 <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 );\n }\n}\n"],"version":3}
@@ -1,5 +1,17 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
- import { b as checkType, d as checkEmptyOrType, e as checkEmptyOrOneOf } from './property-checkers.js';
2
+ import { c as checkType, a as checkOneOf } from './check-type.js';
3
+
4
+ const EMPTY_VALUES = [undefined, null, ''];
5
+ function emptyOr(check) {
6
+ return (...args) => {
7
+ const value = args[0];
8
+ if (!EMPTY_VALUES.some(v => v === value))
9
+ check(...args);
10
+ };
11
+ }
12
+
13
+ const checkEmptyOrOneOf = emptyOr(checkOneOf);
14
+ const checkEmptyOrType = emptyOr(checkType);
3
15
 
4
16
  const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]) svg{scale:-1 1}:host([flip-v]) svg{scale:1 -1}:host([flip-h][flip-v]) svg{scale:-1}:host([animation]) svg{transform-origin:center}:host([animation=cylon]) svg{animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]) svg{animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]) svg{animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]) svg{animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]) svg{animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]) svg{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)}}";
5
17
 
@@ -17,20 +29,19 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
17
29
  super();
18
30
  this.__registerHost();
19
31
  this.__attachShadow();
20
- this.name = undefined;
32
+ this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
33
+ this.svgOutput = undefined;
34
+ this.animation = undefined;
21
35
  this.base = undefined;
22
36
  this.flipH = undefined;
23
37
  this.flipV = undefined;
24
- this.scale = undefined;
38
+ this.name = undefined;
25
39
  this.rotate = undefined;
26
- this.animation = undefined;
27
- this.initialPath = undefined;
28
- this.path = undefined;
29
- this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
30
- this.svgOutput = undefined;
40
+ this.scale = undefined;
31
41
  }
32
- validateName(newValue = this.name) {
33
- checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
42
+ validateAnimation(newValue = this.animation) {
43
+ if (newValue !== undefined)
44
+ checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
34
45
  }
35
46
  validateBase(newValue = this.base) {
36
47
  checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
@@ -41,15 +52,14 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
41
52
  validateFlipV(newValue = this.flipV) {
42
53
  checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
43
54
  }
44
- validateScale(newValue = this.scale) {
45
- checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
55
+ validateName(newValue = this.name) {
56
+ checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
46
57
  }
47
58
  validateRotate(newValue = this.rotate) {
48
59
  checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
49
60
  }
50
- validateAnimation(newValue = this.animation) {
51
- if (newValue !== undefined)
52
- checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
61
+ validateScale(newValue = this.scale) {
62
+ checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
53
63
  }
54
64
  connectedCallback() {
55
65
  var _a;
@@ -69,13 +79,13 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
69
79
  this.svgSource = (_a = window.localStorage.getItem(`post-icon-${this.name}`)) !== null && _a !== void 0 ? _a : this.svgSource;
70
80
  }
71
81
  componentWillLoad() {
72
- this.validateName();
82
+ this.validateAnimation();
73
83
  this.validateBase();
74
84
  this.validateFlipH();
75
85
  this.validateFlipV();
76
- this.validateScale();
86
+ this.validateName();
77
87
  this.validateRotate();
78
- this.validateAnimation();
88
+ this.validateScale();
79
89
  this.fetchSVG();
80
90
  }
81
91
  componentWillRender() {
@@ -92,9 +102,6 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
92
102
  svgElement.setAttribute('style', svgStyles);
93
103
  this.svgOutput = helperElement.innerHTML;
94
104
  }
95
- getPath(basePath) {
96
- return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
97
- }
98
105
  fetchSVG() {
99
106
  fetch(this.path)
100
107
  .then(response => response.text())
@@ -120,30 +127,30 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
120
127
  console.log(error);
121
128
  });
122
129
  }
130
+ getPath(basePath) {
131
+ return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
132
+ }
123
133
  render() {
124
134
  return (h(Host, null, h("div", { innerHTML: this.svgOutput })));
125
135
  }
126
136
  static get watchers() { return {
127
- "name": ["validateName"],
137
+ "animation": ["validateAnimation"],
128
138
  "base": ["validateBase"],
129
139
  "flipH": ["validateFlipH"],
130
140
  "flipV": ["validateFlipV"],
131
- "scale": ["validateScale"],
141
+ "name": ["validateName"],
132
142
  "rotate": ["validateRotate"],
133
- "animation": ["validateAnimation"]
143
+ "scale": ["validateScale"]
134
144
  }; }
135
145
  static get style() { return postIconCss; }
136
146
  }, [1, "post-icon", {
137
- "name": [1],
147
+ "animation": [1],
138
148
  "base": [1],
139
149
  "flipH": [4, "flip-h"],
140
150
  "flipV": [4, "flip-v"],
141
- "scale": [2],
151
+ "name": [1],
142
152
  "rotate": [2],
143
- "animation": [1],
144
- "initialPath": [32],
145
- "path": [32],
146
- "svgSource": [32],
153
+ "scale": [2],
147
154
  "svgOutput": [32]
148
155
  }]);
149
156
  function defineCustomElement$1() {
@@ -1 +1 @@
1
- {"file":"post-icon.js","mappings":"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","names":["PostIcon"],"sources":["./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon .75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical .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 .75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb .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]) {\n svg { scale: -1 1; }\n}\n\n:host([flip-v]) {\n svg { scale: 1 -1; }\n}\n\n:host([flip-h][flip-v]) {\n svg { 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 svg {\n transform-origin: center;\n }\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation=\"#{$key}\"]) {\n svg {\n animation: $value;\n }\n }\n}\n\n@keyframes icon-animation-cylon {\n from { transform: translateX(-25%) }\n to { transform: translateX(25%) }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from { transform: translateY(25%); }\n to { transform: translateY(-25%); }\n}\n\n@keyframes icon-animation-fade {\n from { opacity: .1; }\n to { opacity: 1; }\n}\n\n@keyframes icon-animation-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: .5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_KEYS = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb'\n];\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 /**\n * The name/id of the icon (e.g. 1000, 1001, ...).\n */\n @Prop() name: string;\n\n /**\n * The base path, where the icons are located (must be a public url).\n */\n @Prop() base?: string;\n\n /**\n * When set to `true`, the icon will be flipped horizontally.\n */\n @Prop() flipH?: boolean;\n\n /**\n * When set to `true`, the icon will be flipped vertically.\n */\n @Prop() flipV?: boolean;\n\n /**\n * The `number` for the css `scale` transformation.\n */\n @Prop() scale?: number;\n\n /**\n * The `number` of degree for the css `rotate` transformation.\n */\n @Prop() rotate?: number;\n\n /**\n * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).\n */\n @Prop() animation?: string;\n @State() initialPath: string;\n @State() path: string;\n @State() svgSource: string = '<svg viewBox=\"0 0 16 16\"></svg>';\n @State() svgOutput: string;\n\n @Watch('name')\n validateName(newValue = this.name) {\n checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n }\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 @Watch('flipH')\n validateFlipH(newValue = this.flipH) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n }\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 @Watch('scale')\n validateScale(newValue = this.scale) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n }\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 @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined) checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);\n }\n\n connectedCallback() {\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 this.path = this.getPath(basePath);\n this.svgSource = window.localStorage.getItem(`post-icon-${this.name}`) ?? this.svgSource;\n }\n\n componentWillLoad() {\n this.validateName();\n this.validateBase();\n this.validateFlipH();\n this.validateFlipV();\n this.validateScale();\n this.validateRotate();\n this.validateAnimation();\n\n this.fetchSVG();\n }\n\n componentWillRender() {\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 const helperElement = document.createElement('div');\n helperElement.innerHTML = this.svgSource;\n\n const svgElement = helperElement.querySelector('svg');\n svgElement.setAttribute('style', svgStyles);\n\n this.svgOutput = helperElement.innerHTML;\n }\n\n getPath(basePath: string) {\n return new URL(\n [...basePath.split('/'), `${this.name}.svg#icon`].join('/'),\n window.location.origin,\n ).toString();\n }\n\n fetchSVG() {\n fetch(this.path)\n .then(response => response.text())\n .then(textResponse => {\n const match = textResponse.match(/^<svg\\b([\\s\\S]*)><\\/svg>/);\n\n if (match !== null) {\n this.svgSource = match[0];\n window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);\n } else {\n this.initialPath = this.path;\n this.path = this.getPath(CDN_URL);\n\n if (this.initialPath !== this.path) {\n console.warn(\n `Warning in <post-icon/>: The content on the path \"${this.path}\" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`,\n );\n this.fetchSVG();\n } else {\n console.error(\n `Error in <post-icon/>: Could not load the svg on the path \"${this.initialPath}\"!`,\n );\n }\n }\n })\n .catch(error => {\n console.log(error);\n });\n }\n\n render() {\n return (\n <Host>\n <div innerHTML={this.svgOutput} />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"post-icon.js","mappings":"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","names":["PostIcon"],"sources":["./src/utils/property-checkers/empty-or.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":["const EMPTY_VALUES = [undefined, null, ''];\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 { 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-one-of';\nexport * from './check-type';\n","@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon .75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical .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 .75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb .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]) {\n svg { scale: -1 1; }\n}\n\n:host([flip-v]) {\n svg { scale: 1 -1; }\n}\n\n:host([flip-h][flip-v]) {\n svg { 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 svg {\n transform-origin: center;\n }\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation=\"#{$key}\"]) {\n svg {\n animation: $value;\n }\n }\n}\n\n@keyframes icon-animation-cylon {\n from { transform: translateX(-25%) }\n to { transform: translateX(25%) }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from { transform: translateY(25%); }\n to { transform: translateY(-25%); }\n}\n\n@keyframes icon-animation-fade {\n from { opacity: .1; }\n to { opacity: 1; }\n}\n\n@keyframes icon-animation-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: .5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_KEYS = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb'\n];\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 initialPath: string;\n private path: string;\n private svgSource = '<svg viewBox=\"0 0 16 16\"></svg>';\n\n @State() svgOutput: string;\n\n /**\n * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).\n */\n @Prop() readonly animation?: string;\n\n @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined) checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);\n }\n\n /**\n * The base path, where the icons are located (must be a public url).\n */\n @Prop() readonly base?: string;\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;\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;\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 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;\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;\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 connectedCallback() {\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 this.path = this.getPath(basePath);\n this.svgSource = window.localStorage.getItem(`post-icon-${this.name}`) ?? this.svgSource;\n }\n\n componentWillLoad() {\n this.validateAnimation();\n this.validateBase();\n this.validateFlipH();\n this.validateFlipV();\n this.validateName();\n this.validateRotate();\n this.validateScale();\n\n this.fetchSVG();\n }\n\n componentWillRender() {\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 const helperElement = document.createElement('div');\n helperElement.innerHTML = this.svgSource;\n\n const svgElement = helperElement.querySelector('svg');\n svgElement.setAttribute('style', svgStyles);\n\n this.svgOutput = helperElement.innerHTML;\n }\n\n private fetchSVG() {\n fetch(this.path)\n .then(response => response.text())\n .then(textResponse => {\n const match = textResponse.match(/^<svg\\b([\\s\\S]*)><\\/svg>/);\n\n if (match !== null) {\n this.svgSource = match[0];\n window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);\n } else {\n this.initialPath = this.path;\n this.path = this.getPath(CDN_URL);\n\n if (this.initialPath !== this.path) {\n console.warn(\n `Warning in <post-icon/>: The content on the path \"${this.path}\" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`,\n );\n this.fetchSVG();\n } else {\n console.error(\n `Error in <post-icon/>: Could not load the svg on the path \"${this.initialPath}\"!`,\n );\n }\n }\n })\n .catch(error => {\n console.log(error);\n });\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 render() {\n return (\n <Host>\n <div innerHTML={this.svgOutput} />\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/docs.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
- "timestamp": "2023-03-03T08:51:37",
2
+ "timestamp": "2023-03-20T14:14:35",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
- "version": "3.0.1",
5
+ "version": "3.1.0",
6
6
  "typescriptVersion": "4.9.5"
7
7
  },
8
8
  "components": [
@@ -0,0 +1,21 @@
1
+ function checkOneOf(value, possibleValues, error) {
2
+ if (!possibleValues.includes(value))
3
+ throw new Error(error);
4
+ }
5
+
6
+ function checkType(value, type, error) {
7
+ const typeIsArray = type === 'array';
8
+ const valueIsArray = Array.isArray(value);
9
+ if (typeIsArray || valueIsArray) {
10
+ if (valueIsArray !== typeIsArray)
11
+ throw new Error(error);
12
+ }
13
+ else {
14
+ if (typeof value !== type)
15
+ throw new Error(error);
16
+ }
17
+ }
18
+
19
+ export { checkOneOf as a, checkType as c };
20
+
21
+ //# sourceMappingURL=check-type-67411ed3.js.map
@@ -0,0 +1 @@
1
+ {"file":"check-type-67411ed3.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,KAAa;EACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts","./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n if (!possibleValues.includes(value)) throw new Error(error);\n}\n","export type PropertyType =\n | 'boolean'\n | 'number'\n | 'string'\n | 'array'\n | 'object'\n | 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n const typeIsArray = type === 'array';\n const valueIsArray = Array.isArray(value);\n\n if (typeIsArray || valueIsArray) {\n if (valueIsArray !== typeIsArray) throw new Error(error);\n } else {\n if (typeof value !== type) throw new Error(error);\n }\n}\n"],"version":3}
@@ -1543,4 +1543,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1543
1543
 
1544
1544
  export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
1545
1545
 
1546
- //# sourceMappingURL=index-6d5a72fa.js.map
1546
+ //# sourceMappingURL=index-401f2d6a.js.map