@postnord/pn-marketweb-components 3.5.3 → 4.0.0

package/esm/pn-app-banner.entry.js.map

@@ -1 +1 @@
-{"file":"pn-app-banner.entry.js","mappings":"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","names":[],"sources":["src/components/minor/pn-app-banner/pn-app-banner.scss?tag=pn-app-banner","src/components/minor/pn-app-banner/pn-app-banner.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-app-banner {\n  .pn-app-banner__wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 1rem;\n\n    background-color: $gray50;\n    padding: 1rem;\n    margin: 0 auto;\n  }\n\n  .pn-app-banner__sticky {\n    position: relative;\n\n    top: 0;\n    width: 100%;\n\n    z-index: 999;\n  }\n\n  .icon-close {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  .pn-app-banner__icon {\n    height: 3.2rem;\n  }\n\n  .pn-app-banner__text {\n    font-size: 1.2rem;\n    line-height: 1;\n\n    span {\n      font-weight: 600;\n    }\n  }\n\n  .pn-app-banner__cta {\n    margin-left: auto;\n  }\n\n  &[data-is-closed='true'] {\n    display: none;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { close_small } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-app-banner',\n  styleUrl: 'pn-app-banner.scss',\n})\nexport class PnAppBanner {\n  @Element() hostElement: HTMLElement;\n  @Prop() appName: string;\n  @Prop() appDescription: string;\n  @Prop() ctaText: string;\n  @Prop() appleStoreLink: string;\n  @Prop() googleStoreLink: string;\n\n  @State() isClosed: boolean = false;\n  @State() storeLink: string;\n  @State() isLocalStorageAvailable = true;\n\n  CLOSED_STORAGE_KEY = 'SmartAppBannerClosed';\n  CLOSED_COOKIE_EXPIRY_DAYS = 7;\n\n  checkLocalStorage() {\n    try {\n      const testKey = '__test__';\n      localStorage.setItem(testKey, testKey);\n      localStorage.removeItem(testKey);\n    } catch (e) {\n      this.isLocalStorageAvailable = false;\n    }\n  }\n\n  detectDeviceAndSetStoreLink() {\n    const userAgent = navigator.userAgent;\n\n    if (userAgent.match(/Android/i)) {\n      this.storeLink = this.googleStoreLink;\n    } else if (userAgent.match(/iPhone|iPad|iPod/i)) {\n      this.storeLink = this.appleStoreLink;\n    } else {\n      this.storeLink = null;\n      this.isClosed = true; // -> data-is-closed = true\n    }\n  }\n\n  handleOnClose = () => {\n    this.isClosed = true;\n\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      localStorage.setItem(this.CLOSED_STORAGE_KEY, 'true');\n    } else {\n      const expirationDate = new Date();\n      expirationDate.setDate(expirationDate.getDate() + this.CLOSED_COOKIE_EXPIRY_DAYS);\n      document.cookie = `${this.CLOSED_STORAGE_KEY}=true; expires=${expirationDate.toUTCString()}`;\n    }\n  };\n\n  componentWillLoad() {\n    this.checkLocalStorage();\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      this.isClosed = localStorage.getItem(this.CLOSED_STORAGE_KEY) === 'true';\n    } else {\n      const cookies = document.cookie.split(';');\n      for (const cookie of cookies) {\n        const [name, value] = cookie.trim().split('=');\n        if (name === this.CLOSED_STORAGE_KEY && value === 'true') {\n          this.isClosed = true;\n          break;\n        }\n      }\n    }\n\n    if (!this.isClosed) {\n      this.detectDeviceAndSetStoreLink();\n    }\n  }\n\n  render() {\n    return (\n      <Host data-is-closed={this.isClosed ? 'true' : 'false'}>\n        <div class=\"pn-app-banner__wrapper pn-app-banner__sticky\">\n          <div class=\"icon-close\" onClick={this.handleOnClose}>\n            <pn-icon icon={close_small} small=\"false\" color=\"black\" />\n          </div>\n          <div class=\"pn-app-banner__icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_17800_45416)\">\n                <path\n                  d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                  fill=\"#F18D8D\"\n                />\n                <mask id=\"mask0_17800_45416\" style={{ 'mask-type': 'alpha' }} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"32\" height=\"32\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                </mask>\n                <g mask=\"url(#mask0_17800_45416)\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                  <path d=\"M50.8125 14.1562H18.8125V46.1562H50.8125V14.1562Z\" fill=\"url(#paint0_linear_17800_45416)\" />\n                  <path\n                    d=\"M2.09375 31.375C2.09375 15.2379 15.1754 2.15625 31.3125 2.15625H31.9844V31.9844H2.09998C2.09583 31.7819 2.09375 31.5788 2.09375 31.375Z\"\n                    fill=\"#00A0D6\"\n                  />\n                  <g filter=\"url(#filter0_d_17800_45416)\">\n                    <path\n                      d=\"M7.40625 11.8062C7.40625 10.2661 7.40625 9.49603 7.70597 8.90778C7.96963 8.39034 8.39034 7.96963 8.90778 7.70597C9.49603 7.40625 10.2661 7.40625 11.8062 7.40625H20.1938C21.7339 7.40625 22.504 7.40625 23.0922 7.70597C23.6097 7.96963 24.0304 8.39034 24.294 8.90778C24.5938 9.49603 24.5938 10.2661 24.5938 11.8062V20.1938C24.5938 21.7339 24.5938 22.504 24.294 23.0922C24.0304 23.6097 23.6097 24.0304 23.0922 24.294C22.504 24.5938 21.7339 24.5938 20.1938 24.5938H11.8062C10.2661 24.5938 9.49603 24.5938 8.90778 24.294C8.39034 24.0304 7.96963 23.6097 7.70597 23.0922C7.40625 22.504 7.40625 21.7339 7.40625 20.1938V11.8062Z\"\n                      fill=\"#F1F7FA\"\n                    />\n                    <path\n                      opacity=\"0.6\"\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.5938 10.0625C10.3176 10.0625 10.0938 10.2863 10.0938 10.5625C10.0938 10.8387 10.3176 11.0625 10.5938 11.0625H12.875C13.1512 11.0625 13.375 10.8387 13.375 10.5625C13.375 10.2863 13.1512 10.0625 12.875 10.0625H10.5938ZM10.5938 12.3125C10.3176 12.3125 10.0938 12.5363 10.0938 12.8125C10.0938 13.0887 10.3176 13.3125 10.5938 13.3125H15.3125C15.5887 13.3125 15.8125 13.0887 15.8125 12.8125C15.8125 12.5363 15.5887 12.3125 15.3125 12.3125H10.5938ZM10.0938 14.75C10.0938 14.4738 10.3176 14.25 10.5938 14.25H13.5625C13.8387 14.25 14.0625 14.4738 14.0625 14.75C14.0625 15.0262 13.8387 15.25 13.5625 15.25H10.5938C10.3176 15.25 10.0938 15.0262 10.0938 14.75ZM15.1875 14.25C14.9113 14.25 14.6875 14.4738 14.6875 14.75C14.6875 15.0262 14.9113 15.25 15.1875 15.25C15.4637 15.25 15.6875 15.0262 15.6875 14.75C15.6875 14.4738 15.4637 14.25 15.1875 14.25Z\"\n                      fill=\"#A5C0CA\"\n                    />\n                    <path\n                      d=\"M17.9375 10.5938C17.9375 10.3176 18.1613 10.0938 18.4375 10.0938H21.75C22.0262 10.0938 22.25 10.3176 22.25 10.5938C22.25 10.8699 22.0262 11.0938 21.75 11.0938H18.4375C18.1613 11.0938 17.9375 10.8699 17.9375 10.5938Z\"\n                      fill=\"#00A0D6\"\n                    />\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.0938 19.3125C10.0938 18.8983 10.4295 18.5625 10.8438 18.5625C11.258 18.5625 11.5938 18.8983 11.5938 19.3125V21.25C11.5938 21.6642 11.258 22 10.8438 22C10.4295 22 10.0938 21.6642 10.0938 21.25V19.3125ZM19.3438 19.3125C19.3438 18.8983 19.6795 18.5625 20.0938 18.5625C20.508 18.5625 20.8438 18.8983 20.8438 19.3125V21.25C20.8438 21.6642 20.508 22 20.0938 22C19.6795 22 19.3438 21.6642 19.3438 21.25V19.3125ZM14.5938 18.5625C14.1795 18.5625 13.8438 18.8983 13.8438 19.3125V21.25C13.8438 21.6642 14.1795 22 14.5938 22C15.008 22 15.3438 21.6642 15.3438 21.25V19.3125C15.3438 18.8983 15.008 18.5625 14.5938 18.5625ZM12.5938 18.9375C12.5938 18.7304 12.7617 18.5625 12.9688 18.5625C13.1758 18.5625 13.3438 18.7304 13.3438 18.9375V21.625C13.3438 21.8321 13.1758 22 12.9688 22C12.7617 22 12.5938 21.8321 12.5938 21.625V18.9375ZM21.5938 18.5625C21.3867 18.5625 21.2188 18.7304 21.2188 18.9375V21.625C21.2188 21.8321 21.3867 22 21.5938 22C21.8008 22 21.9688 21.8321 21.9688 21.625V18.9375C21.9688 18.7304 21.8008 18.5625 21.5938 18.5625ZM17.5938 18.9375C17.5938 18.7304 17.7617 18.5625 17.9688 18.5625C18.1758 18.5625 18.3438 18.7304 18.3438 18.9375V21.625C18.3438 21.8321 18.1758 22 17.9688 22C17.7617 22 17.5938 21.8321 17.5938 21.625V18.9375ZM16.5938 18.5625C16.3176 18.5625 16.0938 18.7863 16.0938 19.0625V21.5C16.0938 21.7762 16.3176 22 16.5938 22C16.8699 22 17.0938 21.7762 17.0938 21.5V19.0625C17.0938 18.7863 16.8699 18.5625 16.5938 18.5625Z\"\n                      fill=\"#0D234B\"\n                    />\n                  </g>\n                </g>\n              </g>\n              <defs>\n                <filter id=\"filter0_d_17800_45416\" x=\"-52.5938\" y=\"-48.5938\" width=\"137.188\" height=\"137.188\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                  <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                  <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n                  <feOffset dy=\"4\" />\n                  <feGaussianBlur stdDeviation=\"30\" />\n                  <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0\" />\n                  <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_17800_45416\" />\n                  <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_17800_45416\" result=\"shape\" />\n                </filter>\n                <linearGradient id=\"paint0_linear_17800_45416\" x1=\"29.2305\" y1=\"44.3441\" x2=\"51.5694\" y2=\"15.1782\" gradientUnits=\"userSpaceOnUse\">\n                  <stop offset=\"0.0800778\" stop-color=\"#0D244C\" />\n                  <stop offset=\"1\" stop-color=\"#0D234B\" />\n                </linearGradient>\n                <clipPath id=\"clip0_17800_45416\">\n                  <rect width=\"32\" height=\"32\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n          <div class=\"pn-app-banner__text\">\n            <span>{this.appName}</span>\n            <br />\n            {this.appDescription}\n          </div>\n          <div class=\"pn-app-banner__cta\">\n            <pn-button small={true} href={this.storeLink}>\n              {this.ctaText}\n            </pn-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-app-banner.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,49BAA49B,CAAC;AACp/B,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;;wBAQO,KAAK;;uCAEC,IAAI;;;IAEvC,kBAAkB,GAAG,sBAAsB,CAAC;IAC5C,yBAAyB,GAAG,CAAC,CAAC;IAE9B,iBAAiB;QACf,IAAI;YACF,MAAM,OAAO,GAAG,UAAU,CAAC;YAC3B,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YACvC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAClC;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;SACtC;KACF;IAED,2BAA2B;QACzB,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC;QAEtC,IAAI,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;YAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC;SACvC;aAAM,IAAI,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,EAAE;YAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;SACtC;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IAED,aAAa,GAAG;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;QAGrB,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;SACvD;aAAM;YACL,MAAM,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC;YAClC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,yBAAyB,CAAC,CAAC;YAClF,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,kBAAkB,kBAAkB,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC;SAC9F;KACF,CAAC;IAEF,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;;QAEzB,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;SAC1E;aAAM;YACL,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC3C,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC5B,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAC/C,IAAI,IAAI,KAAK,IAAI,CAAC,kBAAkB,IAAI,KAAK,KAAK,MAAM,EAAE;oBACxD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACrB,MAAM;iBACP;aACF;SACF;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uEAAiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IACpD,4DAAK,KAAK,EAAC,8CAA8C,IACvD,4DAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACjD,gEAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG,CACtD,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,uEAAa,yBAAyB,IACpC,6DACE,CAAC,EAAC,8JAA8J,EAChK,IAAI,EAAC,SAAS,GACd,EACF,6DAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,SAAS,EAAC,gBAAgB,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,IACzH,6DACE,CAAC,EAAC,8JAA8J,EAChK,IAAI,EAAC,SAAS,GACd,CACG,EACP,0DAAG,IAAI,EAAC,yBAAyB,IAC/B,6DACE,CAAC,EAAC,8JAA8J,EAChK,IAAI,EAAC,SAAS,GACd,EACF,6DAAM,CAAC,EAAC,mDAAmD,EAAC,IAAI,EAAC,iCAAiC,GAAG,EACrG,6DACE,CAAC,EAAC,yIAAyI,EAC3I,IAAI,EAAC,SAAS,GACd,EACF,0DAAG,MAAM,EAAC,6BAA6B,IACrC,6DACE,CAAC,EAAC,2mBAA2mB,EAC7mB,IAAI,EAAC,SAAS,GACd,EACF,6DACE,OAAO,EAAC,KAAK,eACH,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,60BAA60B,EAC/0B,IAAI,EAAC,SAAS,GACd,EACF,6DACE,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,GACd,EACF,0EACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,k6CAAk6C,EACp6C,IAAI,EAAC,SAAS,GACd,CACA,CACF,CACF,EACJ,+DACE,+DAAQ,EAAE,EAAC,uBAAuB,EAAC,CAAC,EAAC,UAAU,EAAC,CAAC,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,gBAAgB,iCAA6B,MAAM,IAC3J,iFAAuB,GAAG,EAAC,MAAM,EAAC,oBAAoB,GAAG,EACzD,sEAAe,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,2CAA2C,EAAC,MAAM,EAAC,WAAW,GAAG,EACtH,iEAAU,EAAE,EAAC,GAAG,GAAG,EACnB,uEAAgB,YAAY,EAAC,IAAI,GAAG,EACpC,sEAAe,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,4CAA4C,GAAG,EACnF,gEAAS,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,oBAAoB,EAAC,MAAM,EAAC,gCAAgC,GAAG,EAC1F,gEAAS,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAC,gCAAgC,EAAC,MAAM,EAAC,OAAO,GAAG,CACzF,EACT,uEAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB,IAC/H,6DAAM,MAAM,EAAC,WAAW,gBAAY,SAAS,GAAG,EAChD,6DAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,EACjB,iEAAU,EAAE,EAAC,mBAAmB,IAC9B,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,CACnC,CACN,CACH,CACF,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,4DAAM,EACL,IAAI,CAAC,cAAc,CAChB,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,kEAAW,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,IACzC,IAAI,CAAC,OAAO,CACH,CACR,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/minor/pn-app-banner/pn-app-banner.scss?tag=pn-app-banner","src/components/minor/pn-app-banner/pn-app-banner.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-app-banner {\n  .pn-app-banner__wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 1rem;\n\n    background-color: $gray50;\n    padding: 1rem;\n    margin: 0 auto;\n  }\n\n  .pn-app-banner__sticky {\n    position: relative;\n\n    top: 0;\n    width: 100%;\n\n    z-index: 999;\n  }\n\n  .icon-close {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  .pn-app-banner__icon {\n    height: 3.2rem;\n  }\n\n  .pn-app-banner__text {\n    font-size: 1.2rem;\n    line-height: 1;\n\n    span {\n      font-weight: 600;\n    }\n  }\n\n  .pn-app-banner__cta {\n    margin-left: auto;\n  }\n\n  &[data-is-closed='true'] {\n    display: none;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { close_small } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-app-banner',\n  styleUrl: 'pn-app-banner.scss',\n})\nexport class PnAppBanner {\n  @Element() hostElement: HTMLElement;\n  @Prop() appName: string;\n  @Prop() appDescription: string;\n  @Prop() ctaText: string;\n  @Prop() appleStoreLink: string;\n  @Prop() googleStoreLink: string;\n\n  @State() isClosed: boolean = false;\n  @State() storeLink: string;\n  @State() isLocalStorageAvailable = true;\n\n  CLOSED_STORAGE_KEY = 'SmartAppBannerClosed';\n  CLOSED_COOKIE_EXPIRY_DAYS = 7;\n\n  checkLocalStorage() {\n    try {\n      const testKey = '__test__';\n      localStorage.setItem(testKey, testKey);\n      localStorage.removeItem(testKey);\n    } catch (e) {\n      this.isLocalStorageAvailable = false;\n    }\n  }\n\n  detectDeviceAndSetStoreLink() {\n    const userAgent = navigator.userAgent;\n\n    if (userAgent.match(/Android/i)) {\n      this.storeLink = this.googleStoreLink;\n    } else if (userAgent.match(/iPhone|iPad|iPod/i)) {\n      this.storeLink = this.appleStoreLink;\n    } else {\n      this.storeLink = null;\n      this.isClosed = true; // -> data-is-closed = true\n    }\n  }\n\n  handleOnClose = () => {\n    this.isClosed = true;\n\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      localStorage.setItem(this.CLOSED_STORAGE_KEY, 'true');\n    } else {\n      const expirationDate = new Date();\n      expirationDate.setDate(expirationDate.getDate() + this.CLOSED_COOKIE_EXPIRY_DAYS);\n      document.cookie = `${this.CLOSED_STORAGE_KEY}=true; expires=${expirationDate.toUTCString()}`;\n    }\n  };\n\n  componentWillLoad() {\n    this.checkLocalStorage();\n    // Handle storage based on availability\n    if (this.isLocalStorageAvailable) {\n      this.isClosed = localStorage.getItem(this.CLOSED_STORAGE_KEY) === 'true';\n    } else {\n      const cookies = document.cookie.split(';');\n      for (const cookie of cookies) {\n        const [name, value] = cookie.trim().split('=');\n        if (name === this.CLOSED_STORAGE_KEY && value === 'true') {\n          this.isClosed = true;\n          break;\n        }\n      }\n    }\n\n    if (!this.isClosed) {\n      this.detectDeviceAndSetStoreLink();\n    }\n  }\n\n  render() {\n    return (\n      <Host data-is-closed={this.isClosed ? 'true' : 'false'}>\n        <div class=\"pn-app-banner__wrapper pn-app-banner__sticky\">\n          <div class=\"icon-close\" onClick={this.handleOnClose}>\n            <pn-icon icon={close_small} small=\"false\" color=\"black\" />\n          </div>\n          <div class=\"pn-app-banner__icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_17800_45416)\">\n                <path\n                  d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                  fill=\"#F18D8D\"\n                />\n                <mask id=\"mask0_17800_45416\" style={{ 'mask-type': 'alpha' }} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"32\" height=\"32\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                </mask>\n                <g mask=\"url(#mask0_17800_45416)\">\n                  <path\n                    d=\"M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z\"\n                    fill=\"#0D234B\"\n                  />\n                  <path d=\"M50.8125 14.1562H18.8125V46.1562H50.8125V14.1562Z\" fill=\"url(#paint0_linear_17800_45416)\" />\n                  <path\n                    d=\"M2.09375 31.375C2.09375 15.2379 15.1754 2.15625 31.3125 2.15625H31.9844V31.9844H2.09998C2.09583 31.7819 2.09375 31.5788 2.09375 31.375Z\"\n                    fill=\"#00A0D6\"\n                  />\n                  <g filter=\"url(#filter0_d_17800_45416)\">\n                    <path\n                      d=\"M7.40625 11.8062C7.40625 10.2661 7.40625 9.49603 7.70597 8.90778C7.96963 8.39034 8.39034 7.96963 8.90778 7.70597C9.49603 7.40625 10.2661 7.40625 11.8062 7.40625H20.1938C21.7339 7.40625 22.504 7.40625 23.0922 7.70597C23.6097 7.96963 24.0304 8.39034 24.294 8.90778C24.5938 9.49603 24.5938 10.2661 24.5938 11.8062V20.1938C24.5938 21.7339 24.5938 22.504 24.294 23.0922C24.0304 23.6097 23.6097 24.0304 23.0922 24.294C22.504 24.5938 21.7339 24.5938 20.1938 24.5938H11.8062C10.2661 24.5938 9.49603 24.5938 8.90778 24.294C8.39034 24.0304 7.96963 23.6097 7.70597 23.0922C7.40625 22.504 7.40625 21.7339 7.40625 20.1938V11.8062Z\"\n                      fill=\"#F1F7FA\"\n                    />\n                    <path\n                      opacity=\"0.6\"\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.5938 10.0625C10.3176 10.0625 10.0938 10.2863 10.0938 10.5625C10.0938 10.8387 10.3176 11.0625 10.5938 11.0625H12.875C13.1512 11.0625 13.375 10.8387 13.375 10.5625C13.375 10.2863 13.1512 10.0625 12.875 10.0625H10.5938ZM10.5938 12.3125C10.3176 12.3125 10.0938 12.5363 10.0938 12.8125C10.0938 13.0887 10.3176 13.3125 10.5938 13.3125H15.3125C15.5887 13.3125 15.8125 13.0887 15.8125 12.8125C15.8125 12.5363 15.5887 12.3125 15.3125 12.3125H10.5938ZM10.0938 14.75C10.0938 14.4738 10.3176 14.25 10.5938 14.25H13.5625C13.8387 14.25 14.0625 14.4738 14.0625 14.75C14.0625 15.0262 13.8387 15.25 13.5625 15.25H10.5938C10.3176 15.25 10.0938 15.0262 10.0938 14.75ZM15.1875 14.25C14.9113 14.25 14.6875 14.4738 14.6875 14.75C14.6875 15.0262 14.9113 15.25 15.1875 15.25C15.4637 15.25 15.6875 15.0262 15.6875 14.75C15.6875 14.4738 15.4637 14.25 15.1875 14.25Z\"\n                      fill=\"#A5C0CA\"\n                    />\n                    <path\n                      d=\"M17.9375 10.5938C17.9375 10.3176 18.1613 10.0938 18.4375 10.0938H21.75C22.0262 10.0938 22.25 10.3176 22.25 10.5938C22.25 10.8699 22.0262 11.0938 21.75 11.0938H18.4375C18.1613 11.0938 17.9375 10.8699 17.9375 10.5938Z\"\n                      fill=\"#00A0D6\"\n                    />\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M10.0938 19.3125C10.0938 18.8983 10.4295 18.5625 10.8438 18.5625C11.258 18.5625 11.5938 18.8983 11.5938 19.3125V21.25C11.5938 21.6642 11.258 22 10.8438 22C10.4295 22 10.0938 21.6642 10.0938 21.25V19.3125ZM19.3438 19.3125C19.3438 18.8983 19.6795 18.5625 20.0938 18.5625C20.508 18.5625 20.8438 18.8983 20.8438 19.3125V21.25C20.8438 21.6642 20.508 22 20.0938 22C19.6795 22 19.3438 21.6642 19.3438 21.25V19.3125ZM14.5938 18.5625C14.1795 18.5625 13.8438 18.8983 13.8438 19.3125V21.25C13.8438 21.6642 14.1795 22 14.5938 22C15.008 22 15.3438 21.6642 15.3438 21.25V19.3125C15.3438 18.8983 15.008 18.5625 14.5938 18.5625ZM12.5938 18.9375C12.5938 18.7304 12.7617 18.5625 12.9688 18.5625C13.1758 18.5625 13.3438 18.7304 13.3438 18.9375V21.625C13.3438 21.8321 13.1758 22 12.9688 22C12.7617 22 12.5938 21.8321 12.5938 21.625V18.9375ZM21.5938 18.5625C21.3867 18.5625 21.2188 18.7304 21.2188 18.9375V21.625C21.2188 21.8321 21.3867 22 21.5938 22C21.8008 22 21.9688 21.8321 21.9688 21.625V18.9375C21.9688 18.7304 21.8008 18.5625 21.5938 18.5625ZM17.5938 18.9375C17.5938 18.7304 17.7617 18.5625 17.9688 18.5625C18.1758 18.5625 18.3438 18.7304 18.3438 18.9375V21.625C18.3438 21.8321 18.1758 22 17.9688 22C17.7617 22 17.5938 21.8321 17.5938 21.625V18.9375ZM16.5938 18.5625C16.3176 18.5625 16.0938 18.7863 16.0938 19.0625V21.5C16.0938 21.7762 16.3176 22 16.5938 22C16.8699 22 17.0938 21.7762 17.0938 21.5V19.0625C17.0938 18.7863 16.8699 18.5625 16.5938 18.5625Z\"\n                      fill=\"#0D234B\"\n                    />\n                  </g>\n                </g>\n              </g>\n              <defs>\n                <filter id=\"filter0_d_17800_45416\" x=\"-52.5938\" y=\"-48.5938\" width=\"137.188\" height=\"137.188\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                  <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                  <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n                  <feOffset dy=\"4\" />\n                  <feGaussianBlur stdDeviation=\"30\" />\n                  <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0\" />\n                  <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_17800_45416\" />\n                  <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_17800_45416\" result=\"shape\" />\n                </filter>\n                <linearGradient id=\"paint0_linear_17800_45416\" x1=\"29.2305\" y1=\"44.3441\" x2=\"51.5694\" y2=\"15.1782\" gradientUnits=\"userSpaceOnUse\">\n                  <stop offset=\"0.0800778\" stop-color=\"#0D244C\" />\n                  <stop offset=\"1\" stop-color=\"#0D234B\" />\n                </linearGradient>\n                <clipPath id=\"clip0_17800_45416\">\n                  <rect width=\"32\" height=\"32\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n          <div class=\"pn-app-banner__text\">\n            <span>{this.appName}</span>\n            <br />\n            {this.appDescription}\n          </div>\n          <div class=\"pn-app-banner__cta\">\n            <pn-button small={true} href={this.storeLink}>\n              {this.ctaText}\n            </pn-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/esm/pn-bonus-progressbar-level.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
 
-const pnBonusProgressbarLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-bonus-progressbar-level{position:absolute;width:0.1rem;left:50%}pn-bonus-progressbar-level::after{content:\"\";width:0.1rem;position:absolute;left:0;border-left:1px dashed #9b1c2e;top:50%;transform:translateY(-50%);height:3rem}pn-bonus-progressbar-level:not([current]):nth-child(odd)::after{height:7rem;margin-top:0.6rem}.progressbar-level-percentage{font-size:0.75em;position:absolute;left:50%;transform:translateX(-50%);top:-3.2rem}[current]>.progressbar-level-percentage{display:none}pn-bonus-progressbar-level:not([current]):nth-child(odd) .progressbar-level-percentage{top:-4.8rem}.progressbar-level-value{font-size:0.75em;white-space:nowrap;position:absolute;left:50%;transform:translateX(-50%);top:2.3rem}[current]>.progressbar-level-value{top:-3.2rem}pn-bonus-progressbar-level:not([current]):nth-child(odd) .progressbar-level-value{top:4.2rem}";
+const pnBonusProgressbarLevelCss = "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-bonus-progressbar-level{position:absolute;width:0.1rem;left:50%}pn-bonus-progressbar-level::after{content:\"\";width:0.1rem;position:absolute;left:0;border-left:1px dashed #9b1c2e;top:50%;transform:translateY(-50%);height:3rem}pn-bonus-progressbar-level:not([current]):nth-child(odd)::after{height:7rem;margin-top:0.6rem}.progressbar-level-percentage{font-size:0.75em;position:absolute;left:50%;transform:translateX(-50%);top:-3.2rem}[current]>.progressbar-level-percentage{display:none}pn-bonus-progressbar-level:not([current]):nth-child(odd) .progressbar-level-percentage{top:-4.8rem}.progressbar-level-value{font-size:0.75em;white-space:nowrap;position:absolute;left:50%;transform:translateX(-50%);top:2.3rem}[current]>.progressbar-level-value{top:-3.2rem}pn-bonus-progressbar-level:not([current]):nth-child(odd) .progressbar-level-value{top:4.2rem}";
 const PnBonusProgressbarLevelStyle0 = pnBonusProgressbarLevelCss;
 
 const PnBonusProgressbarLevel = class {

package/esm/pn-bonus-progressbar-level.entry.js.map

@@ -1 +1 @@
-{"file":"pn-bonus-progressbar-level.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,w6BAAw6B,CAAC;AAC58B,sCAAe,0BAA0B;;MCK5B,uBAAuB;;;uBAGU,KAAK;qBACO,CAAC;+BACS,EAAE;gCACD,CAAC;0BAEtC,CAAC;mBAER,CAAC;mBACD,CAAC;wBACI,EAAE;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACtF,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAEhD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;;YAE7B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KACxG;IACD,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC/F;IACD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,IAChD,4DAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,eAAe,CAAO,EACtE,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAC1D,EACP;KACH;;;;;;","names":[],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.scss?tag=pn-bonus-progressbar-level","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar-level {\n  position: absolute;\n  width: 0.1rem;\n  left: 50%;\n  &::after {\n    content: '';\n    width: 0.1rem;\n    position: absolute;\n    left: 0;\n    border-left: 1px dashed #9b1c2e;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 3rem;\n  }\n  &:not([current]):nth-child(odd) {\n    &::after {\n      height: 7rem;\n      margin-top: 0.6rem;\n    }\n  }\n}\n\n.progressbar-level-percentage {\n  font-size: 0.75em;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: -3.2rem;\n  [current] > & {\n    display: none;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: -4.8rem;\n  }\n}\n\n.progressbar-level-value {\n  font-size: 0.75em;\n  white-space: nowrap;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 2.3rem;\n  [current] > & {\n    top: -3.2rem;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: 4.2rem;\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar-level',\n  styleUrl: 'pn-bonus-progressbar-level.scss',\n})\nexport class PnBonusProgressbarLevel {\n  @Element() hostElement: HTMLElement;\n\n  @Prop({ reflect: true }) current: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) bonuspercentage: string = '';\n  @Prop({ reflect: true, mutable: true }) visualpercentage: number = 0;\n\n  @State() percentage: number = 0;\n\n  @State() max: number = 0;\n  @State() min: number = 0;\n  @State() currency: string = '';\n\n  componentWillLoad() {\n    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);\n    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);\n    this.currency = this.hostElement.parentElement.parentElement.getAttribute('currency');\n    this.percentage = (this.value / this.max) * 100;\n\n    if (this.visualpercentage > 0) {\n      // Visual percentage has been overriden\n      return;\n    }\n    this.visualpercentage = this.value === 0 ? 0 : ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n  formatValue() {\n    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;\n  }\n  render() {\n    return (\n      <Host style={{ left: `${this.visualpercentage}%` }}>\n        <div class=\"progressbar-level-percentage\">{this.bonuspercentage}</div>\n        <div class=\"progressbar-level-value\">{this.formatValue()}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-bonus-progressbar-level.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,ivCAAivC,CAAC;AACrxC,sCAAe,0BAA0B;;MCK5B,uBAAuB;;;uBAGU,KAAK;qBACO,CAAC;+BACS,EAAE;gCACD,CAAC;0BAEtC,CAAC;mBAER,CAAC;mBACD,CAAC;wBACI,EAAE;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACtF,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAEhD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;;YAE7B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KACxG;IACD,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC/F;IACD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,IAChD,4DAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,eAAe,CAAO,EACtE,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAC1D,EACP;KACH;;;;;;","names":[],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.scss?tag=pn-bonus-progressbar-level","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar-level {\n  position: absolute;\n  width: 0.1rem;\n  left: 50%;\n  &::after {\n    content: '';\n    width: 0.1rem;\n    position: absolute;\n    left: 0;\n    border-left: 1px dashed #9b1c2e;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 3rem;\n  }\n  &:not([current]):nth-child(odd) {\n    &::after {\n      height: 7rem;\n      margin-top: 0.6rem;\n    }\n  }\n}\n\n.progressbar-level-percentage {\n  font-size: 0.75em;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: -3.2rem;\n  [current] > & {\n    display: none;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: -4.8rem;\n  }\n}\n\n.progressbar-level-value {\n  font-size: 0.75em;\n  white-space: nowrap;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 2.3rem;\n  [current] > & {\n    top: -3.2rem;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: 4.2rem;\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar-level',\n  styleUrl: 'pn-bonus-progressbar-level.scss',\n})\nexport class PnBonusProgressbarLevel {\n  @Element() hostElement: HTMLElement;\n\n  @Prop({ reflect: true }) current: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) bonuspercentage: string = '';\n  @Prop({ reflect: true, mutable: true }) visualpercentage: number = 0;\n\n  @State() percentage: number = 0;\n\n  @State() max: number = 0;\n  @State() min: number = 0;\n  @State() currency: string = '';\n\n  componentWillLoad() {\n    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);\n    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);\n    this.currency = this.hostElement.parentElement.parentElement.getAttribute('currency');\n    this.percentage = (this.value / this.max) * 100;\n\n    if (this.visualpercentage > 0) {\n      // Visual percentage has been overriden\n      return;\n    }\n    this.visualpercentage = this.value === 0 ? 0 : ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n  formatValue() {\n    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;\n  }\n  render() {\n    return (\n      <Host style={{ left: `${this.visualpercentage}%` }}>\n        <div class=\"progressbar-level-percentage\">{this.bonuspercentage}</div>\n        <div class=\"progressbar-level-value\">{this.formatValue()}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/esm/pn-bonus-progressbar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
 
-const pnBonusProgressbarCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:flex;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#e0f8ff}[theme=red] .bonusprogressbar-top-icon{background-color:#fbc2c1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-sumtext{margin-top:0.4rem;font-size:1.3rem;color:#5e554a}.bonusprogressbar-top-percentage{margin-left:0.8rem;padding:0}.bonusprogressbar-wrapper{position:relative;display:flex;min-height:5em;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00a0d6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#f06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#e0f8ff}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#fdefee}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00a0d6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#f06365}";
+const pnBonusProgressbarCss = "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-bonus-progressbar{width:100%}.bonusprogressbar-top{display:flex;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#e0f8ff}[theme=red] .bonusprogressbar-top-icon{background-color:#fbc2c1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-sumtext{margin-top:0.4rem;font-size:1.3rem;color:#5e554a}.bonusprogressbar-top-percentage{margin-left:0.8rem;padding:0}.bonusprogressbar-wrapper{position:relative;display:flex;min-height:5em;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00a0d6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#f06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#e0f8ff}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#fdefee}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00a0d6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#f06365}";
 const PnBonusProgressbarStyle0 = pnBonusProgressbarCss;
 
 const PnBonusProgressbar = class {

package/esm/pn-bonus-progressbar.entry.js.map

@@ -1 +1 @@
-{"file":"pn-bonus-progressbar.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.scss?tag=pn-bonus-progressbar","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar {\n  width: 100%;\n}\n\n.bonusprogressbar-top {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1.6rem;\n}\n\n.bonusprogressbar-top-icon {\n  border-radius: 100%;\n  height: 5rem;\n  width: 5rem;\n  padding: 1rem;\n  display: inline-flex;\n  margin-right: 1em;\n  margin-left: 0.5em;\n  background-color: #e0f8ff;\n  [theme='red'] & {\n    background-color: #fbc2c1;\n  }\n  pn-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n.bonusprogressbar-top-heading {\n}\n.bonusprogressbar-top-headline {\n}\n\n.bonusprogressbar-sumtext {\n  margin-top: 0.4rem;\n  font-size: 1.3rem;\n  color: $gray700;\n}\n.bonusprogressbar-top-percentage {\n  //margin-left:auto;\n  margin-left: 0.8rem;\n  padding: 0;\n}\n\n.bonusprogressbar-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 5em;\n  align-items: center;\n}\n\n.bonusprogressbar-currentlevel {\n  position: absolute;\n}\n.bonusprogressbar-progress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  width: 100%;\n  height: 1.7rem;\n\n  border: 0.1rem solid #00a0d6;\n  [theme='red'] & {\n    border-color: #f06365;\n  }\n  border-radius: 1.7rem;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  &::-webkit-progress-bar {\n    border: 0;\n    border-radius: 1.7rem;\n    margin: 0;\n    padding: 0;\n    background: #e0f8ff;\n\n    [theme='red'] & {\n      background: #fdefee;\n    }\n  }\n  &::-webkit-progress-value {\n    margin: 0;\n    padding: 0;\n    border-radius: 1.7rem;\n    background: #00a0d6;\n    [theme='red'] & {\n      background: #f06365;\n    }\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar',\n  styleUrl: 'pn-bonus-progressbar.scss',\n})\nexport class PnBonusProgressbar {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() icon: string = null;\n  @Prop() heading: string = '';\n  @Prop({ reflect: true }) sumtext: string = null;\n  @Prop({ reflect: true }) theme: string = 'blue';\n  @Prop() bonuspercentage: string = '0%';\n  @Prop({ reflect: true }) currency: string = 'kr';\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) min: number = 0;\n  @Prop({ reflect: true, mutable: true }) max: number = 0;\n\n  @State() valuepercentage: number = 0;\n  @State() progresspercentage: number = 0;\n  @State() levelValues: number[] = [];\n  @State() currentLevelAdjustedValue: number = 0;\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this.setValuePercentage();\n  }\n\n  setInitialValues() {\n    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));\n    this.currentLevelAdjustedValue = this.value;\n    this.levelValues = levelElements.map(elm => {\n      return parseInt(elm.getAttribute('value'), 10);\n    });\n    if (!this.max) {\n      if (this.levelValues && this.levelValues.length > 0) {\n        const newMax = this.levelValues.slice(-1)[0] as number;\n        let modifier = 1.05;\n        if (this.value > newMax) {\n          modifier = 1.2;\n        }\n        this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      }\n    }\n\n    // if (!this.min) {\n    //   const suggestedMin = Math.floor(this.value * 0.9);\n    //   if (suggestedMin > 0) {\n    //     this.min = suggestedMin;\n    //   }\n    // }\n\n    if (this.value > this.max) {\n      this.currentLevelAdjustedValue = 100;\n    }\n  }\n\n  @Watch('currentLevelAdjustedValue')\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  setValuePercentage() {\n    this.valuepercentage = (this.value / this.max) * 100;\n    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;\n    if (this.progresspercentage < 0) {\n      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {\n        this.min = Math.floor(this.levelValues[0] * 0.95);\n      } else {\n        this.min = Math.floor(this.value * 0.95);\n      }\n    }\n\n    if (this.progresspercentage > 100) {\n      this.progresspercentage = 100;\n      const newMax = this.levelValues.slice(-1)[0] as number;\n      let modifier = 1.05;\n      if (this.value > newMax) {\n        modifier = 1.2;\n      }\n      this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      // this.max = Math.floor(newMax * 1.20);\n    }\n  }\n\n  iconColor() {\n    switch (this.theme) {\n      case 'red':\n        return 'coral700';\n      case 'blue':\n      default:\n        return 'blue700';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"bonusprogressbar-top\">\n          {this.icon ? (\n            <div class=\"bonusprogressbar-top-icon\">\n              <pn-icon icon={this.icon} small=\"false\" color={this.iconColor()} />\n            </div>\n          ) : (\n            {}\n          )}\n          <div class=\"bonusprogressbar-top-heading\">\n            <h4 class=\"bonusprogressbar-top-headline\">\n              {this.heading} <strong class=\"bonusprogressbar-top-percentage\">{this.bonuspercentage}</strong>\n            </h4>\n            {this.sumtext ? <div class=\"bonusprogressbar-sumtext\">{this.sumtext}</div> : null}\n          </div>\n        </div>\n\n        <div class=\"bonusprogressbar-wrapper\">\n          <progress class=\"bonusprogressbar-progress\" value={this.progresspercentage} max=\"100\"></progress>\n          {/* <pn-bonus-progressbar-level current={true} value={this.value} visualpercentage={this.currentLevelAdjustedValue} bonuspercentage={this.bonuspercentage}></pn-bonus-progressbar-level> */}\n          {/* <div class=\"bonusprogressbar-currentlevel\" style={ {'left':`%`} }></div> */}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-bonus-progressbar.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.scss?tag=pn-bonus-progressbar","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar {\n  width: 100%;\n}\n\n.bonusprogressbar-top {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1.6rem;\n}\n\n.bonusprogressbar-top-icon {\n  border-radius: 100%;\n  height: 5rem;\n  width: 5rem;\n  padding: 1rem;\n  display: inline-flex;\n  margin-right: 1em;\n  margin-left: 0.5em;\n  background-color: #e0f8ff;\n  [theme='red'] & {\n    background-color: #fbc2c1;\n  }\n  pn-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n.bonusprogressbar-top-heading {\n}\n.bonusprogressbar-top-headline {\n}\n\n.bonusprogressbar-sumtext {\n  margin-top: 0.4rem;\n  font-size: 1.3rem;\n  color: $gray700;\n}\n.bonusprogressbar-top-percentage {\n  //margin-left:auto;\n  margin-left: 0.8rem;\n  padding: 0;\n}\n\n.bonusprogressbar-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 5em;\n  align-items: center;\n}\n\n.bonusprogressbar-currentlevel {\n  position: absolute;\n}\n.bonusprogressbar-progress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  width: 100%;\n  height: 1.7rem;\n\n  border: 0.1rem solid #00a0d6;\n  [theme='red'] & {\n    border-color: #f06365;\n  }\n  border-radius: 1.7rem;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  &::-webkit-progress-bar {\n    border: 0;\n    border-radius: 1.7rem;\n    margin: 0;\n    padding: 0;\n    background: #e0f8ff;\n\n    [theme='red'] & {\n      background: #fdefee;\n    }\n  }\n  &::-webkit-progress-value {\n    margin: 0;\n    padding: 0;\n    border-radius: 1.7rem;\n    background: #00a0d6;\n    [theme='red'] & {\n      background: #f06365;\n    }\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar',\n  styleUrl: 'pn-bonus-progressbar.scss',\n})\nexport class PnBonusProgressbar {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() icon: string = null;\n  @Prop() heading: string = '';\n  @Prop({ reflect: true }) sumtext: string = null;\n  @Prop({ reflect: true }) theme: string = 'blue';\n  @Prop() bonuspercentage: string = '0%';\n  @Prop({ reflect: true }) currency: string = 'kr';\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) min: number = 0;\n  @Prop({ reflect: true, mutable: true }) max: number = 0;\n\n  @State() valuepercentage: number = 0;\n  @State() progresspercentage: number = 0;\n  @State() levelValues: number[] = [];\n  @State() currentLevelAdjustedValue: number = 0;\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this.setValuePercentage();\n  }\n\n  setInitialValues() {\n    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));\n    this.currentLevelAdjustedValue = this.value;\n    this.levelValues = levelElements.map(elm => {\n      return parseInt(elm.getAttribute('value'), 10);\n    });\n    if (!this.max) {\n      if (this.levelValues && this.levelValues.length > 0) {\n        const newMax = this.levelValues.slice(-1)[0] as number;\n        let modifier = 1.05;\n        if (this.value > newMax) {\n          modifier = 1.2;\n        }\n        this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      }\n    }\n\n    // if (!this.min) {\n    //   const suggestedMin = Math.floor(this.value * 0.9);\n    //   if (suggestedMin > 0) {\n    //     this.min = suggestedMin;\n    //   }\n    // }\n\n    if (this.value > this.max) {\n      this.currentLevelAdjustedValue = 100;\n    }\n  }\n\n  @Watch('currentLevelAdjustedValue')\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  setValuePercentage() {\n    this.valuepercentage = (this.value / this.max) * 100;\n    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;\n    if (this.progresspercentage < 0) {\n      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {\n        this.min = Math.floor(this.levelValues[0] * 0.95);\n      } else {\n        this.min = Math.floor(this.value * 0.95);\n      }\n    }\n\n    if (this.progresspercentage > 100) {\n      this.progresspercentage = 100;\n      const newMax = this.levelValues.slice(-1)[0] as number;\n      let modifier = 1.05;\n      if (this.value > newMax) {\n        modifier = 1.2;\n      }\n      this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      // this.max = Math.floor(newMax * 1.20);\n    }\n  }\n\n  iconColor() {\n    switch (this.theme) {\n      case 'red':\n        return 'coral700';\n      case 'blue':\n      default:\n        return 'blue700';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"bonusprogressbar-top\">\n          {this.icon ? (\n            <div class=\"bonusprogressbar-top-icon\">\n              <pn-icon icon={this.icon} small=\"false\" color={this.iconColor()} />\n            </div>\n          ) : (\n            {}\n          )}\n          <div class=\"bonusprogressbar-top-heading\">\n            <h4 class=\"bonusprogressbar-top-headline\">\n              {this.heading} <strong class=\"bonusprogressbar-top-percentage\">{this.bonuspercentage}</strong>\n            </h4>\n            {this.sumtext ? <div class=\"bonusprogressbar-sumtext\">{this.sumtext}</div> : null}\n          </div>\n        </div>\n\n        <div class=\"bonusprogressbar-wrapper\">\n          <progress class=\"bonusprogressbar-progress\" value={this.progresspercentage} max=\"100\"></progress>\n          {/* <pn-bonus-progressbar-level current={true} value={this.value} visualpercentage={this.currentLevelAdjustedValue} bonuspercentage={this.bonuspercentage}></pn-bonus-progressbar-level> */}\n          {/* <div class=\"bonusprogressbar-currentlevel\" style={ {'left':`%`} }></div> */}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/esm/pn-breakpoints.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
 
-const pnBreakpointsCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-breakpoints{width:100%}pn-breakpoints .breakpoints--dotcom{width:100%;background-color:aliceblue;text-align:center;margin-bottom:2.4rem;background-color:aliceblue}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"less than 321\"}@media screen and (min-width: 321px){pn-breakpoints .breakpoints--dotcom{background-color:yellow}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"321 (xs)\"}}@media screen and (min-width: 576px){pn-breakpoints .breakpoints--dotcom{background-color:aqua}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"576 (sm)\"}}@media screen and (min-width: 768px){pn-breakpoints .breakpoints--dotcom{background-color:red;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"768 (md)\"}}@media screen and (min-width: 992px){pn-breakpoints .breakpoints--dotcom{background-color:green;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"992 (lg)\"}}@media screen and (min-width: 1200px){pn-breakpoints .breakpoints--dotcom{background-color:blue;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1200 (xl)\"}}@media screen and (min-width: 1640px){pn-breakpoints .breakpoints--dotcom{background-color:pink}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1640 (xxl)\"}}@media screen and (min-width: 1920px){pn-breakpoints .breakpoints--dotcom{background-color:orange}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1920 (fhd)\"}}";
+const pnBreakpointsCss = "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-breakpoints{width:100%}pn-breakpoints .breakpoints--dotcom{width:100%;background-color:aliceblue;text-align:center;margin-bottom:2.4rem;background-color:aliceblue}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"less than 321\"}@media screen and (min-width: 321px){pn-breakpoints .breakpoints--dotcom{background-color:yellow}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"321 (xs)\"}}@media screen and (min-width: 576px){pn-breakpoints .breakpoints--dotcom{background-color:aqua}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"576 (sm)\"}}@media screen and (min-width: 768px){pn-breakpoints .breakpoints--dotcom{background-color:red;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"768 (md)\"}}@media screen and (min-width: 992px){pn-breakpoints .breakpoints--dotcom{background-color:green;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"992 (lg)\"}}@media screen and (min-width: 1200px){pn-breakpoints .breakpoints--dotcom{background-color:blue;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1200 (xl)\"}}@media screen and (min-width: 1640px){pn-breakpoints .breakpoints--dotcom{background-color:pink}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1640 (xxl)\"}}@media screen and (min-width: 1920px){pn-breakpoints .breakpoints--dotcom{background-color:orange}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1920 (fhd)\"}}";
 const PnBreakpointsStyle0 = pnBreakpointsCss;
 
 const PnBreakpoints = class {
@@ -17,7 +17,7 @@ const PnBreakpoints = class {
         return `breakpoints--${this.breakPointClass}`;
     }
     render() {
-        return (h(Host, { key: 'a1f67a4097091abb139c9cd26d54a0511882319e' }, h("div", { key: 'a317df5e779ed01225fea75bb3ed1cb551ae8fd9', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { key: 'c0cc0a776857347e1bd8e2f77734d798656dc78a', class: "reference" }, ' px'))));
+        return (h(Host, { key: '4e8d9d6c9a4f5b87fbe8c6a9b81daa1a289fae2a' }, h("div", { key: '3933fb359e312456aa5604fd24358fea69834048', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { key: '608792f6cd68b21ce5e14c9114ce47188e68c181', class: "reference" }, ' px'))));
     }
 };
 PnBreakpoints.style = PnBreakpointsStyle0;

package/esm/pn-breakpoints.entry.js.map

@@ -1 +1 @@
-{"file":"pn-breakpoints.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,yiDAAyiD,CAAC;AACnkD,4BAAe,gBAAgB;;MCKlB,aAAa;;;4BAEQ,MAAM,CAAC,UAAU;+BACf,QAAQ;;;IAG1C,wBAAwB,CAAC,KAAU;QACjC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;KAC7C;IAED,qBAAqB;QACnB,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,qBAAqB,EAAE,GAAG,IACvD,GAAG,IAAI,CAAC,YAAY,KAAK,EACzB,cAAc,EACf,6DAAM,KAAK,EAAC,WAAW,IAAE,KAAK,CAAQ,CAClC,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/utilities/pn-breakpoints/pn-breakpoints.scss?tag=pn-breakpoints","src/components/utilities/pn-breakpoints/pn-breakpoints.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\npn-breakpoints {\n  width: 100%;\n  .breakpoints {\n    &--dotcom {\n      width: 100%;\n      background-color: aliceblue;\n      text-align: center;\n      margin-bottom: 2.4rem;\n\n      background-color: aliceblue;\n      .reference::before {\n        content: 'less than 321';\n      }\n\n      @media screen and (min-width: 321px) {\n        background-color: yellow;\n        .reference::before {\n          content: '321 (xs)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-sm) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-lg) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\n        background-color: pink;\n        .reference::before {\n          content: '1640 (xxl)';\n        }\n      }\n\n      @media screen and (min-width: 1920px) {\n        background-color: orange;\n        .reference::before {\n          content: '1920 (fhd)';\n        }\n      }\n    }\n\n    &--tpl {\n      //define breakpoints here\n    }\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-breakpoints',\n  styleUrl: 'pn-breakpoints.scss',\n})\nexport class PnBreakpoints {\n  @Element() hostElement: HTMLElement;\n  @State() currentWidth: number = window.innerWidth;\n  @Prop() breakPointClass: string = 'dotcom';\n\n  @Listen('resize', { target: 'window' })\n  handleViewportSizeChange(event: any) {\n    this.currentWidth = event.target.innerWidth;\n  }\n\n  createBreakpointClass() {\n    return `breakpoints--${this.breakPointClass}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`breakpoints ${this.createBreakpointClass()} `}>\n          {`${this.currentWidth} px`}\n          {' min-width: '}\n          <span class=\"reference\">{' px'}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-breakpoints.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,k3DAAk3D,CAAC;AAC54D,4BAAe,gBAAgB;;MCKlB,aAAa;;;4BAEQ,MAAM,CAAC,UAAU;+BACf,QAAQ;;;IAG1C,wBAAwB,CAAC,KAAU;QACjC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;KAC7C;IAED,qBAAqB;QACnB,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,qBAAqB,EAAE,GAAG,IACvD,GAAG,IAAI,CAAC,YAAY,KAAK,EACzB,cAAc,EACf,6DAAM,KAAK,EAAC,WAAW,IAAE,KAAK,CAAQ,CAClC,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/utilities/pn-breakpoints/pn-breakpoints.scss?tag=pn-breakpoints","src/components/utilities/pn-breakpoints/pn-breakpoints.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\npn-breakpoints {\n  width: 100%;\n  .breakpoints {\n    &--dotcom {\n      width: 100%;\n      background-color: aliceblue;\n      text-align: center;\n      margin-bottom: 2.4rem;\n\n      background-color: aliceblue;\n      .reference::before {\n        content: 'less than 321';\n      }\n\n      @media screen and (min-width: 321px) {\n        background-color: yellow;\n        .reference::before {\n          content: '321 (xs)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-sm) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-lg) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\n        background-color: pink;\n        .reference::before {\n          content: '1640 (xxl)';\n        }\n      }\n\n      @media screen and (min-width: 1920px) {\n        background-color: orange;\n        .reference::before {\n          content: '1920 (fhd)';\n        }\n      }\n    }\n\n    &--tpl {\n      //define breakpoints here\n    }\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-breakpoints',\n  styleUrl: 'pn-breakpoints.scss',\n})\nexport class PnBreakpoints {\n  @Element() hostElement: HTMLElement;\n  @State() currentWidth: number = window.innerWidth;\n  @Prop() breakPointClass: string = 'dotcom';\n\n  @Listen('resize', { target: 'window' })\n  handleViewportSizeChange(event: any) {\n    this.currentWidth = event.target.innerWidth;\n  }\n\n  createBreakpointClass() {\n    return `breakpoints--${this.breakPointClass}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`breakpoints ${this.createBreakpointClass()} `}>\n          {`${this.currentWidth} px`}\n          {' min-width: '}\n          <span class=\"reference\">{' px'}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/esm/pn-chart.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -16436,7 +16436,7 @@ const dataSetProps = (set, dataChartType) => {
     return { ...set, ...variant };
 };
 
-const pnChartCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-chart{display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:flex;justify-content:center;align-items:center;position:relative;width:100vw;height:30vh;padding:1.6rem 0}@media screen and (min-width: 1640px){pn-chart .chart-wrapper{padding:2.4rem 0}}pn-chart canvas.pnChart{width:100% !important}pn-chart[data-chart-type=bar] .chart-wrapper,pn-chart[data-chart-type=line] .chart-wrapper{min-height:100%;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.fullwidth pn-chart{justify-content:center}}@media screen and (min-width: 768px){.fullwidth pn-chart .chart-wrapper{height:40vh;width:30vw}}";
+const pnChartCss = "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-chart{display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:flex;justify-content:center;align-items:center;position:relative;width:100vw;height:30vh;padding:1.6rem 0}@media screen and (min-width: 1640px){pn-chart .chart-wrapper{padding:2.4rem 0}}pn-chart canvas.pnChart{width:100% !important}pn-chart[data-chart-type=bar] .chart-wrapper,pn-chart[data-chart-type=line] .chart-wrapper{min-height:100%;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.fullwidth pn-chart{justify-content:center}}@media screen and (min-width: 768px){.fullwidth pn-chart .chart-wrapper{height:40vh;width:30vw}}";
 const PnChartStyle0 = pnChartCss;
 
 const PnChart = class {