@swisspost/design-system-components 1.6.3 → 1.7.0

package/dist/collection/components/post-icon/post-icon.js

@@ -3,262 +3,262 @@ import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from ".
 import { version } from "../../../package.json";
 const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
 const ANIMATION_NAMES = [
-  'cylon',
-  'cylon-vertical',
-  'spin',
-  'spin-reverse',
-  'fade',
-  'throb',
+    'cylon',
+    'cylon-vertical',
+    'spin',
+    'spin-reverse',
+    'fade',
+    'throb',
 ];
 const ANIMATION_KEYS = [...ANIMATION_NAMES];
 /**
  * @class PostIcon - representing a stencil component
  */
 export class PostIcon {
-  constructor() {
-    this.svgStyles = undefined;
-    this.svgOutput = undefined;
-    this.animation = null;
-    this.base = null;
-    this.flipH = false;
-    this.flipV = false;
-    this.name = undefined;
-    this.rotate = null;
-    this.scale = null;
-  }
-  validateAnimation(newValue = this.animation) {
-    if (newValue !== undefined)
-      checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
-  }
-  validateBase(newValue = this.base) {
-    checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
-  }
-  validateFlipH(newValue = this.flipH) {
-    checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
-  }
-  validateFlipV(newValue = this.flipV) {
-    checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
-  }
-  validateName(newValue = this.name) {
-    checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
-    checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
-  }
-  validateRotate(newValue = this.rotate) {
-    checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
-  }
-  validateScale(newValue = this.scale) {
-    checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
-  }
-  componentWillLoad() {
-    this.validateBase();
-    this.validateName();
-    this.validateFlipH();
-    this.validateFlipV();
-    this.validateScale();
-    this.validateRotate();
-    this.validateAnimation();
-  }
-  componentWillRender() {
-    this.setPath();
-  }
-  setPath() {
-    var _a, _b, _c, _d;
-    // Construct icon path from different possible sources
-    const metaBase = (_b = (_a = document.head
-      .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;
-    const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
-    const fileName = `${this.name}.svg#icon`;
-    const filePath = `${fileBase}${fileName}`;
-    this.path = new URL(filePath, window.location.origin).toString();
-  }
-  render() {
-    // create inline styles for some properties
-    const svgStyles = Object.entries({
-      '-webkit-mask-image': `url('${this.path}')`,
-      'mask-image': `url('${this.path}')`,
-      'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
-      'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
-    })
-      .filter(([_key, value]) => value !== null)
-      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-    return (h(Host, { "data-version": version }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", style: svgStyles })));
-  }
-  static get is() { return "post-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["post-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["post-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "animation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Animation | null",
-          "resolved": "\"cylon\" | \"cylon-vertical\" | \"fade\" | \"spin\" | \"spin-reverse\" | \"throb\"",
-          "references": {
-            "Animation": {
-              "location": "global",
-              "id": "global::Animation"
+    constructor() {
+        this.svgStyles = undefined;
+        this.svgOutput = undefined;
+        this.animation = null;
+        this.base = null;
+        this.flipH = false;
+        this.flipV = false;
+        this.name = undefined;
+        this.rotate = null;
+        this.scale = null;
+    }
+    validateAnimation(newValue = this.animation) {
+        if (newValue !== undefined)
+            checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
+    }
+    validateBase(newValue = this.base) {
+        checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+    }
+    validateFlipH(newValue = this.flipH) {
+        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+    }
+    validateFlipV(newValue = this.flipV) {
+        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+    }
+    validateName(newValue = this.name) {
+        checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
+        checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
+    }
+    validateRotate(newValue = this.rotate) {
+        checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+    }
+    validateScale(newValue = this.scale) {
+        checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+    }
+    componentWillLoad() {
+        this.validateBase();
+        this.validateName();
+        this.validateFlipH();
+        this.validateFlipV();
+        this.validateScale();
+        this.validateRotate();
+        this.validateAnimation();
+    }
+    componentWillRender() {
+        this.setPath();
+    }
+    setPath() {
+        var _a, _b, _c, _d;
+        // Construct icon path from different possible sources
+        const metaBase = (_b = (_a = document.head
+            .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;
+        const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
+        const fileName = `${this.name}.svg#icon`;
+        const filePath = `${fileBase}${fileName}`;
+        this.path = new URL(filePath, window.location.origin).toString();
+    }
+    render() {
+        // create inline styles for some properties
+        const svgStyles = Object.entries({
+            '-webkit-mask-image': `url('${this.path}')`,
+            'mask-image': `url('${this.path}')`,
+            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+        return (h(Host, { "data-version": version }, h("span", { style: svgStyles })));
+    }
+    static get is() { return "post-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Animation | null",
+                    "resolved": "\"cylon\" | \"cylon-vertical\" | \"fade\" | \"spin\" | \"spin-reverse\" | \"throb\"",
+                    "references": {
+                        "Animation": {
+                            "location": "global",
+                            "id": "global::Animation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the animation."
+                },
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "base": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url."
+                },
+                "attribute": "base",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "flipH": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to `true`, the icon will be flipped horizontally."
+                },
+                "attribute": "flip-h",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "flipV": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to `true`, the icon will be flipped vertically."
+                },
+                "attribute": "flip-v",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "rotate": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of degree for the css rotate transformation."
+                },
+                "attribute": "rotate",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "scale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number for the css scale transformation."
+                },
+                "attribute": "scale",
+                "reflect": false,
+                "defaultValue": "null"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the animation."
-        },
-        "attribute": "animation",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "base": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url."
-        },
-        "attribute": "base",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "flipH": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "When set to `true`, the icon will be flipped horizontally."
-        },
-        "attribute": "flip-h",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "flipV": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "When set to `true`, the icon will be flipped vertically."
-        },
-        "attribute": "flip-v",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "rotate": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number | null",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The number of degree for the css rotate transformation."
-        },
-        "attribute": "rotate",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "scale": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number | null",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The number for the css scale transformation."
-        },
-        "attribute": "scale",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "svgStyles": {},
-      "svgOutput": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "animation",
-        "methodName": "validateAnimation"
-      }, {
-        "propName": "base",
-        "methodName": "validateBase"
-      }, {
-        "propName": "flipH",
-        "methodName": "validateFlipH"
-      }, {
-        "propName": "flipV",
-        "methodName": "validateFlipV"
-      }, {
-        "propName": "name",
-        "methodName": "validateName"
-      }, {
-        "propName": "rotate",
-        "methodName": "validateRotate"
-      }, {
-        "propName": "scale",
-        "methodName": "validateScale"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "svgStyles": {},
+            "svgOutput": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "animation",
+                "methodName": "validateAnimation"
+            }, {
+                "propName": "base",
+                "methodName": "validateBase"
+            }, {
+                "propName": "flipH",
+                "methodName": "validateFlipH"
+            }, {
+                "propName": "flipV",
+                "methodName": "validateFlipV"
+            }, {
+                "propName": "name",
+                "methodName": "validateName"
+            }, {
+                "propName": "rotate",
+                "methodName": "validateRotate"
+            }, {
+                "propName": "scale",
+                "methodName": "validateScale"
+            }];
+    }
 }
 //# sourceMappingURL=post-icon.js.map

package/dist/collection/components/post-icon/post-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-icon.js","sourceRoot":"","sources":["../../../../src/components/post-icon/post-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"post-icon.js","sourceRoot":"","sources":["../../../../src/components/post-icon/post-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["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      'transform':\n        (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +\n        (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),\n    })\n      .filter(([_key, value]) => value !== null)\n      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});\n    return (\n      <Host data-version={version}>\n        <span style={svgStyles}></span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-popover/post-popover.css

@@ -0,0 +1,3 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;outline-offset:2px;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;content:"";display:block;height:1.5rem;width:1.5rem}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;max-width:min(66vw,60rem)}@media(max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em}