@oiz/stzh-components 2.9.0-alpha → 2.9.0

package/dist/stzh-components/p-c250e795.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhMessageCss","KEY_PREFIX_CLOSE","StzhMessage","this","onCloseButtonClick","hide","async","open","stzhOpen","emit","component","setCloseKey","stzhClose","closeKey","Cookie","set","Date","now","toString","timeClosed","get","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","hideClose","type","h","Host","hidden","class","name","label","description","onClick","a11yLabel","close","variant","size","iconOnly","icon"],"sources":["./src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","./src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorWhite};\n  --icon-color: #{$colorPrimary};\n  --close-color: #{$colorGrey70};\n  --label-color: #{$baseColor};\n  --description-color: #{$baseColor};\n\n  // --link-color: #{$baseInvertColor};\n  // --hover-link-color: #{$baseInvertColor};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorTruegreen};\n    --icon-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning};\n    --icon-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError};\n    --icon-color: #{$colorError};\n  }\n\n  // high priority variants are currently not allowed to use\n  // (discussion will be resumed in relaunch, when colors are a topic)\n\n  // &[priority=\"high\"] {\n  //   // TOOD: @include base-invert;\n  //   --background-color: #{$baseColor};\n  //   --close-color: #{$baseInvertColor};\n  //   --label-color: #{$baseInvertColor};\n  //   --description-color: #{$baseInvertColor};\n  //   --icon-color: #{$baseInvertColor};\n\n  //   ::slotted(stzh-link[slot=\"link\"]) {\n  //     --color: var(--link-color);\n  //     --hover-color: var(--hover-link-color);\n  //   }\n  // }\n\n  // &[priority=\"high\"][type=\"success\"] {\n  //   --background-color: #{$colorTruegreen};\n  // }\n\n  // &[priority=\"high\"][type=\"warning\"] {\n  //   --background-color: #{$colorWarning};\n  //   --stzh-base-invert-color: #{$colorGrey87};\n  // }\n\n  // &[priority=\"high\"][type=\"error\"] {\n  //   --background-color: #{$colorError};\n  // }\n}\n\n.stzh-message {\n  @include spaceCurve('padding', 'regular');\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n      margin-left: space('small');\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('h4');\n    margin-top: space('small');\n    color: var(--label-color);\n\n    @include mq($from: small) {\n      margin-top: 0;\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__link {\n    &:not(:empty) {\n      @include spaceCurve('margin-top', 'small');\n    }\n  }\n\n  &__description:empty + &__link {\n    margin-top: 0;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport Cookie from \"js-cookie\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-message-close\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n  * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-message-close-{name})\n   * and if not empty (message already closed before) will hide the message.\n   */\n  @Prop() closeKey: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  // high priority variants are currently not allowed to use\n  // (discussion will be resumed in relaunch, when colors are a topic)\n\n  // /** Prority */\n  // @Prop({ reflect: true }) priority: \"default\" | \"high\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    })\n  }\n\n  @Method()\n  async hide(setCloseKey: boolean = true) {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n\n    if (this.closeKey && setCloseKey) {\n      Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n    }\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n      if (timeClosed) {\n        this.hide(false);\n      }\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n      // [`stzh-message--priority-${this.priority}`]: !!this.priority\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help\"\n                  || this.type === 'success' && \"checkmark-circle\"\n                  || this.type === 'warning' && \"warning\"\n                  || this.type === 'error' && \"important-warning\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAiB,2lJCkBvB,MAAMC,EAAmB,gC,MAWZC,EAAW,M,iGA4DdC,KAAAC,mBAAqB,KAC3BD,KAAKE,MAAM,E,WA3DW,G,iBAGM,G,cAOH,G,UAG+C,O,eAS7C,M,sCAcJ,I,CAGzBC,aACEH,KAAKI,KAAO,KACZJ,KAAKK,SAASC,KAAK,CACjBC,UAAW,gB,CAKfJ,WAAWK,EAAuB,MAChCR,KAAKI,KAAO,MACZJ,KAAKS,UAAUH,KAAK,CAClBC,UAAW,iBAGb,GAAIP,KAAKU,UAAYF,EAAa,CAChCG,EAAOC,IAAI,GAAGd,KAAoBE,KAAKU,WAAYG,KAAKC,MAAMC,W,EAQlEZ,0BACE,GAAIH,KAAKU,SAAU,CACjB,MAAMM,EAAaL,EAAOM,IAAI,GAAGnB,KAAoBE,KAAKU,YAC1D,GAAIM,EAAY,CACdhB,KAAKE,KAAK,M,EAId,IAAKF,KAAKkB,aAAc,CACtBlB,KAAKkB,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBtB,KAAKuB,QAAS,U,EAI1FC,SACE,MAAMC,EAAU,CACd,eAAgB,KAChB,iCAAkCzB,KAAK0B,UACvC,CAAC,sBAAsB1B,KAAK2B,UAAW3B,KAAK2B,MAI9C,OACEC,EAACC,EAAI,CAACC,QAAS9B,KAAKI,MAClBwB,EAAA,OAAKG,MAAON,GACVG,EAAA,OAAKG,MAAM,yBACTH,EAAA,OAAKG,MAAM,8BACTH,EAAA,aACEG,MAAM,qBACNC,KACEhC,KAAK2B,OAAS,QAAU,aACrB3B,KAAK2B,OAAS,WAAa,oBAC3B3B,KAAK2B,OAAS,WAAa,WAC3B3B,KAAK2B,OAAS,SAAW,uBAIlCC,EAAA,OAAKG,MAAM,8BACTH,EAAA,OAAKG,MAAM,uBACR/B,KAAKiC,OAERL,EAAA,OAAKG,MAAM,6BACR/B,KAAKkC,YAAclC,KAAKkC,YAAcN,EAAA,cAEzCA,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMI,KAAK,aAKfhC,KAAK0B,WACLE,EAAA,eACEG,MAAM,sBACNI,QAASnC,KAAKC,mBACdmC,UAAWpC,KAAKkB,aAAamB,MAC7BC,QAAQ,WACRC,KAAK,QACLC,SAAU,KACVC,KAAK,W"}
+{"version":3,"names":["stzhMessageCss","KEY_PREFIX_CLOSE","StzhMessage","this","onCloseButtonClick","hide","async","open","stzhOpen","emit","component","setCloseKey","stzhClose","closeKey","Cookie","set","Date","now","toString","timeClosed","get","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","hideClose","type","h","Host","hidden","class","name","label","description","onClick","a11yLabel","close","variant","size","iconOnly","icon"],"sources":["./src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","./src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorWhite};\n  --icon-color: #{$colorPrimary};\n  --close-color: #{$colorGrey70};\n  --label-color: #{$baseColor};\n  --description-color: #{$baseColor};\n\n  // --link-color: #{$baseInvertColor};\n  // --hover-link-color: #{$baseInvertColor};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorTruegreen};\n    --icon-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning};\n    --icon-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError};\n    --icon-color: #{$colorError};\n  }\n\n  // high priority variants are currently not allowed to use\n  // (discussion will be resumed in relaunch, when colors are a topic)\n\n  // &[priority=\"high\"] {\n  //   // TOOD: @include base-invert;\n  //   --background-color: #{$baseColor};\n  //   --close-color: #{$baseInvertColor};\n  //   --label-color: #{$baseInvertColor};\n  //   --description-color: #{$baseInvertColor};\n  //   --icon-color: #{$baseInvertColor};\n\n  //   ::slotted(stzh-link[slot=\"link\"]) {\n  //     --color: var(--link-color);\n  //     --hover-color: var(--hover-link-color);\n  //   }\n  // }\n\n  // &[priority=\"high\"][type=\"success\"] {\n  //   --background-color: #{$colorTruegreen};\n  // }\n\n  // &[priority=\"high\"][type=\"warning\"] {\n  //   --background-color: #{$colorWarning};\n  //   --stzh-base-invert-color: #{$colorGrey87};\n  // }\n\n  // &[priority=\"high\"][type=\"error\"] {\n  //   --background-color: #{$colorError};\n  // }\n}\n\n.stzh-message {\n  @include spaceCurve('padding', 'regular');\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n      margin-left: space('small');\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('h4');\n    margin-top: space('small');\n    color: var(--label-color);\n\n    @include mq($from: small) {\n      margin-top: 0;\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__link {\n    &:not(:empty) {\n      @include spaceCurve('margin-top', 'small');\n    }\n  }\n\n  &__description:empty + &__link {\n    margin-top: 0;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport Cookie from \"js-cookie\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-message-close\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n  * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-message-close-{name})\n   * and if not empty (message already closed before) will hide the message.\n   */\n  @Prop() closeKey: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  // high priority variants are currently not allowed to use\n  // (discussion will be resumed in relaunch, when colors are a topic)\n\n  // /** Prority */\n  // @Prop({ reflect: true }) priority: \"default\" | \"high\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide(setCloseKey: boolean = true) {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n\n    if (this.closeKey && setCloseKey) {\n      Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n    }\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n      if (timeClosed) {\n        this.hide(false);\n      }\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n      // [`stzh-message--priority-${this.priority}`]: !!this.priority\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help\"\n                  || this.type === 'success' && \"checkmark-circle\"\n                  || this.type === 'warning' && \"warning\"\n                  || this.type === 'error' && \"important-warning\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAiB,2lJCkBvB,MAAMC,EAAmB,gC,MAWZC,EAAW,M,iGA4DdC,KAAAC,mBAAqB,KAC3BD,KAAKE,MAAM,E,WA3DW,G,iBAGM,G,cAOH,G,UAG+C,O,eAS7C,M,sCAcJ,I,CAGzBC,aACEH,KAAKI,KAAO,KACZJ,KAAKK,SAASC,KAAK,CACjBC,UAAW,gB,CAKfJ,WAAWK,EAAuB,MAChCR,KAAKI,KAAO,MACZJ,KAAKS,UAAUH,KAAK,CAClBC,UAAW,iBAGb,GAAIP,KAAKU,UAAYF,EAAa,CAChCG,EAAOC,IAAI,GAAGd,KAAoBE,KAAKU,WAAYG,KAAKC,MAAMC,W,EAQlEZ,0BACE,GAAIH,KAAKU,SAAU,CACjB,MAAMM,EAAaL,EAAOM,IAAI,GAAGnB,KAAoBE,KAAKU,YAC1D,GAAIM,EAAY,CACdhB,KAAKE,KAAK,M,EAId,IAAKF,KAAKkB,aAAc,CACtBlB,KAAKkB,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBtB,KAAKuB,QAAS,U,EAI1FC,SACE,MAAMC,EAAU,CACd,eAAgB,KAChB,iCAAkCzB,KAAK0B,UACvC,CAAC,sBAAsB1B,KAAK2B,UAAW3B,KAAK2B,MAI9C,OACEC,EAACC,EAAI,CAACC,QAAS9B,KAAKI,MAClBwB,EAAA,OAAKG,MAAON,GACVG,EAAA,OAAKG,MAAM,yBACTH,EAAA,OAAKG,MAAM,8BACTH,EAAA,aACEG,MAAM,qBACNC,KACEhC,KAAK2B,OAAS,QAAU,aACrB3B,KAAK2B,OAAS,WAAa,oBAC3B3B,KAAK2B,OAAS,WAAa,WAC3B3B,KAAK2B,OAAS,SAAW,uBAIlCC,EAAA,OAAKG,MAAM,8BACTH,EAAA,OAAKG,MAAM,uBACR/B,KAAKiC,OAERL,EAAA,OAAKG,MAAM,6BACR/B,KAAKkC,YAAclC,KAAKkC,YAAcN,EAAA,cAEzCA,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMI,KAAK,aAKfhC,KAAK0B,WACLE,EAAA,eACEG,MAAM,sBACNI,QAASnC,KAAKC,mBACdmC,UAAWpC,KAAKkB,aAAamB,MAC7BC,QAAQ,WACRC,KAAK,QACLC,SAAU,KACVC,KAAK,W"}