@postnord/pn-marketweb-components 4.0.3 → 4.0.4-test

package/dist/components/pn-mainnav-link2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav-link2.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,6uKAA6uK,CAAC;AACvwK,4BAAe,gBAAgB;;MCQlB,aAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,EAAE;sBAEF,EAAE;uBAGA,EAAE;oBAEJ,KAAK;2BACE,KAAK;;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACxE,IAAI,CAAC,WAAW,IACf,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,OAAO,mBAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,mBAAgB,MAAM,IACnK,IAAI,CAAC,IAAI,EACV,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,EAC5E,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,KAET,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,MACV,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,MAC3C,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,MAC7D,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAE3C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,eAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,CACvF,CACL,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-link.scss?tag=pn-mainnav-link","src/components/navigation/pn-mainnav/pn-mainnav-link.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-link {\n  display: block;\n  button,\n  a {\n    font-weight: normal;\n    position: relative;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    color: $blue700;\n\n    &:hover,\n    &:focus {\n      background-color: $white;\n      color: $blue700;\n      outline: 0;\n      box-shadow: none;\n    }\n    &:active {\n      background-color: $gray50;\n      color: $blue400;\n      box-shadow: none;\n    }\n  }\n}\n\npn-mainnav-link {\n  [data-level='1'] & {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      padding-left: 0;\n      position: relative;\n      scroll-snap-align: center;\n    }\n    &:first-child {\n      border-top: 0.1rem solid $gray50;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        border: 0;\n      }\n    }\n\n    > button,\n    > a {\n      font-size: 2rem;\n      width: 100%;\n      border-bottom: 0.1rem solid $gray50;\n      height: auto;\n      padding: 1.9rem 0 1.9rem 3rem;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        height: 100%;\n        border: 0;\n        font-size: 1.6rem;\n        font-weight: normal;\n        position: relative;\n        outline: 0;\n        overflow: hidden;\n        padding: 1.6rem 1.6rem;\n        white-space: nowrap;\n\n        &::before {\n          content: '';\n          background-color: $blue400;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          height: 0.5em;\n          border-radius: 0.5em 0.5em 0 0;\n          transform: translateY(100%);\n          transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n        }\n\n        &:hover,\n        &:focus {\n          &::before {\n            transform: translateY(0);\n          }\n        }\n\n        &:active {\n          outline: 0;\n          box-shadow: none;\n          color: $blue700;\n\n          &::before {\n            background-color: $blue200;\n            transform: translateY(0);\n          }\n        }\n      }\n\n      &:hover,\n      &:focus {\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          text-decoration: none;\n        }\n      }\n\n      &[aria-expanded='true'] {\n        &::before {\n          @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n            content: '';\n            background-color: $blue400;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 0.5em;\n            border-radius: 0.5em 0.5em 0 0;\n            transform: translateY(0);\n            transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n          }\n        }\n      }\n    }\n\n    [aria-expanded='true'] {\n      .first-level_icon {\n        transform: rotateX(180deg);\n      }\n    }\n\n    pn-icon {\n      &.first-level_icon {\n        transition: 0.25s linear transform;\n        width: 1.92rem;\n        height: 1.92rem;\n        display: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: block;\n        }\n      }\n\n      &.first-level_arrow {\n        display: block;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: none;\n        }\n\n        position: absolute;\n        height: 2.4rem;\n        width: 2.4rem;\n        right: 2.4rem;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      svg {\n        pointer-events: none;\n        speak: none;\n        width: 100%;\n        height: 100%;\n      }\n    }\n  }\n}\n\npn-mainnav-link {\n  // Additional links added to a level 2 section should not have the min-width required to make the columns look good\n  pn-mainnav-level[data-level='2']:not([data-level-listcount='1']) pn-mainnav-list:last-child & {\n    > a {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: unset;\n      }\n    }\n  }\n  [data-level='2'] & {\n    position: static;\n    display: inline-block;\n    width: 100%;\n    height: auto;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      padding-left: 0;\n      margin-bottom: 1.6rem;\n    }\n\n    > a {\n      font-size: 1.6rem;\n      border-bottom: 0.1rem solid $gray50;\n      padding: 2.2rem 0 2.2rem 3rem;\n      white-space: normal;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: 16em;\n        border: 0;\n        border-radius: 1rem;\n        padding: 1.4rem 1.6rem;\n      }\n\n      &:hover {\n        background-color: $white;\n        color: $blue700;\n      }\n\n      &:hover,\n      &:focus {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue700;\n          text-decoration: underline;\n          outline: 0;\n        }\n        &::before {\n          content: none;\n        }\n      }\n\n      &:active {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue400;\n          outline: 0;\n        }\n\n        &::before {\n          content: none;\n        }\n      }\n    }\n\n    pn-icon {\n      display: inline-block;\n      margin-left: 0.2em;\n      min-width: 1.5rem;\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-mainnav-store';\nimport { angle_small_down, arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav-link',\n  styleUrl: 'pn-mainnav-link.scss',\n  shadow: false,\n})\nexport class PnMainnavLink {\n  @Element() hostElement: HTMLElement;\n\n  /** Name */\n  @Prop() name: string = '';\n  /** Href */\n  @Prop() href: string = '';\n  /** Target */\n  @Prop() target: string = '';\n  /** Link id */\n  @Prop() linkid: string = '';\n\n  /** Level ID that we control toggle on */\n  @State() levelId: string = '';\n  /** Menu item is open */\n  @State() open: boolean = false;\n  @State() hasChildren: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.hostElement.querySelectorAll('pn-mainnav-level').length > 0;\n    if (this.hasChildren && this.name) {\n      const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `mainnav-lvl${2}-${safeLevelName}`;\n    }\n  }\n\n  setOpenMenuLevel() {\n    state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid}>\n        {this.hasChildren ? (\n          <button onClick={this.setOpenMenuLevel.bind(this)} aria-controls={this.levelId} aria-expanded={(state.openLevel + '' === this.levelId + '') + ''} aria-haspopup=\"true\">\n            {this.name}\n            <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n            <pn-icon class=\"first-level_arrow\" icon={arrow_right} color=\"blue700\" />\n          </button>\n        ) : (\n          <a\n            href={this.href}\n            {...(this.target ? { target: this.target } : {})}\n            {...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {})}\n            {...(this.linkid ? { id: this.linkid } : {})}\n          >\n            {this.name}\n            {this.target === '_blank' ? <pn-icon icon={open_in_new} color=\"blue700\"></pn-icon> : null}\n          </a>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav-link2.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,o6JAAo6J,CAAC;AAC97J,4BAAe,gBAAgB;;MCQlB,aAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,EAAE;sBAEF,EAAE;uBAGA,EAAE;oBAEJ,KAAK;2BACE,KAAK;;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACxE,IAAI,CAAC,WAAW,IACf,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,OAAO,mBAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,mBAAgB,MAAM,IACnK,IAAI,CAAC,IAAI,EACV,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,EAC5E,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,KAET,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,MACV,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,MAC3C,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,MAC7D,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAE3C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,eAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,CACvF,CACL,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-link.scss?tag=pn-mainnav-link","src/components/navigation/pn-mainnav/pn-mainnav-link.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-link {\n  display: block;\n  button,\n  a {\n    font-weight: normal;\n    position: relative;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    color: $blue700;\n\n    &:hover,\n    &:focus {\n      background-color: $white;\n      color: $blue700;\n      outline: 0;\n      box-shadow: none;\n    }\n    &:active {\n      background-color: $gray50;\n      color: $blue400;\n      box-shadow: none;\n    }\n  }\n}\n\npn-mainnav-link {\n  [data-level='1'] & {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      padding-left: 0;\n      position: relative;\n      scroll-snap-align: center;\n    }\n    &:first-child {\n      border-top: 0.1rem solid $gray50;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        border: 0;\n      }\n    }\n\n    > button,\n    > a {\n      font-size: 2rem;\n      width: 100%;\n      border-bottom: 0.1rem solid $gray50;\n      height: auto;\n      padding: 1.9rem 0 1.9rem 3rem;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        height: 100%;\n        border: 0;\n        font-size: 1.6rem;\n        font-weight: normal;\n        position: relative;\n        outline: 0;\n        overflow: hidden;\n        padding: 1.6rem 1.6rem;\n        white-space: nowrap;\n\n        &::before {\n          content: '';\n          background-color: $blue400;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          height: 0.5em;\n          border-radius: 0.5em 0.5em 0 0;\n          transform: translateY(100%);\n          transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n        }\n\n        &:hover,\n        &:focus {\n          &::before {\n            transform: translateY(0);\n          }\n        }\n\n        &:active {\n          outline: 0;\n          box-shadow: none;\n          color: $blue700;\n\n          &::before {\n            background-color: $blue200;\n            transform: translateY(0);\n          }\n        }\n      }\n\n      &:hover,\n      &:focus {\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          text-decoration: none;\n        }\n      }\n\n      &[aria-expanded='true'] {\n        &::before {\n          @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n            content: '';\n            background-color: $blue400;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 0.5em;\n            border-radius: 0.5em 0.5em 0 0;\n            transform: translateY(0);\n            transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n          }\n        }\n      }\n    }\n\n    [aria-expanded='true'] {\n      .first-level_icon {\n        transform: rotateX(180deg);\n      }\n    }\n\n    pn-icon {\n      &.first-level_icon {\n        transition: 0.25s linear transform;\n        width: 1.92rem;\n        height: 1.92rem;\n        display: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: block;\n        }\n      }\n\n      &.first-level_arrow {\n        display: block;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: none;\n        }\n\n        position: absolute;\n        height: 2.4rem;\n        width: 2.4rem;\n        right: 2.4rem;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      svg {\n        pointer-events: none;\n        speak: none;\n        width: 100%;\n        height: 100%;\n      }\n    }\n  }\n}\n\npn-mainnav-link {\n  // Additional links added to a level 2 section should not have the min-width required to make the columns look good\n  pn-mainnav-level[data-level='2']:not([data-level-listcount='1']) pn-mainnav-list:last-child & {\n    > a {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: unset;\n      }\n    }\n  }\n  [data-level='2'] & {\n    position: static;\n    display: inline-block;\n    width: 100%;\n    height: auto;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      padding-left: 0;\n      margin-bottom: 1.6rem;\n    }\n\n    > a {\n      font-size: 1.6rem;\n      border-bottom: 0.1rem solid $gray50;\n      padding: 2.2rem 0 2.2rem 3rem;\n      white-space: normal;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: 16em;\n        border: 0;\n        border-radius: 1rem;\n        padding: 1.4rem 1.6rem;\n      }\n\n      &:hover {\n        background-color: $white;\n        color: $blue700;\n      }\n\n      &:hover,\n      &:focus {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue700;\n          text-decoration: underline;\n          outline: 0;\n        }\n        &::before {\n          content: none;\n        }\n      }\n\n      &:active {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue400;\n          outline: 0;\n        }\n\n        &::before {\n          content: none;\n        }\n      }\n    }\n\n    pn-icon {\n      display: inline-block;\n      margin-left: 0.2em;\n      min-width: 1.5rem;\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-mainnav-store';\nimport { angle_small_down, arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav-link',\n  styleUrl: 'pn-mainnav-link.scss',\n  shadow: false,\n})\nexport class PnMainnavLink {\n  @Element() hostElement: HTMLElement;\n\n  /** Name */\n  @Prop() name: string = '';\n  /** Href */\n  @Prop() href: string = '';\n  /** Target */\n  @Prop() target: string = '';\n  /** Link id */\n  @Prop() linkid: string = '';\n\n  /** Level ID that we control toggle on */\n  @State() levelId: string = '';\n  /** Menu item is open */\n  @State() open: boolean = false;\n  @State() hasChildren: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.hostElement.querySelectorAll('pn-mainnav-level').length > 0;\n    if (this.hasChildren && this.name) {\n      const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `mainnav-lvl${2}-${safeLevelName}`;\n    }\n  }\n\n  setOpenMenuLevel() {\n    state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid}>\n        {this.hasChildren ? (\n          <button onClick={this.setOpenMenuLevel.bind(this)} aria-controls={this.levelId} aria-expanded={(state.openLevel + '' === this.levelId + '') + ''} aria-haspopup=\"true\">\n            {this.name}\n            <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n            <pn-icon class=\"first-level_arrow\" icon={arrow_right} color=\"blue700\" />\n          </button>\n        ) : (\n          <a\n            href={this.href}\n            {...(this.target ? { target: this.target } : {})}\n            {...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {})}\n            {...(this.linkid ? { id: this.linkid } : {})}\n          >\n            {this.name}\n            {this.target === '_blank' ? <pn-icon icon={open_in_new} color=\"blue700\"></pn-icon> : null}\n          </a>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-mainnav-list2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnMainnavListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #d3cecb;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:flex;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{column-count:2;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
+const pnMainnavListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #d3cecb;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:flex;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{column-count:2;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
 const PnMainnavListStyle0 = pnMainnavListCss;
 
 const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class PnMainnavList extends HTMLElement {
@@ -15,7 +15,7 @@ const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class PnMainnavList exten
         this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;
     }
     render() {
-        return (h(Host, { key: 'aa63141134ae55bb2515c87a77d8e2dd24a256b7', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: 'db466e8987218b183d39fbd64fb9936545c3015a' })));
+        return (h(Host, { key: '879e1e8fa18e238e5010c45aa05c8f2649a0418d', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: 'b33603caf23e90392b7a36bf5202d6e2fff5c42b' })));
     }
     static get style() { return PnMainnavListStyle0; }
 }, [4, "pn-mainnav-list", {

package/dist/components/pn-mainnav-list2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav-list2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,8wCAA8wC,CAAC;AACxyC,4BAAe,gBAAgB;;MCMlB,aAAa;;;;uBAGE,EAAE;yBACC,CAAC;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,MAAM,CAAC;KACvF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,4BAAyB,IAAI,CAAC,SAAS,GAAG,EAAE,8BAA4B,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,IACrI,IAAI,CAAC,OAAO,GAAG,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO,GAAG,IAAI,EAC7E,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-list.scss?tag=pn-mainnav-list","src/components/navigation/pn-mainnav/pn-mainnav-list.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-list {\n  display: block;\n  overflow: visible;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  grid-area: right;\n\n  + pn-mainnav-list {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      grid-area: left;\n      border-right: 0.1rem solid $gray200;\n      margin-bottom: 1.6rem;\n      margin-right: -0.7rem;\n      padding-right: 0.7rem;\n    }\n  }\n\n  [data-level='1'] > & {\n    // height: 100%;\n    overflow: scroll;\n    -webkit-overflow-scrolling: touch;\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      display: flex;\n      flex-flow: row;\n      overflow: visible;\n      padding: 0;\n    }\n  }\n\n  &[data-navlist-showcolumns='true'] {\n    [data-level='2'] > & {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        column-count: 2;\n        column-gap: 1.6rem;\n        padding-bottom: 1.6rem;\n      }\n    }\n  }\n}\n\n.mainnav-list-heading {\n  display: none;\n  font-weight: bold;\n  column-span: all;\n  font-size: 1.8rem;\n  padding: 1.4rem 1.4rem 1.4rem 4.8rem;\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: block;\n    padding: 0 1.4rem 1.4rem 1.4rem;\n  }\n}\n","import { Component, h, Host, State, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-mainnav-list',\n  styleUrl: 'pn-mainnav-list.scss',\n  shadow: false,\n})\nexport class PnMainnavList {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = '';\n  @State() linkCount: number = 0;\n\n  componentWillLoad() {\n    this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;\n  }\n\n  render() {\n    return (\n      <Host class=\"mainnav-list\" role=\"list\" data-navlist-itemcount={this.linkCount + ''} data-navlist-showcolumns={(this.linkCount >= 8) + ''}>\n        {this.heading ? <div class=\"mainnav-list-heading\">{this.heading}</div> : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav-list2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,q8BAAq8B,CAAC;AAC/9B,4BAAe,gBAAgB;;MCMlB,aAAa;;;;uBAGE,EAAE;yBACC,CAAC;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,MAAM,CAAC;KACvF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,4BAAyB,IAAI,CAAC,SAAS,GAAG,EAAE,8BAA4B,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,IACrI,IAAI,CAAC,OAAO,GAAG,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO,GAAG,IAAI,EAC7E,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-list.scss?tag=pn-mainnav-list","src/components/navigation/pn-mainnav/pn-mainnav-list.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-list {\n  display: block;\n  overflow: visible;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  grid-area: right;\n\n  + pn-mainnav-list {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      grid-area: left;\n      border-right: 0.1rem solid $gray200;\n      margin-bottom: 1.6rem;\n      margin-right: -0.7rem;\n      padding-right: 0.7rem;\n    }\n  }\n\n  [data-level='1'] > & {\n    // height: 100%;\n    overflow: scroll;\n    -webkit-overflow-scrolling: touch;\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      display: flex;\n      flex-flow: row;\n      overflow: visible;\n      padding: 0;\n    }\n  }\n\n  &[data-navlist-showcolumns='true'] {\n    [data-level='2'] > & {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        column-count: 2;\n        column-gap: 1.6rem;\n        padding-bottom: 1.6rem;\n      }\n    }\n  }\n}\n\n.mainnav-list-heading {\n  display: none;\n  font-weight: bold;\n  column-span: all;\n  font-size: 1.8rem;\n  padding: 1.4rem 1.4rem 1.4rem 4.8rem;\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: block;\n    padding: 0 1.4rem 1.4rem 1.4rem;\n  }\n}\n","import { Component, h, Host, State, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-mainnav-list',\n  styleUrl: 'pn-mainnav-list.scss',\n  shadow: false,\n})\nexport class PnMainnavList {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = '';\n  @State() linkCount: number = 0;\n\n  componentWillLoad() {\n    this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;\n  }\n\n  render() {\n    return (\n      <Host class=\"mainnav-list\" role=\"list\" data-navlist-itemcount={this.linkCount + ''} data-navlist-showcolumns={(this.linkCount >= 8) + ''}>\n        {this.heading ? <div class=\"mainnav-list-heading\">{this.heading}</div> : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-mainnav2.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as state } from './pn-mainnav-store.js';
 import { b as bars } from './bars.js';
-import { c as close } from './close.js';
+
+const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';
+const close = icon;
 
 const translations = {
     'sv': {
@@ -90,7 +92,7 @@ const translations = {
     },
 };
 
-const pnMainnavCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#ffffff;z-index:2;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;display:flex;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:#005d92;color:#ffffff;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
+const pnMainnavCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#ffffff;z-index:2;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;display:flex;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:#005d92;color:#ffffff;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
 const PnMainnavStyle0 = pnMainnavCss;
 
 const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLElement {
@@ -147,7 +149,7 @@ const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLE
         state.openLevel = event.detail;
     }
     render() {
-        return (h(Host, { key: 'ee45da2d53216a4ce04f5937aa08199ec380b773' }, h("div", { key: '85c581ccf03871ec5f23212732355781797ce243', class: "mainnav-toggle" }, h("button", { key: '52bbbab0a0fba35918944a8fe76779e893446a7f', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: 'c1db0acf25dc7a53a091c6e88afeaaea15988b4f', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: '11be92d4e831c3f72e7a0e2156b15feec27d4d48', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: 'c4e51df22db53a7789bcf7fb0d986aea3bdb1757' }))));
+        return (h(Host, { key: 'd13a34a381811841b527a53ec77262cf82a6ce10' }, h("div", { key: '0569818e4e00f5c61acf668d1cd645dd7ab33502', class: "mainnav-toggle" }, h("button", { key: 'a36870ae996e7e9b628ffb935315c2b19a01e193', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: 'f6a892f4e8f98ca072ade0b4524589f928b7af07', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: 'e5abd03d559e380c3fedfb71510c64636d5f9e3e', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: 'c61c5e8d90097376256093317ace4619b86821ce' }))));
     }
     static get style() { return PnMainnavStyle0; }
 }, [4, "pn-mainnav", {

package/dist/components/pn-mainnav2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav2.js","mappings":"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","names":[],"sources":["src/components/navigation/pn-mainnav/translations.ts","src/components/navigation/pn-mainnav/pn-mainnav.scss?tag=pn-mainnav","src/components/navigation/pn-mainnav/pn-mainnav.tsx"],"sourcesContent":["export const translations = {\n  'sv': {\n    menuHomeButton: 'Hem',\n    menuGoBackButton: 'Gå tillbaka',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Huvudnavigation',\n  },\n  'en': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'da': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbage',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigation',\n  },\n  'no': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbake',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigasjon',\n  },\n  'de': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Geh zurück',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Start',\n    navLabel: 'Hauptnavigation',\n  },\n  'zh': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'it': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'nl': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'tr': {\n    menuHomeButton: 'Anasayfa',\n    menuGoBackButton: 'Geri git',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Başlat',\n    navLabel: 'Ana gezinme',\n  },\n  'pt': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'pl': {\n    menuHomeButton: 'Strona główna',\n    menuGoBackButton: 'Powrót',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Początek',\n    navLabel: 'Menu główne systemu',\n  },\n  'pt-BR': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Voltar',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Iniciar',\n    navLabel: 'Navegação principal',\n  },\n};\n","@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav {\n  display: flex;\n  flex-flow: row-reverse;\n  position: relative;\n  width: 100%;\n  min-height: 5.1rem;\n\n  @media screen and (min-width: $mobilenav-media-tablet) {\n    flex-flow: row;\n  }\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    flex-flow: column;\n  }\n\n  [slot='footer'] {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      display: none;\n    }\n  }\n  > nav {\n    height: auto;\n    width: 100vw;\n    background-color: $white;\n    z-index: 2;\n    transform: translateX(100vw);\n    transition: transform 0.2s 0s;\n    transition-property: transform, visibility;\n    display: flex;\n    flex-flow: column;\n    visibility: hidden;\n    position: fixed;\n    top: 3em;\n    bottom: 0;\n    left: 0;\n    @media screen and (min-width: $mobilenav-media-tablet) {\n      top: 6.5em;\n    }\n\n    &[data-menu-open='true'] {\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      flex-flow: row-reverse;\n      top: 0;\n      position: static;\n      // overflow: visible;\n      height: auto;\n      width: 100%;\n      justify-content: space-between;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    a {\n      text-decoration: none;\n    }\n\n    button {\n      cursor: pointer;\n    }\n  }\n}\n\n.mainnav-toggle {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  // @media screen and (min-width: $mobilenav-media-tablet) {\n  //   align-self: center;\n  // }\n  // @media screen and (min-width: $mobilenav-media-smalldesktop) {\n  //   align-self: center;\n  // }\n\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: none;\n  }\n  > button {\n    display: flex;\n    align-items: center;\n    background-color: $blue700;\n    color: $white;\n    border-radius: 2.4rem;\n    border: none;\n    padding: 0.6rem 1.6rem;\n    cursor: pointer;\n    font-size: 1.6rem;\n\n    &:focus {\n      outline: 0;\n    }\n\n    pn-icon {\n      margin-left: 0.8rem;\n      display: block;\n    }\n\n    svg {\n      display: block;\n      margin: -0.2rem -0.5rem -0.2rem 0;\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Listen, Event, EventEmitter, Element } from '@stencil/core';\nimport { translations } from './translations';\nimport { Menui18n } from './types';\nimport state from './pn-mainnav-store';\nimport { close, bars } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav',\n  styleUrl: 'pn-mainnav.scss',\n  shadow: false,\n})\nexport class PnMainnav {\n  @Element() hostElement: HTMLElement;\n  /** Specifies which market we want to fetch navigation for (se,dk,fi,no,com) */\n  @Prop() market: string = 'se';\n  /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n  @Prop() language: string = 'sv';\n  /** Specifies which endpoint we should read information from */\n  @Prop() navigationId: string = 'mainnav';\n  /** Specifies which endpoint we should read information from */\n  @Prop({ mutable: true }) openMenu: boolean = false;\n  /** Sets the label of the navigation (Required if multiple nav elements are on a page) */\n  @Prop() navLabel: string = '';\n\n  @Event() menuLanguageChange: EventEmitter; // Could not use language change since it's a existing window event\n  @Event() marketChange: EventEmitter;\n  @Event() menuOpenChange: EventEmitter;\n\n  componentWillLoad() {\n    this.init();\n    document.removeEventListener('mousedown', this._onClickOutside.bind(this));\n    document.addEventListener('mousedown', this._onClickOutside.bind(this));\n  }\n\n  async init() {\n    this.setLanguage();\n    this.setMarket();\n  }\n\n  private _onClickOutside(event) {\n    const clickedOutside = !this.hostElement.contains(event.target);\n    if (clickedOutside) {\n      state.openLevel = '';\n    }\n  }\n\n  @Listen('language')\n  setLanguage() {\n    this.menuLanguageChange.emit(this.language);\n  }\n\n  @Listen('market')\n  setMarket() {\n    this.marketChange.emit(this.market);\n  }\n\n  @Listen('menuLanguageChange')\n  onLanguageChange(event) {\n    if (translations[event.detail]) {\n      state.i18n = translations[event.detail] as Menui18n;\n      if (!this.navLabel) {\n        this.navLabel = state.i18n.navLabel;\n      }\n    }\n  }\n\n  @Listen('setmenuopenstate')\n  setMenuOpenState() {\n    state.openMenu = !state.openMenu;\n    this.menuOpenChange.emit(state.openMenu);\n  }\n\n  @Listen('openMenuLevelChange')\n  onOpenMenuLevelChange(event) {\n    state.openLevel = event.detail;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"mainnav-toggle\">\n          <button aria-controls={this.navigationId} aria-expanded={state.openMenu + ''} onClick={this.setMenuOpenState.bind(this)}>\n            {state.i18n.mainMenuButton}\n            <pn-icon icon={state.openMenu ? close : bars} color=\"white\"></pn-icon>\n          </button>\n        </div>\n        <nav class=\"mainnav\" aria-label={this.navLabel} data-menu-open={state.openMenu + ''} data-menu-currentlevel={state.currentLevel} id={this.navigationId}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/close.js","src/components/navigation/pn-mainnav/translations.ts","src/components/navigation/pn-mainnav/pn-mainnav.scss?tag=pn-mainnav","src/components/navigation/pn-mainnav/pn-mainnav.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414\" clip-rule=\"evenodd\"/></svg>';\nexport const close = icon;\n","export const translations = {\n  'sv': {\n    menuHomeButton: 'Hem',\n    menuGoBackButton: 'Gå tillbaka',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Huvudnavigation',\n  },\n  'en': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'da': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbage',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigation',\n  },\n  'no': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbake',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigasjon',\n  },\n  'de': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Geh zurück',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Start',\n    navLabel: 'Hauptnavigation',\n  },\n  'zh': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'it': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'nl': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'tr': {\n    menuHomeButton: 'Anasayfa',\n    menuGoBackButton: 'Geri git',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Başlat',\n    navLabel: 'Ana gezinme',\n  },\n  'pt': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'pl': {\n    menuHomeButton: 'Strona główna',\n    menuGoBackButton: 'Powrót',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Początek',\n    navLabel: 'Menu główne systemu',\n  },\n  'pt-BR': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Voltar',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Iniciar',\n    navLabel: 'Navegação principal',\n  },\n};\n","@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav {\n  display: flex;\n  flex-flow: row-reverse;\n  position: relative;\n  width: 100%;\n  min-height: 5.1rem;\n\n  @media screen and (min-width: $mobilenav-media-tablet) {\n    flex-flow: row;\n  }\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    flex-flow: column;\n  }\n\n  [slot='footer'] {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      display: none;\n    }\n  }\n  > nav {\n    height: auto;\n    width: 100vw;\n    background-color: $white;\n    z-index: 2;\n    transform: translateX(100vw);\n    transition: transform 0.2s 0s;\n    transition-property: transform, visibility;\n    display: flex;\n    flex-flow: column;\n    visibility: hidden;\n    position: fixed;\n    top: 3em;\n    bottom: 0;\n    left: 0;\n    @media screen and (min-width: $mobilenav-media-tablet) {\n      top: 6.5em;\n    }\n\n    &[data-menu-open='true'] {\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      flex-flow: row-reverse;\n      top: 0;\n      position: static;\n      // overflow: visible;\n      height: auto;\n      width: 100%;\n      justify-content: space-between;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    a {\n      text-decoration: none;\n    }\n\n    button {\n      cursor: pointer;\n    }\n  }\n}\n\n.mainnav-toggle {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  // @media screen and (min-width: $mobilenav-media-tablet) {\n  //   align-self: center;\n  // }\n  // @media screen and (min-width: $mobilenav-media-smalldesktop) {\n  //   align-self: center;\n  // }\n\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: none;\n  }\n  > button {\n    display: flex;\n    align-items: center;\n    background-color: $blue700;\n    color: $white;\n    border-radius: 2.4rem;\n    border: none;\n    padding: 0.6rem 1.6rem;\n    cursor: pointer;\n    font-size: 1.6rem;\n\n    &:focus {\n      outline: 0;\n    }\n\n    pn-icon {\n      margin-left: 0.8rem;\n      display: block;\n    }\n\n    svg {\n      display: block;\n      margin: -0.2rem -0.5rem -0.2rem 0;\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Listen, Event, EventEmitter, Element } from '@stencil/core';\nimport { translations } from './translations';\nimport { Menui18n } from './types';\nimport state from './pn-mainnav-store';\nimport { close, bars } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav',\n  styleUrl: 'pn-mainnav.scss',\n  shadow: false,\n})\nexport class PnMainnav {\n  @Element() hostElement: HTMLElement;\n  /** Specifies which market we want to fetch navigation for (se,dk,fi,no,com) */\n  @Prop() market: string = 'se';\n  /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n  @Prop() language: string = 'sv';\n  /** Specifies which endpoint we should read information from */\n  @Prop() navigationId: string = 'mainnav';\n  /** Specifies which endpoint we should read information from */\n  @Prop({ mutable: true }) openMenu: boolean = false;\n  /** Sets the label of the navigation (Required if multiple nav elements are on a page) */\n  @Prop() navLabel: string = '';\n\n  @Event() menuLanguageChange: EventEmitter; // Could not use language change since it's a existing window event\n  @Event() marketChange: EventEmitter;\n  @Event() menuOpenChange: EventEmitter;\n\n  componentWillLoad() {\n    this.init();\n    document.removeEventListener('mousedown', this._onClickOutside.bind(this));\n    document.addEventListener('mousedown', this._onClickOutside.bind(this));\n  }\n\n  async init() {\n    this.setLanguage();\n    this.setMarket();\n  }\n\n  private _onClickOutside(event) {\n    const clickedOutside = !this.hostElement.contains(event.target);\n    if (clickedOutside) {\n      state.openLevel = '';\n    }\n  }\n\n  @Listen('language')\n  setLanguage() {\n    this.menuLanguageChange.emit(this.language);\n  }\n\n  @Listen('market')\n  setMarket() {\n    this.marketChange.emit(this.market);\n  }\n\n  @Listen('menuLanguageChange')\n  onLanguageChange(event) {\n    if (translations[event.detail]) {\n      state.i18n = translations[event.detail] as Menui18n;\n      if (!this.navLabel) {\n        this.navLabel = state.i18n.navLabel;\n      }\n    }\n  }\n\n  @Listen('setmenuopenstate')\n  setMenuOpenState() {\n    state.openMenu = !state.openMenu;\n    this.menuOpenChange.emit(state.openMenu);\n  }\n\n  @Listen('openMenuLevelChange')\n  onOpenMenuLevelChange(event) {\n    state.openLevel = event.detail;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"mainnav-toggle\">\n          <button aria-controls={this.navigationId} aria-expanded={state.openMenu + ''} onClick={this.setMenuOpenState.bind(this)}>\n            {state.i18n.mainMenuButton}\n            <pn-icon icon={state.openMenu ? close : bars} color=\"white\"></pn-icon>\n          </button>\n        </div>\n        <nav class=\"mainnav\" aria-label={this.navLabel} data-menu-open={state.openMenu + ''} data-menu-currentlevel={state.currentLevel} id={this.navigationId}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-marketweb-icon.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnMarketwebIconCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}";
+const pnMarketwebIconCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}";
 const PnMarketwebIconStyle0 = pnMarketwebIconCss;
 
 const PnmarketwebIcon = /*@__PURE__*/ proxyCustomElement(class PnmarketwebIcon extends HTMLElement {
@@ -12,7 +12,7 @@ const PnmarketwebIcon = /*@__PURE__*/ proxyCustomElement(class PnmarketwebIcon e
         this.color = 'black';
     }
     render() {
-        return (h(Host, { key: 'a1917c9d9ae0182591904b2a06683b1961a13ec0' }, h("pn-icon", { key: '32ada4505d2162bce62c024099c754403860174c', icon: this.symbol, color: this.color, small: this.small })));
+        return (h(Host, { key: '51d1b49a349b16779dfe94b3f74c52944c35dff0' }, h("pn-icon", { key: '3bbc19a8f65de6f50a4bdefe6ff7d9aa09237dbc', icon: this.symbol, color: this.color, small: this.small })));
     }
     static get style() { return PnMarketwebIconStyle0; }
 }, [0, "pn-marketweb-icon", {

package/dist/components/pn-marketweb-icon.js.map

@@ -1 +1 @@
-{"file":"pn-marketweb-icon.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,0ZAA0Z,CAAC;AACtb,8BAAe,kBAAkB;;MCMpB,eAAe;;;;sBAED,IAAI;qBAEJ,KAAK;qBAEN,OAAO;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CACvE,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-marketweb-icon/pn-marketweb-icon.scss?tag=pn-marketweb-icon","src/components/minor/pn-marketweb-icon/pn-marketweb-icon.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-icon',\n  styleUrl: 'pn-marketweb-icon.scss',\n})\nexport class PnmarketwebIcon {\n  /** The SVG content of the icon you want to use */\n  @Prop() symbol: string = null;\n  /** Medium is default but you can pass \"small\" for a 16x16 icon */\n  @Prop() small: boolean = false;\n  /** Check for the available colors in the knobs panel in the story */\n  @Prop() color: string = 'black';\n\n  render() {\n    return (\n      <Host>\n        <pn-icon icon={this.symbol} color={this.color} small={this.small}></pn-icon>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-marketweb-icon.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,iFAAiF,CAAC;AAC7G,8BAAe,kBAAkB;;MCMpB,eAAe;;;;sBAED,IAAI;qBAEJ,KAAK;qBAEN,OAAO;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CACvE,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-marketweb-icon/pn-marketweb-icon.scss?tag=pn-marketweb-icon","src/components/minor/pn-marketweb-icon/pn-marketweb-icon.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-icon',\n  styleUrl: 'pn-marketweb-icon.scss',\n})\nexport class PnmarketwebIcon {\n  /** The SVG content of the icon you want to use */\n  @Prop() symbol: string = null;\n  /** Medium is default but you can pass \"small\" for a 16x16 icon */\n  @Prop() small: boolean = false;\n  /** Check for the available colors in the knobs panel in the story */\n  @Prop() color: string = 'black';\n\n  render() {\n    return (\n      <Host>\n        <pn-icon icon={this.symbol} color={this.color} small={this.small}></pn-icon>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-marketweb-input2.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
 
-const pnMarketwebInputCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn--marketweb-input{display:inline-flex;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-marketweb-input input:hover{border:0.1rem solid #00a0d6}pn-marketweb-input input:disabled{background:#f3f2f2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-marketweb-input>.input-container>button:hover{background:#e0f8ff}pn-marketweb-input>.input-container>button:active{background:#005d92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;transition:color 0.2s}.label-container label.char-count{flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";
+const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1.4 5.497-.334 5.005a1.069 1.069 0 0 1-2.133 0L10.6 7.497a1.403 1.403 0 1 1 2.8 0M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
+const alert_exclamation_circle = icon;
+
+const pnMarketwebInputCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn--marketweb-input{display:inline-flex;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-marketweb-input input:hover{border:0.1rem solid #00a0d6}pn-marketweb-input input:disabled{background:#f3f2f2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-marketweb-input>.input-container>button:hover{background:#e0f8ff}pn-marketweb-input>.input-container>button:active{background:#005d92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;transition:color 0.2s}.label-container label.char-count{flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";
 const PnMarketwebInputStyle0 = pnMarketwebInputCss;
 
 const PnMarketwebInput = /*@__PURE__*/ proxyCustomElement(class PnMarketwebInput extends HTMLElement {

package/dist/components/pn-marketweb-input2.js.map

@@ -1 +1 @@
-{"file":"pn-marketweb-input2.js","mappings":"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","names":[],"sources":["src/components/input/pn-marketweb-input/pn-marketweb-input.scss?tag=pn-marketweb-input","src/components/input/pn-marketweb-input/pn-marketweb-input.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn--marketweb-input {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-marketweb-input input {\n  padding: 0.75em;\n  font-size: 1em;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\npn-marketweb-input > .input-container {\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 1.2rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: $blue700;\n    padding: 0.6rem;\n    border-radius: 0.8rem;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      color 0.1s;\n    border: 0.1rem solid transparent;\n\n    &:focus {\n      border: 0.1rem solid $blue700;\n    }\n\n    &:hover {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n      color: white;\n    }\n  }\n\n  > svg {\n    position: absolute;\n    right: 0.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 1.5em;\n    width: 1.5em;\n    pointer-events: none;\n\n    polyline {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n    }\n  }\n\n  > svg.pn-input-checkmark polyline {\n    stroke: $green700;\n    stroke-dashoffset: 23;\n    stroke-dasharray: 23;\n  }\n}\n\npn-marketweb-input .label-container {\n  margin-bottom: 0.4rem;\n  color: $gray700;\n  font-size: 0.875em;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  label {\n    cursor: pointer;\n    transition: color 0.2s;\n  }\n}\n\n.label-container label.char-count {\n  flex-shrink: 0;\n  padding-left: 0.5em;\n}\n\npn-marketweb-input small {\n  font-size: 0.75em;\n  font-size: unquote('max(.6em, 1.2rem)');\n  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n  margin-top: 0.5em;\n  color: $gray700;\n}\n\npn-input.error {\n  color: $warning;\n\n  label {\n    color: $warning;\n  }\n\n  small {\n    color: $warning;\n  }\n\n  small > pn-icon {\n    margin-right: 0.25em;\n  }\n\n  input {\n    border: 0.1rem solid $warning;\n\n    &:focus {\n      border: 0.1rem solid $warning;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $warning;\n    }\n\n    &:hover {\n      border: 0.1rem solid $coral400;\n    }\n  }\n}\n\npn-input.valid {\n  color: $green700;\n\n  .input-container > svg.pn-input-checkmark polyline {\n    stroke-dashoffset: 0;\n  }\n\n  label {\n    color: $green700;\n  }\n\n  input {\n    border: 0.1rem solid $green700;\n\n    &:focus {\n      border: 0.1rem solid $green700;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $green700;\n    }\n\n    &:hover {\n      border: 0.1rem solid $green400;\n    }\n  }\n}\n\npn-marketweb-input.password input {\n  padding-right: 4em;\n}\n\npn-marketweb-input.icon input {\n  padding-right: 2.3em;\n}\n","import { Component, Prop, h, Host, State } from '@stencil/core';\nimport { alert_exclamation_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-input',\n  styleUrl: 'pn-marketweb-input.scss',\n})\nexport class PnMarketwebInput {\n  @Prop() disabled: boolean = false;\n  /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */\n  @Prop() error: string = '';\n  /** Error state without message (If you want to control the error messaging on your own) */\n  @Prop() invalid: boolean = false;\n  /** Text message placed underneath the input field */\n  @Prop() helpertext: string = '';\n  /** Text label placed above the input field */\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() inputid: string = `${Math.random()}`;\n  @Prop() name: string = '';\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) type: string = 'text';\n  @Prop() autocomplete: string = '';\n  @Prop() valid: boolean = null;\n  @Prop() value: string = '';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter */\n  @Prop() maxlength: string = '';\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() step: string = '';\n  @Prop() pattern: string = '';\n\n  getTextMessage() {\n    if (this.error) return this.error;\n    if (this.helpertext) return this.helpertext;\n\n    return null;\n  }\n\n  @State() showText: boolean = false;\n  toggleTextVisibility() {\n    this.showText = !this.showText;\n  }\n\n  getInputType() {\n    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];\n\n    return types.includes(this.type) && !this.showText ? this.type : 'text';\n  }\n\n  setVal(e) {\n    const target: HTMLInputElement = e.composedPath?.()[0] as HTMLInputElement;\n    this.value = target.value;\n  }\n\n  getClassNames() {\n    let classNames = 'pn-input ';\n    if (this.error.length > 0 || this.invalid) classNames += 'error ';\n    if (this.valid) classNames += 'valid ';\n    if (this.type === 'password') classNames += 'password ';\n    if (this.error || this.invalid || this.valid) classNames += 'icon ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        {(this.label || this.maxlength) && (\n          <div class=\"label-container\">\n            {this.label && <label htmlFor={this.inputid}>{this.label}</label>}\n            {parseInt(this.maxlength) > 0 && (\n              <label class=\"char-count\" htmlFor={this.inputid}>\n                {`${this.value.length}/${this.maxlength}`}\n              </label>\n            )}\n          </div>\n        )}\n        <div class=\"input-container\">\n          <input\n            type={this.getInputType()}\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.required}\n            autocomplete={this.autocomplete}\n            onInput={e => this.setVal(e)}\n            maxlength={this.maxlength ? this.maxlength : null}\n            min={this.min ? this.min : null}\n            max={this.max ? this.max : null}\n            step={this.step ? this.step : null}\n            pattern={this.pattern ? this.pattern : null}\n          />\n          <svg class=\"pn-input-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <polyline class=\"checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n          </svg>\n\n          {this.type === 'password' && !this.disabled && <button onClick={() => this.toggleTextVisibility()}>Show</button>}\n        </div>\n\n        {this.getTextMessage() && (\n          <small>\n            {this.error && <pn-icon icon={alert_exclamation_circle} small color=\"warning\"></pn-icon>}\n            {this.getTextMessage()}\n          </small>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-marketweb-input2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_exclamation_circle.js","src/components/input/pn-marketweb-input/pn-marketweb-input.scss?tag=pn-marketweb-input","src/components/input/pn-marketweb-input/pn-marketweb-input.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1.4 5.497-.334 5.005a1.069 1.069 0 0 1-2.133 0L10.6 7.497a1.403 1.403 0 1 1 2.8 0M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_exclamation_circle = icon;\nexport const alertExclamationCircle = icon;\n","@import '../../../globals/main.scss';\n\npn--marketweb-input {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-marketweb-input input {\n  padding: 0.75em;\n  font-size: 1em;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\npn-marketweb-input > .input-container {\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 1.2rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: $blue700;\n    padding: 0.6rem;\n    border-radius: 0.8rem;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      color 0.1s;\n    border: 0.1rem solid transparent;\n\n    &:focus {\n      border: 0.1rem solid $blue700;\n    }\n\n    &:hover {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n      color: white;\n    }\n  }\n\n  > svg {\n    position: absolute;\n    right: 0.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 1.5em;\n    width: 1.5em;\n    pointer-events: none;\n\n    polyline {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n    }\n  }\n\n  > svg.pn-input-checkmark polyline {\n    stroke: $green700;\n    stroke-dashoffset: 23;\n    stroke-dasharray: 23;\n  }\n}\n\npn-marketweb-input .label-container {\n  margin-bottom: 0.4rem;\n  color: $gray700;\n  font-size: 0.875em;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  label {\n    cursor: pointer;\n    transition: color 0.2s;\n  }\n}\n\n.label-container label.char-count {\n  flex-shrink: 0;\n  padding-left: 0.5em;\n}\n\npn-marketweb-input small {\n  font-size: 0.75em;\n  font-size: unquote('max(.6em, 1.2rem)');\n  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n  margin-top: 0.5em;\n  color: $gray700;\n}\n\npn-input.error {\n  color: $warning;\n\n  label {\n    color: $warning;\n  }\n\n  small {\n    color: $warning;\n  }\n\n  small > pn-icon {\n    margin-right: 0.25em;\n  }\n\n  input {\n    border: 0.1rem solid $warning;\n\n    &:focus {\n      border: 0.1rem solid $warning;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $warning;\n    }\n\n    &:hover {\n      border: 0.1rem solid $coral400;\n    }\n  }\n}\n\npn-input.valid {\n  color: $green700;\n\n  .input-container > svg.pn-input-checkmark polyline {\n    stroke-dashoffset: 0;\n  }\n\n  label {\n    color: $green700;\n  }\n\n  input {\n    border: 0.1rem solid $green700;\n\n    &:focus {\n      border: 0.1rem solid $green700;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $green700;\n    }\n\n    &:hover {\n      border: 0.1rem solid $green400;\n    }\n  }\n}\n\npn-marketweb-input.password input {\n  padding-right: 4em;\n}\n\npn-marketweb-input.icon input {\n  padding-right: 2.3em;\n}\n","import { Component, Prop, h, Host, State } from '@stencil/core';\nimport { alert_exclamation_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-input',\n  styleUrl: 'pn-marketweb-input.scss',\n})\nexport class PnMarketwebInput {\n  @Prop() disabled: boolean = false;\n  /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */\n  @Prop() error: string = '';\n  /** Error state without message (If you want to control the error messaging on your own) */\n  @Prop() invalid: boolean = false;\n  /** Text message placed underneath the input field */\n  @Prop() helpertext: string = '';\n  /** Text label placed above the input field */\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() inputid: string = `${Math.random()}`;\n  @Prop() name: string = '';\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) type: string = 'text';\n  @Prop() autocomplete: string = '';\n  @Prop() valid: boolean = null;\n  @Prop() value: string = '';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter */\n  @Prop() maxlength: string = '';\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() step: string = '';\n  @Prop() pattern: string = '';\n\n  getTextMessage() {\n    if (this.error) return this.error;\n    if (this.helpertext) return this.helpertext;\n\n    return null;\n  }\n\n  @State() showText: boolean = false;\n  toggleTextVisibility() {\n    this.showText = !this.showText;\n  }\n\n  getInputType() {\n    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];\n\n    return types.includes(this.type) && !this.showText ? this.type : 'text';\n  }\n\n  setVal(e) {\n    const target: HTMLInputElement = e.composedPath?.()[0] as HTMLInputElement;\n    this.value = target.value;\n  }\n\n  getClassNames() {\n    let classNames = 'pn-input ';\n    if (this.error.length > 0 || this.invalid) classNames += 'error ';\n    if (this.valid) classNames += 'valid ';\n    if (this.type === 'password') classNames += 'password ';\n    if (this.error || this.invalid || this.valid) classNames += 'icon ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        {(this.label || this.maxlength) && (\n          <div class=\"label-container\">\n            {this.label && <label htmlFor={this.inputid}>{this.label}</label>}\n            {parseInt(this.maxlength) > 0 && (\n              <label class=\"char-count\" htmlFor={this.inputid}>\n                {`${this.value.length}/${this.maxlength}`}\n              </label>\n            )}\n          </div>\n        )}\n        <div class=\"input-container\">\n          <input\n            type={this.getInputType()}\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.required}\n            autocomplete={this.autocomplete}\n            onInput={e => this.setVal(e)}\n            maxlength={this.maxlength ? this.maxlength : null}\n            min={this.min ? this.min : null}\n            max={this.max ? this.max : null}\n            step={this.step ? this.step : null}\n            pattern={this.pattern ? this.pattern : null}\n          />\n          <svg class=\"pn-input-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <polyline class=\"checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n          </svg>\n\n          {this.type === 'password' && !this.disabled && <button onClick={() => this.toggleTextVisibility()}>Show</button>}\n        </div>\n\n        {this.getTextMessage() && (\n          <small>\n            {this.error && <pn-icon icon={alert_exclamation_circle} small color=\"warning\"></pn-icon>}\n            {this.getTextMessage()}\n          </small>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-marketweb-search.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as close_small } from './close_small.js';
 import { s as search } from './search.js';
 
-const pnMarketwebSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:host{display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;transform:translateX(0);transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host input:hover{border:0.1rem solid #00a0d6}:host input:disabled{background:#f3f2f2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}:host[list] :host>.input-container .button-container{display:none}:host>.input-container button{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);background:#ffffff;border:none;color:#005d92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host>.input-container button:hover,:host>.input-container button:focus{background:#e0f8ff}:host>.input-container button:active{background:#005d92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host .searching button.search{transform:translate(150%, -50%)}:host .searching button.clear{transform:translate(-50%, -50%)}:host .button-none input,:host .button-icon-inline input{padding-right:3.3em}:host .button-none pn-spinner,:host .button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host .button-none button.search,:host .button-icon-inline button.search{transform:translate(-50%, -50%)}:host .button-none.loading button,:host .button-icon-inline.loading button{transform:translate(100%, -50%)}:host .button-none.loading pn-spinner,:host .button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}:host .button-none.searching button.search{transform:translate(100%, -50%)}:host .button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";
+const pnMarketwebSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}:host{display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;transform:translateX(0);transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host input:hover{border:0.1rem solid #00a0d6}:host input:disabled{background:#f3f2f2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}:host[list] :host>.input-container .button-container{display:none}:host>.input-container button{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);background:#ffffff;border:none;color:#005d92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host>.input-container button:hover,:host>.input-container button:focus{background:#e0f8ff}:host>.input-container button:active{background:#005d92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host .searching button.search{transform:translate(150%, -50%)}:host .searching button.clear{transform:translate(-50%, -50%)}:host .button-none input,:host .button-icon-inline input{padding-right:3.3em}:host .button-none pn-spinner,:host .button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host .button-none button.search,:host .button-icon-inline button.search{transform:translate(-50%, -50%)}:host .button-none.loading button,:host .button-icon-inline.loading button{transform:translate(100%, -50%)}:host .button-none.loading pn-spinner,:host .button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}:host .button-none.searching button.search{transform:translate(100%, -50%)}:host .button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";
 const PnMarketwebSearchStyle0 = pnMarketwebSearchCss;
 
 const PnMarketwebSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSearch extends HTMLElement {
@@ -45,11 +45,10 @@ const PnMarketwebSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSe
     setVal(e) {
         this.value = e.target.value;
     }
-    clearInput(e) {
+    clearInput() {
         this.value = '';
         this.update.emit(this.value);
-        const closestInputField = e.target.closest("div.input-container")?.querySelector("input[type=search]");
-        closestInputField?.focus();
+        this.hostElement.querySelector('input').focus();
     }
     getClassNames() {
         let classNames = '';
@@ -90,7 +89,7 @@ const PnMarketwebSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSe
         });
     }
     render() {
-        return (h(Host, { key: 'bd91a32439d948f4362fd667a2a897e00b480a5b' }, h("div", { key: 'dd45a9899d15079c13c060e4cfd75c60730ac922', class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, h("input", { key: '0e283a03de256f134b2d8936fdf2a4d2dd206f2c', type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e) }), h("div", { key: '1eff04ef905ee36aa2e7d7976e522a8bc114681b', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { key: '46f1d1b36518d0b7cc5430efa9167b626d7c80eb', class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search" }, h("pn-icon", { key: 'ba9cb2a21f9561d79ab779058acaf83f0be7da7a', icon: search, color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { key: '5b537c0cb6227ad2f3fb1d7227c698436510a5b9', class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: (e) => this.clearInput(e) }, h("pn-icon", { key: '70873e93689282f189e65b68a9fa980ad6f9158b', icon: close_small, color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '6fe9c471b0b67f785e3e5a98ab79c93dacd32d80' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: 'a3671a3fbca963021a75540284144d1cea41c8ab', onClick: e => this.emitSearch(e), loading: this.loading, icon: search, appearance: this.light ? 'light' : 'dark', tooltip: this.button === 'icon' ? this.label : null }, this.label)), this.list && (h("datalist", { key: '7e0bfeda8401c388ebeb3e0e185b52e09636ac8d', id: this.list }, this.listSuggestion.map(item => {
+        return (h(Host, { key: '0b682770e7717859ae63e30fb63eafb58688213b' }, h("div", { key: '47a7b03aead0498b5387e322771876730d91e0ee', class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, h("input", { key: '214e1b792f8ed6334e1e7719a3a60617260f4e13', type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e) }), h("div", { key: 'e8e385b02015e69fffdb3d98ef7019cbe3a0ae8a', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { key: '162340c5e929f729479e69800ddd0f1f70387ac7', class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search" }, h("pn-icon", { key: 'aff75aa97f4defa3d16d1c0b380733279fad5e1b', icon: search, color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { key: 'f468e08f5093bdc629663af835b711b8ebe22f00', class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() }, h("pn-icon", { key: '17b4ed79a3ff0694cea246c3151feafdb459ce7d', icon: close_small, color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '248118b563d93c74cd45d3d68ce923caeb008d76' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: '68ce11c62c479707fc9f6c06bbca63ae9453cf14', onClick: e => this.emitSearch(e), loading: this.loading, icon: search, appearance: this.light ? 'light' : 'dark', tooltip: this.button === 'icon' ? this.label : null }, this.label)), this.list && (h("datalist", { key: '4fffbc6bd51af6299eda20f3bcbe7521b73d96d5', id: this.list }, this.listSuggestion.map(item => {
             return h("option", null, item);
         })))));
     }

package/dist/components/pn-marketweb-search.js.map

@@ -1 +1 @@
-{"file":"pn-marketweb-search.js","mappings":"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","names":["PnMarketwebSearch"],"sources":["src/components/input/pn-marketweb-search/pn-marketweb-search.scss?tag=pn-marketweb-search&encapsulation=shadow","src/components/input/pn-marketweb-search/pn-marketweb-search.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:host {\n  display: inline-flex;\n}\n\n:host > pn-button {\n  margin-left: 0.35em;\n  button {\n    // justify-content: flex-start;\n\n    .pn-button-bg {\n      transition:\n        width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s,\n        background 0.1s,\n        box-shadow 0.1s,\n        left 0.2s,\n        transform 0.2s;\n    }\n  }\n\n  &[data-loading='true'] {\n    .pn-button-bg {\n      left: 0;\n      transform: translateX(0);\n      transition:\n        width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s,\n        background 0.1s,\n        box-shadow 0.1s;\n    }\n\n    pn-spinner {\n      left: 0.75em;\n    }\n  }\n}\n\n:host input {\n  padding: 0.75em;\n  min-height: 3em;\n  font-size: 1em;\n  height: 100%;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 3em;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::-webkit-search-cancel-button {\n    display: none;\n  }\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\n:host > .input-container {\n  width: 100%;\n  position: relative;\n\n  .button-container {\n    :host[list] & {\n      display: none;\n    }\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: transparent;\n    width: 3em;\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  button {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(100%, -50%);\n    background: $white;\n    border: none;\n    color: $blue700;\n    padding: 0.3rem;\n    margin: 0;\n    font-size: 0.875em;\n    border-radius: 50%;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      box-shadow 0.1s,\n      transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s,\n      opacity 0.2s;\n    border: 0.1rem solid transparent;\n    -webkit-tap-highlight-color: transparent;\n\n    &.clear,\n    &.search {\n      cursor: pointer;\n    }\n\n    &:focus {\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $blue700;\n    }\n\n    &:hover,\n    &:focus {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n\n      pn-icon svg,\n      pn-icon svg path {\n        fill: white;\n      }\n    }\n  }\n}\n\n:host .searching {\n  button.search {\n    transform: translate(150%, -50%);\n  }\n\n  button.clear {\n    transform: translate(-50%, -50%);\n  }\n}\n\n/*---------------------------------------Button Variants-------------------------------------------*/\n:host .button-none,\n:host .button-icon-inline {\n  input {\n    padding-right: 3.3em;\n  }\n\n  pn-spinner {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(100%, -50%);\n    transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;\n  }\n\n  button.search {\n    transform: translate(-50%, -50%);\n  }\n\n  &.loading {\n    button {\n      transform: translate(100%, -50%);\n    }\n\n    pn-spinner {\n      transform: translate(-50%, -50%);\n    }\n  }\n}\n\n:host .button-none.searching button.search {\n  transform: translate(100%, -50%);\n}\n\n:host .button-icon > pn-button {\n  &[data-loading='true'] {\n    .pn-button-bg {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n}\n/*---------------------------------------/Button Variants-------------------------------------------*/\n","import { Component, Prop, h, Host, Event, EventEmitter, Element, Listen, State } from '@stencil/core';\nimport { close_small, search } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-search',\n  styleUrl: 'pn-marketweb-search.scss',\n  shadow: true,\n})\nexport class PnMarketwebSearch {\n  @Prop() disabled: boolean = false;\n  @Prop() placeholder: string = null;\n  @Prop() inputid: string = null;\n  @Prop() name: string = null;\n  @Prop() autocomplete: string = null;\n  @Prop() list: string = null;\n  @Prop() value: string = null;\n  /** Label for the button */\n  @Prop() label: string = null;\n  /** Loading animation */\n  @Prop() loading: boolean = false;\n  /** Button type, options are 'none' for no button, 'icon' for a labelless button with just a search icon and 'icon-inline' for a search button inside of the search field (this last option disables the clear field button) */\n  @Prop() button: string = '';\n  /** Light instead of dark search button */\n  @Prop() light: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  /** This is emitted on search submission both with keyboard and mouse */\n  @Event() search: EventEmitter;\n  /** custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */\n  @Event() update: EventEmitter;\n\n  @Listen('input')\n  inputHandler() {\n    this.update.emit(this.value);\n  }\n\n  emitSearch(e) {\n    if (e.type === 'click' || (e.type === 'keydown' && e.key === 'Enter')) {\n      // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead\n      e.preventDefault();\n      this.search.emit(this.value);\n    }\n  }\n\n  setVal(e) {\n    this.value = e.target.value;\n  }\n\n  clearInput(e) {\n    this.value = '';\n    this.update.emit(this.value);\n    const closestInputField = e.target.closest(\"div.input-container\")?.querySelector(\"input[type=search]\");\n    closestInputField?.focus();\n  }\n\n  getClassNames() {\n    let classNames = '';\n\n    const buttonTypes = ['none', 'icon', 'icon-inline'];\n    if (this.value) classNames += 'searching ';\n    if (this.loading) classNames += 'loading ';\n    if (buttonTypes.includes(this.button)) classNames += `button-${this.button} `;\n\n    return classNames;\n  }\n  @State() suggestionObserver: MutationObserver = null;\n  @State() hasClonedInput: boolean = false;\n  @State() listSuggestion: string[] = [];\n  componentWillRender() {\n    this.cloneListContent();\n    this.autocompleteEventBinding();\n  }\n\n  onSuggestionUpdate() {\n    this.cloneListContent();\n  }\n\n  autocompleteEventBinding() {\n    if (this.suggestionObserver !== null || !this.list || !this.hostElement || !document.getElementById(this.list)) {\n      return;\n    }\n    const targetNode = document.getElementById(this.list);\n    this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));\n    this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });\n  }\n\n  cloneListContent() {\n    if (!this.list || !this.hostElement || !document.getElementById(this.list)) {\n      return;\n    }\n    const options = [...document.getElementById(this.list).querySelectorAll('option')];\n    this.listSuggestion = options.map((item: HTMLOptionElement) => {\n      if (item.hasAttribute('value')) {\n        return item.getAttribute('value');\n      }\n      return item.innerText;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`input-container ${this.getClassNames()}`} data-haslist={(this.list !== null) + ''}>\n          <input\n            type=\"search\"\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            autocomplete={this.autocomplete}\n            list={this.list}\n            onKeyDown={e => this.emitSearch(e)}\n            onInput={e => this.setVal(e)}\n          />\n\n          <div class=\"button-container\">\n            {(this.button === 'none' || this.button === 'icon-inline') && (\n              <button class=\"search\" tabindex={this.button === 'icon-inline' ? '0' : '-1'} onClick={e => this.emitSearch(e)} aria-label=\"search\" title=\"search\">\n                <pn-icon icon={search} color=\"blue700\"></pn-icon>\n              </button>\n            )}\n            {this.button !== 'icon-inline' && (\n              <button\n                class=\"clear\"\n                aria-label=\"clear\"\n                title=\"clear search field\"\n                tabindex={this.value && (!this.loading || this.button !== 'none') ? '0' : '-1'}\n                onClick={(e) => this.clearInput(e)}\n              >\n                <pn-icon icon={close_small} color=\"blue700\"></pn-icon>\n              </button>\n            )}\n\n            {this.button === 'none' || (this.button === 'icon-inline' && <pn-spinner></pn-spinner>)}\n          </div>\n        </div>\n\n        {this.button !== 'none' && this.button !== 'icon-inline' && (\n          <pn-button\n            onClick={e => this.emitSearch(e)}\n            loading={this.loading}\n            icon={search}\n            appearance={this.light ? 'light' : 'dark'}\n            tooltip={this.button === 'icon' ? this.label : null}\n          >\n            {this.label}\n          </pn-button>\n        )}\n        {this.list && (\n          <datalist id={this.list}>\n            {this.listSuggestion.map(item => {\n              return <option>{item}</option>;\n            })}\n          </datalist>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-marketweb-search.js","mappings":"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","names":["PnMarketwebSearch"],"sources":["src/components/input/pn-marketweb-search/pn-marketweb-search.scss?tag=pn-marketweb-search&encapsulation=shadow","src/components/input/pn-marketweb-search/pn-marketweb-search.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:host {\n  display: inline-flex;\n}\n\n:host > pn-button {\n  margin-left: 0.35em;\n  button {\n    // justify-content: flex-start;\n\n    .pn-button-bg {\n      transition:\n        width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s,\n        background 0.1s,\n        box-shadow 0.1s,\n        left 0.2s,\n        transform 0.2s;\n    }\n  }\n\n  &[data-loading='true'] {\n    .pn-button-bg {\n      left: 0;\n      transform: translateX(0);\n      transition:\n        width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s,\n        background 0.1s,\n        box-shadow 0.1s;\n    }\n\n    pn-spinner {\n      left: 0.75em;\n    }\n  }\n}\n\n:host input {\n  padding: 0.75em;\n  min-height: 3em;\n  font-size: 1em;\n  height: 100%;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 3em;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::-webkit-search-cancel-button {\n    display: none;\n  }\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\n:host > .input-container {\n  width: 100%;\n  position: relative;\n\n  .button-container {\n    :host[list] & {\n      display: none;\n    }\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: transparent;\n    width: 3em;\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  button {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(100%, -50%);\n    background: $white;\n    border: none;\n    color: $blue700;\n    padding: 0.3rem;\n    margin: 0;\n    font-size: 0.875em;\n    border-radius: 50%;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      box-shadow 0.1s,\n      transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s,\n      opacity 0.2s;\n    border: 0.1rem solid transparent;\n    -webkit-tap-highlight-color: transparent;\n\n    &.clear,\n    &.search {\n      cursor: pointer;\n    }\n\n    &:focus {\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $blue700;\n    }\n\n    &:hover,\n    &:focus {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n\n      pn-icon svg,\n      pn-icon svg path {\n        fill: white;\n      }\n    }\n  }\n}\n\n:host .searching {\n  button.search {\n    transform: translate(150%, -50%);\n  }\n\n  button.clear {\n    transform: translate(-50%, -50%);\n  }\n}\n\n/*---------------------------------------Button Variants-------------------------------------------*/\n:host .button-none,\n:host .button-icon-inline {\n  input {\n    padding-right: 3.3em;\n  }\n\n  pn-spinner {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(100%, -50%);\n    transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;\n  }\n\n  button.search {\n    transform: translate(-50%, -50%);\n  }\n\n  &.loading {\n    button {\n      transform: translate(100%, -50%);\n    }\n\n    pn-spinner {\n      transform: translate(-50%, -50%);\n    }\n  }\n}\n\n:host .button-none.searching button.search {\n  transform: translate(100%, -50%);\n}\n\n:host .button-icon > pn-button {\n  &[data-loading='true'] {\n    .pn-button-bg {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n}\n/*---------------------------------------/Button Variants-------------------------------------------*/\n","import { Component, Prop, h, Host, Event, EventEmitter, Element, Listen, State } from '@stencil/core';\nimport { close_small, search } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-search',\n  styleUrl: 'pn-marketweb-search.scss',\n  shadow: true,\n})\nexport class PnMarketwebSearch {\n  @Prop() disabled: boolean = false;\n  @Prop() placeholder: string = null;\n  @Prop() inputid: string = null;\n  @Prop() name: string = null;\n  @Prop() autocomplete: string = null;\n  @Prop() list: string = null;\n  @Prop() value: string = null;\n  /** Label for the button */\n  @Prop() label: string = null;\n  /** Loading animation */\n  @Prop() loading: boolean = false;\n  /** Button type, options are 'none' for no button, 'icon' for a labelless button with just a search icon and 'icon-inline' for a search button inside of the search field (this last option disables the clear field button) */\n  @Prop() button: string = '';\n  /** Light instead of dark search button */\n  @Prop() light: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  /** This is emitted on search submission both with keyboard and mouse */\n  @Event() search: EventEmitter;\n  /** custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */\n  @Event() update: EventEmitter;\n\n  @Listen('input')\n  inputHandler() {\n    this.update.emit(this.value);\n  }\n\n  emitSearch(e) {\n    if (e.type === 'click' || (e.type === 'keydown' && e.key === 'Enter')) {\n      // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead\n      e.preventDefault();\n      this.search.emit(this.value);\n    }\n  }\n\n  setVal(e) {\n    this.value = e.target.value;\n  }\n\n  clearInput() {\n    this.value = '';\n    this.update.emit(this.value);\n    this.hostElement.querySelector('input').focus();\n  }\n\n  getClassNames() {\n    let classNames = '';\n\n    const buttonTypes = ['none', 'icon', 'icon-inline'];\n    if (this.value) classNames += 'searching ';\n    if (this.loading) classNames += 'loading ';\n    if (buttonTypes.includes(this.button)) classNames += `button-${this.button} `;\n\n    return classNames;\n  }\n  @State() suggestionObserver: MutationObserver = null;\n  @State() hasClonedInput: boolean = false;\n  @State() listSuggestion: string[] = [];\n  componentWillRender() {\n    this.cloneListContent();\n    this.autocompleteEventBinding();\n  }\n\n  onSuggestionUpdate() {\n    this.cloneListContent();\n  }\n\n  autocompleteEventBinding() {\n    if (this.suggestionObserver !== null || !this.list || !this.hostElement || !document.getElementById(this.list)) {\n      return;\n    }\n    const targetNode = document.getElementById(this.list);\n    this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));\n    this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });\n  }\n\n  cloneListContent() {\n    if (!this.list || !this.hostElement || !document.getElementById(this.list)) {\n      return;\n    }\n    const options = [...document.getElementById(this.list).querySelectorAll('option')];\n    this.listSuggestion = options.map((item: HTMLOptionElement) => {\n      if (item.hasAttribute('value')) {\n        return item.getAttribute('value');\n      }\n      return item.innerText;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`input-container ${this.getClassNames()}`} data-haslist={(this.list !== null) + ''}>\n          <input\n            type=\"search\"\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            autocomplete={this.autocomplete}\n            list={this.list}\n            onKeyDown={e => this.emitSearch(e)}\n            onInput={e => this.setVal(e)}\n          />\n\n          <div class=\"button-container\">\n            {(this.button === 'none' || this.button === 'icon-inline') && (\n              <button class=\"search\" tabindex={this.button === 'icon-inline' ? '0' : '-1'} onClick={e => this.emitSearch(e)} aria-label=\"search\" title=\"search\">\n                <pn-icon icon={search} color=\"blue700\"></pn-icon>\n              </button>\n            )}\n            {this.button !== 'icon-inline' && (\n              <button\n                class=\"clear\"\n                aria-label=\"clear\"\n                title=\"clear search field\"\n                tabindex={this.value && (!this.loading || this.button !== 'none') ? '0' : '-1'}\n                onClick={() => this.clearInput()}\n              >\n                <pn-icon icon={close_small} color=\"blue700\"></pn-icon>\n              </button>\n            )}\n\n            {this.button === 'none' || (this.button === 'icon-inline' && <pn-spinner></pn-spinner>)}\n          </div>\n        </div>\n\n        {this.button !== 'none' && this.button !== 'icon-inline' && (\n          <pn-button\n            onClick={e => this.emitSearch(e)}\n            loading={this.loading}\n            icon={search}\n            appearance={this.light ? 'light' : 'dark'}\n            tooltip={this.button === 'icon' ? this.label : null}\n          >\n            {this.label}\n          </pn-button>\n        )}\n        {this.list && (\n          <datalist id={this.list}>\n            {this.listSuggestion.map(item => {\n              return <option>{item}</option>;\n            })}\n          </datalist>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-marketweb-sitefooter.js

@@ -1,7 +1,5 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { F as FetchHelper } from './FetchHelper.js';
-import { M as MarketWebContextService } from './MarketWebContextService.js';
-import { H as HeadingTag } from './HeadingTag.js';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
 import { d as defineCustomElement$4 } from './pn-site-footer2.js';
 import { d as defineCustomElement$3 } from './pn-site-footer-col2.js';
 import { d as defineCustomElement$2 } from './pn-swan2.js';
@@ -123,7 +121,12 @@ const translations = {
     },
 };
 
-const pnMarketwebSitefooterCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-marketweb-sitefooter .social-media a[target=_blank]:not(.pn-button):after{content:none}@media screen and (min-width: 60em){pn-marketweb-sitefooter:not([theme=dotcom]) pn-site-footer-col:has(div[slot=bottomsocialmediadesktop]){display:flex;align-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-width:min-content}pn-marketweb-sitefooter:not([theme=dotcom]) pn-site-footer-col:has(div[slot=bottomsocialmediadesktop]) div[slot=bottomsocialmediadesktop]{display:block;margin-top:auto;margin-bottom:1.6rem}pn-marketweb-sitefooter:not([theme=dotcom]) pn-site-footer-col:has(div[slot=bottomsocialmediadesktop]) div[slot=bottomsocialmediadesktop] .trustpilot-widget{display:flex;justify-content:flex-start}}pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile]{display:block;margin-top:1rem;margin-bottom:2.3rem}pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile] .trustpilot-widget{display:flex;justify-content:center}@media screen and (min-width: 33.125em){pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile] .trustpilot-widget{justify-content:flex-start}}@media screen and (min-width: 60em){pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile]{display:none}}div[slot=middle-extra-mobile],div[slot=middle-extra]{display:none}pn-marketweb-sitefooter[theme=dotcom]{width:100%}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediamobile],pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediadesktop]{display:none}pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra-mobile]{display:block;width:100%;text-align:-webkit-center;margin:2.4rem 0}@media screen and (min-width: 1024px){pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra-mobile]{display:none}pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra]{display:block;width:100%;text-align:-webkit-center;margin:3.2rem 0}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan{display:flex;flex-direction:column;align-items:center}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan{flex-direction:row}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan ul{margin-bottom:1.6rem}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan ul{margin-bottom:0;margin-right:4.8rem}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper{display:flex;flex-direction:column;width:100%}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper{width:auto;flex-direction:row}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper .separator{border-top:1px solid #d3cecb;margin-bottom:1.6rem}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper .separator{display:flex;width:1px;height:auto;min-height:90%;background-color:#d3cecb;margin-right:4.8rem;margin-bottom:0}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper .swan{justify-self:center;align-self:center}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=bluedarkest] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path{fill:#ffffff}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=bluedarkest] pn-site-footer[theme=dotcom] pn-swan *{color:white}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom]{background-color:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-top,pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom{background-color:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom]>svg path{fill:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media{border-top:0.1rem solid #d3cecb;border-bottom:0.1rem solid #d3cecb}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media>ul>li:hover svg>circle{fill:#8eddf9}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path{fill:#ffffff}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] pn-swan *{color:white}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom]{background-color:#f3f2f2}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom]>svg path{fill:#f3f2f2}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-top,pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom{background-color:#f3f2f2}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media{border-top:0.1rem solid #d3cecb;border-bottom:0.1rem solid #d3cecb}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media li svg circle{fill:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media li svg:hover>circle{fill:#00a0d6}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright *{color:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] *{color:#0d234b}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path{fill:#0d234b}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] a:not(.pn-h2){color:#005d92}pn-marketweb-sitefooter[theme=tpl] pn-site-footer{background-color:#0d234b;padding-top:6rem}@media screen and (max-width: 33.125em){pn-marketweb-sitefooter[theme=tpl] pn-site-footer{padding-left:2.6rem;padding-right:2.6rem}}pn-marketweb-sitefooter[theme=tpl] pn-site-footer>svg{display:none}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom{background-color:#0d234b;color:#ffffff;margin:2.5rem 0}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom div[slot=bottom]{border-top:1px solid #005d92;border-bottom:1px solid #005d92}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom a{color:#ffffff}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom a:hover{text-decoration:underline;color:#ffffff}pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top,pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo{background-color:#0d234b;color:#ffffff}pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a,pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a{color:#fbc2c1}pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a:hover,pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a:hover{text-decoration:underline;color:#fbc2c1}@media screen and (max-width: 60em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{padding:0 8rem}}@media screen and (max-width: 60em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{padding:0 5rem}}@media screen and (max-width: 48em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{padding:0 3rem}}@media screen and (min-width: 33.125em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{width:114rem;justify-content:space-between}}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-logo a svg path{fill:#00a0d6}@media screen and (min-width: 33.125em){pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col{width:unset;min-width:unset}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col:first-child{min-width:45%}}@media screen and (max-width: 60em){pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col:first-child{min-width:100%;padding-top:0}}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a{display:inline-flex;gap:0.7rem;align-items:flex-start}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a .pn-h2{color:#ffffff}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a span.footer-tpl-links{display:none}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a:hover{text-decoration:underline;color:#fbc2c1}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a pn-icon svg{background-color:#fbc2c1;border-radius:0.3rem;height:1.7rem;width:1.7rem;margin-top:0.3rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a pn-icon svg path{fill:#0d234b}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col .pn-h2{margin-bottom:3.5rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media{flex-direction:column;gap:0.5rem;row-gap:0rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media li{max-height:4rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a{align-items:center;gap:0}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a circle{display:none}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a span.footer-tpl-links{display:block}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a svg{height:3.7rem;width:3.7rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a svg path{fill:#fbc2c1}";
+const HeadingTag = ({ heading, level, cssClass, additionalProps }) => {
+    const Tag = level;
+    return (h(Tag, { className: cssClass, ...additionalProps }, heading));
+};
+
+const pnMarketwebSitefooterCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-marketweb-sitefooter .social-media a[target=_blank]:not(.pn-button):after{content:none}@media screen and (min-width: 60em){pn-marketweb-sitefooter:not([theme=dotcom]) pn-site-footer-col:has(div[slot=bottomsocialmediadesktop]){display:flex;align-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-width:min-content}pn-marketweb-sitefooter:not([theme=dotcom]) pn-site-footer-col:has(div[slot=bottomsocialmediadesktop]) div[slot=bottomsocialmediadesktop]{display:block;margin-top:auto;margin-bottom:1.6rem}pn-marketweb-sitefooter:not([theme=dotcom]) pn-site-footer-col:has(div[slot=bottomsocialmediadesktop]) div[slot=bottomsocialmediadesktop] .trustpilot-widget{display:flex;justify-content:flex-start}}pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile]{display:block;margin-top:1rem;margin-bottom:2.3rem}pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile] .trustpilot-widget{display:flex;justify-content:center}@media screen and (min-width: 33.125em){pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile] .trustpilot-widget{justify-content:flex-start}}@media screen and (min-width: 60em){pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile]{display:none}}div[slot=middle-extra-mobile],div[slot=middle-extra]{display:none}pn-marketweb-sitefooter[theme=dotcom]{width:100%}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediamobile],pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediadesktop]{display:none}pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra-mobile]{display:block;width:100%;text-align:-webkit-center;margin:2.4rem 0}@media screen and (min-width: 1024px){pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra-mobile]{display:none}pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra]{display:block;width:100%;text-align:-webkit-center;margin:3.2rem 0}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan{display:flex;flex-direction:column;align-items:center}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan{flex-direction:row}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan ul{margin-bottom:1.6rem}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan ul{margin-bottom:0;margin-right:4.8rem}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper{display:flex;flex-direction:column;width:100%}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper{width:auto;flex-direction:row}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper .separator{border-top:1px solid #d3cecb;margin-bottom:1.6rem}@media screen and (min-width: 768px){pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper .separator{display:flex;width:1px;height:auto;min-height:90%;background-color:#d3cecb;margin-right:4.8rem;margin-bottom:0}}pn-marketweb-sitefooter[theme=dotcom] div[slot=bottom] .social-media.social-media--swan .swan-wrapper .swan{justify-self:center;align-self:center}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=bluedarkest] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path{fill:#ffffff}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=bluedarkest] pn-site-footer[theme=dotcom] pn-swan *{color:white}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom]{background-color:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-top,pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom{background-color:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom]>svg path{fill:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media{border-top:0.1rem solid #d3cecb;border-bottom:0.1rem solid #d3cecb}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media>ul>li:hover svg>circle{fill:#8eddf9}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path{fill:#ffffff}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] pn-swan *{color:white}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom]{background-color:#f3f2f2}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom]>svg path{fill:#f3f2f2}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-top,pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom{background-color:#f3f2f2}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media{border-top:0.1rem solid #d3cecb;border-bottom:0.1rem solid #d3cecb}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media li svg circle{fill:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media li svg:hover>circle{fill:#00a0d6}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright *{color:#005d92}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] *{color:#0d234b}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path{fill:#0d234b}pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] a:not(.pn-h2){color:#005d92}pn-marketweb-sitefooter[theme=tpl] pn-site-footer{background-color:#0d234b;padding-top:6rem}@media screen and (max-width: 33.125em){pn-marketweb-sitefooter[theme=tpl] pn-site-footer{padding-left:2.6rem;padding-right:2.6rem}}pn-marketweb-sitefooter[theme=tpl] pn-site-footer>svg{display:none}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom{background-color:#0d234b;color:#ffffff;margin:2.5rem 0}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom div[slot=bottom]{border-top:1px solid #005d92;border-bottom:1px solid #005d92}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom a{color:#ffffff}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom a:hover{text-decoration:underline;color:#ffffff}pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top,pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo{background-color:#0d234b;color:#ffffff}pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a,pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a{color:#fbc2c1}pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a:hover,pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a:hover{text-decoration:underline;color:#fbc2c1}@media screen and (max-width: 60em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{padding:0 8rem}}@media screen and (max-width: 60em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{padding:0 5rem}}@media screen and (max-width: 48em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{padding:0 3rem}}@media screen and (min-width: 33.125em){pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top .pn-sitefooter-cols{width:114rem;justify-content:space-between}}pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-logo a svg path{fill:#00a0d6}@media screen and (min-width: 33.125em){pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col{width:unset;min-width:unset}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col:first-child{min-width:45%}}@media screen and (max-width: 60em){pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col:first-child{min-width:100%;padding-top:0}}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a{display:inline-flex;gap:0.7rem;align-items:flex-start}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a .pn-h2{color:#ffffff}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a span.footer-tpl-links{display:none}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a:hover{text-decoration:underline;color:#fbc2c1}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a pn-icon svg{background-color:#fbc2c1;border-radius:0.3rem;height:1.7rem;width:1.7rem;margin-top:0.3rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col a pn-icon svg path{fill:#0d234b}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col .pn-h2{margin-bottom:3.5rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media{flex-direction:column;gap:0.5rem;row-gap:0rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media li{max-height:4rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a{align-items:center;gap:0}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a circle{display:none}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a span.footer-tpl-links{display:block}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a svg{height:3.7rem;width:3.7rem}pn-marketweb-sitefooter[theme=tpl] div pn-site-footer-col ul.social-media a svg path{fill:#fbc2c1}";
 const PnMarketwebSitefooterStyle0 = pnMarketwebSitefooterCss;
 
 const PnMarketwebSiteheader = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSiteheader extends HTMLElement {
@@ -252,7 +255,7 @@ const PnMarketwebSiteheader = /*@__PURE__*/ proxyCustomElement(class PnMarketweb
     renderCols() {
         if (this.gotData && this.footerContent?.columns) {
             return this.footerContent.columns.map(column => {
-                return (h("pn-site-footer-col", { theme: this.theme }, column.firstLinkAsHeader && column.links && column.links[0] ? (h("a", { href: column.links[0].linkHref, target: column.links[0].openInNewWindow ? '_blank' : null, rel: column.links[0].openInNewWindow ? 'noopener nofollower noreferrer' : null, title: column.links[0].linkText, id: this.uniqueId(column.links[0].linkText) }, h(HeadingTag, { level: this.headingLevel, cssClass: `${"pn-" + this.headingLevel}` }, column.links[0].linkText))) : (h(HeadingTag, { level: this.headingLevel, cssClass: `${"pn-" + this.headingLevel}` }, column.heading)), column.links && (!column.body || this.theme === 'tpl') ? (h("ul", { ...(column.links && column.links[0] && column.links[0].linkType && { class: 'social-media' }) }, column.links.map((link, i) => {
+                return (h("pn-site-footer-col", { theme: this.theme }, column.firstLinkAsHeader && column.links && column.links[0] ? (h("a", { href: column.links[0].linkHref, target: column.links[0].openInNewWindow ? '_blank' : null, rel: column.links[0].openInNewWindow ? 'noopener nofollower noreferrer' : null, title: column.links[0].linkText, id: this.uniqueId(column.links[0].linkText) }, h(HeadingTag, { heading: column.links[0].linkText, level: this.headingLevel, cssClass: `${"pn-" + this.headingLevel}` }))) : (h(HeadingTag, { heading: column.heading, level: this.headingLevel, cssClass: `${"pn-" + this.headingLevel}` })), column.links && (!column.body || this.theme === 'tpl') ? (h("ul", { ...(column.links && column.links[0] && column.links[0].linkType && { class: 'social-media' }) }, column.links.map((link, i) => {
                     if (!link.linkHref || (column.firstLinkAsHeader && i == 0)) {
                         return false;
                     }