@oiz/stzh-components 2.14.1 → 2.14.3

package/dist/stzh-components/p-90df75de.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAppnavCss","StzhAppnav","exports","this","init","links","_this","element","querySelectorAll","forEach","link","setPropsIfNull","size","variant","setAttribute","class_1","prototype","componentWillLoad","localization","_a","window","stzhComponents","utils","fetchTranslations","_b","sent","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","role","title","appTitle","href","appHref","appAnalyticsId","appStatus"],"sources":["src/components/stzh-appnav/stzh-appnav.scss?tag=stzh-appnav&encapsulation=scoped","src/components/stzh-appnav/stzh-appnav.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  ::slotted(stzh-link) {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: underline;\n    letter-spacing: 0.01em;\n\n    .stzh-link--is-active {\n      text-decoration: underline;\n    }\n\n    .stzh-link__inner {\n      flex-direction: column;\n\n      @include mq($from: small) {\n        flex-direction: row;\n      }\n    }\n\n    .stzh-link__text {\n      @include fontSize('nano');\n\n      @include mq($from: small) {\n        @include fontSize('micro');\n      }\n    }\n\n    .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n      margin-left: 0;\n\n      @include mq($from: small) {\n        margin-left: space('xsmall');\n      }\n    }\n\n    .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n      margin-left: 0;\n\n      @include mq($from: small) {\n        margin-left: space('small');\n      }\n    }\n\n    .stzh-link__icon-wrapper {\n      @include mq($to: small) {\n        height: auto;\n      }\n    }\n  }\n\n  ::slotted(*:not(:last-child)) {\n    @include mq($from: small) {\n      margin-right: space('xlarge');\n    }\n  }\n}\n\n.stzh-appnav {\n  display: flex;\n  background-color: $colorWhite;\n  height: $appnavHeight;\n  justify-content: space-between;\n  align-items: center;\n  text-align: center;\n\n  @include mq($from: small) {\n    height: $appnavHeightSmall;\n    text-align: left;\n  }\n\n  &__items {\n    display: flex;\n    justify-content: space-around;\n    flex-grow: 1;\n\n    @include mq($from: small) {\n      flex-grow: 0;\n      align-items: center;\n      justify-content: flex-start;\n    }\n  }\n\n  &__title {\n    @include font('light');\n    @include fontSize('milli');\n    color: $baseColor;\n    text-decoration-line: none;\n    white-space: nowrap;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    display: none;\n\n    @include mq($from: smallheader) {\n      display: flex;\n    }\n\n    &:hover {\n      @include font('heavy');\n      color: $colorPrimaryHover;\n      text-decoration: underline;\n    }\n  }\n\n  &__title:hover &__status {\n    border-color: rgba(7, 2, 80, 0.4);\n    color: $colorWhite;\n    background-color: $colorPrimaryHover;\n  }\n\n  &__status {\n    @include status;\n    transform: translateY(calc(#{space('xsmall')} * -1));\n    margin-left: space('xxsmall');\n    transition: border-color $baseTransitionAnimationSpeed;\n    text-decoration: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhAppnavLocalizedText } from \"./stzh-appnav.localization\";\n\n/**\n * @slot - Slot for `stzh-link` elements\n */\n@Component({\n  tag: \"stzh-appnav\",\n  styleUrl: \"stzh-appnav.scss\",\n  scoped: true\n})\nexport class StzhAppnav {\n  /** Translation strings */\n  @Prop() localization: StzhAppnavLocalizedText;\n\n  /** App title shown on tablet/desktop */\n  @Prop() appTitle: string = \"\";\n\n  /** Status displayed next to app title (only displayed if `app-title` is defined) */\n  @Prop() appStatus: string = \"\";\n\n  /** Link of app title (only used if `app-title` is defined) */\n  @Prop() appHref: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the app title link element.\n   * Default value will be taken from `appTitle` prop or default slot.\n   */\n  @Prop() appAnalyticsId: string;\n\n  @Element() element: HTMLStzhAppnavElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const links = this.element.querySelectorAll(\"stzh-link\");\n\n    links.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"secondary\"\n      } as HTMLStzhLinkElement)\n\n      link.setAttribute(\"role\", \"listitem\");\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"stzh-appnav\" role=\"navigation\" aria-label={this.localization.title}>\n          <div class=\"stzh-appnav__items\" role=\"list\">\n            <slot></slot>\n          </div>\n          {this.appTitle &&\n            <a\n              class=\"stzh-appnav__title\"\n              href={this.appHref}\n              s-object-id={this.appAnalyticsId || this.appTitle}\n            >\n              {this.appTitle}\n              {this.appStatus &&\n                <span class=\"stzh-appnav__status\">{this.appStatus}</span>\n              }\n            </a>\n          }\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4rDAAA,IAAMA,EAAgB,i6K,ICmBTC,EAAUC,EAAA,yB,mCAwBbC,KAAAC,KAAO,WACb,IAAMC,EAAQC,EAAKC,QAAQC,iBAAiB,aAE5CH,EAAMI,SAAQ,SAACC,GACbC,EAAeD,EAAM,CACnBE,KAAM,QACNC,QAAS,cAGXH,EAAKI,aAAa,OAAQ,W,+CA5BH,G,eAGC,G,aAGF,G,8BA0BpBC,EAAAC,UAAAC,kBAAN,W,uHACOd,KAAKe,aAAN,YACFC,EAAAhB,KAAoB,SAAMiB,OAAOC,eAAeC,MAAMC,kBAAkBpB,KAAKI,QAAS,W,OAAtFY,EAAKD,aAAeM,EAAAC,O,mCAIxBV,EAAAC,UAAAU,kBAAA,WACEvB,KAAKC,OAELD,KAAKwB,SAAW,IAAIC,iBAAiBzB,KAAKC,MAC1CD,KAAKwB,SAASE,QAAQ1B,KAAKI,QAAS,CAClCuB,UAAW,KACXC,QAAS,M,EAIbhB,EAAAC,UAAAgB,qBAAA,WACE,GAAI7B,KAAKwB,SAAU,CACjBxB,KAAKwB,SAASM,Y,GAIlBlB,EAAAC,UAAAkB,OAAA,WACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cAAcC,KAAK,aAAY,aAAanC,KAAKe,aAAaqB,OACvEJ,EAAA,OAAKE,MAAM,qBAAqBC,KAAK,QACnCH,EAAA,cAEDhC,KAAKqC,UACJL,EAAA,KACEE,MAAM,qBACNI,KAAMtC,KAAKuC,QAAO,cACLvC,KAAKwC,gBAAkBxC,KAAKqC,UAExCrC,KAAKqC,SACLrC,KAAKyC,WACJT,EAAA,QAAME,MAAM,uBAAuBlC,KAAKyC,a,4HA1EjC,I"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAppnavCss","StzhAppnav","this","init","links","element","querySelectorAll","forEach","link","setPropsIfNull","size","variant","setAttribute","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","role","title","appTitle","href","appHref","appAnalyticsId","appStatus"],"sources":["src/components/stzh-appnav/stzh-appnav.scss?tag=stzh-appnav&encapsulation=scoped","src/components/stzh-appnav/stzh-appnav.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  ::slotted(stzh-link) {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: underline;\n    letter-spacing: 0.01em;\n\n    .stzh-link--is-active {\n      text-decoration: underline;\n    }\n\n    .stzh-link__inner {\n      flex-direction: column;\n\n      @include mq($from: small) {\n        flex-direction: row;\n      }\n    }\n\n    .stzh-link__text {\n      @include fontSize('nano');\n\n      @include mq($from: small) {\n        @include fontSize('micro');\n      }\n    }\n\n    .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n      margin-left: 0;\n\n      @include mq($from: small) {\n        margin-left: space('xsmall');\n      }\n    }\n\n    .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n      margin-left: 0;\n\n      @include mq($from: small) {\n        margin-left: space('small');\n      }\n    }\n\n    .stzh-link__icon-wrapper {\n      @include mq($to: small) {\n        height: auto;\n      }\n    }\n  }\n\n  ::slotted(*:not(:last-child)) {\n    @include mq($from: small) {\n      margin-right: space('xlarge');\n    }\n  }\n}\n\n.stzh-appnav {\n  display: flex;\n  background-color: $colorWhite;\n  height: $appnavHeight;\n  justify-content: space-between;\n  align-items: center;\n  text-align: center;\n\n  @include mq($from: small) {\n    height: $appnavHeightSmall;\n    text-align: left;\n  }\n\n  &__items {\n    display: flex;\n    justify-content: space-around;\n    flex-grow: 1;\n\n    @include mq($from: small) {\n      flex-grow: 0;\n      align-items: center;\n      justify-content: flex-start;\n    }\n  }\n\n  &__title {\n    @include font('light');\n    @include fontSize('milli');\n    color: $baseColor;\n    text-decoration-line: none;\n    white-space: nowrap;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    display: none;\n\n    @include mq($from: smallheader) {\n      display: flex;\n    }\n\n    &:hover {\n      @include font('heavy');\n      color: $colorPrimaryHover;\n      text-decoration: underline;\n    }\n  }\n\n  &__title:hover &__status {\n    border-color: rgba(7, 2, 80, 0.4);\n    color: $colorWhite;\n    background-color: $colorPrimaryHover;\n  }\n\n  &__status {\n    @include status;\n    transform: translateY(calc(#{space('xsmall')} * -1));\n    margin-left: space('xxsmall');\n    transition: border-color $baseTransitionAnimationSpeed;\n    text-decoration: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhAppnavLocalizedText } from \"./stzh-appnav.localization\";\n\n/**\n * @slot - Slot for `stzh-link` elements\n */\n@Component({\n  tag: \"stzh-appnav\",\n  styleUrl: \"stzh-appnav.scss\",\n  scoped: true\n})\nexport class StzhAppnav {\n  /** Translation strings */\n  @Prop() localization: StzhAppnavLocalizedText;\n\n  /** App title shown on tablet/desktop */\n  @Prop() appTitle: string = \"\";\n\n  /** Status displayed next to app title (only displayed if `app-title` is defined) */\n  @Prop() appStatus: string = \"\";\n\n  /** Link of app title (only used if `app-title` is defined) */\n  @Prop() appHref: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the app title link element.\n   * Default value will be taken from `appTitle` prop or default slot.\n   */\n  @Prop() appAnalyticsId: string;\n\n  @Element() element: HTMLStzhAppnavElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const links = this.element.querySelectorAll(\"stzh-link\");\n\n    links.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"secondary\"\n      } as HTMLStzhLinkElement)\n\n      link.setAttribute(\"role\", \"listitem\");\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"stzh-appnav\" role=\"navigation\" aria-label={this.localization.title}>\n          <div class=\"stzh-appnav__items\" role=\"list\">\n            <slot></slot>\n          </div>\n          {this.appTitle &&\n            <a\n              class=\"stzh-appnav__title\"\n              href={this.appHref}\n              s-object-id={this.appAnalyticsId || this.appTitle}\n            >\n              {this.appTitle}\n              {this.appStatus &&\n                <span class=\"stzh-appnav__status\">{this.appStatus}</span>\n              }\n            </a>\n          }\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qHAAA,MAAMA,EAAgB,i6K,MCmBTC,EAAU,M,yBAwBbC,KAAAC,KAAO,KACb,MAAMC,EAAQF,KAAKG,QAAQC,iBAAiB,aAE5CF,EAAMG,SAASC,IACbC,EAAeD,EAAM,CACnBE,KAAM,QACNC,QAAS,cAGXH,EAAKI,aAAa,OAAQ,WAAW,GACrC,E,0CA7BuB,G,eAGC,G,aAGF,G,8BA0B1B,uBAAMC,GACJ,IAAKX,KAAKY,aAAc,CACtBZ,KAAKY,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBhB,KAAKG,QAAS,S,EAI1F,iBAAAc,GACEjB,KAAKC,OAELD,KAAKkB,SAAW,IAAIC,iBAAiBnB,KAAKC,MAC1CD,KAAKkB,SAASE,QAAQpB,KAAKG,QAAS,CAClCkB,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAIvB,KAAKkB,SAAU,CACjBlB,KAAKkB,SAASM,Y,EAIlB,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cAAcC,KAAK,aAAY,aAAa7B,KAAKY,aAAakB,OACvEJ,EAAA,OAAKE,MAAM,qBAAqBC,KAAK,QACnCH,EAAA,cAED1B,KAAK+B,UACJL,EAAA,KACEE,MAAM,qBACNI,KAAMhC,KAAKiC,QAAO,cACLjC,KAAKkC,gBAAkBlC,KAAK+B,UAExC/B,KAAK+B,SACL/B,KAAKmC,WACJT,EAAA,QAAME,MAAM,uBAAuB5B,KAAKmC,a"}