@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/cjs/pn-chat.service-eaf6ed50.js

@@ -0,0 +1,157 @@
+'use strict';
+
+const FetchHelper = require('./FetchHelper-2d4c697c.js');
+
+class PnChatService {
+    _endpoint;
+    _market;
+    _language;
+    _currentUrl;
+    fetchHelper = new FetchHelper.FetchHelper('PnChatService');
+    _startChatPath = `/api/sfchat/start-chat`;
+    _fetchChatMessagesPath = `/api/sfchat/get-conversation-entries`;
+    _sendTextPath = `/api/sfchat/send-text-message`;
+    _sendChoicePath = `/api/sfchat/send-choice-message`;
+    _updateLastMessagePath = `/api/sfchat/update-last-message-id`;
+    _hasNewMessagesPath = `/api/sfchat/has-new-messages`;
+    constructor(endpoint, market, language) {
+        this._endpoint = this.formatEndpoint(endpoint);
+        this._market = market;
+        this._language = language;
+        this._currentUrl = window.location.href;
+    }
+    async startChat(chatId, itemId) {
+        let model = {
+            market: this._market,
+            language: this._language,
+            chatIdString: chatId,
+            itemId: itemId,
+            currentUrl: this._currentUrl
+        };
+        const fetchUrl = this._endpoint + this._startChatPath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        return this.handleResponse(data, chatId);
+    }
+    async fetchMessages(chatId, prevMessageData) {
+        if (!chatId) {
+            return prevMessageData;
+        }
+        let model = {
+            market: this._market,
+            language: this._language,
+            chatIdString: chatId
+        };
+        const fetchUrl = this._endpoint + this._fetchChatMessagesPath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        if (!data) {
+            return prevMessageData;
+        }
+        return this.handleResponse(data, prevMessageData);
+    }
+    async sendMessage(content, itemId, chatId, lastMessageId, messageType) {
+        let newLatestMessageId;
+        switch (messageType) {
+            case 'Text':
+                newLatestMessageId = await this.sendTextMessage(content, itemId, chatId, lastMessageId);
+                break;
+            case 'Choice':
+                newLatestMessageId = await this.sendChoiceMessage(content, itemId, chatId, lastMessageId);
+                break;
+            default:
+                newLatestMessageId = await this.sendTextMessage(content, itemId, chatId, lastMessageId);
+        }
+        if (!newLatestMessageId) {
+            return lastMessageId;
+        }
+        if (newLatestMessageId.includes(",")) {
+            newLatestMessageId = newLatestMessageId.substring(newLatestMessageId.lastIndexOf(",") + 1);
+        }
+        return newLatestMessageId;
+    }
+    async updateLastMessageId(chatId, lastMessageId) {
+        let model = {
+            chatIdString: chatId,
+            latestMessageIdString: lastMessageId
+        };
+        const fetchUrl = this._endpoint + this._updateLastMessagePath;
+        await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false);
+    }
+    async hasNewMessages(itemId) {
+        let model = {
+            language: this._language,
+            market: this._market,
+            itemId: itemId,
+            chatIdString: "",
+            currentUrl: this._currentUrl
+        };
+        const fetchUrl = this._endpoint + this._hasNewMessagesPath;
+        let data = await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false);
+        if (!data) {
+            return false;
+        }
+        return JSON.parse(data);
+    }
+    async sendTextMessage(content, itemId, chatId, defaultReturn) {
+        if (!chatId || !content) {
+            return defaultReturn;
+        }
+        let model = {
+            market: this._market,
+            language: this._language,
+            chatIdString: chatId,
+            content: content,
+            itemId: itemId,
+            currentUrl: this._currentUrl
+        };
+        const fetchUrl = this._endpoint + this._sendTextPath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        return this.handleResponse(data, defaultReturn)?.id ?? defaultReturn;
+    }
+    async sendChoiceMessage(content, itemId, chatId, defaultReturn) {
+        if (!chatId || !content) {
+            return defaultReturn;
+        }
+        let model = {
+            market: this._market,
+            language: this._language,
+            chatIdString: chatId,
+            content: content,
+            itemId: itemId,
+            currentUrl: this._currentUrl
+        };
+        const fetchUrl = this._endpoint + this._sendChoicePath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        return this.handleResponse(data, defaultReturn)?.id ?? defaultReturn;
+    }
+    formatEndpoint(endpoint) {
+        return endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;
+    }
+    handleResponse(data, defaultReturn, checkForArray = false) {
+        if (!data) {
+            return defaultReturn;
+        }
+        let parsedData = JSON.parse(data);
+        if (!parsedData || checkForArray && !Array.isArray(parsedData)) {
+            return defaultReturn;
+        }
+        return parsedData;
+    }
+    getRequestInit(model, method = 'POST', mode = 'cors', contentTypes = 'application/json') {
+        return {
+            mode: mode,
+            method: method,
+            headers: {
+                'Content-Type': contentTypes,
+                'CustomValidateAntiForgeryToken': "01001101010001010100111101010111"
+            },
+            body: JSON.stringify(model)
+        };
+    }
+    GetLastMessageId(messages, lastMessageId) {
+        return messages?.at(-1)?.messageId ?? lastMessageId;
+    }
+}
+
+exports.PnChatService = PnChatService;
+
+//# sourceMappingURL=pn-chat.service-eaf6ed50.js.map

package/cjs/pn-chat.service-eaf6ed50.js.map

@@ -0,0 +1 @@
+{"file":"pn-chat.service-eaf6ed50.js","mappings":"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","names":["FetchHelper"],"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/cjs/pn-choice-button.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
 
-const pnChoiceButtonCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-choice-button{user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:flex;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #d3cecb;color:#005d92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;transition:box-shadow 0.1s, background 0.2s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#e0f8ff;color:#005d92;border-color:#005d92;box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#ffffff;color:#005d92}pn-choice-button>input:hover+label.pn-choice-button{background:#e0f8ff}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-choice-button>input:active+label.pn-choice-button{background:#8eddf9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#d3cecb}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8eddf9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8eddf9;border:0.1rem solid #00a0d6}";
+const pnChoiceButtonCss = "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-choice-button{user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:flex;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #d3cecb;color:#005d92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;transition:box-shadow 0.1s, background 0.2s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#e0f8ff;color:#005d92;border-color:#005d92;box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#ffffff;color:#005d92}pn-choice-button>input:hover+label.pn-choice-button{background:#e0f8ff}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-choice-button>input:active+label.pn-choice-button{background:#8eddf9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#d3cecb}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8eddf9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8eddf9;border:0.1rem solid #00a0d6}";
 const PnChoiceButtonStyle0 = pnChoiceButtonCss;
 
 const PnChoiceButton = class {

package/cjs/pn-choice-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-choice-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+9CAA+9C,CAAC;AAC1/C,6BAAe,iBAAiB;;MCKnB,cAAc;;;;;;oBASF,UAAU;wBACJ,KAAK;uBACN,KAAK;6BACkB,KAAK;;;IAKxD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,gBAAgB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,kBAAkB;QAChB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,6BAA6B;QAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAqB,CAAC;QAEvF,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAClJA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACrDA,oEAAQ,CACF,CACH,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/input/pn-choice-button/pn-choice-button.scss?tag=pn-choice-button","src/components/input/pn-choice-button/pn-choice-button.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$check-timing: 180ms;\n$bg-timing: 220ms;\n$easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);\n\npn-choice-button {\n  user-select: none;\n  border: none;\n  display: inline-block;\n  background: #fff;\n  position: relative;\n  margin: 0.2em 0.4em;\n\n  input {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    margin: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    padding: 0.4rem 0.8rem;\n    border: 0.1rem solid $gray200;\n    color: $blue700;\n    font-weight: 500;\n    border-radius: 0.8rem;\n    text-align: center;\n    cursor: pointer;\n    transition:\n      box-shadow 0.1s,\n      background 0.2s;\n\n    pn-illustration {\n      display: inline-block;\n      width: 3rem;\n      height: 3rem;\n      margin-right: 0.9rem;\n    }\n  }\n}\n\npn-choice-button > input {\n  &:checked + label.pn-choice-button {\n    background: $blue50;\n    color: $blue700;\n    border-color: $blue700;\n    box-shadow:\n      0px 0.6px 1.8px rgba(0, 0, 0, 0.1),\n      0px 3.2px 7.2px rgba(0, 0, 0, 0.13);\n  }\n  &:indeterminate + label.pn-choice-button {\n    background: $white;\n    color: $blue700;\n  }\n\n  &:hover + label.pn-choice-button {\n    background: $blue50;\n  }\n\n  &:focus + label.pn-choice-button,\n  &:active + label.pn-choice-button {\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:active + label.pn-choice-button {\n    background: $blue200;\n  }\n\n  &:disabled + label.pn-choice-button {\n    background-color: $gray200;\n  }\n\n  &:checked + label.pn-choice-button:hover {\n    background: $blue200;\n  }\n\n  &:checked + label.pn-choice-button:active {\n    background: $blue200;\n    border: 0.1rem solid $blue400;\n  }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pn-choice-button',\n  styleUrl: 'pn-choice-button.scss',\n})\nexport class PnChoiceButton {\n  /** This will be emitted on change and input */\n  @Prop({ reflect: true }) value: any;\n  /** The name of the checkbox group */\n  @Prop() name?: string;\n  /** The string you put here will be what you'd make the ID of a native checkbox, you can't name props \"id\" because it's reserved\n   * so we went with the more descriptive name \"choice\", if you want to create labels for your checkbox, you will bind it to this ID\n   */\n  @Prop() choiceid: string;\n  @Prop() type: string = 'checkbox';\n  @Prop() disabled?: boolean = false;\n  @Prop() checked?: boolean = false;\n  @Prop({ mutable: true }) indeterminate?: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  @Listen('change')\n  handlechange() {\n    this.indeterminate = false;\n  }\n\n  componentDidLoad() {\n    this.checkAndSetIndeterminateState();\n  }\n\n  componentDidUpdate() {\n    this.checkAndSetIndeterminateState();\n  }\n\n  checkAndSetIndeterminateState() {\n    let checkbox = this.hostElement.querySelector(`#${this.choiceid}`) as HTMLInputElement;\n\n    if (checkbox) {\n      checkbox.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <input type={this.type} id={this.choiceid} value={this.value} name={this.name || this.choiceid} disabled={this.disabled} checked={this.checked} />\n        <label htmlFor={this.choiceid} class=\"pn-choice-button\">\n          <slot />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-choice-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,wyDAAwyD,CAAC;AACn0D,6BAAe,iBAAiB;;MCKnB,cAAc;;;;;;oBASF,UAAU;wBACJ,KAAK;uBACN,KAAK;6BACkB,KAAK;;;IAKxD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,gBAAgB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,kBAAkB;QAChB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,6BAA6B;QAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAqB,CAAC;QAEvF,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAClJA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACrDA,oEAAQ,CACF,CACH,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/input/pn-choice-button/pn-choice-button.scss?tag=pn-choice-button","src/components/input/pn-choice-button/pn-choice-button.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$check-timing: 180ms;\n$bg-timing: 220ms;\n$easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);\n\npn-choice-button {\n  user-select: none;\n  border: none;\n  display: inline-block;\n  background: #fff;\n  position: relative;\n  margin: 0.2em 0.4em;\n\n  input {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    margin: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    padding: 0.4rem 0.8rem;\n    border: 0.1rem solid $gray200;\n    color: $blue700;\n    font-weight: 500;\n    border-radius: 0.8rem;\n    text-align: center;\n    cursor: pointer;\n    transition:\n      box-shadow 0.1s,\n      background 0.2s;\n\n    pn-illustration {\n      display: inline-block;\n      width: 3rem;\n      height: 3rem;\n      margin-right: 0.9rem;\n    }\n  }\n}\n\npn-choice-button > input {\n  &:checked + label.pn-choice-button {\n    background: $blue50;\n    color: $blue700;\n    border-color: $blue700;\n    box-shadow:\n      0px 0.6px 1.8px rgba(0, 0, 0, 0.1),\n      0px 3.2px 7.2px rgba(0, 0, 0, 0.13);\n  }\n  &:indeterminate + label.pn-choice-button {\n    background: $white;\n    color: $blue700;\n  }\n\n  &:hover + label.pn-choice-button {\n    background: $blue50;\n  }\n\n  &:focus + label.pn-choice-button,\n  &:active + label.pn-choice-button {\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:active + label.pn-choice-button {\n    background: $blue200;\n  }\n\n  &:disabled + label.pn-choice-button {\n    background-color: $gray200;\n  }\n\n  &:checked + label.pn-choice-button:hover {\n    background: $blue200;\n  }\n\n  &:checked + label.pn-choice-button:active {\n    background: $blue200;\n    border: 0.1rem solid $blue400;\n  }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pn-choice-button',\n  styleUrl: 'pn-choice-button.scss',\n})\nexport class PnChoiceButton {\n  /** This will be emitted on change and input */\n  @Prop({ reflect: true }) value: any;\n  /** The name of the checkbox group */\n  @Prop() name?: string;\n  /** The string you put here will be what you'd make the ID of a native checkbox, you can't name props \"id\" because it's reserved\n   * so we went with the more descriptive name \"choice\", if you want to create labels for your checkbox, you will bind it to this ID\n   */\n  @Prop() choiceid: string;\n  @Prop() type: string = 'checkbox';\n  @Prop() disabled?: boolean = false;\n  @Prop() checked?: boolean = false;\n  @Prop({ mutable: true }) indeterminate?: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  @Listen('change')\n  handlechange() {\n    this.indeterminate = false;\n  }\n\n  componentDidLoad() {\n    this.checkAndSetIndeterminateState();\n  }\n\n  componentDidUpdate() {\n    this.checkAndSetIndeterminateState();\n  }\n\n  checkAndSetIndeterminateState() {\n    let checkbox = this.hostElement.querySelector(`#${this.choiceid}`) as HTMLInputElement;\n\n    if (checkbox) {\n      checkbox.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <input type={this.type} id={this.choiceid} value={this.value} name={this.name || this.choiceid} disabled={this.disabled} checked={this.checked} />\n        <label htmlFor={this.choiceid} class=\"pn-choice-button\">\n          <slot />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-cta-block.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
 
-const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#effbff}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#fdefee}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#f9f8f8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#edfbf3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{flex-direction:row;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:flex;flex:1;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem;text-wrap:balance}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005d92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
+const pnCtaBlockCss = "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-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#effbff}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#fdefee}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#f9f8f8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#edfbf3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{flex-direction:row;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:flex;flex:1;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem;text-wrap:balance}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005d92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
 const PnCtaBlockStyle0 = pnCtaBlockCss;
 
 const PnCtaBlock = class {

package/cjs/pn-cta-block.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-cta-block.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,u7IAAu7I,CAAC;AAC98I,yBAAe,aAAa;;MCKf,UAAU;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACEA,QAACC,UAAI,uDACHD,yFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACRA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,kBAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEfA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,CAAC,IAAI,CAAC,OAAO,IAAIA,gBAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC1E,CAAC,IAAI,CAAC,QAAQ,IAAIA,eAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,GAAG,IAAI,CACpE,GACJ,UAAU;YACVA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n  display: flex;\n  justify-content: center;\n\n  .cta-block {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    border-radius: 2.4rem;\n    padding: 3.2rem 2.4rem;\n    width: 100%;\n\n    @media screen and (min-width: $min-width-md) {\n      flex-direction: row;\n      padding: 2.4rem;\n    }\n\n    @media screen and (min-width: $max-width-xl) {\n      margin-right: auto;\n      margin-left: auto;\n      max-width: 95%;\n    }\n\n    @media screen and (min-width: $max-width-xxl) {\n      max-width: 90%;\n    }\n\n    &[pn-background-color='blue25'] {\n      background-color: $blue25;\n    }\n\n    &[pn-background-color='coral50'] {\n      background-color: $coral50;\n    }\n\n    &[pn-background-color='gray25'] {\n      background-color: $gray25;\n    }\n\n    &[pn-background-color='green25'] {\n      background-color: $green25;\n    }\n\n    &[pn-background-color='transparent'] {\n      padding: 0 3.2rem;\n    }\n  }\n\n  .cta-block--content-top {\n    .cta-block__content {\n      justify-content: flex-start;\n    }\n  }\n\n  .cta-block--large {\n    .cta-block__heading {\n      @media screen and (min-width: $min-width-md) {\n        font-size: 3.6rem;\n      }\n    }\n\n    .cta-block__text {\n      @media screen and (min-width: $min-width-md) {\n        font-size: 2rem;\n      }\n    }\n  }\n\n  .cta-block--small {\n    width: auto;\n\n    @media screen and (min-width:$min-width-lg) {\n      display: inline-flex;\n      max-width: 75%;\n\n      &.cta-block--center {\n        max-width: 66%;\n      }\n    }\n  }\n\n  .cta-block--center {\n    align-items: center;\n    flex-direction: column;\n    gap: 1.6rem;\n    text-align: center;\n\n    @media screen and (min-width:$min-width-md) {\n      gap: 2.4rem;\n      padding: 3.2rem;\n    }\n\n    .cta-block__content {\n      @media screen and (min-width: $min-width-md) {\n        max-width: 74rem;\n        padding: 0;\n      }\n    }\n\n    .cta-block__action {\n      margin-top: 0.8rem;\n\n      &>[slot='cta-button'] {\n        gap: 0.8rem;\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        flex-direction: row;\n        gap: 2.4rem;\n        margin-top: 1.6rem;\n\n        &.cta-block__button {\n          margin-bottom: 0;\n        }\n\n        &>[slot='cta-buttons'] {\n          flex-direction: row;\n          align-items: center;\n          gap: 2.4rem;\n        }\n      }\n    }\n\n    .cta-block__image-wrapper {\n      @media screen and (min-width: $min-width-md) {\n        display: block;\n      }\n\n      & > [slot='illustration'] {\n        padding-right: 0;\n      }\n    }\n\n    .cta-block__text {\n      margin-bottom: 0 !important;\n    }\n  }\n\n  .cta-block__image-wrapper {\n    margin-bottom: 1.6rem;\n\n    &>[slot='illustration'] {\n      &>picture>img {\n        border-radius: 0.8rem;\n        max-width: 100%;\n      }\n    }\n\n    @media screen and (min-width:$min-width-md) {\n      display: none;\n      max-width: 20%;\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      display: block;\n      margin-bottom: 0;\n\n      & > [slot='illustration'] {\n        padding-right: 3.2rem;\n      }\n    }\n  }\n\n  .cta-block__content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    justify-content: center;\n\n    @media screen and (min-width: $min-width-md) {\n      padding-right: 2.4rem;\n    }\n\n    .cta-block__heading,\n    .cta-block__text {\n      @media screen and (min-width: $min-width-md) {\n        max-width: 74rem;\n        text-wrap: balance;\n      }\n    }\n\n    .cta-block__text {\n      margin-bottom: 2.4rem;\n\n      @media screen and (min-width: $min-width-md) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  .cta-block__heading {\n    margin-bottom: 0.8rem;\n  }\n\n  .cta-block__action {\n    display: flex;\n\n    &>[slot='cta-buttons'] {\n      display: flex;\n      flex-direction: column;\n      row-gap: 1.6rem;\n      flex: 1;\n\n      @media screen and (min-width:$min-width-md) {\n        align-items: flex-end;\n        justify-content: center;\n        gap: 1.6rem;\n        margin-top: 0;\n      }\n\n      & > a {\n        color: $blue700;\n        font-weight: 500;\n        font-size: 1.6rem;\n        padding: 0.1rem;\n        text-decoration: none;\n\n        pn-icon svg {\n          transition: transform 0.3s ease-in-out;\n\n          path {\n            fill: $blue700;\n          }\n        }\n\n        &:hover {\n          color: $blue900;\n          text-decoration: underline;\n          \n          pn-icon svg {\n            transition: transform 0.3s ease-in-out;\n            transform: translateX(0.3rem);\n\n            path {\n              fill: $blue900;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'pn-cta-block',\n  styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = null;\n  @Prop() bodyText: string = null;\n\n  @Prop() pnBackgroundColor: string = null;\n\n  @Prop() isLarge: boolean = false;\n  @Prop() isCentered: boolean = false;\n  @Prop() isSmall: boolean = false;\n  @Prop() contentTop: boolean = false;\n\n  render() {\n    const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n    const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n    return (\n      <Host>\n        <div pn-background-color={this.pnBackgroundColor} class={`cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}`}>\n          {(hasImage ?\n            <div class=\"cta-block__image-wrapper\">\n              <slot name=\"illustration\" />\n            </div> : null\n          )}\n          <div class=\"cta-block__content\">\n            {(this.heading) ? <h2 class=\"cta-block__heading\">{this.heading}</h2> : null}\n            {(this.bodyText) ? <p class=\"cta-block__text\">{this.bodyText}</p> : null}\n          </div>\n          {(hasButtons ?\n            <div class=\"cta-block__action\">\n              <slot name=\"cta-buttons\" />\n            </div> : null\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-cta-block.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,gwJAAgwJ,CAAC;AACvxJ,yBAAe,aAAa;;MCKf,UAAU;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACEA,QAACC,UAAI,uDACHD,yFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACRA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,kBAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEfA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,CAAC,IAAI,CAAC,OAAO,IAAIA,gBAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC1E,CAAC,IAAI,CAAC,QAAQ,IAAIA,eAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,GAAG,IAAI,CACpE,GACJ,UAAU;YACVA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n  display: flex;\n  justify-content: center;\n\n  .cta-block {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    border-radius: 2.4rem;\n    padding: 3.2rem 2.4rem;\n    width: 100%;\n\n    @media screen and (min-width: $min-width-md) {\n      flex-direction: row;\n      padding: 2.4rem;\n    }\n\n    @media screen and (min-width: $max-width-xl) {\n      margin-right: auto;\n      margin-left: auto;\n      max-width: 95%;\n    }\n\n    @media screen and (min-width: $max-width-xxl) {\n      max-width: 90%;\n    }\n\n    &[pn-background-color='blue25'] {\n      background-color: $blue25;\n    }\n\n    &[pn-background-color='coral50'] {\n      background-color: $coral50;\n    }\n\n    &[pn-background-color='gray25'] {\n      background-color: $gray25;\n    }\n\n    &[pn-background-color='green25'] {\n      background-color: $green25;\n    }\n\n    &[pn-background-color='transparent'] {\n      padding: 0 3.2rem;\n    }\n  }\n\n  .cta-block--content-top {\n    .cta-block__content {\n      justify-content: flex-start;\n    }\n  }\n\n  .cta-block--large {\n    .cta-block__heading {\n      @media screen and (min-width: $min-width-md) {\n        font-size: 3.6rem;\n      }\n    }\n\n    .cta-block__text {\n      @media screen and (min-width: $min-width-md) {\n        font-size: 2rem;\n      }\n    }\n  }\n\n  .cta-block--small {\n    width: auto;\n\n    @media screen and (min-width:$min-width-lg) {\n      display: inline-flex;\n      max-width: 75%;\n\n      &.cta-block--center {\n        max-width: 66%;\n      }\n    }\n  }\n\n  .cta-block--center {\n    align-items: center;\n    flex-direction: column;\n    gap: 1.6rem;\n    text-align: center;\n\n    @media screen and (min-width:$min-width-md) {\n      gap: 2.4rem;\n      padding: 3.2rem;\n    }\n\n    .cta-block__content {\n      @media screen and (min-width: $min-width-md) {\n        max-width: 74rem;\n        padding: 0;\n      }\n    }\n\n    .cta-block__action {\n      margin-top: 0.8rem;\n\n      &>[slot='cta-button'] {\n        gap: 0.8rem;\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        flex-direction: row;\n        gap: 2.4rem;\n        margin-top: 1.6rem;\n\n        &.cta-block__button {\n          margin-bottom: 0;\n        }\n\n        &>[slot='cta-buttons'] {\n          flex-direction: row;\n          align-items: center;\n          gap: 2.4rem;\n        }\n      }\n    }\n\n    .cta-block__image-wrapper {\n      @media screen and (min-width: $min-width-md) {\n        display: block;\n      }\n\n      & > [slot='illustration'] {\n        padding-right: 0;\n      }\n    }\n\n    .cta-block__text {\n      margin-bottom: 0 !important;\n    }\n  }\n\n  .cta-block__image-wrapper {\n    margin-bottom: 1.6rem;\n\n    &>[slot='illustration'] {\n      &>picture>img {\n        border-radius: 0.8rem;\n        max-width: 100%;\n      }\n    }\n\n    @media screen and (min-width:$min-width-md) {\n      display: none;\n      max-width: 20%;\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      display: block;\n      margin-bottom: 0;\n\n      & > [slot='illustration'] {\n        padding-right: 3.2rem;\n      }\n    }\n  }\n\n  .cta-block__content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    justify-content: center;\n\n    @media screen and (min-width: $min-width-md) {\n      padding-right: 2.4rem;\n    }\n\n    .cta-block__heading,\n    .cta-block__text {\n      @media screen and (min-width: $min-width-md) {\n        max-width: 74rem;\n        text-wrap: balance;\n      }\n    }\n\n    .cta-block__text {\n      margin-bottom: 2.4rem;\n\n      @media screen and (min-width: $min-width-md) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  .cta-block__heading {\n    margin-bottom: 0.8rem;\n  }\n\n  .cta-block__action {\n    display: flex;\n\n    &>[slot='cta-buttons'] {\n      display: flex;\n      flex-direction: column;\n      row-gap: 1.6rem;\n      flex: 1;\n\n      @media screen and (min-width:$min-width-md) {\n        align-items: flex-end;\n        justify-content: center;\n        gap: 1.6rem;\n        margin-top: 0;\n      }\n\n      & > a {\n        color: $blue700;\n        font-weight: 500;\n        font-size: 1.6rem;\n        padding: 0.1rem;\n        text-decoration: none;\n\n        pn-icon svg {\n          transition: transform 0.3s ease-in-out;\n\n          path {\n            fill: $blue700;\n          }\n        }\n\n        &:hover {\n          color: $blue900;\n          text-decoration: underline;\n          \n          pn-icon svg {\n            transition: transform 0.3s ease-in-out;\n            transform: translateX(0.3rem);\n\n            path {\n              fill: $blue900;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'pn-cta-block',\n  styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = null;\n  @Prop() bodyText: string = null;\n\n  @Prop() pnBackgroundColor: string = null;\n\n  @Prop() isLarge: boolean = false;\n  @Prop() isCentered: boolean = false;\n  @Prop() isSmall: boolean = false;\n  @Prop() contentTop: boolean = false;\n\n  render() {\n    const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n    const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n    return (\n      <Host>\n        <div pn-background-color={this.pnBackgroundColor} class={`cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}`}>\n          {(hasImage ?\n            <div class=\"cta-block__image-wrapper\">\n              <slot name=\"illustration\" />\n            </div> : null\n          )}\n          <div class=\"cta-block__content\">\n            {(this.heading) ? <h2 class=\"cta-block__heading\">{this.heading}</h2> : null}\n            {(this.bodyText) ? <p class=\"cta-block__text\">{this.bodyText}</p> : null}\n          </div>\n          {(hasButtons ?\n            <div class=\"cta-block__action\">\n              <slot name=\"cta-buttons\" />\n            </div> : null\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-customernumber-selector-option.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
 
-const pnCustomernumberSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-customernumber-selector-option{display:flex;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#ffffff;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#e0f8ff;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2d2013}.customernumberoption-title{display:block;font-size:1em;color:#005d92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5e554a;font-weight:normal}";
+const pnCustomernumberSelectorOptionCss = "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-customernumber-selector-option{display:flex;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#ffffff;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#e0f8ff;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2d2013}.customernumberoption-title{display:block;font-size:1em;color:#005d92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5e554a;font-weight:normal}";
 const PnCustomernumberSelectorOptionStyle0 = pnCustomernumberSelectorOptionCss;
 
 const PnProfileSelectorOption = class {
@@ -16,7 +16,7 @@ const PnProfileSelectorOption = class {
     }
     get hostElement() { return index.getElement(this); }
     render() {
-        return (index.h(index.Host, { key: 'd0aa3dffdfed44d609a37b9dd566f092b36808f8' }, index.h("a", { key: '968d1eef084a71f813f840dd3574768fc90aeca6', class: "customernumberoption", href: this.url }, index.h("span", { key: 'cdf8fa316075821a579a967aa16316dec75643f4', class: "customernumberoption-text" }, index.h("span", { key: '4eab480ea560ae5eedb2a26df6854604c5c1e7be', class: "customernumberoption-title" }, this.heading), index.h("span", { key: '6194c352124efdf08c34dc83a807ecc37cbafba4', class: "customernumberoption-description" }, this.description), index.h("slot", { key: '2d8936f96d18b9f7f75a9e07038c6011dfc21bdc' })))));
+        return (index.h(index.Host, { key: 'a94e11a5d9dcbbb3bf34859580e1558bc60d792b' }, index.h("a", { key: 'ee1ce3a458cc9d1183b54b0a3a4dd4e25ec00d50', class: "customernumberoption", href: this.url }, index.h("span", { key: 'a18d09b415c74f9620db5c17123c70cdab2e802f', class: "customernumberoption-text" }, index.h("span", { key: 'c81c2ffa9b370d571d538895b290c8e88a0efaff', class: "customernumberoption-title" }, this.heading), index.h("span", { key: 'd857c919e31d13dfe542f95a5f3251578b9ffa47', class: "customernumberoption-description" }, this.description), index.h("slot", { key: 'd5feb780cf0e638667975a81de5e90f4c0c793a8' })))));
     }
 };
 PnProfileSelectorOption.style = PnCustomernumberSelectorOptionStyle0;

package/cjs/pn-customernumber-selector-option.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-customernumber-selector-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iCAAiC,GAAG,qxBAAqxB,CAAC;AACh0B,6CAAe,iCAAiC;;MCInC,uBAAuB;;;uBAGR,EAAE;2BACE,EAAE;mBACV,EAAE;;;IAExB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,gEAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5CA,mEAAM,KAAK,EAAC,2BAA2B,IACrCA,mEAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC9DA,mEAAM,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,WAAW,CAAQ,EACxEA,oEAAQ,CACH,CACL,CACC,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.scss?tag=pn-customernumber-selector-option","src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-customernumber-selector-option {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  &:last-of-type {\n    border-bottom-left-radius: 0.8rem;\n    border-bottom-right-radius: 0.8rem;\n  }\n}\n.customernumberoption {\n  overflow: hidden;\n  max-width: 100%;\n  text-decoration: none;\n  background: $white;\n  transition: background 0.15s ease;\n  padding: 1.6rem 1rem;\n  &:hover,\n  &:focus,\n  &:active {\n    background: $blue50;\n    text-decoration: none;\n  }\n}\n.customernumberoption-text {\n  font-weight: 700;\n  color: $gray900;\n}\n\n.customernumberoption-title {\n  display: block;\n  font-size: 1em;\n  color: $blue700;\n  font-weight: 700;\n}\n\n.customernumberoption-description {\n  font-size: 0.75em;\n  color: $gray700;\n  font-weight: normal;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\n@Component({\n  tag: 'pn-customernumber-selector-option',\n  styleUrl: 'pn-customernumber-selector-option.scss',\n})\nexport class PnProfileSelectorOption {\n  @Element() hostElement: Element;\n\n  @Prop() heading: string = '';\n  @Prop() description: string = '';\n  @Prop() url: string = '';\n\n  render() {\n    return (\n      <Host>\n        <a class=\"customernumberoption\" href={this.url}>\n          <span class=\"customernumberoption-text\">\n            <span class=\"customernumberoption-title\">{this.heading}</span>\n            <span class=\"customernumberoption-description\">{this.description}</span>\n            <slot />\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-customernumber-selector-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iCAAiC,GAAG,8lCAA8lC,CAAC;AACzoC,6CAAe,iCAAiC;;MCInC,uBAAuB;;;uBAGR,EAAE;2BACE,EAAE;mBACV,EAAE;;;IAExB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,gEAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5CA,mEAAM,KAAK,EAAC,2BAA2B,IACrCA,mEAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC9DA,mEAAM,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,WAAW,CAAQ,EACxEA,oEAAQ,CACH,CACL,CACC,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.scss?tag=pn-customernumber-selector-option","src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-customernumber-selector-option {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  &:last-of-type {\n    border-bottom-left-radius: 0.8rem;\n    border-bottom-right-radius: 0.8rem;\n  }\n}\n.customernumberoption {\n  overflow: hidden;\n  max-width: 100%;\n  text-decoration: none;\n  background: $white;\n  transition: background 0.15s ease;\n  padding: 1.6rem 1rem;\n  &:hover,\n  &:focus,\n  &:active {\n    background: $blue50;\n    text-decoration: none;\n  }\n}\n.customernumberoption-text {\n  font-weight: 700;\n  color: $gray900;\n}\n\n.customernumberoption-title {\n  display: block;\n  font-size: 1em;\n  color: $blue700;\n  font-weight: 700;\n}\n\n.customernumberoption-description {\n  font-size: 0.75em;\n  color: $gray700;\n  font-weight: normal;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\n@Component({\n  tag: 'pn-customernumber-selector-option',\n  styleUrl: 'pn-customernumber-selector-option.scss',\n})\nexport class PnProfileSelectorOption {\n  @Element() hostElement: Element;\n\n  @Prop() heading: string = '';\n  @Prop() description: string = '';\n  @Prop() url: string = '';\n\n  render() {\n    return (\n      <Host>\n        <a class=\"customernumberoption\" href={this.url}>\n          <span class=\"customernumberoption-text\">\n            <span class=\"customernumberoption-title\">{this.heading}</span>\n            <span class=\"customernumberoption-description\">{this.description}</span>\n            <slot />\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-customernumber-selector.cjs.entry.js

@@ -2,13 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
-
-const icon$1 = '<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="M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z" clip-rule="evenodd"/></svg>';
-const angle_down = icon$1;
-
-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="M11.293 7.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1-1.414 1.414L12 9.414l-7.293 7.293a1 1 0 0 1-1.414-1.414z" clip-rule="evenodd"/></svg>';
-const angle_up = icon;
+const index = require('./index-b02670c2.js');
+const angle_up = require('./angle_up-049ec1d8.js');
 
 const translations = {
     sv: {
@@ -31,7 +26,7 @@ const translations = {
     },
 };
 
-const pnCustomernumberSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.customernumber-container{position:relative;padding:0;display:flex;flex-direction:column;border-radius:0.8rem;border:0.1rem solid #969087;transition:border 0.15s ease}.customernumber-container:hover,pn-customernumber-selector[open] .customernumber-container{border-color:#005d92}pn-customernumber-selector[open] .customernumber-container{border-bottom-left-radius:0;border-bottom-right-radius:0}.customernumber-toggle{display:flex;z-index:11;position:relative;margin:0;border-radius:0.8rem;padding:1rem;border:0;background:transparent;font-size:1em;text-align:left;outline:0;cursor:pointer}.customernumber-toggle pn-icon{align-self:center}.customernumber-selected{flex-grow:1;max-width:calc(100% - 2.4rem);overflow:hidden}.customernumber-selected-title{color:#005d92}.customernumber-selected-description{font-size:0.875em;width:100%;overflow:hidden;text-overflow:ellipsis}.customernumber-options{position:absolute;z-index:10;left:-0.1rem;right:-0.1rem;top:100%;border:0.1rem solid #005d92;border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem;max-height:0;opacity:0;transform-origin:top left;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, opacity 0.1s linear, max-height 0.1s ease;overflow-y:auto}pn-customernumber-selector[open] .customernumber-options{opacity:1;transition-delay:0s;max-height:500rem}";
+const pnCustomernumberSelectorCss = "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}}.customernumber-container{position:relative;padding:0;display:flex;flex-direction:column;border-radius:0.8rem;border:0.1rem solid #969087;transition:border 0.15s ease}.customernumber-container:hover,pn-customernumber-selector[open] .customernumber-container{border-color:#005d92}pn-customernumber-selector[open] .customernumber-container{border-bottom-left-radius:0;border-bottom-right-radius:0}.customernumber-toggle{display:flex;z-index:11;position:relative;margin:0;border-radius:0.8rem;padding:1rem;border:0;background:transparent;font-size:1em;text-align:left;outline:0;cursor:pointer}.customernumber-toggle pn-icon{align-self:center}.customernumber-selected{flex-grow:1;max-width:calc(100% - 2.4rem);overflow:hidden}.customernumber-selected-title{color:#005d92}.customernumber-selected-description{font-size:0.875em;width:100%;overflow:hidden;text-overflow:ellipsis}.customernumber-options{position:absolute;z-index:10;left:-0.1rem;right:-0.1rem;top:100%;border:0.1rem solid #005d92;border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem;max-height:0;opacity:0;transform-origin:top left;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, opacity 0.1s linear, max-height 0.1s ease;overflow-y:auto}pn-customernumber-selector[open] .customernumber-options{opacity:1;transition-delay:0s;max-height:500rem}";
 const PnCustomernumberSelectorStyle0 = pnCustomernumberSelectorCss;
 
 const PnCustomernumberSelector = class {
@@ -56,7 +51,7 @@ const PnCustomernumberSelector = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'cdd03a497e3429223233ffa10a007419af9f96e2' }, index.h("div", { key: 'd64d582414a677fc76a3ffa4c5382990c9914fa6', class: "customernumber-container" }, index.h("button", { key: 'db049a3a059697841bef663945cbbb6627dee11e', class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => (this.open = !this.open) }, index.h("div", { key: '0ded400b9241a2d5e6055601cf2cf07b3637cecc', class: "customernumber-selected" }, index.h("strong", { key: 'c8911dc054609431bf55bc375ef34d2a382a7b26', class: "customernumber-selected-title" }, this.heading), index.h("div", { key: '0d00e94067c33420bc6284a571223cf8e48ce29d', class: "customernumber-selected-description" }, this.description)), index.h("pn-icon", { key: 'c81ca98a7e5835272fca2a4c1c1994574e1ca05a', icon: this.open ? angle_up : angle_down, small: "false", color: "blue700" })), index.h("div", { key: '8f92456d5903e82b64e128b914a0d843a7f71f50', class: "customernumber-options" }, index.h("slot", { key: 'ad04547ed0a55429e375b577a77eae960448948b' })))));
+        return (index.h(index.Host, { key: 'a41ce27f21fc0a16c0b6576c6af95b20ba5bdbd3' }, index.h("div", { key: 'faa8c7c3659d0a0b72c84a287330bb6988dc3bf5', class: "customernumber-container" }, index.h("button", { key: 'e538a91434e961b2b9b6d6f89ce70656bbc3b538', class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => (this.open = !this.open) }, index.h("div", { key: '18446ed1324b90543dc1edc3a016aec0f37d8d73', class: "customernumber-selected" }, index.h("strong", { key: '9979f4f6d3701f577adef74b8273a2ac9709c03d', class: "customernumber-selected-title" }, this.heading), index.h("div", { key: '454f058daf095418f5fee28e061363c035e9ae62', class: "customernumber-selected-description" }, this.description)), index.h("pn-icon", { key: '69b6614740bbadad07deb3a3fe9227aa2025fb2c', icon: this.open ? angle_up.angle_up : angle_up.angle_down, small: "false", color: "blue700" })), index.h("div", { key: 'b7aec42dc18e95235f546120f00f826af2542603', class: "customernumber-options" }, index.h("slot", { key: 'e369c5409b3cbcc9ab7ed2370ce77f7b080dc546' })))));
     }
 };
 PnCustomernumberSelector.style = PnCustomernumberSelectorStyle0;

package/cjs/pn-customernumber-selector.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-customernumber-selector.entry.cjs.js","mappings":";;;;;;AAAA,MAAMA,MAAI,GAAG,4QAA4Q,CAAC;AACnR,MAAM,UAAU,GAAGA,MAAI;;ACD9B,MAAM,IAAI,GAAG,0QAA0Q,CAAC;AACjR,MAAM,QAAQ,GAAG,IAAI;;ACDrB,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,mBAAmB,EAAE,iBAAiB;KACvC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,wBAAwB;KAC9C;CACF;;ACnBD,MAAM,2BAA2B,GAAG,m4CAAm4C,CAAC;AACx6C,uCAAe,2BAA2B;;MCU7B,wBAAwB;;;wBAGwB,IAAI;oBACP,KAAK;uBAEnC,EAAE;2BACE,EAAE;oBAEY,YAAY,CAAC,IAAI,CAAC;;;IAE9D,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,IAAI;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,qEAAQ,KAAK,EAAC,uBAAuB,gBAAa,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACtHA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,qEAAQ,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,OAAO,CAAU,EACrEA,kEAAK,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,WAAW,CAAO,CACrE,EACNA,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC3E,EACTA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;","names":["icon","h","Host"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js","node_modules/pn-design-assets/pn-assets/icons/angle_up.js","src/components/profile/pn-customernumber-selector/translations.ts","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.scss?tag=pn-customernumber-selector","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.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=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n","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=\"M11.293 7.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1-1.414 1.414L12 9.414l-7.293 7.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_up = icon;\nexport const angleUp = icon;\n","export const translations = {\n  sv: {\n    toggleLinkTitleText: `Välj kundnummer`,\n  },\n  en: {\n    toggleLinkTitleText: `Choose customernumber`,\n  },\n  da: {\n    toggleLinkTitleText: `Vælg kundenummer`,\n  },\n  no: {\n    toggleLinkTitleText: `Velg kundenummer`,\n  },\n  fi: {\n    toggleLinkTitleText: `Valitse asiakasnumero`,\n  },\n  de: {\n    toggleLinkTitleText: `Kundennummer auswählen`,\n  },\n};\n","@import '../../../globals/main.scss';\n\npn-customernumber-selector {\n}\n\n.customernumber-container {\n  position: relative;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray400;\n  transition: border 0.15s ease;\n  &:hover,\n  pn-customernumber-selector[open] & {\n    border-color: $blue700;\n  }\n\n  pn-customernumber-selector[open] & {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n\n.customernumber-toggle {\n  display: flex;\n  z-index: 11;\n  position: relative;\n  margin: 0;\n  border-radius: 0.8rem;\n  padding: 1rem;\n  border: 0;\n  background: transparent;\n  font-size: 1em;\n  text-align: left;\n  outline: 0;\n  cursor: pointer;\n\n  pn-icon {\n    align-self: center;\n  }\n}\n\n.customernumber-selected {\n  flex-grow: 1;\n  max-width: calc(100% - 2.4rem);\n  overflow: hidden;\n}\n\n.customernumber-selected-title {\n  color: $blue700;\n}\n\n.customernumber-selected-description {\n  font-size: 0.875em;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.customernumber-options {\n  position: absolute;\n  z-index: 10;\n  left: -0.1rem;\n  right: -0.1rem;\n  top: 100%;\n  border: 0.1rem solid $blue700;\n  border-bottom-left-radius: 0.8rem;\n  border-bottom-right-radius: 0.8rem;\n\n  pn-customernumber-selector[open] & {\n    opacity: 1;\n    transition-delay: 0s;\n    max-height: 500rem;\n  }\n  max-height: 0;\n  opacity: 0;\n  transform-origin: top left;\n  transition:\n    transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s,\n    opacity 0.1s linear,\n    max-height 0.1s ease;\n  overflow-y: auto;\n}\n","import { Component, Prop, h, State, Element, Listen, Watch, Host, Event, EventEmitter } from '@stencil/core';\nimport { translations } from './translations';\nimport { CustomernumberSelectori18n } from './pn-customernumber-selector-types';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';\nimport { angle_down, angle_up } from \"pn-design-assets/pn-assets/icons\";\n\n@Component({\n  tag: 'pn-customernumber-selector',\n  styleUrl: 'pn-customernumber-selector.scss',\n})\nexport class PnCustomernumberSelector {\n  @Element() hostElement: Element;\n\n  @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  @Prop() heading: string = '';\n  @Prop() description: string = '';\n\n  @State() i18n: CustomernumberSelectori18n = translations['en'];\n\n  componentWillLoad() {\n    this.init();\n  }\n\n  init() {\n    this.setTranslations();\n  }\n\n  setTranslations() {\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"customernumber-container\">\n          <button class=\"customernumber-toggle\" aria-label={this.i18n.toggleLinkTitleText} onClick={() => (this.open = !this.open)}>\n            <div class=\"customernumber-selected\">\n              <strong class=\"customernumber-selected-title\">{this.heading}</strong>\n              <div class=\"customernumber-selected-description\">{this.description}</div>\n            </div>\n            <pn-icon icon={this.open ? angle_up : angle_down} small=\"false\" color=\"blue700\" />\n          </button>\n          <div class=\"customernumber-options\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-customernumber-selector.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,mBAAmB,EAAE,iBAAiB;KACvC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,wBAAwB;KAC9C;CACF;;ACnBD,MAAM,2BAA2B,GAAG,4sDAA4sD,CAAC;AACjvD,uCAAe,2BAA2B;;MCU7B,wBAAwB;;;wBAGwB,IAAI;oBACP,KAAK;uBAEnC,EAAE;2BACE,EAAE;oBAEY,YAAY,CAAC,IAAI,CAAC;;;IAE9D,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,IAAI;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,qEAAQ,KAAK,EAAC,uBAAuB,gBAAa,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACtHA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,qEAAQ,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,OAAO,CAAU,EACrEA,kEAAK,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,WAAW,CAAO,CACrE,EACNA,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAGE,iBAAQ,GAAGC,mBAAU,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC3E,EACTH,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host","angle_up","angle_down"],"sources":["src/components/profile/pn-customernumber-selector/translations.ts","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.scss?tag=pn-customernumber-selector","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.tsx"],"sourcesContent":["export const translations = {\n  sv: {\n    toggleLinkTitleText: `Välj kundnummer`,\n  },\n  en: {\n    toggleLinkTitleText: `Choose customernumber`,\n  },\n  da: {\n    toggleLinkTitleText: `Vælg kundenummer`,\n  },\n  no: {\n    toggleLinkTitleText: `Velg kundenummer`,\n  },\n  fi: {\n    toggleLinkTitleText: `Valitse asiakasnumero`,\n  },\n  de: {\n    toggleLinkTitleText: `Kundennummer auswählen`,\n  },\n};\n","@import '../../../globals/main.scss';\n\npn-customernumber-selector {\n}\n\n.customernumber-container {\n  position: relative;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray400;\n  transition: border 0.15s ease;\n  &:hover,\n  pn-customernumber-selector[open] & {\n    border-color: $blue700;\n  }\n\n  pn-customernumber-selector[open] & {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n\n.customernumber-toggle {\n  display: flex;\n  z-index: 11;\n  position: relative;\n  margin: 0;\n  border-radius: 0.8rem;\n  padding: 1rem;\n  border: 0;\n  background: transparent;\n  font-size: 1em;\n  text-align: left;\n  outline: 0;\n  cursor: pointer;\n\n  pn-icon {\n    align-self: center;\n  }\n}\n\n.customernumber-selected {\n  flex-grow: 1;\n  max-width: calc(100% - 2.4rem);\n  overflow: hidden;\n}\n\n.customernumber-selected-title {\n  color: $blue700;\n}\n\n.customernumber-selected-description {\n  font-size: 0.875em;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.customernumber-options {\n  position: absolute;\n  z-index: 10;\n  left: -0.1rem;\n  right: -0.1rem;\n  top: 100%;\n  border: 0.1rem solid $blue700;\n  border-bottom-left-radius: 0.8rem;\n  border-bottom-right-radius: 0.8rem;\n\n  pn-customernumber-selector[open] & {\n    opacity: 1;\n    transition-delay: 0s;\n    max-height: 500rem;\n  }\n  max-height: 0;\n  opacity: 0;\n  transform-origin: top left;\n  transition:\n    transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s,\n    opacity 0.1s linear,\n    max-height 0.1s ease;\n  overflow-y: auto;\n}\n","import { Component, Prop, h, State, Element, Listen, Watch, Host, Event, EventEmitter } from '@stencil/core';\nimport { translations } from './translations';\nimport { CustomernumberSelectori18n } from './pn-customernumber-selector-types';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';\nimport { angle_down, angle_up } from \"pn-design-assets/pn-assets/icons\";\n\n@Component({\n  tag: 'pn-customernumber-selector',\n  styleUrl: 'pn-customernumber-selector.scss',\n})\nexport class PnCustomernumberSelector {\n  @Element() hostElement: Element;\n\n  @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  @Prop() heading: string = '';\n  @Prop() description: string = '';\n\n  @State() i18n: CustomernumberSelectori18n = translations['en'];\n\n  componentWillLoad() {\n    this.init();\n  }\n\n  init() {\n    this.setTranslations();\n  }\n\n  setTranslations() {\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"customernumber-container\">\n          <button class=\"customernumber-toggle\" aria-label={this.i18n.toggleLinkTitleText} onClick={() => (this.open = !this.open)}>\n            <div class=\"customernumber-selected\">\n              <strong class=\"customernumber-selected-title\">{this.heading}</strong>\n              <div class=\"customernumber-selected-description\">{this.description}</div>\n            </div>\n            <pn-icon icon={this.open ? angle_up : angle_down} small=\"false\" color=\"blue700\" />\n          </button>\n          <div class=\"customernumber-options\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-date-and-time.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
 
 const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 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 alert_info_circle = icon;
 
-const pnDateAndTimeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-date-and-time pn-date-picker .pn-date-picker{container-type:normal}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 pnDateAndTimeCss = "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-date-and-time pn-date-picker .pn-date-picker{container-type:normal}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 PnDateAndTimeStyle0 = pnDateAndTimeCss;
 
 const PnDateAndTime = class {

package/cjs/pn-date-and-time.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-date-and-time.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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  pn-date-picker .pn-date-picker {\n    container-type: normal;\n  }\n\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\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}","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: HTMLSelectElement = null;\n  pnTimeFromMinuteDropdown: HTMLSelectElement = null;\n  pnTimeToHourDropdown: HTMLSelectElement = null;\n  pnTimeToMinuteDropdown: HTMLSelectElement = 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() disabledDates: string = null;\n  @Prop() datePlaceholder: string = '';\n  @Prop() minFromHour: number;\n  @Prop() maxToHour: number;\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;\n  @State() selectedFromMin: number;\n  @State() selectedToHour: number;\n  @State() selectedToMin: number;\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  setInitialValues() {\n    this.setLanguageCode();\n    this.setFirstValidDate();\n\n    if (!this.minFromHour) {\n      this.minFromHour = 14;\n    }\n\n    if (!this.maxToHour) {\n      this.maxToHour = 17;\n    }\n\n    this.hourArr = this.getNumbersAsStringArr(this.minFromHour, this.maxToHour, 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);\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  setLanguageCode() {\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[0]);\n    this.selectedFromMin = parseInt(this.minuteArr[0]);\n    this.selectedToHour = parseInt(this.hourArr[this.hourArr.length -1]);\n    this.selectedToMin = parseInt(this.minuteArr[this.minuteArr.length -1 ]);\n\n    this.updateHiddenValue();\n  }\n\naddEventHandlers() {\n  const boundHandleChange = this.handleChange.bind(this);\n\n  this.pnDatePicker.addEventListener('dateselection', boundHandleChange);\n  this.pnTimeFromHourDropdown.addEventListener('change', boundHandleChange);\n  this.pnTimeFromMinuteDropdown.addEventListener('change', boundHandleChange);\n  this.pnTimeToHourDropdown.addEventListener('change', boundHandleChange);\n  this.pnTimeToMinuteDropdown.addEventListener('change', boundHandleChange);\n}\n\n\nhandleChange(e: CustomEvent) {\n\n  if (e.target === this.pnDatePicker) {\n    this.selectedDate = e.detail.start;\n  }\n\n  const target = e.target as HTMLSelectElement;\n\n  const value = target.value;\n\n  if (target.name === this.pnTimeFromHourDropdown.name) {\n    this.selectedFromHour = parseInt(value);\n  } else if (target.name === this.pnTimeFromMinuteDropdown.name) {\n    this.selectedFromMin = parseInt(value);\n  } else if (target.name === this.pnTimeToHourDropdown.name) {\n    this.selectedToHour = parseInt(value);\n  } else if (target.name === this.pnTimeToMinuteDropdown.name) {\n    this.selectedToMin = parseInt(value);\n  }\n\n  this.updateHiddenValue();\n}\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    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('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 HTMLInputElement)}\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.datePlaceholder}\n              disabled-dates={this.disabledDates}\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 HTMLSelectElement)}\n              name=\"date-and-time-from-hour\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === 0}>{hour}</option>)}\n            </pn-select>\n            <pn-select\n              ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLSelectElement)}\n              name=\"date-and-time-from-minute\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === 0}>{minute}</option>)}\n            </pn-select>\n            <div class=\"time-separator\">\n              <span>-</span>\n            </div>\n            <pn-select\n              ref={el => (this.pnTimeToHourDropdown = el as HTMLSelectElement)}\n              name=\"date-and-time-to-hour\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === this.hourArr.length -1}>{hour}</option>)}\n            </pn-select>\n            <pn-select\n              ref={el => (this.pnTimeToMinuteDropdown = el as HTMLSelectElement)}\n              name=\"date-and-time-to-minute\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === this.minuteArr.length -1}>{minute}</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}
+{"file":"pn-date-and-time.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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  pn-date-picker .pn-date-picker {\n    container-type: normal;\n  }\n\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\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}","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: HTMLSelectElement = null;\n  pnTimeFromMinuteDropdown: HTMLSelectElement = null;\n  pnTimeToHourDropdown: HTMLSelectElement = null;\n  pnTimeToMinuteDropdown: HTMLSelectElement = 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() disabledDates: string = null;\n  @Prop() datePlaceholder: string = '';\n  @Prop() minFromHour: number;\n  @Prop() maxToHour: number;\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;\n  @State() selectedFromMin: number;\n  @State() selectedToHour: number;\n  @State() selectedToMin: number;\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  setInitialValues() {\n    this.setLanguageCode();\n    this.setFirstValidDate();\n\n    if (!this.minFromHour) {\n      this.minFromHour = 14;\n    }\n\n    if (!this.maxToHour) {\n      this.maxToHour = 17;\n    }\n\n    this.hourArr = this.getNumbersAsStringArr(this.minFromHour, this.maxToHour, 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);\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  setLanguageCode() {\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[0]);\n    this.selectedFromMin = parseInt(this.minuteArr[0]);\n    this.selectedToHour = parseInt(this.hourArr[this.hourArr.length -1]);\n    this.selectedToMin = parseInt(this.minuteArr[this.minuteArr.length -1 ]);\n\n    this.updateHiddenValue();\n  }\n\naddEventHandlers() {\n  const boundHandleChange = this.handleChange.bind(this);\n\n  this.pnDatePicker.addEventListener('dateselection', boundHandleChange);\n  this.pnTimeFromHourDropdown.addEventListener('change', boundHandleChange);\n  this.pnTimeFromMinuteDropdown.addEventListener('change', boundHandleChange);\n  this.pnTimeToHourDropdown.addEventListener('change', boundHandleChange);\n  this.pnTimeToMinuteDropdown.addEventListener('change', boundHandleChange);\n}\n\n\nhandleChange(e: CustomEvent) {\n\n  if (e.target === this.pnDatePicker) {\n    this.selectedDate = e.detail.start;\n  }\n\n  const target = e.target as HTMLSelectElement;\n\n  const value = target.value;\n\n  if (target.name === this.pnTimeFromHourDropdown.name) {\n    this.selectedFromHour = parseInt(value);\n  } else if (target.name === this.pnTimeFromMinuteDropdown.name) {\n    this.selectedFromMin = parseInt(value);\n  } else if (target.name === this.pnTimeToHourDropdown.name) {\n    this.selectedToHour = parseInt(value);\n  } else if (target.name === this.pnTimeToMinuteDropdown.name) {\n    this.selectedToMin = parseInt(value);\n  }\n\n  this.updateHiddenValue();\n}\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    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('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 HTMLInputElement)}\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.datePlaceholder}\n              disabled-dates={this.disabledDates}\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 HTMLSelectElement)}\n              name=\"date-and-time-from-hour\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === 0}>{hour}</option>)}\n            </pn-select>\n            <pn-select\n              ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLSelectElement)}\n              name=\"date-and-time-from-minute\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === 0}>{minute}</option>)}\n            </pn-select>\n            <div class=\"time-separator\">\n              <span>-</span>\n            </div>\n            <pn-select\n              ref={el => (this.pnTimeToHourDropdown = el as HTMLSelectElement)}\n              name=\"date-and-time-to-hour\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === this.hourArr.length -1}>{hour}</option>)}\n            </pn-select>\n            <pn-select\n              ref={el => (this.pnTimeToMinuteDropdown = el as HTMLSelectElement)}\n              name=\"date-and-time-to-minute\"\n              class=\"date-and-time-dropdown--time\"\n              invalid={this.invalidTimespan} >\n              {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === this.minuteArr.length -1}>{minute}</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}