@postnord/pn-marketweb-components 3.4.35 → 3.4.37

package/cjs/pn-breakpoints.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-34e1c673.js');
 
-const pnBreakpointsCss = "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}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 {

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

@@ -1 +1 @@
-{"file":"pn-breakpoints.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,09CAA09C,CAAC;AACp/C,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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,eAAe,IAAI,CAAC,qBAAqB,EAAE,GAAG,IACvD,GAAG,IAAI,CAAC,YAAY,KAAK,EACzB,cAAc,EACfA,mEAAM,KAAK,EAAC,WAAW,IAAE,KAAK,CAAQ,CAClC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/utilities/pn-breakpoints/pn-breakpoints.scss?tag=pn-breakpoints","src/components/utilities/pn-breakpoints/pn-breakpoints.tsx"],"sourcesContent":["pn-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: 576px) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: 768px) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: 992px) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: 1200px) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: 1640px) {\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.cjs.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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,eAAe,IAAI,CAAC,qBAAqB,EAAE,GAAG,IACvD,GAAG,IAAI,CAAC,YAAY,KAAK,EACzB,cAAc,EACfA,mEAAM,KAAK,EAAC,WAAW,IAAE,KAAK,CAAQ,CAClC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/pn-chart.cjs.entry.js

@@ -16440,7 +16440,7 @@ const dataSetProps = (set, dataChartType) => {
     return { ...set, ...variant };
 };
 
-const pnChartCss = "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}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 {