npm - @postnord/pn-marketweb-components - Versions diffs - 3.2.0 → 3.3.0 - Mend

@postnord/pn-marketweb-components 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/esm/pn-date-and-time.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-date-and-time.entry.js","mappings":";;AAAA,MAAM,IAAI,GAAG,4VAA4V,CAAC;AACnW,MAAM,iBAAiB,GAAG,IAAI;;ACDrC,MAAM,gBAAgB,GAAG,wbAAwb,CAAC;AACld,4BAAe,gBAAgB;;MCMlB,aAAa;;;;4BAQO,IAAI;gCACA,EAAE;iCACD,CAAC;qCACG,CAAC;4BACV,EAAE;8BACA,EAAE;8BACF,EAAE;+BACA,KAAK;+BACN,EAAE;wBAER,IAAI;uBACH,IAAI;yBACF,IAAI;yBACN,IAAI;+BACG,KAAK;4BACT,IAAI;gCACA,IAAI;+BACL,IAAI;8BACL,IAAI;6BACL,IAAI;oCACG,EAAE;mCACH,EAAE;;;IA3BzC,YAAY,GAAgB,IAAI,CAAC;IACjC,sBAAsB,GAAgB,IAAI,CAAC;IAC3C,wBAAwB,GAAgB,IAAI,CAAC;IAC7C,oBAAoB,GAAgB,IAAI,CAAC;IACzC,sBAAsB,GAAgB,IAAI,CAAC;IAyBlC,gBAAgB,CAAuB;IAEhD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,gBAAgB;QACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,MAAM,gBAAgB;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;KACxD;IAED,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC;QAE3D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAChE,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC;QAEzB,IAAI,CAAC,oBAAoB,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;QACjE,IAAI,CAAC,mBAAmB,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;KACpE;IAED,eAAe;QACb,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5E,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;SACnC;KACF;IAED,qBAAqB;QACnB,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;QACzB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAEvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAElF,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3F,IAAI,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7F,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzF,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC5F;IAED,YAAY,CAAC,CAAC;QACZ,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QAExB,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC;SAC9B;QAED,IAAI,MAAM,KAAK,IAAI,CAAC,sBAAsB,IAAI,MAAM,KAAK,IAAI,CAAC,wBAAwB,IAAI,MAAM,KAAK,IAAI,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,CAAC,sBAAsB,EAAE;YACxK,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;QAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,gBAAgB;QACd,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,WAAW,CAAC;QACtG,MAAM,aAAa,GAAG,IAAI,CAAC,wBAAwB,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,WAAW,CAAC;QACvG,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,WAAW,CAAC;QAClG,MAAM,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,WAAW,CAAC;QAEnG,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;QACjD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC/C,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;KAC5C;IAED,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAClI,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5H,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QAE7D,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YAC9C,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACrB;aAAM;YACL,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YACjE,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAE7D,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,gBAAgB,IAAI,OAAO,IAAI,IAAI,CAAC,cAAc,IAAI,KAAK,EAAE,CAAC;SAC9G;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC5C;IAED,iBAAiB,CAAC,IAAY,EAAE,EAAU;QACxC,IAAI,eAAe,GAAG,CAAC,EAAE,GAAG,IAAI,IAAI,IAAI,CAAC;QACzC,eAAe,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,qBAAqB,GAAG,IAAI,GAAG,KAAK,CAAC;KACpF;IAED,qBAAqB,CAAC,KAAa,EAAE,IAAY,EAAE,IAAY;QAC7D,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAa,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;QAC1G,MAAM,MAAM,GAAa,EAAE,CAAC;QAE5B,GAAG,CAAC,OAAO,CAAC,IAAI;YACd,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YACtD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC3B,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;KACf;IAED,sBAAsB;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QACrE,aAAa,CAAC,OAAO,CAAC,GAAG;YACvB,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,gBAAgB,IACpB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,iBAAQ,IAAI,CAAC,gBAAgB,CAAS,CAClC,IACJ,IAAI,EACR,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,uEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAiB,CAAC,EAClD,KAAK,EAAC,OAAO,sBACK,IAAI,CAAC,eAAe,cAC5B,IAAI,CAAC,oBAAoB,cACzB,IAAI,CAAC,mBAAmB,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,eAAe,GACjB,CACd,EAEL,IAAI,CAAC,cAAc,GAAG,aAAO,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,cAAc,CAAS,GAAG,IAAI,CACpG,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,kEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,sBAAsB,GAAG,EAAiB,CAAC,EAC5D,IAAI,EAAC,0BAA0B,EAC/B,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC5B,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAY,KAAK,iBAAW,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAc,CAAC,CAC7E,EACZ,kEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,wBAAwB,GAAG,EAAiB,CAAC,EAC9D,IAAI,EAAC,2BAA2B,EAChC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,MAAc,KAAK,iBAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAc,CAAC,CACrF,EACZ,4DAAK,KAAK,EAAC,gBAAgB,IACzB,mEAAc,CACV,EACN,kEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,oBAAoB,GAAG,EAAiB,CAAC,EAC1D,IAAI,EAAC,uBAAuB,EAC5B,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAC7B,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAY,KAAK,iBAAW,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAc,CAAC,CAC7E,EACZ,kEACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,sBAAsB,GAAG,EAAiB,CAAC,EAC5D,IAAI,EAAC,yBAAyB,EAC9B,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,MAAc,KAAK,iBAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAc,CAAC,CACrF,CACR,EACL,IAAI,CAAC,cAAc,GAAG,aAAO,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,cAAc,CAAS,GAAG,IAAI,EAEvG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,IACxC,aAAO,KAAK,EAAC,iCAAiC,IAC5C,eAAS,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,EACjE,IAAI,CAAC,YAAY,CACZ,IACN,IAAI,CACJ,CACD,EACP;KACH;;;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_info_circle.js","src/components/input/pn-date-and-time/pn-date-and-time.scss?tag=pn-date-and-time","src/components/input/pn-date-and-time/pn-date-and-time.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 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_info_circle = icon;\nexport const alertInfoCircle = icon;\n","@import '../../../globals/main.scss';\n\npn-date-and-time {\n label {\n color: $gray700;\n font-size: 1.4rem;\n }\n\n .time-separator {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .date-and-time-group {\n margin-bottom: 1rem;\n }\n .date-and-time-row {\n display: flex;\n gap: 1rem;\n }\n\n .helper-text {\n margin-top: 0.2rem;\n color: $gray700;\n display: block;\n }\n\n .error-message {\n color: #a70707;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Event, EventEmitter } from '@stencil/core';\nimport { alert_info_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-date-and-time',\n styleUrl: 'pn-date-and-time.scss',\n})\nexport class PnDateAndTime {\n @Element() hostElement: Element;\n pnDatePicker: HTMLElement = null;\n pnTimeFromHourDropdown: HTMLElement = null;\n pnTimeFromMinuteDropdown: HTMLElement = null;\n pnTimeToHourDropdown: HTMLElement = null;\n pnTimeToMinuteDropdown: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() dateAndTimeLabel: string = '';\n @Prop() dateDaysFromToday: number = 0;\n @Prop() validTimeRangeMinutes: number = 0;\n @Prop() errorMessage: string = '';\n @Prop() dateHelperText: string = '';\n @Prop() timeHelperText: string = '';\n @Prop() disableWeekends: boolean = false;\n @Prop() datePlacehodler: string = '';\n\n @State() language: string = null;\n @State() hourArr: string[] = null;\n @State() minuteArr: string[] = null;\n @State() formValue: string = null;\n @State() invalidTimespan: boolean = false;\n @State() selectedDate: string = null;\n @State() selectedFromHour: number = null;\n @State() selectedFromMin: number = null;\n @State() selectedToHour: number = null;\n @State() selectedToMin: number = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n\n @Event() dateandtimerange: EventEmitter<string>;\n\n componentWillLoad() {\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.setDefaultHiddenValue();\n this.addEventHandlers();\n }\n\n async setInitialValues() {\n this.setLangugaeCode();\n this.setFirstValidDate();\n\n this.hourArr = this.getNumbersAsStringArr(6, 22, 1);\n this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);\n }\n\n setFirstValidDate() {\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + 2;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n setLangugaeCode() {\n if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {\n this.language = document.querySelector('html').lang;\n } else {\n this.language = this.languageCode;\n }\n }\n\n setDefaultHiddenValue() {\n this.selectedFromHour = parseInt(this.hourArr[8]);\n this.selectedFromMin = 0;\n this.selectedToHour = parseInt(this.hourArr[12]);\n this.selectedToMin = 0;\n\n this.updateHiddenValue();\n }\n\n addEventHandlers() {\n this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));\n\n this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n }\n\n handleChange(e) {\n const target = e.target;\n\n if (target === this.pnDatePicker) {\n this.selectedDate = e.detail;\n }\n\n if (target === this.pnTimeFromHourDropdown \|\| target === this.pnTimeFromMinuteDropdown \|\| target === this.pnTimeToHourDropdown \|\| target === this.pnTimeToMinuteDropdown) {\n this.handleTimeChange();\n }\n\n this.updateHiddenValue();\n }\n\n handleTimeChange() {\n const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n\n this.selectedFromHour = parseInt(fromHourString);\n this.selectedFromMin = parseInt(fromMinString);\n this.selectedToHour = parseInt(toHourString);\n this.selectedToMin = parseInt(toMinString);\n }\n\n updateHiddenValue() {\n const date = new Date();\n const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);\n const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);\n this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());\n\n if (this.invalidTimespan \|\| !this.selectedDate) {\n this.formValue = '';\n } else {\n const fromMin = this.selectedFromMin.toString().padStart(2, '0');\n const toMin = this.selectedToMin.toString().padStart(2, '0');\n\n this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;\n }\n\n this.dateandtimerange.emit(this.formValue);\n }\n\n validateTimeRange(from: number, to: number) {\n let differenceValue = (to - from) / 1000;\n differenceValue /= 60;\n this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;\n }\n\n getNumbersAsStringArr(start: number, stop: number, step: number) {\n const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index: number) => start + index * step);\n const result: string[] = [];\n\n arr.forEach(item => {\n const itemAsString = item.toString().padStart(2, '0');\n result.push(itemAsString);\n });\n\n return result;\n }\n\n removePnOptionSelected() {\n const selectOptions = this.hostElement.querySelectorAll('pn-option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"date-and-time-group\">\n {this.dateAndTimeLabel ? (\n <div class=\"date-and-time-row\">\n <label>{this.dateAndTimeLabel}</label>\n </div>\n ) : null}\n <div class=\"date-and-time-row\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={this.disableWeekends}\n min-date={this.firstValidDateString}\n max-date={this.lastValidDateString}\n language={this.language}\n placeholder={this.datePlacehodler}\n ></pn-date-picker>\n </div>\n\n {this.dateHelperText ? <small class=\"date-and-time-row helper-text\">{this.dateHelperText}</small> : null}\n </div>\n <div class=\"date-and-time-group\">\n <div class=\"date-and-time-row\">\n <pn-select\n ref={el => (this.pnTimeFromHourDropdown = el as HTMLElement)}\n name=\"date-and-time-from-houre\"\n placeholder={this.hourArr[8]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-from-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLElement)}\n name=\"date-and-time-to-hour\"\n placeholder={this.hourArr[12]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-to-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n </div>\n {this.timeHelperText ? <small class=\"date-and-time-row helper-text\">{this.timeHelperText}</small> : null}\n\n {this.invalidTimespan && this.errorMessage ? (\n <small class=\"date-and-time-row error-message\">\n <pn-icon icon={alert_info_circle} small=\"false\" color=\"warning\" />\n {this.errorMessage}\n </small>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-date-and-time.entry.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_info_circle.js","src/components/input/pn-date-and-time/pn-date-and-time.scss?tag=pn-date-and-time","src/components/input/pn-date-and-time/pn-date-and-time.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 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_info_circle = icon;\nexport const alertInfoCircle = icon;\n","@import '../../../globals/main.scss';\n\npn-date-and-time {\n label {\n color: $gray700;\n font-size: 1.4rem;\n }\n\n .time-separator {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .date-and-time-group {\n margin-bottom: 1rem;\n }\n .date-and-time-row {\n display: flex;\n gap: 1rem;\n }\n\n .helper-text {\n margin-top: 0.2rem;\n color: $gray700;\n display: block;\n }\n\n .error-message {\n color: #a70707;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Event, EventEmitter } from '@stencil/core';\nimport { alert_info_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-date-and-time',\n styleUrl: 'pn-date-and-time.scss',\n})\nexport class PnDateAndTime {\n @Element() hostElement: Element;\n pnDatePicker: HTMLElement = null;\n pnTimeFromHourDropdown: HTMLElement = null;\n pnTimeFromMinuteDropdown: HTMLElement = null;\n pnTimeToHourDropdown: HTMLElement = null;\n pnTimeToMinuteDropdown: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() dateAndTimeLabel: string = '';\n @Prop() dateDaysFromToday: number = 0;\n @Prop() validTimeRangeMinutes: number = 0;\n @Prop() errorMessage: string = '';\n @Prop() dateHelperText: string = '';\n @Prop() timeHelperText: string = '';\n @Prop() disableWeekends: boolean = false;\n @Prop() datePlacehodler: string = '';\n\n @State() language: string = null;\n @State() hourArr: string[] = null;\n @State() minuteArr: string[] = null;\n @State() formValue: string = null;\n @State() invalidTimespan: boolean = false;\n @State() selectedDate: string = null;\n @State() selectedFromHour: number = null;\n @State() selectedFromMin: number = null;\n @State() selectedToHour: number = null;\n @State() selectedToMin: number = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n\n @Event() dateandtimerange: EventEmitter<string>;\n\n componentWillLoad() {\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.setDefaultHiddenValue();\n this.addEventHandlers();\n }\n\n async setInitialValues() {\n this.setLangugaeCode();\n this.setFirstValidDate();\n\n this.hourArr = this.getNumbersAsStringArr(6, 22, 1);\n this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);\n }\n\n setFirstValidDate() {\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + 2;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n setLangugaeCode() {\n if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {\n this.language = document.querySelector('html').lang;\n } else {\n this.language = this.languageCode;\n }\n }\n\n setDefaultHiddenValue() {\n this.selectedFromHour = parseInt(this.hourArr[8]);\n this.selectedFromMin = 0;\n this.selectedToHour = parseInt(this.hourArr[12]);\n this.selectedToMin = 0;\n\n this.updateHiddenValue();\n }\n\n addEventHandlers() {\n this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));\n\n this.pnTimeFromHourDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n this.pnTimeFromMinuteDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n this.pnTimeToHourDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n this.pnTimeToMinuteDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n }\n\n handleChange(e) {\n const target = e.target;\n\n if (target === this.pnDatePicker) {\n this.selectedDate = e.detail;\n }\n\n if (target === this.pnTimeFromHourDropdown \|\| target === this.pnTimeFromMinuteDropdown \|\| target === this.pnTimeToHourDropdown \|\| target === this.pnTimeToMinuteDropdown) {\n this.handleTimeChange();\n }\n\n this.updateHiddenValue();\n }\n\n handleTimeChange() {\n const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n\n this.selectedFromHour = parseInt(fromHourString);\n this.selectedFromMin = parseInt(fromMinString);\n this.selectedToHour = parseInt(toHourString);\n this.selectedToMin = parseInt(toMinString);\n }\n\n updateHiddenValue() {\n const date = new Date();\n const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);\n const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);\n this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());\n\n if (this.invalidTimespan \|\| !this.selectedDate) {\n this.formValue = '';\n } else {\n const fromMin = this.selectedFromMin.toString().padStart(2, '0');\n const toMin = this.selectedToMin.toString().padStart(2, '0');\n\n this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;\n }\n\n this.dateandtimerange.emit(this.formValue);\n }\n\n validateTimeRange(from: number, to: number) {\n let differenceValue = (to - from) / 1000;\n differenceValue /= 60;\n this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;\n }\n\n getNumbersAsStringArr(start: number, stop: number, step: number) {\n const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index: number) => start + index * step);\n const result: string[] = [];\n\n arr.forEach(item => {\n const itemAsString = item.toString().padStart(2, '0');\n result.push(itemAsString);\n });\n\n return result;\n }\n\n removePnOptionSelected() {\n const selectOptions = this.hostElement.querySelectorAll('pn-option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"date-and-time-group\">\n {this.dateAndTimeLabel ? (\n <div class=\"date-and-time-row\">\n <label>{this.dateAndTimeLabel}</label>\n </div>\n ) : null}\n <div class=\"date-and-time-row\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={this.disableWeekends}\n min-date={this.firstValidDateString}\n max-date={this.lastValidDateString}\n language={this.language}\n placeholder={this.datePlacehodler}\n ></pn-date-picker>\n </div>\n\n {this.dateHelperText ? <small class=\"date-and-time-row helper-text\">{this.dateHelperText}</small> : null}\n </div>\n <div class=\"date-and-time-group\">\n <div class=\"date-and-time-row\">\n <pn-select\n ref={el => (this.pnTimeFromHourDropdown = el as HTMLElement)}\n name=\"date-and-time-from-houre\"\n placeholder={this.hourArr[8]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-from-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLElement)}\n name=\"date-and-time-to-hour\"\n placeholder={this.hourArr[12]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-to-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n </div>\n {this.timeHelperText ? <small class=\"date-and-time-row helper-text\">{this.timeHelperText}</small> : null}\n\n {this.invalidTimespan && this.errorMessage ? (\n <small class=\"date-and-time-row error-message\">\n <pn-icon icon={alert_info_circle} small=\"false\" color=\"warning\" />\n {this.errorMessage}\n </small>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/esm/pn-teaser-card.entry.js CHANGED Viewed

@@ -15,14 +15,14 @@ const PnTeaserCard = class {
         this.hasIllustrationSlot = true;
     }
     get hostElement() { return getElement(this); }
-    labelToCapitals = this.label?.toUpperCase();
     componentWillLoad() {
         this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
         this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
     }
     //render
     render() {
-        return (h(Host, { key: '791b3dc0bb9f180af134c20ad6db6b30383fa22b' }, h("slot", { key: '5877ea4e196f8f8579ff49d2ff1422ee31681140', name: "clickable-block-wrapper" }), h("div", { key: '09428d901cd7946fd72084cd14a4a04101698b4b', class: "pn-teaser-card__container" }, h("div", { key: 'e9e5e1c3243886efd2bb4c75af6c7702081971e5', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: 'aca99666b8ff47fb02a990788d4e86a32d231cfe', name: "illustration" })), h("div", { key: 'f16f31b42437a48adaf8e7e56ecd8bec5c069946', class: "pn-teaser-card__container__content" }, h("div", { key: '7308c30884cd8ad391943652b90ba1f3a64fbf26', class: "pn-teaser-card__container__content__text__container" }, this.labelToCapitals && h("span", { key: 'a81ef74a015fbfc76193f1732c9fe6ae98b811db', class: "pn-teaser-card__container__content__text__container__label" }, this.labelToCapitals), h("h2", { key: '56f846822e14b3d5541fd049d9150ced61722f93', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: 'a7a74cbb08fe34c491b9ef426e4c50dbf0900f13', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: 'f2ff04dcb61429db60a5c0be06b6c0888a06fd34', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: 'e02486c130c31907aaf82123a550c27f6c6f6f92', name: "cta" })))))));
+        const labelToCapitals = this.label?.toUpperCase();
+        return (h(Host, { key: 'fdbbca9a340be605fab4928fd899e2ed7d6da987' }, h("slot", { key: '73c277568a6552fc2cdad9449c5805198f6c4c39', name: "clickable-block-wrapper" }), h("div", { key: '263a5919c76eb373958d3ef92aa90ed67656d25e', class: "pn-teaser-card__container" }, h("div", { key: '11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '71893f8f45c0275c68c59768582a663737fd5eea', name: "illustration" })), h("div", { key: '99a874f3c2a22983edcab63a018050d47cbdc5d0', class: "pn-teaser-card__container__content" }, h("div", { key: '451ae56adec502481416822c169a01774fa262aa', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '2dfcef1bf94c1caea50c0f86263fea71713bf572', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), h("h2", { key: 'bd796379bb1bb106aea2de582df537a804f4c415', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: 'ec25bea0041371fb67bb414cbc731d46234b118a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '6ebbe23c0584a63325e2faff4eb3979f804869aa', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '0a87639586c866e4e2439c67951362abe7a2f26d', name: "cta" })))))));
     }
 };
 PnTeaserCard.style = PnTeaserCardStyle0;

package/esm/pn-teaser-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;;IAH5C,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAK5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ,EAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACrH,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@postnord/pn-marketweb-components",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "PostNord Market Websites Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,8 @@
     "storybook": "storybook dev -p 6008 ",
     "build-storybook": "storybook build",
     "post:build": "node ./scripts/post_build.js",
-    "format": "cd src && npx prettier --write ."
+    "format": "cd src && npx prettier --write .",
+    "generate": "plop"
   },
   "devDependencies": {
     "@babel/core": "7.24.7",
@@ -59,6 +60,7 @@
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "npm-run-all": "4.1.5",
+    "plop": "4.0.1",
     "pn-design-assets": "1.8.1",
     "puppeteer": "^22.11.2",
     "sass": "^1.77.5",

package/pn-market-web-components/{p-0247c553.entry.js → p-73db2c9c.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,g as a,h as t,d as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";const c=r;const _=class{constructor(a){e(this,a);this.text=null;this.heading=null;this.label=null;this.dataCardColor="coral";this.dataCardAlignment="left";this.hasCtaSlotContent=false;this.hasIllustrationSlot=true}get hostElement(){return a(this)}labelToCapitals=this.label?.toUpperCase();componentWillLoad(){this.hasCtaSlotContent=!!this.hostElement.querySelector('[slot="cta"]');this.hasIllustrationSlot=!!this.hostElement.querySelector('[slot="illustration"]')}render(){return t(n,{key:"791b3dc0bb9f180af134c20ad6db6b30383fa22b"},t("slot",{key:"5877ea4e196f8f8579ff49d2ff1422ee31681140",name:"clickable-block-wrapper"}),t("div",{key:"09428d901cd7946fd72084cd14a4a04101698b4b",class:"pn-teaser-card__container"},t("div",{key:"e9e5e1c3243886efd2bb4c75af6c7702081971e5",class:`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot?"pn-teaser-card__container__image__container--no-image":""}`},t("slot",{key:"aca99666b8ff47fb02a990788d4e86a32d231cfe",name:"illustration"})),t("div",{key:"f16f31b42437a48adaf8e7e56ecd8bec5c069946",class:"pn-teaser-card__container__content"},t("div",{key:"7308c30884cd8ad391943652b90ba1f3a64fbf26",class:"pn-teaser-card__container__content__text__container"},this.labelToCapitals&&t("span",{key:"a81ef74a015fbfc76193f1732c9fe6ae98b811db",class:"pn-teaser-card__container__content__text__container__label"},this.labelToCapitals),t("h2",{key:"56f846822e14b3d5541fd049d9150ced61722f93",class:"pn-teaser-card__container__content__text__container__heading"},this.heading),t("p",{key:"a7a74cbb08fe34c491b9ef426e4c50dbf0900f13",class:"pn-teaser-card__container__content__text__container__preamble"},this.text)),this.hasCtaSlotContent&&t("div",{key:"f2ff04dcb61429db60a5c0be06b6c0888a06fd34",class:"pn-teaser-card__container__content__cta"},t("slot",{key:"e02486c130c31907aaf82123a550c27f6c6f6f92",name:"cta"})))))}};_.style=c;export{_ as pn_teaser_card};
-//# sourceMappingURL=p-0247c553.entry.js.map
+import{r as e,g as a,h as t,d as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";const c=r;const _=class{constructor(a){e(this,a);this.text=null;this.heading=null;this.label=null;this.dataCardColor="coral";this.dataCardAlignment="left";this.hasCtaSlotContent=false;this.hasIllustrationSlot=true}get hostElement(){return a(this)}componentWillLoad(){this.hasCtaSlotContent=!!this.hostElement.querySelector('[slot="cta"]');this.hasIllustrationSlot=!!this.hostElement.querySelector('[slot="illustration"]')}render(){const e=this.label?.toUpperCase();return t(n,{key:"fdbbca9a340be605fab4928fd899e2ed7d6da987"},t("slot",{key:"73c277568a6552fc2cdad9449c5805198f6c4c39",name:"clickable-block-wrapper"}),t("div",{key:"263a5919c76eb373958d3ef92aa90ed67656d25e",class:"pn-teaser-card__container"},t("div",{key:"11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99",class:`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot?"pn-teaser-card__container__image__container--no-image":""}`},t("slot",{key:"71893f8f45c0275c68c59768582a663737fd5eea",name:"illustration"})),t("div",{key:"99a874f3c2a22983edcab63a018050d47cbdc5d0",class:"pn-teaser-card__container__content"},t("div",{key:"451ae56adec502481416822c169a01774fa262aa",class:"pn-teaser-card__container__content__text__container"},e&&t("span",{key:"2dfcef1bf94c1caea50c0f86263fea71713bf572",class:"pn-teaser-card__container__content__text__container__label"},e),t("h2",{key:"bd796379bb1bb106aea2de582df537a804f4c415",class:"pn-teaser-card__container__content__text__container__heading"},this.heading),t("p",{key:"ec25bea0041371fb67bb414cbc731d46234b118a",class:"pn-teaser-card__container__content__text__container__preamble"},this.text)),this.hasCtaSlotContent&&t("div",{key:"6ebbe23c0584a63325e2faff4eb3979f804869aa",class:"pn-teaser-card__container__content__cta"},t("slot",{key:"0a87639586c866e4e2439c67951362abe7a2f26d",name:"cta"})))))}};_.style=c;export{_ as pn_teaser_card};
+//# sourceMappingURL=p-73db2c9c.entry.js.map

package/pn-market-web-components/{p-0247c553.entry.js.map → p-73db2c9c.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["pnTeaserCardCss","PnTeaserCardStyle0","PnTeaserCard","labelToCapitals","this","label","toUpperCase","componentWillLoad","hasCtaSlotContent","hostElement","querySelector","hasIllustrationSlot","render","h","Host","key","name","class","heading","text"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,i0RACxB,MAAAC,EAAeD,E,MCKFE,EAAY,M,mCAGA,K,aACG,K,WACD,K,mBACwB,Q,uBACI,O,uBAIf,M,yBACE,I,kCAHxCC,gBAAkBC,KAAKC,OAAOC,cAK9B,iBAAAC,GACEH,KAAKI,oBAAsBJ,KAAKK,YAAYC,cAAc,gBAC1DN,KAAKO,sBAAwBP,KAAKK,YAAYC,cAAc,wB,CAI9D,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,4BACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAO,gDAAgDb,KAAKO,oBAAsB,wDAA0D,MAC/IE,EAAA,QAAAE,IAAA,2CAAMC,KAAK,kBAEbH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sCACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uDACRb,KAAKD,iBAAmBU,EAAA,QAAAE,IAAA,2CAAME,MAAM,8DAA8Db,KAAKD,iBACxGU,EAAA,MAAAE,IAAA,2CAAIE,MAAM,gEAAgEb,KAAKc,SAC/EL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,iEAAiEb,KAAKe,OAEhFf,KAAKI,mBACJK,EAAA,OAAAE,IAAA,2CAAKE,MAAM,2CACTJ,EAAA,QAAAE,IAAA,2CAAMC,KAAK,W","ignoreList":[]}
1	+ {"version":3,"names":["pnTeaserCardCss","PnTeaserCardStyle0","PnTeaserCard","componentWillLoad","this","hasCtaSlotContent","hostElement","querySelector","hasIllustrationSlot","render","labelToCapitals","label","toUpperCase","h","Host","key","name","class","heading","text"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,i0RACxB,MAAAC,EAAeD,E,MCKFE,EAAY,M,mCAGA,K,aACG,K,WACD,K,mBACwB,Q,uBACI,O,uBAEf,M,yBACE,I,kCAExC,iBAAAC,GACEC,KAAKC,oBAAsBD,KAAKE,YAAYC,cAAc,gBAC1DH,KAAKI,sBAAwBJ,KAAKE,YAAYC,cAAc,wB,CAI9D,MAAAE,GACE,MAAMC,EAAkBN,KAAKO,OAAOC,cAEpC,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,4BACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAO,gDAAgDb,KAAKI,oBAAsB,wDAA0D,MAC/IK,EAAA,QAAAE,IAAA,2CAAMC,KAAK,kBAEbH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sCACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uDACRP,GAAmBG,EAAA,QAAAE,IAAA,2CAAME,MAAM,8DAA8DP,GAC9FG,EAAA,MAAAE,IAAA,2CAAIE,MAAM,gEAAgEb,KAAKc,SAC/EL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,iEAAiEb,KAAKe,OAEhFf,KAAKC,mBACJQ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,2CACTJ,EAAA,QAAAE,IAAA,2CAAMC,KAAK,W","ignoreList":[]}

package/pn-market-web-components/{p-a9d2f528.entry.js → p-d8a57eba.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,g as s,h as i,d as a}from"./p-06555615.js";const n='<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 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0" clip-rule="evenodd"/></svg>';const d=n;const h="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-date-and-time label{color:#5e554a;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5e554a;display:block}pn-date-and-time .error-message{color:#a70707}";const l=h;const o=class{constructor(s){t(this,s);this.dateandtimerange=e(this,"dateandtimerange",7);this.languageCode=null;this.dateAndTimeLabel="";this.dateDaysFromToday=0;this.validTimeRangeMinutes=0;this.errorMessage="";this.dateHelperText="";this.timeHelperText="";this.disableWeekends=false;this.datePlacehodler="";this.language=null;this.hourArr=null;this.minuteArr=null;this.formValue=null;this.invalidTimespan=false;this.selectedDate=null;this.selectedFromHour=null;this.selectedFromMin=null;this.selectedToHour=null;this.selectedToMin=null;this.firstValidDateString="";this.lastValidDateString=""}get hostElement(){return s(this)}pnDatePicker=null;pnTimeFromHourDropdown=null;pnTimeFromMinuteDropdown=null;pnTimeToHourDropdown=null;pnTimeToMinuteDropdown=null;dateandtimerange;componentWillLoad(){this.setInitialValues()}componentDidLoad(){this.setDefaultHiddenValue();this.addEventHandlers()}async setInitialValues(){this.setLangugaeCode();this.setFirstValidDate();this.hourArr=this.getNumbersAsStringArr(6,22,1);this.minuteArr=this.getNumbersAsStringArr(0,50,10)}setFirstValidDate(){const t=new Date;t.setDate(t.getDate()+this.dateDaysFromToday??0);const e=t.getFullYear();const s=(t.getMonth()+1).toString().padStart(2,"0");const i=t.getDate().toString().padStart(2,"0");const a=e+2;this.firstValidDateString=`${e.toString()}-${s}-${i}`;this.lastValidDateString=`${a.toString()}-${s}-${i}`}setLangugaeCode(){if(typeof this.languageCode==="string"&&this.languageCode.trim()===""){this.language=document.querySelector("html").lang}else{this.language=this.languageCode}}setDefaultHiddenValue(){this.selectedFromHour=parseInt(this.hourArr[8]);this.selectedFromMin=0;this.selectedToHour=parseInt(this.hourArr[12]);this.selectedToMin=0;this.updateHiddenValue()}addEventHandlers(){this.pnDatePicker.addEventListener("dateselection",this.handleChange.bind(this));this.pnTimeFromHourDropdown.addEventListener("selectchange",this.handleChange.bind(this));this.pnTimeFromMinuteDropdown.addEventListener("selectchange",this.handleChange.bind(this));this.pnTimeToHourDropdown.addEventListener("selectchange",this.handleChange.bind(this));this.pnTimeToMinuteDropdown.addEventListener("selectchange",this.handleChange.bind(this))}handleChange(t){const e=t.target;if(e===this.pnDatePicker){this.selectedDate=t.detail}if(e===this.pnTimeFromHourDropdown||e===this.pnTimeFromMinuteDropdown||e===this.pnTimeToHourDropdown||e===this.pnTimeToMinuteDropdown){this.handleTimeChange()}this.updateHiddenValue()}handleTimeChange(){const t=this.pnTimeFromHourDropdown.querySelector("[aria-selected=true]")?.textContent;const e=this.pnTimeFromMinuteDropdown.querySelector("[aria-selected=true]")?.textContent;const s=this.pnTimeToHourDropdown.querySelector("[aria-selected=true]")?.textContent;const i=this.pnTimeToMinuteDropdown.querySelector("[aria-selected=true]")?.textContent;this.selectedFromHour=parseInt(t);this.selectedFromMin=parseInt(e);this.selectedToHour=parseInt(s);this.selectedToMin=parseInt(i)}updateHiddenValue(){const t=new Date;const e=new Date(t.getFullYear(),t.getMonth(),t.getDate(),this.selectedFromHour,this.selectedFromMin,0,0);const s=new Date(t.getFullYear(),t.getMonth(),t.getDate(),this.selectedToHour,this.selectedToMin,0,0);this.validateTimeRange(e.getTime(),s.getTime());if(this.invalidTimespan||!this.selectedDate){this.formValue=""}else{const t=this.selectedFromMin.toString().padStart(2,"0");const e=this.selectedToMin.toString().padStart(2,"0");this.formValue=`${this.selectedDate}, ${this.selectedFromHour}:${t}-${this.selectedToHour}:${e}`}this.dateandtimerange.emit(this.formValue)}validateTimeRange(t,e){let s=(e-t)/1e3;s/=60;this.invalidTimespan=s<this.validTimeRangeMinutes?true:false}getNumbersAsStringArr(t,e,s){const i=Array.from({length:(e-t)/s+1},((e,i)=>t+i*s));const a=[];i.forEach((t=>{const e=t.toString().padStart(2,"0");a.push(e)}));return a}removePnOptionSelected(){const t=this.hostElement.querySelectorAll("pn-option");t.forEach((t=>{t.removeAttribute("selected")}))}render(){return i(a,{key:"6f7c0f1c403a98ceaadef017f6dfe94e4d09ab06"},i("div",{key:"c4f95d2e042277cd090fa8a8ce4dd6cd357943ad",class:"date-and-time-group"},this.dateAndTimeLabel?i("div",{class:"date-and-time-row"},i("label",null,this.dateAndTimeLabel)):null,i("div",{key:"2c772ab7b24783c634a06879cfede0eaf05952d6",class:"date-and-time-row"},i("pn-date-picker",{key:"6a427ea028bf55b067b0885e2d3b97a0349acdd3",ref:t=>this.pnDatePicker=t,range:"false","disable-weekends":this.disableWeekends,"min-date":this.firstValidDateString,"max-date":this.lastValidDateString,language:this.language,placeholder:this.datePlacehodler})),this.dateHelperText?i("small",{class:"date-and-time-row helper-text"},this.dateHelperText):null),i("div",{key:"7f74f041493bb4da72d070e90d24d38441c5ebb9",class:"date-and-time-group"},i("div",{key:"7b7b4b4ba67f36cf03c4ee6b80a3cdd55a5c8380",class:"date-and-time-row"},i("pn-select",{key:"d5d6fe2b881a8770fc1aec24bce38754b6a17db0",ref:t=>this.pnTimeFromHourDropdown=t,name:"date-and-time-from-houre",placeholder:this.hourArr[8],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.hourArr?.map((t=>i("pn-option",{label:t,value:t})))),i("pn-select",{key:"bb8dafe866a95e94e0e8a1e53ccff80d0729ec48",ref:t=>this.pnTimeFromMinuteDropdown=t,name:"date-and-time-from-minute",placeholder:this.minuteArr[0],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.minuteArr?.map((t=>i("pn-option",{label:t,value:t})))),i("div",{key:"8281bbfae49ca8ec35a1d651d61a1bd478b70c0a",class:"time-separator"},i("span",{key:"d7c895902ce3efac4816f21510444914012fca29"},"-")),i("pn-select",{key:"5fa29d4fc4d01a804427bd2119969ec0d6346df6",ref:t=>this.pnTimeToHourDropdown=t,name:"date-and-time-to-hour",placeholder:this.hourArr[12],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.hourArr?.map((t=>i("pn-option",{label:t,value:t})))),i("pn-select",{key:"968f33b37cad6d2528a789abd63a89c163642c53",ref:t=>this.pnTimeToMinuteDropdown=t,name:"date-and-time-to-minute",placeholder:this.minuteArr[0],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.minuteArr?.map((t=>i("pn-option",{label:t,value:t}))))),this.timeHelperText?i("small",{class:"date-and-time-row helper-text"},this.timeHelperText):null,this.invalidTimespan&&this.errorMessage?i("small",{class:"date-and-time-row error-message"},i("pn-icon",{icon:d,small:"false",color:"warning"}),this.errorMessage):null))}};o.style=l;export{o as pn_date_and_time};
-//# sourceMappingURL=p-a9d2f528.entry.js.map
+import{r as t,c as e,g as s,h as i,d as a}from"./p-06555615.js";const n='<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 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0" clip-rule="evenodd"/></svg>';const d=n;const l="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-date-and-time label{color:#5e554a;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5e554a;display:block}pn-date-and-time .error-message{color:#a70707}";const h=l;const o=class{constructor(s){t(this,s);this.dateandtimerange=e(this,"dateandtimerange",7);this.languageCode=null;this.dateAndTimeLabel="";this.dateDaysFromToday=0;this.validTimeRangeMinutes=0;this.errorMessage="";this.dateHelperText="";this.timeHelperText="";this.disableWeekends=false;this.datePlacehodler="";this.language=null;this.hourArr=null;this.minuteArr=null;this.formValue=null;this.invalidTimespan=false;this.selectedDate=null;this.selectedFromHour=null;this.selectedFromMin=null;this.selectedToHour=null;this.selectedToMin=null;this.firstValidDateString="";this.lastValidDateString=""}get hostElement(){return s(this)}pnDatePicker=null;pnTimeFromHourDropdown=null;pnTimeFromMinuteDropdown=null;pnTimeToHourDropdown=null;pnTimeToMinuteDropdown=null;dateandtimerange;componentWillLoad(){this.setInitialValues()}componentDidLoad(){this.setDefaultHiddenValue();this.addEventHandlers()}async setInitialValues(){this.setLangugaeCode();this.setFirstValidDate();this.hourArr=this.getNumbersAsStringArr(6,22,1);this.minuteArr=this.getNumbersAsStringArr(0,50,10)}setFirstValidDate(){const t=new Date;t.setDate(t.getDate()+this.dateDaysFromToday??0);const e=t.getFullYear();const s=(t.getMonth()+1).toString().padStart(2,"0");const i=t.getDate().toString().padStart(2,"0");const a=e+2;this.firstValidDateString=`${e.toString()}-${s}-${i}`;this.lastValidDateString=`${a.toString()}-${s}-${i}`}setLangugaeCode(){if(typeof this.languageCode==="string"&&this.languageCode.trim()===""){this.language=document.querySelector("html").lang}else{this.language=this.languageCode}}setDefaultHiddenValue(){this.selectedFromHour=parseInt(this.hourArr[8]);this.selectedFromMin=0;this.selectedToHour=parseInt(this.hourArr[12]);this.selectedToMin=0;this.updateHiddenValue()}addEventHandlers(){this.pnDatePicker.addEventListener("dateselection",this.handleChange.bind(this));this.pnTimeFromHourDropdown.addEventListener("selectOption",this.handleChange.bind(this));this.pnTimeFromMinuteDropdown.addEventListener("selectOption",this.handleChange.bind(this));this.pnTimeToHourDropdown.addEventListener("selectOption",this.handleChange.bind(this));this.pnTimeToMinuteDropdown.addEventListener("selectOption",this.handleChange.bind(this))}handleChange(t){const e=t.target;if(e===this.pnDatePicker){this.selectedDate=t.detail}if(e===this.pnTimeFromHourDropdown||e===this.pnTimeFromMinuteDropdown||e===this.pnTimeToHourDropdown||e===this.pnTimeToMinuteDropdown){this.handleTimeChange()}this.updateHiddenValue()}handleTimeChange(){const t=this.pnTimeFromHourDropdown.querySelector("[aria-selected=true]")?.textContent;const e=this.pnTimeFromMinuteDropdown.querySelector("[aria-selected=true]")?.textContent;const s=this.pnTimeToHourDropdown.querySelector("[aria-selected=true]")?.textContent;const i=this.pnTimeToMinuteDropdown.querySelector("[aria-selected=true]")?.textContent;this.selectedFromHour=parseInt(t);this.selectedFromMin=parseInt(e);this.selectedToHour=parseInt(s);this.selectedToMin=parseInt(i)}updateHiddenValue(){const t=new Date;const e=new Date(t.getFullYear(),t.getMonth(),t.getDate(),this.selectedFromHour,this.selectedFromMin,0,0);const s=new Date(t.getFullYear(),t.getMonth(),t.getDate(),this.selectedToHour,this.selectedToMin,0,0);this.validateTimeRange(e.getTime(),s.getTime());if(this.invalidTimespan||!this.selectedDate){this.formValue=""}else{const t=this.selectedFromMin.toString().padStart(2,"0");const e=this.selectedToMin.toString().padStart(2,"0");this.formValue=`${this.selectedDate}, ${this.selectedFromHour}:${t}-${this.selectedToHour}:${e}`}this.dateandtimerange.emit(this.formValue)}validateTimeRange(t,e){let s=(e-t)/1e3;s/=60;this.invalidTimespan=s<this.validTimeRangeMinutes?true:false}getNumbersAsStringArr(t,e,s){const i=Array.from({length:(e-t)/s+1},((e,i)=>t+i*s));const a=[];i.forEach((t=>{const e=t.toString().padStart(2,"0");a.push(e)}));return a}removePnOptionSelected(){const t=this.hostElement.querySelectorAll("pn-option");t.forEach((t=>{t.removeAttribute("selected")}))}render(){return i(a,{key:"6f7c0f1c403a98ceaadef017f6dfe94e4d09ab06"},i("div",{key:"c4f95d2e042277cd090fa8a8ce4dd6cd357943ad",class:"date-and-time-group"},this.dateAndTimeLabel?i("div",{class:"date-and-time-row"},i("label",null,this.dateAndTimeLabel)):null,i("div",{key:"2c772ab7b24783c634a06879cfede0eaf05952d6",class:"date-and-time-row"},i("pn-date-picker",{key:"6a427ea028bf55b067b0885e2d3b97a0349acdd3",ref:t=>this.pnDatePicker=t,range:"false","disable-weekends":this.disableWeekends,"min-date":this.firstValidDateString,"max-date":this.lastValidDateString,language:this.language,placeholder:this.datePlacehodler})),this.dateHelperText?i("small",{class:"date-and-time-row helper-text"},this.dateHelperText):null),i("div",{key:"7f74f041493bb4da72d070e90d24d38441c5ebb9",class:"date-and-time-group"},i("div",{key:"7b7b4b4ba67f36cf03c4ee6b80a3cdd55a5c8380",class:"date-and-time-row"},i("pn-select",{key:"d5d6fe2b881a8770fc1aec24bce38754b6a17db0",ref:t=>this.pnTimeFromHourDropdown=t,name:"date-and-time-from-houre",placeholder:this.hourArr[8],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.hourArr?.map((t=>i("pn-option",{label:t,value:t})))),i("pn-select",{key:"bb8dafe866a95e94e0e8a1e53ccff80d0729ec48",ref:t=>this.pnTimeFromMinuteDropdown=t,name:"date-and-time-from-minute",placeholder:this.minuteArr[0],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.minuteArr?.map((t=>i("pn-option",{label:t,value:t})))),i("div",{key:"8281bbfae49ca8ec35a1d651d61a1bd478b70c0a",class:"time-separator"},i("span",{key:"d7c895902ce3efac4816f21510444914012fca29"},"-")),i("pn-select",{key:"5fa29d4fc4d01a804427bd2119969ec0d6346df6",ref:t=>this.pnTimeToHourDropdown=t,name:"date-and-time-to-hour",placeholder:this.hourArr[12],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.hourArr?.map((t=>i("pn-option",{label:t,value:t})))),i("pn-select",{key:"968f33b37cad6d2528a789abd63a89c163642c53",ref:t=>this.pnTimeToMinuteDropdown=t,name:"date-and-time-to-minute",placeholder:this.minuteArr[0],class:"date-and-time-dropdown--time",invalid:this.invalidTimespan},this.minuteArr?.map((t=>i("pn-option",{label:t,value:t}))))),this.timeHelperText?i("small",{class:"date-and-time-row helper-text"},this.timeHelperText):null,this.invalidTimespan&&this.errorMessage?i("small",{class:"date-and-time-row error-message"},i("pn-icon",{icon:d,small:"false",color:"warning"}),this.errorMessage):null))}};o.style=h;export{o as pn_date_and_time};
+//# sourceMappingURL=p-d8a57eba.entry.js.map

package/pn-market-web-components/{p-a9d2f528.entry.js.map → p-d8a57eba.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icon","alert_info_circle","pnDateAndTimeCss","PnDateAndTimeStyle0","PnDateAndTime","pnDatePicker","pnTimeFromHourDropdown","pnTimeFromMinuteDropdown","pnTimeToHourDropdown","pnTimeToMinuteDropdown","dateandtimerange","componentWillLoad","this","setInitialValues","componentDidLoad","setDefaultHiddenValue","addEventHandlers","setLangugaeCode","setFirstValidDate","hourArr","getNumbersAsStringArr","minuteArr","date","Date","setDate","getDate","dateDaysFromToday","year","getFullYear","month","getMonth","toString","padStart","day","endYear","firstValidDateString","lastValidDateString","languageCode","trim","language","document","querySelector","lang","selectedFromHour","parseInt","selectedFromMin","selectedToHour","selectedToMin","updateHiddenValue","addEventListener","handleChange","bind","e","target","selectedDate","detail","handleTimeChange","fromHourString","textContent","fromMinString","toHourString","toMinString","dateFrom","dateTo","validateTimeRange","getTime","invalidTimespan","formValue","fromMin","toMin","emit","from","to","differenceValue","validTimeRangeMinutes","start","stop","step","arr","Array","length","_","index","result","forEach","item","itemAsString","push","removePnOptionSelected","selectOptions","hostElement","querySelectorAll","elm","removeAttribute","render","h","Host","key","class","dateAndTimeLabel","ref","el","range","disableWeekends","placeholder","datePlacehodler","dateHelperText","name","invalid","map","hour","label","value","minute","timeHelperText","errorMessage","small","color"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_info_circle.js","src/components/input/pn-date-and-time/pn-date-and-time.scss?tag=pn-date-and-time","src/components/input/pn-date-and-time/pn-date-and-time.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 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_info_circle = icon;\nexport const alertInfoCircle = icon;\n","@import '../../../globals/main.scss';\n\npn-date-and-time {\n label {\n color: $gray700;\n font-size: 1.4rem;\n }\n\n .time-separator {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .date-and-time-group {\n margin-bottom: 1rem;\n }\n .date-and-time-row {\n display: flex;\n gap: 1rem;\n }\n\n .helper-text {\n margin-top: 0.2rem;\n color: $gray700;\n display: block;\n }\n\n .error-message {\n color: #a70707;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Event, EventEmitter } from '@stencil/core';\nimport { alert_info_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-date-and-time',\n styleUrl: 'pn-date-and-time.scss',\n})\nexport class PnDateAndTime {\n @Element() hostElement: Element;\n pnDatePicker: HTMLElement = null;\n pnTimeFromHourDropdown: HTMLElement = null;\n pnTimeFromMinuteDropdown: HTMLElement = null;\n pnTimeToHourDropdown: HTMLElement = null;\n pnTimeToMinuteDropdown: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() dateAndTimeLabel: string = '';\n @Prop() dateDaysFromToday: number = 0;\n @Prop() validTimeRangeMinutes: number = 0;\n @Prop() errorMessage: string = '';\n @Prop() dateHelperText: string = '';\n @Prop() timeHelperText: string = '';\n @Prop() disableWeekends: boolean = false;\n @Prop() datePlacehodler: string = '';\n\n @State() language: string = null;\n @State() hourArr: string[] = null;\n @State() minuteArr: string[] = null;\n @State() formValue: string = null;\n @State() invalidTimespan: boolean = false;\n @State() selectedDate: string = null;\n @State() selectedFromHour: number = null;\n @State() selectedFromMin: number = null;\n @State() selectedToHour: number = null;\n @State() selectedToMin: number = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n\n @Event() dateandtimerange: EventEmitter<string>;\n\n componentWillLoad() {\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.setDefaultHiddenValue();\n this.addEventHandlers();\n }\n\n async setInitialValues() {\n this.setLangugaeCode();\n this.setFirstValidDate();\n\n this.hourArr = this.getNumbersAsStringArr(6, 22, 1);\n this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);\n }\n\n setFirstValidDate() {\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + 2;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n setLangugaeCode() {\n if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {\n this.language = document.querySelector('html').lang;\n } else {\n this.language = this.languageCode;\n }\n }\n\n setDefaultHiddenValue() {\n this.selectedFromHour = parseInt(this.hourArr[8]);\n this.selectedFromMin = 0;\n this.selectedToHour = parseInt(this.hourArr[12]);\n this.selectedToMin = 0;\n\n this.updateHiddenValue();\n }\n\n addEventHandlers() {\n this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));\n\n this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n }\n\n handleChange(e) {\n const target = e.target;\n\n if (target === this.pnDatePicker) {\n this.selectedDate = e.detail;\n }\n\n if (target === this.pnTimeFromHourDropdown \|\| target === this.pnTimeFromMinuteDropdown \|\| target === this.pnTimeToHourDropdown \|\| target === this.pnTimeToMinuteDropdown) {\n this.handleTimeChange();\n }\n\n this.updateHiddenValue();\n }\n\n handleTimeChange() {\n const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n\n this.selectedFromHour = parseInt(fromHourString);\n this.selectedFromMin = parseInt(fromMinString);\n this.selectedToHour = parseInt(toHourString);\n this.selectedToMin = parseInt(toMinString);\n }\n\n updateHiddenValue() {\n const date = new Date();\n const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);\n const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);\n this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());\n\n if (this.invalidTimespan \|\| !this.selectedDate) {\n this.formValue = '';\n } else {\n const fromMin = this.selectedFromMin.toString().padStart(2, '0');\n const toMin = this.selectedToMin.toString().padStart(2, '0');\n\n this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;\n }\n\n this.dateandtimerange.emit(this.formValue);\n }\n\n validateTimeRange(from: number, to: number) {\n let differenceValue = (to - from) / 1000;\n differenceValue /= 60;\n this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;\n }\n\n getNumbersAsStringArr(start: number, stop: number, step: number) {\n const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index: number) => start + index * step);\n const result: string[] = [];\n\n arr.forEach(item => {\n const itemAsString = item.toString().padStart(2, '0');\n result.push(itemAsString);\n });\n\n return result;\n }\n\n removePnOptionSelected() {\n const selectOptions = this.hostElement.querySelectorAll('pn-option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"date-and-time-group\">\n {this.dateAndTimeLabel ? (\n <div class=\"date-and-time-row\">\n <label>{this.dateAndTimeLabel}</label>\n </div>\n ) : null}\n <div class=\"date-and-time-row\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={this.disableWeekends}\n min-date={this.firstValidDateString}\n max-date={this.lastValidDateString}\n language={this.language}\n placeholder={this.datePlacehodler}\n ></pn-date-picker>\n </div>\n\n {this.dateHelperText ? <small class=\"date-and-time-row helper-text\">{this.dateHelperText}</small> : null}\n </div>\n <div class=\"date-and-time-group\">\n <div class=\"date-and-time-row\">\n <pn-select\n ref={el => (this.pnTimeFromHourDropdown = el as HTMLElement)}\n name=\"date-and-time-from-houre\"\n placeholder={this.hourArr[8]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-from-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLElement)}\n name=\"date-and-time-to-hour\"\n placeholder={this.hourArr[12]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-to-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n </div>\n {this.timeHelperText ? <small class=\"date-and-time-row helper-text\">{this.timeHelperText}</small> : null}\n\n {this.invalidTimespan && this.errorMessage ? (\n <small class=\"date-and-time-row error-message\">\n <pn-icon icon={alert_info_circle} small=\"false\" color=\"warning\" />\n {this.errorMessage}\n </small>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["icon","alert_info_circle","pnDateAndTimeCss","PnDateAndTimeStyle0","PnDateAndTime","pnDatePicker","pnTimeFromHourDropdown","pnTimeFromMinuteDropdown","pnTimeToHourDropdown","pnTimeToMinuteDropdown","dateandtimerange","componentWillLoad","this","setInitialValues","componentDidLoad","setDefaultHiddenValue","addEventHandlers","setLangugaeCode","setFirstValidDate","hourArr","getNumbersAsStringArr","minuteArr","date","Date","setDate","getDate","dateDaysFromToday","year","getFullYear","month","getMonth","toString","padStart","day","endYear","firstValidDateString","lastValidDateString","languageCode","trim","language","document","querySelector","lang","selectedFromHour","parseInt","selectedFromMin","selectedToHour","selectedToMin","updateHiddenValue","addEventListener","handleChange","bind","e","target","selectedDate","detail","handleTimeChange","fromHourString","textContent","fromMinString","toHourString","toMinString","dateFrom","dateTo","validateTimeRange","getTime","invalidTimespan","formValue","fromMin","toMin","emit","from","to","differenceValue","validTimeRangeMinutes","start","stop","step","arr","Array","length","_","index","result","forEach","item","itemAsString","push","removePnOptionSelected","selectOptions","hostElement","querySelectorAll","elm","removeAttribute","render","h","Host","key","class","dateAndTimeLabel","ref","el","range","disableWeekends","placeholder","datePlacehodler","dateHelperText","name","invalid","map","hour","label","value","minute","timeHelperText","errorMessage","small","color"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_info_circle.js","src/components/input/pn-date-and-time/pn-date-and-time.scss?tag=pn-date-and-time","src/components/input/pn-date-and-time/pn-date-and-time.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 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_info_circle = icon;\nexport const alertInfoCircle = icon;\n","@import '../../../globals/main.scss';\n\npn-date-and-time {\n label {\n color: $gray700;\n font-size: 1.4rem;\n }\n\n .time-separator {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .date-and-time-group {\n margin-bottom: 1rem;\n }\n .date-and-time-row {\n display: flex;\n gap: 1rem;\n }\n\n .helper-text {\n margin-top: 0.2rem;\n color: $gray700;\n display: block;\n }\n\n .error-message {\n color: #a70707;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Event, EventEmitter } from '@stencil/core';\nimport { alert_info_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-date-and-time',\n styleUrl: 'pn-date-and-time.scss',\n})\nexport class PnDateAndTime {\n @Element() hostElement: Element;\n pnDatePicker: HTMLElement = null;\n pnTimeFromHourDropdown: HTMLElement = null;\n pnTimeFromMinuteDropdown: HTMLElement = null;\n pnTimeToHourDropdown: HTMLElement = null;\n pnTimeToMinuteDropdown: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() dateAndTimeLabel: string = '';\n @Prop() dateDaysFromToday: number = 0;\n @Prop() validTimeRangeMinutes: number = 0;\n @Prop() errorMessage: string = '';\n @Prop() dateHelperText: string = '';\n @Prop() timeHelperText: string = '';\n @Prop() disableWeekends: boolean = false;\n @Prop() datePlacehodler: string = '';\n\n @State() language: string = null;\n @State() hourArr: string[] = null;\n @State() minuteArr: string[] = null;\n @State() formValue: string = null;\n @State() invalidTimespan: boolean = false;\n @State() selectedDate: string = null;\n @State() selectedFromHour: number = null;\n @State() selectedFromMin: number = null;\n @State() selectedToHour: number = null;\n @State() selectedToMin: number = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n\n @Event() dateandtimerange: EventEmitter<string>;\n\n componentWillLoad() {\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.setDefaultHiddenValue();\n this.addEventHandlers();\n }\n\n async setInitialValues() {\n this.setLangugaeCode();\n this.setFirstValidDate();\n\n this.hourArr = this.getNumbersAsStringArr(6, 22, 1);\n this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);\n }\n\n setFirstValidDate() {\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + 2;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n setLangugaeCode() {\n if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {\n this.language = document.querySelector('html').lang;\n } else {\n this.language = this.languageCode;\n }\n }\n\n setDefaultHiddenValue() {\n this.selectedFromHour = parseInt(this.hourArr[8]);\n this.selectedFromMin = 0;\n this.selectedToHour = parseInt(this.hourArr[12]);\n this.selectedToMin = 0;\n\n this.updateHiddenValue();\n }\n\n addEventHandlers() {\n this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));\n\n this.pnTimeFromHourDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n this.pnTimeFromMinuteDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n this.pnTimeToHourDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n this.pnTimeToMinuteDropdown.addEventListener('selectOption', this.handleChange.bind(this));\n }\n\n handleChange(e) {\n const target = e.target;\n\n if (target === this.pnDatePicker) {\n this.selectedDate = e.detail;\n }\n\n if (target === this.pnTimeFromHourDropdown \|\| target === this.pnTimeFromMinuteDropdown \|\| target === this.pnTimeToHourDropdown \|\| target === this.pnTimeToMinuteDropdown) {\n this.handleTimeChange();\n }\n\n this.updateHiddenValue();\n }\n\n handleTimeChange() {\n const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n\n this.selectedFromHour = parseInt(fromHourString);\n this.selectedFromMin = parseInt(fromMinString);\n this.selectedToHour = parseInt(toHourString);\n this.selectedToMin = parseInt(toMinString);\n }\n\n updateHiddenValue() {\n const date = new Date();\n const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);\n const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);\n this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());\n\n if (this.invalidTimespan \|\| !this.selectedDate) {\n this.formValue = '';\n } else {\n const fromMin = this.selectedFromMin.toString().padStart(2, '0');\n const toMin = this.selectedToMin.toString().padStart(2, '0');\n\n this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;\n }\n\n this.dateandtimerange.emit(this.formValue);\n }\n\n validateTimeRange(from: number, to: number) {\n let differenceValue = (to - from) / 1000;\n differenceValue /= 60;\n this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;\n }\n\n getNumbersAsStringArr(start: number, stop: number, step: number) {\n const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index: number) => start + index * step);\n const result: string[] = [];\n\n arr.forEach(item => {\n const itemAsString = item.toString().padStart(2, '0');\n result.push(itemAsString);\n });\n\n return result;\n }\n\n removePnOptionSelected() {\n const selectOptions = this.hostElement.querySelectorAll('pn-option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"date-and-time-group\">\n {this.dateAndTimeLabel ? (\n <div class=\"date-and-time-row\">\n <label>{this.dateAndTimeLabel}</label>\n </div>\n ) : null}\n <div class=\"date-and-time-row\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={this.disableWeekends}\n min-date={this.firstValidDateString}\n max-date={this.lastValidDateString}\n language={this.language}\n placeholder={this.datePlacehodler}\n ></pn-date-picker>\n </div>\n\n {this.dateHelperText ? <small class=\"date-and-time-row helper-text\">{this.dateHelperText}</small> : null}\n </div>\n <div class=\"date-and-time-group\">\n <div class=\"date-and-time-row\">\n <pn-select\n ref={el => (this.pnTimeFromHourDropdown = el as HTMLElement)}\n name=\"date-and-time-from-houre\"\n placeholder={this.hourArr[8]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-from-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLElement)}\n name=\"date-and-time-to-hour\"\n placeholder={this.hourArr[12]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-to-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n </div>\n {this.timeHelperText ? <small class=\"date-and-time-row helper-text\">{this.timeHelperText}</small> : null}\n\n {this.invalidTimespan && this.errorMessage ? (\n <small class=\"date-and-time-row error-message\">\n <pn-icon icon={alert_info_circle} small=\"false\" color=\"warning\" />\n {this.errorMessage}\n </small>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}