@postnord/pn-marketweb-components 4.0.1 → 4.0.3

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

@@ -1,130 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as close_small } from './close_small.js';
-import { s as search } from './search.js';
-
-const pnMarketwebSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:host{display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;transform:translateX(0);transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host input:hover{border:0.1rem solid #00a0d6}:host input:disabled{background:#f3f2f2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}:host[list] :host>.input-container .button-container{display:none}:host>.input-container button{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);background:#ffffff;border:none;color:#005d92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host>.input-container button:hover,:host>.input-container button:focus{background:#e0f8ff}:host>.input-container button:active{background:#005d92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host .searching button.search{transform:translate(150%, -50%)}:host .searching button.clear{transform:translate(-50%, -50%)}:host .button-none input,:host .button-icon-inline input{padding-right:3.3em}:host .button-none pn-spinner,:host .button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host .button-none button.search,:host .button-icon-inline button.search{transform:translate(-50%, -50%)}:host .button-none.loading button,:host .button-icon-inline.loading button{transform:translate(100%, -50%)}:host .button-none.loading pn-spinner,:host .button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}:host .button-none.searching button.search{transform:translate(100%, -50%)}:host .button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";
-const PnMarketwebSearchStyle0 = pnMarketwebSearchCss;
-
-const PnMarketwebSearch = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSearch extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.search = createEvent(this, "search", 7);
-        this.update = createEvent(this, "update", 7);
-        this.disabled = false;
-        this.placeholder = null;
-        this.inputid = null;
-        this.name = null;
-        this.autocomplete = null;
-        this.list = null;
-        this.value = null;
-        this.label = null;
-        this.loading = false;
-        this.button = '';
-        this.light = false;
-        this.suggestionObserver = null;
-        this.hasClonedInput = false;
-        this.listSuggestion = [];
-    }
-    get hostElement() { return this; }
-    /** This is emitted on search submission both with keyboard and mouse */
-    search;
-    /** custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
-    update;
-    inputHandler() {
-        this.update.emit(this.value);
-    }
-    emitSearch(e) {
-        if (e.type === 'click' || (e.type === 'keydown' && e.key === 'Enter')) {
-            // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
-            e.preventDefault();
-            this.search.emit(this.value);
-        }
-    }
-    setVal(e) {
-        this.value = e.target.value;
-    }
-    clearInput(e) {
-        this.value = '';
-        this.update.emit(this.value);
-        const closestInputField = e.target.closest("div.input-container")?.querySelector("input[type=search]");
-        closestInputField?.focus();
-    }
-    getClassNames() {
-        let classNames = '';
-        const buttonTypes = ['none', 'icon', 'icon-inline'];
-        if (this.value)
-            classNames += 'searching ';
-        if (this.loading)
-            classNames += 'loading ';
-        if (buttonTypes.includes(this.button))
-            classNames += `button-${this.button} `;
-        return classNames;
-    }
-    componentWillRender() {
-        this.cloneListContent();
-        this.autocompleteEventBinding();
-    }
-    onSuggestionUpdate() {
-        this.cloneListContent();
-    }
-    autocompleteEventBinding() {
-        if (this.suggestionObserver !== null || !this.list || !this.hostElement || !document.getElementById(this.list)) {
-            return;
-        }
-        const targetNode = document.getElementById(this.list);
-        this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));
-        this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
-    }
-    cloneListContent() {
-        if (!this.list || !this.hostElement || !document.getElementById(this.list)) {
-            return;
-        }
-        const options = [...document.getElementById(this.list).querySelectorAll('option')];
-        this.listSuggestion = options.map((item) => {
-            if (item.hasAttribute('value')) {
-                return item.getAttribute('value');
-            }
-            return item.innerText;
-        });
-    }
-    render() {
-        return (h(Host, { key: 'bd91a32439d948f4362fd667a2a897e00b480a5b' }, h("div", { key: 'dd45a9899d15079c13c060e4cfd75c60730ac922', class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, h("input", { key: '0e283a03de256f134b2d8936fdf2a4d2dd206f2c', type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e) }), h("div", { key: '1eff04ef905ee36aa2e7d7976e522a8bc114681b', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { key: '46f1d1b36518d0b7cc5430efa9167b626d7c80eb', class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search" }, h("pn-icon", { key: 'ba9cb2a21f9561d79ab779058acaf83f0be7da7a', icon: search, color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { key: '5b537c0cb6227ad2f3fb1d7227c698436510a5b9', class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: (e) => this.clearInput(e) }, h("pn-icon", { key: '70873e93689282f189e65b68a9fa980ad6f9158b', icon: close_small, color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '6fe9c471b0b67f785e3e5a98ab79c93dacd32d80' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: 'a3671a3fbca963021a75540284144d1cea41c8ab', onClick: e => this.emitSearch(e), loading: this.loading, icon: search, appearance: this.light ? 'light' : 'dark', tooltip: this.button === 'icon' ? this.label : null }, this.label)), this.list && (h("datalist", { key: '7e0bfeda8401c388ebeb3e0e185b52e09636ac8d', id: this.list }, this.listSuggestion.map(item => {
-            return h("option", null, item);
-        })))));
-    }
-    static get style() { return PnMarketwebSearchStyle0; }
-}, [1, "pn-marketweb-search", {
-        "disabled": [4],
-        "placeholder": [1],
-        "inputid": [1],
-        "name": [1],
-        "autocomplete": [1],
-        "list": [1],
-        "value": [1],
-        "label": [1],
-        "loading": [4],
-        "button": [1],
-        "light": [4],
-        "suggestionObserver": [32],
-        "hasClonedInput": [32],
-        "listSuggestion": [32]
-    }, [[0, "input", "inputHandler"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-marketweb-search"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-marketweb-search":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnMarketwebSearch);
-            }
-            break;
-    } });
-}
-
-export { PnMarketwebSearch as P, defineCustomElement as d };
-
-//# sourceMappingURL=pn-marketweb-search2.js.map

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

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

package/dist/components/pn-search.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface PnSearch extends Components.PnSearch, HTMLElement {}
-export const PnSearch: {
-    prototype: PnSearch;
-    new (): PnSearch;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/pn-search.js

@@ -1,91 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './pn-marketweb-search2.js';
-
-const pnSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.pn-search{background-color:transparent;display:flex;flex-direction:column;align-items:center}.pn-search .graphics-container{padding-bottom:1rem}.pn-search .graphics{border-radius:50%;height:clamp(12rem, 14vw, 16rem);width:clamp(12rem, 14vw, 16rem);aspect-ratio:1/1;object-fit:cover}.pn-search .illustration{--pn-width:12rem;--pn-height:12rem}.pn-search .search-container{margin:clamp(1rem, 3vh, 1.5rem) 0}.pn-search .search-container ::placeholder{color:#5e554a}.pn-search .main{text-align:center;width:100%}.pn-search .heading{color:#000000;font-size:clamp(2rem, 4vw, 3.2rem);line-height:1;margin:0}.pn-search .search-container{display:flex;width:100%}.pn-search .search-container .search-component input,.pn-search .search-container .search-component button{font-size:1.6rem}.pn-search .cta{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-top:2rem;gap:1.2rem;width:100%}.pn-search .btn-mw[data-secondary]{color:#005d92;font-weight:500;text-decoration:underline}@media (min-width: 768px){.pn-search{flex-direction:row;align-items:flex-start}.pn-search .graphics-container{padding-right:clamp(2rem, 3vw, 4rem);padding-bottom:0}.pn-search .illustration{--pn-width:15rem;--pn-height:15rem}.pn-search .main{text-align:left}.pn-search pn-marketweb-search{width:40rem}.pn-search .cta{gap:1.6rem}.pn-search .btn-mw[data-primary]{width:auto;margin-bottom:0}.pn-search .btn-mw[data-secondary]{margin-top:0}}@media (min-width: 1200px){.pn-search{padding:2.4rem}.pn-search .search-container{max-width:400px}.pn-search .illustration{--pn-width:16rem;--pn-height:16rem}}@media (min-width: 1600px){.pn-search{max-width:1400px;margin:0 auto;padding:3.2rem}.pn-search .search-container{max-width:500px}}";
-const PnSearchStyle0 = pnSearchCss;
-
-const PNSearch = /*@__PURE__*/ proxyCustomElement(class PNSearch extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.pnSearch = createEvent(this, "pnSearch", 7);
-        this.componentAriaLabel = undefined;
-        this.heading = undefined;
-        this.pnIllustrationSvg = undefined;
-        this.imageUrl = undefined;
-        this.imageAltText = undefined;
-        this.searchPlaceholder = undefined;
-        this.searchButtonText = undefined;
-        this.searchButtonLabel = undefined;
-        this.searchUrl = undefined;
-        this.primaryButtonText = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonIconSvg = undefined;
-        this.secondaryButtonText = undefined;
-        this.secondaryButtonUrl = undefined;
-        this.searchDescriptionAria = undefined;
-        this.ctaActionsLabel = undefined;
-        this.searchType = undefined;
-    }
-    get hostElement() { return this; }
-    pnSearch;
-    doSearch = (e) => {
-        if (!this.searchUrl) {
-            console.warn('Search URL is not defined');
-            return;
-        }
-        const searchDetail = {
-            query: e.detail,
-            timestamp: Date.now(),
-        };
-        this.pnSearch.emit(searchDetail);
-    };
-    render() {
-        const hasButtons = this.primaryButtonUrl || this.secondaryButtonUrl;
-        return (h(Host, { key: 'fd8fdc6f6bc5d4743ff328d914a6b2b55d840503' }, h("div", { key: 'fb4be66b1a38fde9e5b0b0e3fc4abbdf0f1b2f38', class: "pn-search", role: "search", "aria-label": this.componentAriaLabel }, h("div", { key: 'b07dbfb4dcdf54e88ac790d4da6aa97a00356d04', class: "graphics-container", "aria-hidden": !this.imageAltText }, !this.pnIllustrationSvg && this.imageUrl && h("img", { key: '50ad3338cf3912ff74a50a6b72102e6d5e61f4f6', class: "graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), this.pnIllustrationSvg && h("pn-illustration", { key: '3956261bb79fbac47239f2091e3d50344e94d555', class: "illustration", illustration: this.pnIllustrationSvg, role: "presentation" })), h("div", { key: '17c6d2c2d1cd812f583f072b17adc3747562ae85', class: "main" }, h("h2", { key: '9214e9895160ee1d316f1ee09f4ddacb7c81f452', class: "heading", id: "search-section-heading" }, this.heading), h("div", { key: '1db65a02236162c22210981d11d3567e6cc27f58', class: "search-container", "aria-labelledby": "search-section-heading" }, h("pn-marketweb-search", { key: 'a560d93bb4747643a5c81610c2e55d0af0825559', class: "search-component", label: this.searchButtonLabel, name: "search", inputid: "search-field", autocomplete: "off", placeholder: this.searchPlaceholder, button: this.searchButtonText, disabled: false, loading: false, light: false, list: null, onSearch: this.doSearch, "data-search-url": this.searchUrl, "aria-describedby": "search-description" }), this.searchDescriptionAria && (h("div", { key: '3d59bd65947e1ecbdcfb75667135dc40e2482955', id: "search-description", class: "sr-only" }, this.searchDescriptionAria))), hasButtons && (h("div", { key: '1d9a2bd31084ae806879e6bc9e820591e3bd4b29', class: "cta", role: "group", "aria-label": this.ctaActionsLabel }, this.primaryButtonUrl && (h("pn-button", { key: '5ddda20fd6846f75e301272e52fc3c200e2c71bb', appearance: "light", variant: "outlined", small: true, icon: this.primaryButtonIconSvg, "left-icon": Boolean(this.primaryButtonIconSvg), class: "btn-mw", href: this.primaryButtonUrl, "data-primary": true }, this.primaryButtonText)), this.secondaryButtonUrl && (h("a", { key: 'a82cf19405f6144f9b5fd789ffa1242128a4c8f1', href: this.secondaryButtonUrl, class: "btn-mw", "data-secondary": true, role: "button" }, this.secondaryButtonText))))))));
-    }
-    static get style() { return PnSearchStyle0; }
-}, [0, "pn-search", {
-        "componentAriaLabel": [1, "component-aria-label"],
-        "heading": [1],
-        "pnIllustrationSvg": [1, "pn-illustration-svg"],
-        "imageUrl": [1, "image-url"],
-        "imageAltText": [1, "image-alt-text"],
-        "searchPlaceholder": [1, "search-placeholder"],
-        "searchButtonText": [1, "search-button-text"],
-        "searchButtonLabel": [1, "search-button-label"],
-        "searchUrl": [1, "search-url"],
-        "primaryButtonText": [1, "primary-button-text"],
-        "primaryButtonUrl": [1, "primary-button-url"],
-        "primaryButtonIconSvg": [1, "primary-button-icon-svg"],
-        "secondaryButtonText": [1, "secondary-button-text"],
-        "secondaryButtonUrl": [1, "secondary-button-url"],
-        "searchDescriptionAria": [1, "search-description-aria"],
-        "ctaActionsLabel": [1, "cta-actions-label"],
-        "searchType": [1, "search-type"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-search", "pn-marketweb-search"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-search":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PNSearch);
-            }
-            break;
-        case "pn-marketweb-search":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnSearch = PNSearch;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnSearch, defineCustomElement };
-
-//# sourceMappingURL=pn-search.js.map

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

@@ -1 +0,0 @@
-{"file":"pn-search.js","mappings":"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","names":[],"sources":["src/components/widgets/pn-search/pn-search.scss?tag=pn-search","src/components/widgets/pn-search/pn-search.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n.pn-search {\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .graphics-container {\n    padding-bottom: 1rem;\n  }\n\n  .graphics {\n    border-radius: 50%;\n    height: clamp(12rem, 14vw, 16rem);\n    width: clamp(12rem, 14vw, 16rem);\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n  }\n\n  .illustration {\n    --pn-width: #{$illustrationWidth};\n    --pn-height: #{$illustrationWidth};\n  }\n\n  .search-container {\n    margin: clamp(1rem, 3vh, 1.5rem) 0;\n\n    ::placeholder {\n      color: $gray700;\n    }\n  }\n\n  .main {\n    text-align: center;\n    width: 100%;\n  }\n\n  .heading {\n    color: $black;\n    font-size: clamp(2rem, 4vw, 3.2rem);\n    line-height: 1;\n    margin: 0;\n  }\n\n  .search-container {\n    display: flex;\n    width: 100%;\n\n    .search-component {\n      input,\n      button {\n        font-size: 1.6rem;\n      }\n    }\n  }\n\n  .cta {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-top: 2rem;\n    gap: 1.2rem;\n    width: 100%;\n  }\n\n  .btn-mw[data-secondary] {\n    color: $blue700;\n    font-weight: 500;\n    text-decoration: underline;\n  }\n}\n\n@media (min-width: 768px) {\n  .pn-search {\n    flex-direction: row;\n    align-items: flex-start;\n\n    .graphics-container {\n      padding-right: clamp(2rem, 3vw, 4rem);\n      padding-bottom: 0;\n    }\n\n    .illustration {\n      --pn-width: #{$illustrationWidthMd};\n      --pn-height: #{$illustrationWidthMd};\n    }\n\n    .main {\n      text-align: left;\n    }\n\n    pn-marketweb-search {\n      width: 40rem;\n    }\n\n    .cta {\n      gap: 1.6rem;\n    }\n\n    .btn-mw[data-primary] {\n      width: auto;\n      margin-bottom: 0;\n    }\n\n    .btn-mw[data-secondary] {\n      margin-top: 0;\n    }\n  }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n  .pn-search {\n    padding: 2.4rem;\n\n    .search-container {\n      max-width: 400px;\n    }\n\n    .illustration {\n      --pn-width: #{$illustrationWidthLg};\n      --pn-height: #{$illustrationWidthLg};\n    }\n  }\n}\n\n@media (min-width: 1600px) {\n  .pn-search {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 3.2rem;\n\n    .search-container {\n      max-width: 500px;\n    }\n  }\n}\n","import { Component, Host, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\ninterface SearchEventDetail {\n  query: string;\n  timestamp: number;\n}\n\n@Component({\n  tag: 'pn-search',\n  styleUrl: 'pn-search.scss',\n})\nexport class PNSearch {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop() componentAriaLabel!: string;\n  @Prop() heading!: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n  @Prop() searchPlaceholder?: string;\n  @Prop() searchButtonText?: string;\n  @Prop() searchButtonLabel?: string;\n  @Prop() searchUrl?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() searchDescriptionAria?: string;\n  @Prop() ctaActionsLabel?: string;\n  @Prop() searchType: 'shipments' | 'episearch';\n\n  @Event() pnSearch!: EventEmitter<SearchEventDetail>;\n\n  private doSearch = (e: CustomEvent): void => {\n    if (!this.searchUrl) {\n      console.warn('Search URL is not defined');\n      return;\n    }\n\n    const searchDetail: SearchEventDetail = {\n      query: e.detail,\n      timestamp: Date.now(),\n    };\n\n    this.pnSearch.emit(searchDetail);\n  };\n\n  render() {\n    const hasButtons = this.primaryButtonUrl || this.secondaryButtonUrl;\n\n    return (\n      <Host>\n        <div class=\"pn-search\" role=\"search\" aria-label={this.componentAriaLabel}>\n          <div class=\"graphics-container\" aria-hidden={!this.imageAltText}>\n            {!this.pnIllustrationSvg && this.imageUrl && <img class=\"graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {this.pnIllustrationSvg && <pn-illustration class=\"illustration\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n\n          <div class=\"main\">\n            <h2 class=\"heading\" id=\"search-section-heading\">\n              {this.heading}\n            </h2>\n\n            <div class=\"search-container\" aria-labelledby=\"search-section-heading\">\n              <pn-marketweb-search\n                class=\"search-component\"\n                label={this.searchButtonLabel}\n                name=\"search\"\n                inputid=\"search-field\"\n                autocomplete=\"off\"\n                placeholder={this.searchPlaceholder}\n                button={this.searchButtonText}\n                disabled={false}\n                loading={false}\n                light={false}\n                list={null}\n                onSearch={this.doSearch}\n                data-search-url={this.searchUrl}\n                aria-describedby=\"search-description\"\n              />\n              {this.searchDescriptionAria && (\n                <div id=\"search-description\" class=\"sr-only\">\n                  {this.searchDescriptionAria}\n                </div>\n              )}\n            </div>\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaActionsLabel}>\n                {this.primaryButtonUrl && (\n                  <pn-button\n                    appearance=\"light\"\n                    variant=\"outlined\"\n                    small={true}\n                    icon={this.primaryButtonIconSvg}\n                    left-icon={Boolean(this.primaryButtonIconSvg)}\n                    class=\"btn-mw\"\n                    href={this.primaryButtonUrl}\n                    data-primary\n                  >\n                    {this.primaryButtonText}\n                  </pn-button>\n                )}\n                {this.secondaryButtonUrl && (\n                  <a href={this.secondaryButtonUrl} class=\"btn-mw\" data-secondary role=\"button\">\n                    {this.secondaryButtonText}\n                  </a>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pn-usp-simple.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface PnUspSimple extends Components.PnUspSimple, HTMLElement {}
-export const PnUspSimple: {
-    prototype: PnUspSimple;
-    new (): PnUspSimple;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/pn-usp-simple.js

@@ -1,82 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { H as HeadingTag } from './HeadingTag.js';
-
-const pnUspSimpleCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:root{--usp-preamble-margin:clamp(1.5rem, 3vw, 1.8rem)}.pn-usp-simple{background:linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);color:#2d2013;display:flex;flex-direction:column-reverse;max-width:100%;padding:clamp(2rem, 5vw, 5rem)}.pn-usp-simple .heading{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem}.pn-usp-simple .preamble{font-size:clamp(1rem, 4vw, 1.6rem);margin-top:var(--usp-preamble-margin);margin-bottom:var(--usp-preamble-margin)}.pn-usp-simple .cta{display:flex;font-size:clamp(1rem, 4vw, 1.6rem);flex-direction:column;gap:clamp(1rem, 4vw, 1.2rem);padding:0 6rem}.pn-usp-simple .image-container{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.pn-usp-simple .image-container .graphics{--pn-width:12rem !important;--pn-height:12rem !important}.pn-usp-simple .image-container .image{border-radius:50%}@media (min-width: 768px){.pn-usp-simple{flex-direction:row;align-items:center}.pn-usp-simple .content{max-width:60%}.pn-usp-simple .cta{flex-direction:row;gap:clamp(2rem, 3vw, 3rem);padding:0}.pn-usp-simple .image-container{flex:clamp(15rem, 3vw, 20rem);margin-bottom:0}.pn-usp-simple .image-container .graphics{--pn-width:15rem;--pn-height:15rem}}@media (min-width: 1200px){.pn-usp-simple{max-width:1140px;margin:0 auto}.pn-usp-simple .content{max-width:50%}.pn-usp-simple .image-container .graphics{--pn-width:18rem;--pn-height:18rem}}@media (min-width: 1640px){.pn-usp-simple{max-width:1400px}.pn-usp-simple .image-container .graphics{--pn-width:20rem;--pn-height:20rem}}";
-const PnUspSimpleStyle0 = pnUspSimpleCss;
-
-const PnUspSimple$1 = /*@__PURE__*/ proxyCustomElement(class PnUspSimple extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.heading = undefined;
-        this.headingLevel = 'h2';
-        this.preamble = undefined;
-        this.ctaButtonsLabel = undefined;
-        this.primaryButtonText = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonIconSvg = undefined;
-        this.secondaryButtonText = undefined;
-        this.secondaryButtonUrl = undefined;
-        this.pnIllustrationSvg = undefined;
-        this.imageUrl = undefined;
-        this.imageAltText = undefined;
-    }
-    get hasPrimaryButton() {
-        return Boolean(this.primaryButtonText && this.primaryButtonUrl);
-    }
-    get hasSecondaryButton() {
-        return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);
-    }
-    renderButton(props, isPrimary) {
-        const buttonType = isPrimary ? 'primary' : 'secondary';
-        return (h("pn-button", { icon: props.iconSvg, "left-icon": Boolean(props.iconSvg), href: props.url, class: "btn", "data-button-type": buttonType, appearance: isPrimary ? 'default' : 'light' }, props.text));
-    }
-    render() {
-        const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;
-        const headingId = 'usp-heading';
-        return (h(Host, { key: '86a81876d75377462d4a94cc9ca0d8a7b8150791' }, h("div", { key: '59568c012efdb309dc7e9b3ed64a0a344ab28360', class: "pn-usp-simple", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { key: '54685035dc6a2eba2130693961b87fe315023f27', class: "content" }, this.heading && (h(HeadingTag, { key: '1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb', id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { key: 'd143480b02ecb45130ac2a825e392dbe7c0f3128', class: "preamble" }, this.preamble)), hasButtons && (h("div", { key: 'f618b4b041cf79eac3b67dd6d3c26697e29a72c6', class: "cta", role: "group", "aria-label": this.ctaButtonsLabel }, this.hasPrimaryButton &&
-            this.renderButton({
-                text: this.primaryButtonText,
-                url: this.primaryButtonUrl,
-                iconSvg: this.primaryButtonIconSvg,
-            }, true), this.hasSecondaryButton &&
-            this.renderButton({
-                text: this.secondaryButtonText,
-                url: this.secondaryButtonUrl,
-            }, false)))), h("div", { key: 'cb22f2bd663e90bd009fac12d4662c729bffdd68', class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { key: 'f76f0a6cbdb0cdc8847f062410f7c20c847d8a47', class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), !this.imageUrl && this.pnIllustrationSvg && h("pn-illustration", { key: '5653434436d33c04820f3ee201fd1e2853008e1b', class: "illustration graphics", illustration: this.pnIllustrationSvg, role: "presentation" })))));
-    }
-    static get style() { return PnUspSimpleStyle0; }
-}, [0, "pn-usp-simple", {
-        "heading": [1],
-        "headingLevel": [8, "heading-level"],
-        "preamble": [1],
-        "ctaButtonsLabel": [1, "cta-buttons-label"],
-        "primaryButtonText": [1, "primary-button-text"],
-        "primaryButtonUrl": [1, "primary-button-url"],
-        "primaryButtonIconSvg": [1, "primary-button-icon-svg"],
-        "secondaryButtonText": [1, "secondary-button-text"],
-        "secondaryButtonUrl": [1, "secondary-button-url"],
-        "pnIllustrationSvg": [1, "pn-illustration-svg"],
-        "imageUrl": [1, "image-url"],
-        "imageAltText": [1, "image-alt-text"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-usp-simple"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-usp-simple":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnUspSimple$1);
-            }
-            break;
-    } });
-}
-
-const PnUspSimple = PnUspSimple$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnUspSimple, defineCustomElement };
-
-//# sourceMappingURL=pn-usp-simple.js.map

package/dist/components/pn-usp-simple.js.map

@@ -1 +0,0 @@
-{"file":"pn-usp-simple.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,25DAA25D,CAAC;AACn7D,0BAAe,cAAc;;MCahBA,aAAW;;;;;4BAEe,IAAI;;;;;;;;;;;;IAYzC,IAAY,gBAAgB;QAC1B,OAAO,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACjE;IAED,IAAY,kBAAkB;QAC5B,OAAO,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACrE;IAEO,YAAY,CAAC,KAAkB,EAAE,SAAkB;QACzD,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;QACvD,QACE,iBACE,IAAI,EAAE,KAAK,CAAC,OAAO,eACR,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,EAAC,KAAK,sBACO,UAAU,EAC5B,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,IAE1C,KAAK,CAAC,IAAI,CACD,EACZ;KACH;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,CAAC;QACpE,MAAM,SAAS,GAAG,aAAa,CAAC;QAEhC,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,qBAAkB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,IAC5F,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,KACX,EAAC,UAAU,qDAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,SAAS,IACpE,IAAI,CAAC,OAAO,CACF,CACd,EAEA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,UAAU,KACT,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,eAAe,IAC3D,IAAI,CAAC,gBAAgB;YACpB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,iBAAkB;gBAC7B,GAAG,EAAE,IAAI,CAAC,gBAAiB;gBAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB;aACnC,EACD,IAAI,CACL,EACF,IAAI,CAAC,kBAAkB;YACtB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,mBAAoB;gBAC/B,GAAG,EAAE,IAAI,CAAC,kBAAmB;aAC9B,EACD,KAAK,CACN,CACC,CACP,CACG,EACN,4DAAK,KAAK,EAAC,iBAAiB,iBAAc,CAAC,IAAI,CAAC,YAAY,IACzD,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,EAChH,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,IAAI,wEAAiB,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,cAAc,GAAG,CACpJ,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnUspSimple"],"sources":["src/components/widgets/pn-usp-simple/pn-usp-simple.scss?tag=pn-usp-simple","src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:root {\n  --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\n.pn-usp-simple {\n  background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n  color: $gray900;\n  display: flex;\n  flex-direction: column-reverse;\n  max-width: 100%;\n  padding: clamp(2rem, 5vw, 5rem);\n\n  .heading {\n    font-size: clamp(2rem, 4vw, 3rem);\n    font-weight: 700;\n    margin-bottom: 1rem;\n  }\n\n  .preamble {\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    margin-top: var(--usp-preamble-margin);\n    margin-bottom: var(--usp-preamble-margin);\n  }\n\n  .cta {\n    display: flex;\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    flex-direction: column;\n    gap: clamp(1rem, 4vw, 1.2rem);\n    padding: 0 6rem;\n  }\n\n  .image-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 2rem;\n\n    .graphics {\n      --pn-width: #{$graphicsWidth} !important;\n      --pn-height: #{$graphicsWidth} !important;\n    }\n\n    .image {\n      border-radius: 50%;\n    }\n  }\n}\n\n@media (min-width: 768px) {\n  .pn-usp-simple {\n    flex-direction: row;\n    align-items: center;\n\n    .content {\n      max-width: 60%;\n    }\n\n    .cta {\n      flex-direction: row;\n      gap: clamp(2rem, 3vw, 3rem);\n      padding: 0;\n    }\n\n    .image-container {\n      flex: clamp(15rem, 3vw, 20rem);\n      margin-bottom: 0;\n\n      .graphics {\n        --pn-width: #{$graphicsWidthMd};\n        --pn-height: #{$graphicsWidthMd};\n      }\n    }\n  }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n  .pn-usp-simple {\n    max-width: 1140px;\n    margin: 0 auto;\n\n    .content {\n      max-width: 50%;\n    }\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXl};\n        --pn-height: #{$graphicsWidthXl};\n      }\n    }\n  }\n}\n\n@media (min-width: 1640px) {\n  .pn-usp-simple {\n    max-width: 1400px;\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXxl};\n        --pn-height: #{$graphicsWidthXxl};\n      }\n    }\n  }\n}\n","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n  text: string;\n  url: string;\n  iconSvg?: string;\n}\n\n@Component({\n  tag: 'pn-usp-simple',\n  styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n  @Prop() heading?: string;\n  @Prop() headingLevel: HeadingLevel = 'h2';\n  @Prop() preamble?: string;\n  @Prop() ctaButtonsLabel?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n\n  private get hasPrimaryButton(): boolean {\n    return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n  }\n\n  private get hasSecondaryButton(): boolean {\n    return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n  }\n\n  private renderButton(props: ButtonProps, isPrimary: boolean) {\n    const buttonType = isPrimary ? 'primary' : 'secondary';\n    return (\n      <pn-button\n        icon={props.iconSvg}\n        left-icon={Boolean(props.iconSvg)}\n        href={props.url}\n        class=\"btn\"\n        data-button-type={buttonType}\n        appearance={isPrimary ? 'default' : 'light'}\n      >\n        {props.text}\n      </pn-button>\n    );\n  }\n\n  render() {\n    const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n    const headingId = 'usp-heading';\n\n    return (\n      <Host>\n        <div class=\"pn-usp-simple\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n          <div class=\"content\">\n            {this.heading && (\n              <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n                {this.heading}\n              </HeadingTag>\n            )}\n\n            {this.preamble && (\n              <div class=\"preamble\">\n                {this.preamble}\n              </div>\n            )}\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n                {this.hasPrimaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.primaryButtonText!,\n                      url: this.primaryButtonUrl!,\n                      iconSvg: this.primaryButtonIconSvg,\n                    },\n                    true,\n                  )}\n                {this.hasSecondaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.secondaryButtonText!,\n                      url: this.secondaryButtonUrl!,\n                    },\n                    false,\n                  )}\n              </div>\n            )}\n          </div>\n          <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n            {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pn-chat.service-f4037d6f.js.map

@@ -1 +0,0 @@
-{"file":"pn-chat.service-f4037d6f.js","mappings":";;MAIa,aAAa;IACP,SAAS,CAAC;IACV,OAAO,CAAC;IACR,SAAS,CAAC;IACV,WAAW,CAAC;IACrB,WAAW,GAAG,IAAI,WAAW,CAAC,eAAe,CAAC,CAAC;IACtC,cAAc,GAAG,wBAAwB,CAAC;IAC1C,sBAAsB,GAAG,sCAAsC,CAAC;IAChE,aAAa,GAAG,+BAA+B,CAAC;IAChD,eAAe,GAAG,iCAAiC,CAAC;IACpD,sBAAsB,GAAG,oCAAoC,CAAC;IAC9D,mBAAmB,GAAG,8BAA8B,CAAC;IAEtE,YAAY,QAAgB,EAAE,MAAc,EAAE,QAAgB;QAC5D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;KACzC;IAED,MAAM,SAAS,CAAC,MAAc,EAAE,MAAc;QAC5C,IAAI,KAAK,GACT;YACE,MAAM,EAAE,IAAI,CAAC,OAAO;YACpB,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,YAAY,EAAE,MAAM;YACpB,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;QACtD,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CAC5C,QAAQ,EACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1B,KAAK,CACN,CAAW,CAAC;QAEb,OAAO,IAAI,CAAC,cAAc,CAAS,IAAI,EAAE,MAAM,CAAC,CAAC;KAClD;IAED,MAAM,aAAa,CAAC,MAAc,EAAE,eAA6B;QAC/D,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,eAAe,CAAC;SACxB;QAED,IAAI,KAAK,GAAmB;YAC1B,MAAM,EAAE,IAAI,CAAC,OAAO;YACpB,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,YAAY,EAAE,MAAM;SACrB,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC9D,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CAC5C,QAAQ,EACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1B,KAAK,CACN,CAAW,CAAC;QAEb,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,eAAe,CAAC;SACxB;QAED,OAAO,IAAI,CAAC,cAAc,CAAe,IAAI,EAAE,eAAe,CAAC,CAAC;KACjE;IAED,MAAM,WAAW,CAAC,OAAgB,EAAE,MAAe,EAAE,MAAc,EAAE,aAAqB,EAAE,WAAwB;QAClH,IAAI,kBAAkB,CAAC;QAEvB,QAAQ,WAAW;YACjB,KAAK,MAAM;gBACT,kBAAkB,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;gBACxF,MAAM;YACR,KAAK,QAAQ;gBACX,kBAAkB,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;gBAC1F,MAAM;YACR;gBACE,kBAAkB,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;SAC3F;QAED,IAAI,CAAC,kBAAkB,EAAE;YACvB,OAAO,aAAa,CAAC;SACtB;QAED,IAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YACpC,kBAAkB,GAAG,kBAAkB,CAAC,SAAS,CAAC,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SAC5F;QAED,OAAO,kBAAkB,CAAC;KAC3B;IAED,MAAM,mBAAmB,CAAC,MAAc,EAAE,aAAqB;QAC7D,IAAI,KAAK,GAA8B;YACrC,YAAY,EAAE,MAAM;YACpB,qBAAqB,EAAE,aAAa;SACrC,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC9D,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CAC9B,QAAQ,EACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1B,KAAK,CACN,CAAC;KACH;IAED,MAAM,cAAc,CAAC,MAAe;QAClC,IAAI,KAAK,GAAwB;YAC/B,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,MAAM,EAAE,IAAI,CAAC,OAAO;YACpB,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,EAAE;YAChB,UAAU,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC3D,IAAI,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CACzC,QAAQ,EACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1B,KAAK,CACI,CAAC;QAEZ,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAY,CAAC;KACpC;IAEO,MAAM,eAAe,CAAC,OAAgB,EAAE,MAAe,EAAE,MAAc,EAAE,aAAqB;QACpG,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;YACvB,OAAO,aAAa,CAAC;SACtB;QAED,IAAI,KAAK,GAA0B;YACjC,MAAM,EAAE,IAAI,CAAC,OAAO;YACpB,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;QACrD,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CAC5C,QAAQ,EACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1B,KAAK,CACN,CAAW,CAAC;QAEb,OAAO,IAAI,CAAC,cAAc,CAAS,IAAI,EAAE,aAAa,CAAC,EAAE,EAAE,IAAI,aAAa,CAAC;KAC9E;IAEO,MAAM,iBAAiB,CAAC,OAAgB,EAAE,MAAe,EAAE,MAAc,EAAE,aAAqB;QACtG,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;YACvB,OAAO,aAAa,CAAC;SACtB;QAED,IAAI,KAAK,GACT;YACE,MAAM,EAAE,IAAI,CAAC,OAAO;YACpB,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC;QACvD,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,WAAW,CAAC,SAAS,CAC5C,QAAQ,EACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1B,KAAK,CACN,CAAW,CAAC;QAEb,OAAO,IAAI,CAAC,cAAc,CAAS,IAAI,EAAE,aAAa,CAAC,EAAE,EAAE,IAAI,aAAa,CAAC;KAC9E;IAEO,cAAc,CAAC,QAAgB;QACrC,OAAO,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC;KAClH;IAEO,cAAc,CAAI,IAAU,EAAE,aAAmB,EAAE,gBAAyB,KAAK;QACvF,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,aAAa,CAAC;SACtB;QAED,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAM,CAAC;QACvC,IAAI,CAAC,UAAU,IAAI,aAAa,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC9D,OAAO,aAAa,CAAC;SACtB;QAED,OAAO,UAAU,CAAC;KACnB;IAEO,cAAc,CAAC,KAAU,EAAE,SAAiB,MAAM,EAAE,OAAoB,MAAM,EAAE,eAAuB,kBAAkB;QAC/H,OAAO;YACL,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;YACd,OAAO,EACP;gBACE,cAAc,EAAE,YAAY;gBAC5B,gCAAgC,EAAE,kCAAkC;aACrE;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;SAC5B,CAAC;KACH;IAED,gBAAgB,CAAC,QAAwB,EAAE,aAAsB;QAC/D,OAAO,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,IAAI,aAAa,CAAC;KACrD;;;;;","names":[],"sources":["src/components/widgets/pn-chat/pn-chat.service.ts"],"sourcesContent":["import { FetchHelper } from '@/globals/FetchHelper';\nimport { ChatMessage, ChatMessages, MessageType } from './types';\nimport { ChatParameters, ChatStartParameters, ChatMessageParameters, ChatUpdateParameters, ChatLastMessageParameters } from './pn-chat.models';\n\nexport class PnChatService {\n  private readonly _endpoint;\n  private readonly _market;\n  private readonly _language;\n  private readonly _currentUrl;\n  private fetchHelper = new FetchHelper('PnChatService');\n  private readonly _startChatPath = `/api/sfchat/start-chat`;\n  private readonly _fetchChatMessagesPath = `/api/sfchat/get-conversation-entries`;\n  private readonly _sendTextPath = `/api/sfchat/send-text-message`;\n  private readonly _sendChoicePath = `/api/sfchat/send-choice-message`;\n  private readonly _updateLastMessagePath = `/api/sfchat/update-last-message-id`;\n  private readonly _hasNewMessagesPath = `/api/sfchat/has-new-messages`;\n\n  constructor(endpoint: string, market: string, language: string) {\n    this._endpoint = this.formatEndpoint(endpoint);\n    this._market = market;\n    this._language = language;\n    this._currentUrl = window.location.href;\n  }\n\n  async startChat(chatId: string, itemId: string): Promise<string> {\n    let model: ChatStartParameters = \n    {\n      market: this._market,\n      language: this._language,\n      chatIdString: chatId,\n      itemId: itemId,\n      currentUrl: this._currentUrl\n    };\n\n    const fetchUrl = this._endpoint + this._startChatPath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false\n    )) as string;\n\n    return this.handleResponse<string>(data, chatId);\n  }\n\n  async fetchMessages(chatId: string, prevMessageData: ChatMessages) : Promise<ChatMessages> {\n    if (!chatId) {\n      return prevMessageData;\n    }\n\n    let model: ChatParameters = {\n      market: this._market,\n      language: this._language,\n      chatIdString: chatId\n    };\n\n    const fetchUrl = this._endpoint + this._fetchChatMessagesPath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    if (!data) {\n      return prevMessageData;\n    }\n    \n    return this.handleResponse<ChatMessages>(data, prevMessageData);\n  }\n\n  async sendMessage(content : string, itemId : string, chatId: string, lastMessageId: string, messageType: MessageType) : Promise<string> {\n    let newLatestMessageId;\n\n    switch (messageType) {\n      case 'Text':\n        newLatestMessageId = await this.sendTextMessage(content, itemId, chatId, lastMessageId);\n        break;\n      case 'Choice':\n        newLatestMessageId = await this.sendChoiceMessage(content, itemId, chatId, lastMessageId);\n        break;\n      default:\n        newLatestMessageId = await this.sendTextMessage(content, itemId, chatId, lastMessageId);\n    }\n\n    if (!newLatestMessageId) {\n      return lastMessageId;\n    }\n\n    if (newLatestMessageId.includes(\",\")) {\n      newLatestMessageId = newLatestMessageId.substring(newLatestMessageId.lastIndexOf(\",\") + 1);\n    }\n\n    return newLatestMessageId;\n  }\n\n  async updateLastMessageId(chatId: string, lastMessageId: string) {\n    let model: ChatLastMessageParameters = {\n      chatIdString: chatId,\n      latestMessageIdString: lastMessageId\n    };\n\n    const fetchUrl = this._endpoint + this._updateLastMessagePath;\n    await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    );\n  }\n\n  async hasNewMessages(itemId : string) : Promise<boolean> {\n    let model: ChatStartParameters = {\n      language: this._language,\n      market: this._market,\n      itemId: itemId,\n      chatIdString: \"\",\n      currentUrl: this._currentUrl\n    };\n\n    const fetchUrl = this._endpoint + this._hasNewMessagesPath;\n    let data = await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    ) as string;\n\n    if (!data) {\n      return false;\n    }\n\n    return JSON.parse(data) as boolean;\n  }\n\n  private async sendTextMessage(content : string, itemId : string, chatId: string, defaultReturn: string) : Promise<string> {\n    if (!chatId || !content) {\n      return defaultReturn;\n    }\n\n    let model: ChatMessageParameters = {\n      market: this._market,\n      language: this._language,\n      chatIdString: chatId,\n      content: content,\n      itemId: itemId,\n      currentUrl: this._currentUrl\n    };\n\n    const fetchUrl = this._endpoint + this._sendTextPath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    return this.handleResponse<string>(data, defaultReturn)?.id ?? defaultReturn;\n  }\n\n  private async sendChoiceMessage(content : string, itemId : string, chatId: string, defaultReturn: string) : Promise<string> {\n    if (!chatId || !content) {\n      return defaultReturn;\n    }\n\n    let model: ChatMessageParameters = \n    {\n      market: this._market,\n      language: this._language,\n      chatIdString: chatId,\n      content: content,\n      itemId: itemId,\n      currentUrl: this._currentUrl\n    };\n\n    const fetchUrl = this._endpoint + this._sendChoicePath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    return this.handleResponse<string>(data, defaultReturn)?.id ?? defaultReturn;\n  }\n\n  private formatEndpoint(endpoint: string) : string {\n    return endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;\n  }\n\n  private handleResponse<T>(data : any, defaultReturn : any, checkForArray: boolean = false) {\n    if (!data) {\n      return defaultReturn;\n    }\n\n    let parsedData = JSON.parse(data) as T;\n    if (!parsedData || checkForArray && !Array.isArray(parsedData)) {\n      return defaultReturn;\n    }\n\n    return parsedData;\n  }\n  \n  private getRequestInit(model: any, method: string = 'POST', mode: RequestMode = 'cors', contentTypes: string = 'application/json'): RequestInit {\n    return {\n      mode: mode,\n      method: method,\n      headers: \n      {\n        'Content-Type': contentTypes,\n        'CustomValidateAntiForgeryToken': \"01001101010001010100111101010111\"\n      },\n      body: JSON.stringify(model)\n    };\n  }\n\n  GetLastMessageId(messages : ChatMessage[], lastMessageId : string) {\n    return messages?.at(-1)?.messageId ?? lastMessageId;\n  }\n}\n"],"version":3}

package/dist/esm/pn-search.entry.js

@@ -1,50 +0,0 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-c311acd6.js';
-
-const pnSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.pn-search{background-color:transparent;display:flex;flex-direction:column;align-items:center}.pn-search .graphics-container{padding-bottom:1rem}.pn-search .graphics{border-radius:50%;height:clamp(12rem, 14vw, 16rem);width:clamp(12rem, 14vw, 16rem);aspect-ratio:1/1;object-fit:cover}.pn-search .illustration{--pn-width:12rem;--pn-height:12rem}.pn-search .search-container{margin:clamp(1rem, 3vh, 1.5rem) 0}.pn-search .search-container ::placeholder{color:#5e554a}.pn-search .main{text-align:center;width:100%}.pn-search .heading{color:#000000;font-size:clamp(2rem, 4vw, 3.2rem);line-height:1;margin:0}.pn-search .search-container{display:flex;width:100%}.pn-search .search-container .search-component input,.pn-search .search-container .search-component button{font-size:1.6rem}.pn-search .cta{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-top:2rem;gap:1.2rem;width:100%}.pn-search .btn-mw[data-secondary]{color:#005d92;font-weight:500;text-decoration:underline}@media (min-width: 768px){.pn-search{flex-direction:row;align-items:flex-start}.pn-search .graphics-container{padding-right:clamp(2rem, 3vw, 4rem);padding-bottom:0}.pn-search .illustration{--pn-width:15rem;--pn-height:15rem}.pn-search .main{text-align:left}.pn-search pn-marketweb-search{width:40rem}.pn-search .cta{gap:1.6rem}.pn-search .btn-mw[data-primary]{width:auto;margin-bottom:0}.pn-search .btn-mw[data-secondary]{margin-top:0}}@media (min-width: 1200px){.pn-search{padding:2.4rem}.pn-search .search-container{max-width:400px}.pn-search .illustration{--pn-width:16rem;--pn-height:16rem}}@media (min-width: 1600px){.pn-search{max-width:1400px;margin:0 auto;padding:3.2rem}.pn-search .search-container{max-width:500px}}";
-const PnSearchStyle0 = pnSearchCss;
-
-const PNSearch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.pnSearch = createEvent(this, "pnSearch", 7);
-        this.componentAriaLabel = undefined;
-        this.heading = undefined;
-        this.pnIllustrationSvg = undefined;
-        this.imageUrl = undefined;
-        this.imageAltText = undefined;
-        this.searchPlaceholder = undefined;
-        this.searchButtonText = undefined;
-        this.searchButtonLabel = undefined;
-        this.searchUrl = undefined;
-        this.primaryButtonText = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonIconSvg = undefined;
-        this.secondaryButtonText = undefined;
-        this.secondaryButtonUrl = undefined;
-        this.searchDescriptionAria = undefined;
-        this.ctaActionsLabel = undefined;
-        this.searchType = undefined;
-    }
-    get hostElement() { return getElement(this); }
-    pnSearch;
-    doSearch = (e) => {
-        if (!this.searchUrl) {
-            console.warn('Search URL is not defined');
-            return;
-        }
-        const searchDetail = {
-            query: e.detail,
-            timestamp: Date.now(),
-        };
-        this.pnSearch.emit(searchDetail);
-    };
-    render() {
-        const hasButtons = this.primaryButtonUrl || this.secondaryButtonUrl;
-        return (h(Host, { key: 'fd8fdc6f6bc5d4743ff328d914a6b2b55d840503' }, h("div", { key: 'fb4be66b1a38fde9e5b0b0e3fc4abbdf0f1b2f38', class: "pn-search", role: "search", "aria-label": this.componentAriaLabel }, h("div", { key: 'b07dbfb4dcdf54e88ac790d4da6aa97a00356d04', class: "graphics-container", "aria-hidden": !this.imageAltText }, !this.pnIllustrationSvg && this.imageUrl && h("img", { key: '50ad3338cf3912ff74a50a6b72102e6d5e61f4f6', class: "graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), this.pnIllustrationSvg && h("pn-illustration", { key: '3956261bb79fbac47239f2091e3d50344e94d555', class: "illustration", illustration: this.pnIllustrationSvg, role: "presentation" })), h("div", { key: '17c6d2c2d1cd812f583f072b17adc3747562ae85', class: "main" }, h("h2", { key: '9214e9895160ee1d316f1ee09f4ddacb7c81f452', class: "heading", id: "search-section-heading" }, this.heading), h("div", { key: '1db65a02236162c22210981d11d3567e6cc27f58', class: "search-container", "aria-labelledby": "search-section-heading" }, h("pn-marketweb-search", { key: 'a560d93bb4747643a5c81610c2e55d0af0825559', class: "search-component", label: this.searchButtonLabel, name: "search", inputid: "search-field", autocomplete: "off", placeholder: this.searchPlaceholder, button: this.searchButtonText, disabled: false, loading: false, light: false, list: null, onSearch: this.doSearch, "data-search-url": this.searchUrl, "aria-describedby": "search-description" }), this.searchDescriptionAria && (h("div", { key: '3d59bd65947e1ecbdcfb75667135dc40e2482955', id: "search-description", class: "sr-only" }, this.searchDescriptionAria))), hasButtons && (h("div", { key: '1d9a2bd31084ae806879e6bc9e820591e3bd4b29', class: "cta", role: "group", "aria-label": this.ctaActionsLabel }, this.primaryButtonUrl && (h("pn-button", { key: '5ddda20fd6846f75e301272e52fc3c200e2c71bb', appearance: "light", variant: "outlined", small: true, icon: this.primaryButtonIconSvg, "left-icon": Boolean(this.primaryButtonIconSvg), class: "btn-mw", href: this.primaryButtonUrl, "data-primary": true }, this.primaryButtonText)), this.secondaryButtonUrl && (h("a", { key: 'a82cf19405f6144f9b5fd789ffa1242128a4c8f1', href: this.secondaryButtonUrl, class: "btn-mw", "data-secondary": true, role: "button" }, this.secondaryButtonText))))))));
-    }
-};
-PNSearch.style = PnSearchStyle0;
-
-export { PNSearch as pn_search };
-
-//# sourceMappingURL=pn-search.entry.js.map

package/dist/esm/pn-search.entry.js.map

@@ -1 +0,0 @@
-{"file":"pn-search.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wlEAAwlE,CAAC;AAC7mE,uBAAe,WAAW;;MCUb,QAAQ;;;;;;;;;;;;;;;;;;;;;;;IAqBV,QAAQ,CAAmC;IAE5C,QAAQ,GAAG,CAAC,CAAc;QAChC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAC1C,OAAO;SACR;QAED,MAAM,YAAY,GAAsB;YACtC,KAAK,EAAE,CAAC,CAAC,MAAM;YACf,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;SACtB,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAClC,CAAC;IAEF,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,CAAC;QAEpE,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,kBAAkB,IACtE,4DAAK,KAAK,EAAC,oBAAoB,iBAAc,CAAC,IAAI,CAAC,YAAY,IAC5D,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,EACrI,IAAI,CAAC,iBAAiB,IAAI,wEAAiB,KAAK,EAAC,cAAc,EAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,cAAc,GAAG,CACzH,EAEN,4DAAK,KAAK,EAAC,MAAM,IACf,2DAAI,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,wBAAwB,IAC5C,IAAI,CAAC,OAAO,CACV,EAEL,4DAAK,KAAK,EAAC,kBAAkB,qBAAiB,wBAAwB,IACpE,4EACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,cAAc,EACtB,YAAY,EAAC,KAAK,EAClB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,qBACN,IAAI,CAAC,SAAS,sBACd,oBAAoB,GACrC,EACD,IAAI,CAAC,qBAAqB,KACzB,4DAAK,EAAE,EAAC,oBAAoB,EAAC,KAAK,EAAC,SAAS,IACzC,IAAI,CAAC,qBAAqB,CACvB,CACP,CACG,EAEL,UAAU,KACT,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,eAAe,IAC3D,IAAI,CAAC,gBAAgB,KACpB,kEACE,UAAU,EAAC,OAAO,EAClB,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,CAAC,oBAAoB,eACpB,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAC7C,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,IAAI,CAAC,gBAAgB,0BAG1B,IAAI,CAAC,iBAAiB,CACb,CACb,EACA,IAAI,CAAC,kBAAkB,KACtB,0DAAG,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAC,QAAQ,0BAAgB,IAAI,EAAC,QAAQ,IAC1E,IAAI,CAAC,mBAAmB,CACvB,CACL,CACG,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/widgets/pn-search/pn-search.scss?tag=pn-search","src/components/widgets/pn-search/pn-search.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n.pn-search {\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .graphics-container {\n    padding-bottom: 1rem;\n  }\n\n  .graphics {\n    border-radius: 50%;\n    height: clamp(12rem, 14vw, 16rem);\n    width: clamp(12rem, 14vw, 16rem);\n    aspect-ratio: 1 / 1;\n    object-fit: cover;\n  }\n\n  .illustration {\n    --pn-width: #{$illustrationWidth};\n    --pn-height: #{$illustrationWidth};\n  }\n\n  .search-container {\n    margin: clamp(1rem, 3vh, 1.5rem) 0;\n\n    ::placeholder {\n      color: $gray700;\n    }\n  }\n\n  .main {\n    text-align: center;\n    width: 100%;\n  }\n\n  .heading {\n    color: $black;\n    font-size: clamp(2rem, 4vw, 3.2rem);\n    line-height: 1;\n    margin: 0;\n  }\n\n  .search-container {\n    display: flex;\n    width: 100%;\n\n    .search-component {\n      input,\n      button {\n        font-size: 1.6rem;\n      }\n    }\n  }\n\n  .cta {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-top: 2rem;\n    gap: 1.2rem;\n    width: 100%;\n  }\n\n  .btn-mw[data-secondary] {\n    color: $blue700;\n    font-weight: 500;\n    text-decoration: underline;\n  }\n}\n\n@media (min-width: 768px) {\n  .pn-search {\n    flex-direction: row;\n    align-items: flex-start;\n\n    .graphics-container {\n      padding-right: clamp(2rem, 3vw, 4rem);\n      padding-bottom: 0;\n    }\n\n    .illustration {\n      --pn-width: #{$illustrationWidthMd};\n      --pn-height: #{$illustrationWidthMd};\n    }\n\n    .main {\n      text-align: left;\n    }\n\n    pn-marketweb-search {\n      width: 40rem;\n    }\n\n    .cta {\n      gap: 1.6rem;\n    }\n\n    .btn-mw[data-primary] {\n      width: auto;\n      margin-bottom: 0;\n    }\n\n    .btn-mw[data-secondary] {\n      margin-top: 0;\n    }\n  }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n  .pn-search {\n    padding: 2.4rem;\n\n    .search-container {\n      max-width: 400px;\n    }\n\n    .illustration {\n      --pn-width: #{$illustrationWidthLg};\n      --pn-height: #{$illustrationWidthLg};\n    }\n  }\n}\n\n@media (min-width: 1600px) {\n  .pn-search {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 3.2rem;\n\n    .search-container {\n      max-width: 500px;\n    }\n  }\n}\n","import { Component, Host, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\ninterface SearchEventDetail {\n  query: string;\n  timestamp: number;\n}\n\n@Component({\n  tag: 'pn-search',\n  styleUrl: 'pn-search.scss',\n})\nexport class PNSearch {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop() componentAriaLabel!: string;\n  @Prop() heading!: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n  @Prop() searchPlaceholder?: string;\n  @Prop() searchButtonText?: string;\n  @Prop() searchButtonLabel?: string;\n  @Prop() searchUrl?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() searchDescriptionAria?: string;\n  @Prop() ctaActionsLabel?: string;\n  @Prop() searchType: 'shipments' | 'episearch';\n\n  @Event() pnSearch!: EventEmitter<SearchEventDetail>;\n\n  private doSearch = (e: CustomEvent): void => {\n    if (!this.searchUrl) {\n      console.warn('Search URL is not defined');\n      return;\n    }\n\n    const searchDetail: SearchEventDetail = {\n      query: e.detail,\n      timestamp: Date.now(),\n    };\n\n    this.pnSearch.emit(searchDetail);\n  };\n\n  render() {\n    const hasButtons = this.primaryButtonUrl || this.secondaryButtonUrl;\n\n    return (\n      <Host>\n        <div class=\"pn-search\" role=\"search\" aria-label={this.componentAriaLabel}>\n          <div class=\"graphics-container\" aria-hidden={!this.imageAltText}>\n            {!this.pnIllustrationSvg && this.imageUrl && <img class=\"graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {this.pnIllustrationSvg && <pn-illustration class=\"illustration\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n\n          <div class=\"main\">\n            <h2 class=\"heading\" id=\"search-section-heading\">\n              {this.heading}\n            </h2>\n\n            <div class=\"search-container\" aria-labelledby=\"search-section-heading\">\n              <pn-marketweb-search\n                class=\"search-component\"\n                label={this.searchButtonLabel}\n                name=\"search\"\n                inputid=\"search-field\"\n                autocomplete=\"off\"\n                placeholder={this.searchPlaceholder}\n                button={this.searchButtonText}\n                disabled={false}\n                loading={false}\n                light={false}\n                list={null}\n                onSearch={this.doSearch}\n                data-search-url={this.searchUrl}\n                aria-describedby=\"search-description\"\n              />\n              {this.searchDescriptionAria && (\n                <div id=\"search-description\" class=\"sr-only\">\n                  {this.searchDescriptionAria}\n                </div>\n              )}\n            </div>\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaActionsLabel}>\n                {this.primaryButtonUrl && (\n                  <pn-button\n                    appearance=\"light\"\n                    variant=\"outlined\"\n                    small={true}\n                    icon={this.primaryButtonIconSvg}\n                    left-icon={Boolean(this.primaryButtonIconSvg)}\n                    class=\"btn-mw\"\n                    href={this.primaryButtonUrl}\n                    data-primary\n                  >\n                    {this.primaryButtonText}\n                  </pn-button>\n                )}\n                {this.secondaryButtonUrl && (\n                  <a href={this.secondaryButtonUrl} class=\"btn-mw\" data-secondary role=\"button\">\n                    {this.secondaryButtonText}\n                  </a>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pn-usp-simple.entry.js

@@ -1,52 +0,0 @@
-import { r as registerInstance, h, d as Host } from './index-c311acd6.js';
-import { H as HeadingTag } from './HeadingTag-e20016ab.js';
-
-const pnUspSimpleCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:root{--usp-preamble-margin:clamp(1.5rem, 3vw, 1.8rem)}.pn-usp-simple{background:linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);color:#2d2013;display:flex;flex-direction:column-reverse;max-width:100%;padding:clamp(2rem, 5vw, 5rem)}.pn-usp-simple .heading{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem}.pn-usp-simple .preamble{font-size:clamp(1rem, 4vw, 1.6rem);margin-top:var(--usp-preamble-margin);margin-bottom:var(--usp-preamble-margin)}.pn-usp-simple .cta{display:flex;font-size:clamp(1rem, 4vw, 1.6rem);flex-direction:column;gap:clamp(1rem, 4vw, 1.2rem);padding:0 6rem}.pn-usp-simple .image-container{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.pn-usp-simple .image-container .graphics{--pn-width:12rem !important;--pn-height:12rem !important}.pn-usp-simple .image-container .image{border-radius:50%}@media (min-width: 768px){.pn-usp-simple{flex-direction:row;align-items:center}.pn-usp-simple .content{max-width:60%}.pn-usp-simple .cta{flex-direction:row;gap:clamp(2rem, 3vw, 3rem);padding:0}.pn-usp-simple .image-container{flex:clamp(15rem, 3vw, 20rem);margin-bottom:0}.pn-usp-simple .image-container .graphics{--pn-width:15rem;--pn-height:15rem}}@media (min-width: 1200px){.pn-usp-simple{max-width:1140px;margin:0 auto}.pn-usp-simple .content{max-width:50%}.pn-usp-simple .image-container .graphics{--pn-width:18rem;--pn-height:18rem}}@media (min-width: 1640px){.pn-usp-simple{max-width:1400px}.pn-usp-simple .image-container .graphics{--pn-width:20rem;--pn-height:20rem}}";
-const PnUspSimpleStyle0 = pnUspSimpleCss;
-
-const PnUspSimple = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.heading = undefined;
-        this.headingLevel = 'h2';
-        this.preamble = undefined;
-        this.ctaButtonsLabel = undefined;
-        this.primaryButtonText = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonIconSvg = undefined;
-        this.secondaryButtonText = undefined;
-        this.secondaryButtonUrl = undefined;
-        this.pnIllustrationSvg = undefined;
-        this.imageUrl = undefined;
-        this.imageAltText = undefined;
-    }
-    get hasPrimaryButton() {
-        return Boolean(this.primaryButtonText && this.primaryButtonUrl);
-    }
-    get hasSecondaryButton() {
-        return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);
-    }
-    renderButton(props, isPrimary) {
-        const buttonType = isPrimary ? 'primary' : 'secondary';
-        return (h("pn-button", { icon: props.iconSvg, "left-icon": Boolean(props.iconSvg), href: props.url, class: "btn", "data-button-type": buttonType, appearance: isPrimary ? 'default' : 'light' }, props.text));
-    }
-    render() {
-        const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;
-        const headingId = 'usp-heading';
-        return (h(Host, { key: '86a81876d75377462d4a94cc9ca0d8a7b8150791' }, h("div", { key: '59568c012efdb309dc7e9b3ed64a0a344ab28360', class: "pn-usp-simple", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { key: '54685035dc6a2eba2130693961b87fe315023f27', class: "content" }, this.heading && (h(HeadingTag, { key: '1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb', id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { key: 'd143480b02ecb45130ac2a825e392dbe7c0f3128', class: "preamble" }, this.preamble)), hasButtons && (h("div", { key: 'f618b4b041cf79eac3b67dd6d3c26697e29a72c6', class: "cta", role: "group", "aria-label": this.ctaButtonsLabel }, this.hasPrimaryButton &&
-            this.renderButton({
-                text: this.primaryButtonText,
-                url: this.primaryButtonUrl,
-                iconSvg: this.primaryButtonIconSvg,
-            }, true), this.hasSecondaryButton &&
-            this.renderButton({
-                text: this.secondaryButtonText,
-                url: this.secondaryButtonUrl,
-            }, false)))), h("div", { key: 'cb22f2bd663e90bd009fac12d4662c729bffdd68', class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { key: 'f76f0a6cbdb0cdc8847f062410f7c20c847d8a47', class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), !this.imageUrl && this.pnIllustrationSvg && h("pn-illustration", { key: '5653434436d33c04820f3ee201fd1e2853008e1b', class: "illustration graphics", illustration: this.pnIllustrationSvg, role: "presentation" })))));
-    }
-};
-PnUspSimple.style = PnUspSimpleStyle0;
-
-export { PnUspSimple as pn_usp_simple };
-
-//# sourceMappingURL=pn-usp-simple.entry.js.map

package/dist/esm/pn-usp-simple.entry.js.map

@@ -1 +0,0 @@
-{"file":"pn-usp-simple.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,25DAA25D,CAAC;AACn7D,0BAAe,cAAc;;MCahB,WAAW;;;;4BAEe,IAAI;;;;;;;;;;;;IAYzC,IAAY,gBAAgB;QAC1B,OAAO,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACjE;IAED,IAAY,kBAAkB;QAC5B,OAAO,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACrE;IAEO,YAAY,CAAC,KAAkB,EAAE,SAAkB;QACzD,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;QACvD,QACE,iBACE,IAAI,EAAE,KAAK,CAAC,OAAO,eACR,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,EAAC,KAAK,sBACO,UAAU,EAC5B,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,IAE1C,KAAK,CAAC,IAAI,CACD,EACZ;KACH;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,CAAC;QACpE,MAAM,SAAS,GAAG,aAAa,CAAC;QAEhC,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,qBAAkB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,IAC5F,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,KACX,EAAC,UAAU,qDAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,SAAS,IACpE,IAAI,CAAC,OAAO,CACF,CACd,EAEA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,UAAU,KACT,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,eAAe,IAC3D,IAAI,CAAC,gBAAgB;YACpB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,iBAAkB;gBAC7B,GAAG,EAAE,IAAI,CAAC,gBAAiB;gBAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB;aACnC,EACD,IAAI,CACL,EACF,IAAI,CAAC,kBAAkB;YACtB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,mBAAoB;gBAC/B,GAAG,EAAE,IAAI,CAAC,kBAAmB;aAC9B,EACD,KAAK,CACN,CACC,CACP,CACG,EACN,4DAAK,KAAK,EAAC,iBAAiB,iBAAc,CAAC,IAAI,CAAC,YAAY,IACzD,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,EAChH,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,IAAI,wEAAiB,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,cAAc,GAAG,CACpJ,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/widgets/pn-usp-simple/pn-usp-simple.scss?tag=pn-usp-simple","src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:root {\n  --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\n.pn-usp-simple {\n  background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n  color: $gray900;\n  display: flex;\n  flex-direction: column-reverse;\n  max-width: 100%;\n  padding: clamp(2rem, 5vw, 5rem);\n\n  .heading {\n    font-size: clamp(2rem, 4vw, 3rem);\n    font-weight: 700;\n    margin-bottom: 1rem;\n  }\n\n  .preamble {\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    margin-top: var(--usp-preamble-margin);\n    margin-bottom: var(--usp-preamble-margin);\n  }\n\n  .cta {\n    display: flex;\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    flex-direction: column;\n    gap: clamp(1rem, 4vw, 1.2rem);\n    padding: 0 6rem;\n  }\n\n  .image-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 2rem;\n\n    .graphics {\n      --pn-width: #{$graphicsWidth} !important;\n      --pn-height: #{$graphicsWidth} !important;\n    }\n\n    .image {\n      border-radius: 50%;\n    }\n  }\n}\n\n@media (min-width: 768px) {\n  .pn-usp-simple {\n    flex-direction: row;\n    align-items: center;\n\n    .content {\n      max-width: 60%;\n    }\n\n    .cta {\n      flex-direction: row;\n      gap: clamp(2rem, 3vw, 3rem);\n      padding: 0;\n    }\n\n    .image-container {\n      flex: clamp(15rem, 3vw, 20rem);\n      margin-bottom: 0;\n\n      .graphics {\n        --pn-width: #{$graphicsWidthMd};\n        --pn-height: #{$graphicsWidthMd};\n      }\n    }\n  }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n  .pn-usp-simple {\n    max-width: 1140px;\n    margin: 0 auto;\n\n    .content {\n      max-width: 50%;\n    }\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXl};\n        --pn-height: #{$graphicsWidthXl};\n      }\n    }\n  }\n}\n\n@media (min-width: 1640px) {\n  .pn-usp-simple {\n    max-width: 1400px;\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXxl};\n        --pn-height: #{$graphicsWidthXxl};\n      }\n    }\n  }\n}\n","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n  text: string;\n  url: string;\n  iconSvg?: string;\n}\n\n@Component({\n  tag: 'pn-usp-simple',\n  styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n  @Prop() heading?: string;\n  @Prop() headingLevel: HeadingLevel = 'h2';\n  @Prop() preamble?: string;\n  @Prop() ctaButtonsLabel?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n\n  private get hasPrimaryButton(): boolean {\n    return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n  }\n\n  private get hasSecondaryButton(): boolean {\n    return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n  }\n\n  private renderButton(props: ButtonProps, isPrimary: boolean) {\n    const buttonType = isPrimary ? 'primary' : 'secondary';\n    return (\n      <pn-button\n        icon={props.iconSvg}\n        left-icon={Boolean(props.iconSvg)}\n        href={props.url}\n        class=\"btn\"\n        data-button-type={buttonType}\n        appearance={isPrimary ? 'default' : 'light'}\n      >\n        {props.text}\n      </pn-button>\n    );\n  }\n\n  render() {\n    const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n    const headingId = 'usp-heading';\n\n    return (\n      <Host>\n        <div class=\"pn-usp-simple\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n          <div class=\"content\">\n            {this.heading && (\n              <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n                {this.heading}\n              </HeadingTag>\n            )}\n\n            {this.preamble && (\n              <div class=\"preamble\">\n                {this.preamble}\n              </div>\n            )}\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n                {this.hasPrimaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.primaryButtonText!,\n                      url: this.primaryButtonUrl!,\n                      iconSvg: this.primaryButtonIconSvg,\n                    },\n                    true,\n                  )}\n                {this.hasSecondaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.secondaryButtonText!,\n                      url: this.secondaryButtonUrl!,\n                    },\n                    false,\n                  )}\n              </div>\n            )}\n          </div>\n          <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n            {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}