@swisspost/design-system-components 1.3.10 → 1.5.0

package/dist/post-components/p-cafa0281.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["EMPTY_VALUES","undefined","emptyOr","check","args","value","some","v","checkNonEmpty","error","Error","checkEmptyOrOneOf","checkOneOf","checkEmptyOrType","checkType","postIconCss","CDN_URL","ANIMATION_NAMES","ANIMATION_KEYS","PostIcon","validateAnimation","newValue","this","animation","join","validateBase","base","validateFlipH","flipH","validateFlipV","flipV","validateName","name","validateRotate","rotate","validateScale","scale","componentWillLoad","componentWillRender","setPath","metaBase","_b","_a","document","head","querySelector","getAttribute","fileBase","_d","_c","replace","fileName","filePath","path","URL","window","location","origin","toString","render","svgStyles","Object","entries","isNaN","Number","filter","_key","reduce","styles","key","assign","h","Host","version","xmlns","viewBox","style"],"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"],"mappings":"2GAAO,MAAMA,EAAe,CAACC,UAAW,KAAM,I,SCE9BC,EAA6BC,GAC3C,MAAO,IAAIC,KACT,MAAMC,EAAQD,EAAK,GACnB,IAAKJ,EAAaM,MAAKC,GAAKA,IAAMF,IAAQF,KAASC,EAAK,CAE5D,C,SCLgBI,EAAcH,EAAgBI,GAC5C,GAAIT,EAAaM,MAAKC,GAAKA,IAAMF,IAAQ,CACvC,MAAM,IAAIK,MAAMD,E,CAEpB,CCFO,MAAME,EAAoBT,EAAQU,GAClC,MAAMC,EAAmBX,EAAQY,GCLxC,MAAMC,EAAc,8+CCIpB,MAAMC,EAAU,qEAChB,MAAMC,EAAkB,CACtB,QACA,iBACA,OACA,eACA,OACA,SAEF,MAAMC,EAAiB,IAAID,G,MAYdE,EAAQ,M,0FAW6B,K,UAiBR,K,WAUL,M,WAUA,M,gCAqBO,K,WAUD,I,CAjEzCC,kBAAkBC,EAAWC,KAAKC,WAChC,GAAIF,IAAapB,UACfU,EACEU,EACAH,EACA,wEAAwEA,EAAeM,KACrF,S,CAWRC,aAAaJ,EAAWC,KAAKI,MAC3Bb,EAAiBQ,EAAU,SAAU,gD,CASvCM,cAAcN,EAAWC,KAAKM,OAC5Bf,EAAiBQ,EAAU,UAAW,kD,CASxCQ,cAAcR,EAAWC,KAAKQ,OAC5BjB,EAAiBQ,EAAU,UAAW,kD,CASxCU,aAAaV,EAAWC,KAAKU,MAC3BxB,EAAca,EAAU,2CACxBP,EAAUO,EAAU,SAAU,gD,CAShCY,eAAeZ,EAAWC,KAAKY,QAC7BrB,EAAiBQ,EAAU,SAAU,kD,CASvCc,cAAcd,EAAWC,KAAKc,OAC5BvB,EAAiBQ,EAAU,SAAU,iD,CAGvCgB,oBACEf,KAAKG,eACLH,KAAKS,eACLT,KAAKK,gBACLL,KAAKO,gBACLP,KAAKa,gBACLb,KAAKW,iBACLX,KAAKF,mB,CAGPkB,sBACEhB,KAAKiB,S,CAGCA,U,YAEN,MAAMC,GACJC,GAAAC,EAAAC,SAASC,KACNC,cAAc,+DAA2D,MAAAH,SAAA,SAAAA,EACxEI,aAAa,0BAAsB,MAAAL,SAAA,EAAAA,EAAI,KAE7C,MAAMM,EAAW,IAAGC,GAAAC,EAAA3B,KAAKI,QAAI,MAAAuB,SAAA,EAAAA,EAAIT,KAAQ,MAAAQ,SAAA,EAAAA,EAAIhC,KAAWkC,QAAQ,QAAS,KACzE,MAAMC,EAAW,GAAG7B,KAAKU,gBACzB,MAAMoB,EAAW,GAAGL,IAAWI,IAE/B7B,KAAK+B,KAAO,IAAIC,IAAIF,EAAUG,OAAOC,SAASC,QAAQC,U,CAGxDC,SAEE,MAAMC,EAAYC,OAAOC,QAAQ,CAC/B,qBAAsB,QAAQxC,KAAK+B,SACnC,aAAc,QAAQ/B,KAAK+B,SAC3BjB,MAASd,KAAKc,QAAU2B,MAAMC,OAAO1C,KAAKc,QAAU,GAAGd,KAAKc,QAAU,KACtEF,OAAUZ,KAAKY,SAAW6B,MAAMC,OAAO1C,KAAKY,SAAW,GAAGZ,KAAKY,YAAc,OAE5E+B,QAAO,EAAEC,EAAM7D,KAAWA,IAAU,OACpC8D,QAAO,CAACC,GAASC,EAAKhE,KAAWwD,OAAOS,OAAOF,EAAQ,CAAEC,CAACA,GAAMhE,KAAU,IAE7E,OACEkE,EAACC,EAAI,gBAAeC,GAClBF,EAAA,OAAKG,MAAM,6BAA6BC,QAAQ,YAAYC,MAAOhB,I"}