npm - @postnord/pn-marketweb-components - Versions diffs - 4.1.2 → 4.2.1 - Mend

@postnord/pn-marketweb-components 4.1.2 → 4.2.1

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

Files changed (72) hide show

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.js CHANGED Viewed

@@ -65,7 +65,7 @@ export class PnMarketwebSiteheaderLoginLinklist {
         if (!this.links || this.links.length === 0) {
             return;
         }
-        return (h(Host, null, this.heading ? h("h4", { class: "pn-marketweb-siteheader-login-linklist-heading" }, this.heading) : null, h("ul", null, this.links.map(link => {
+        return (h(Host, null, this.heading ? h("p", { class: "pn-marketweb-siteheader-login-linklist-heading" }, this.heading) : null, h("ul", null, this.links.map(link => {
             {
                 return this.showUnifiedLogin ? this.renderListAsLinks(link) : this.renderListAsButtons(link);
             }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-marketweb-siteheader-login-linklist.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.tsx"],"names":[],"mappings":"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~~UAAI~~,KAAK,EAAC,gDAAgD,IAAE,IAAI,CAAC,OAAO,~~CAAM~~,CAAC,CAAC,CAAC,IAAI;~~YACrG~~,cACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACrB,CAAC;oBACC,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAC/F,CAAC;YACH,CAAC,CAAC,CACC,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { state as headerState } from './pn-marketweb-siteheader-store';\nimport { LoginDialogLink } from './pn-marketweb-siteheader-types';\nimport { arrow_right, transfer } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-marketweb-siteheader-login-linklist',\n styleUrl: 'pn-marketweb-siteheader-login-linklist.scss',\n})\nexport class PnMarketwebSiteheaderLoginLinklist {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() links: LoginDialogLink[] = [];\n @Prop() idNamespace: string = '';\n @Prop() showUnifiedLogin: boolean = false;\n\n componentWillLoad() {}\n\n uniqueId(text: string) {\n return 'loginlink-' + text.replace(/[^A-Za-z0-9.\\\\\\/]/gim, '') + '-' + this.idNamespace;\n }\n\n linkAppearanceAttributes(link) {\n let attributes = {};\n if (link.linkType) {\n switch (link.linkType) {\n case 'primary':\n attributes = {\n appearance: '',\n variant: '',\n };\n break;\n case 'secondary':\n attributes = {\n appearance: 'light',\n variant: 'outlined',\n };\n break;\n case 'regularlink':\n default:\n attributes = {\n appearance: 'light',\n variant: 'borderless',\n icon: arrow_right,\n };\n break;\n }\n return attributes;\n }\n if (!link.linkType) {\n attributes = {\n appearance: link.primaryLinkApperance ? 'dark' : 'light',\n };\n }\n return attributes;\n }\n\n renderListAsButtons(link) {\n return (\n <li>\n <pn-button\n href={link.href}\n id={this.uniqueId(link.linkText)}\n {...(link.openInNewWindow && { target: '_blank' })}\n {...this.linkAppearanceAttributes(link)}\n onClick={() => {\n if (link.isLogoutLink) {\n headerState.loginManager.clearUserData();\n }\n }}\n >\n {link.linkText}\n </pn-button>\n </li>\n );\n }\n\n renderListAsLinks(link) {\n return (\n <li>\n <a\n href={link.href}\n id={this.uniqueId(link.linkText)}\n {...(link.openInNewWindow && { target: '_blank' })}\n onClick={() => {\n if (link.isLogoutLink) {\n headerState.loginManager.clearUserData();\n }\n }}\n >\n {link.linkText}\n {link.isLogoutLink ? <pn-icon icon={transfer}></pn-icon> : <pn-icon icon={arrow_right}></pn-icon>}\n </a>\n </li>\n );\n }\n\n render() {\n if (!this.links \|\| this.links.length === 0) {\n return;\n }\n return (\n <Host>\n {this.heading ? <h4 class=\"pn-marketweb-siteheader-login-linklist-heading\">{this.heading}</h4> : null}\n <ul>\n {this.links.map(link => {\n {\n return this.showUnifiedLogin ? this.renderListAsLinks(link) : this.renderListAsButtons(link);\n }\n })}\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-marketweb-siteheader-login-linklist.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { state as headerState } from './pn-marketweb-siteheader-store';\nimport { LoginDialogLink } from './pn-marketweb-siteheader-types';\nimport { arrow_right, transfer } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-marketweb-siteheader-login-linklist',\n styleUrl: 'pn-marketweb-siteheader-login-linklist.scss',\n})\nexport class PnMarketwebSiteheaderLoginLinklist {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() links: LoginDialogLink[] = [];\n @Prop() idNamespace: string = '';\n @Prop() showUnifiedLogin: boolean = false;\n\n componentWillLoad() {}\n\n uniqueId(text: string) {\n return 'loginlink-' + text.replace(/[^A-Za-z0-9.\\\\\\/]/gim, '') + '-' + this.idNamespace;\n }\n\n linkAppearanceAttributes(link) {\n let attributes = {};\n if (link.linkType) {\n switch (link.linkType) {\n case 'primary':\n attributes = {\n appearance: '',\n variant: '',\n };\n break;\n case 'secondary':\n attributes = {\n appearance: 'light',\n variant: 'outlined',\n };\n break;\n case 'regularlink':\n default:\n attributes = {\n appearance: 'light',\n variant: 'borderless',\n icon: arrow_right,\n };\n break;\n }\n return attributes;\n }\n if (!link.linkType) {\n attributes = {\n appearance: link.primaryLinkApperance ? 'dark' : 'light',\n };\n }\n return attributes;\n }\n\n renderListAsButtons(link) {\n return (\n <li>\n <pn-button\n href={link.href}\n id={this.uniqueId(link.linkText)}\n {...(link.openInNewWindow && { target: '_blank' })}\n {...this.linkAppearanceAttributes(link)}\n onClick={() => {\n if (link.isLogoutLink) {\n headerState.loginManager.clearUserData();\n }\n }}\n >\n {link.linkText}\n </pn-button>\n </li>\n );\n }\n\n renderListAsLinks(link) {\n return (\n <li>\n <a\n href={link.href}\n id={this.uniqueId(link.linkText)}\n {...(link.openInNewWindow && { target: '_blank' })}\n onClick={() => {\n if (link.isLogoutLink) {\n headerState.loginManager.clearUserData();\n }\n }}\n >\n {link.linkText}\n {link.isLogoutLink ? <pn-icon icon={transfer}></pn-icon> : <pn-icon icon={arrow_right}></pn-icon>}\n </a>\n </li>\n );\n }\n\n render() {\n if (!this.links \|\| this.links.length === 0) {\n return;\n }\n return (\n <Host>\n {this.heading ? <p class=\"pn-marketweb-siteheader-login-linklist-heading\">{this.heading}</p> : null}\n <ul>\n {this.links.map(link => {\n {\n return this.showUnifiedLogin ? this.renderListAsLinks(link) : this.renderListAsButtons(link);\n }\n })}\n </ul>\n </Host>\n );\n }\n}\n"]}

package/collection/components/navigation/pn-language-selector/pn-language-selector.js CHANGED Viewed

@@ -80,7 +80,7 @@ export class PnlanguageSelector {
         });
     }
     render() {
-        return (h(Host, { key: '51c58ba4d9b206480d1439d4dd9fcf12803e299d', value: this.value }, h("pn-button-dropdown", { key: '2dffb2112ec6a67af450c1e3471fbe6f1183b1ad', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("div", { key: '40f9c5ea57162c02d64d12249eabd96184d6d506', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: '5c8ea21f8fa63c88e65fb64a1de4b9958c6f498f', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '8308aa54e0201a82ec522e8a55c79aae253ca0d4', class: "languageselector-list", role: "list" }, h("slot", { key: 'ec1c726288ca9098f270ab743e716ef75cdeee47' }))))));
+        return (h(Host, { key: '51c58ba4d9b206480d1439d4dd9fcf12803e299d', value: this.value }, h("pn-button-dropdown", { key: 'd025c43d4db63bc312c6d17c97ef9997eebb97cd', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless", "aria-label": this.i18n.heading }, h("div", { key: 'af8dd3ee81a4b74320025efe5979567341300080', class: "languageselector-nav" }, h("strong", { key: '5c8ea21f8fa63c88e65fb64a1de4b9958c6f498f', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '8308aa54e0201a82ec522e8a55c79aae253ca0d4', class: "languageselector-list", role: "list" }, h("slot", { key: 'ec1c726288ca9098f270ab743e716ef75cdeee47' }))))));
     }
     static get is() { return "pn-language-selector"; }
     static get originalStyleUrls() {

package/collection/components/navigation/pn-language-selector/pn-language-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-language-selector.js","sourceRoot":"","sources":["../../../../src/components/navigation/pn-language-selector/pn-language-selector.tsx"],"names":[],"mappings":"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~~;gBACxG~~,~~4DAAK,KAAK,EAAC,sBAAsB,~~gBAAa,IAAI,CAAC,IAAI,CAAC,OAAO;~~oBAC7D~~,+DAAQ,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAU;oBACnE,4DAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM;wBAC5C,8DAAQ,CACJ,CACF,CACa,CAChB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-language-selector',\n styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n @Element() hostElement: HTMLElement;\n /* Current language code */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @State() selectedLanguageName = '';\n @State() options: LanguageSelectorOption[] = [];\n @State() i18n: LanguageSelectori18n;\n\n // Events\n @Event() setLanguage: EventEmitter;\n\n componentWillLoad() {\n this.setInitialSelectedLanguageName();\n this.setTranslations();\n }\n\n componentDidLoad() {\n this.initialize();\n }\n\n initialize() {\n this.setSelectedLanguageName();\n this.addEventBindingsToOptions();\n }\n\n setInitialSelectedLanguageName() {\n if (!window.Intl \|\| !this.value) {\n return;\n }\n const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n if (!langs) {\n return;\n }\n const languageName = langs.of(this.value);\n if (!languageName) {\n return;\n }\n this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n }\n\n addEventBindingsToOptions() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n // Bind event listener for when a user change language\n option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n });\n }\n\n @Watch('value')\n setSelectedLanguageName() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n // Set current label of language selector\n if (option.getAttribute('code') == this.value) {\n // \|\| option.getAttribute(\"selected\") == \"true\"\n this.selectedLanguageName = option.getAttribute('name');\n }\n });\n }\n\n onSetCurrentLanguage(option: LanguageSelectorOption) {\n this.value = option.code;\n this.selectedLanguageName = option.name;\n this.setLanguage.emit(this.value);\n }\n\n @Watch('value')\n setTranslations() {\n if (translations[this.value]) {\n this.i18n = translations[this.value] as LanguageSelectori18n;\n }\n }\n\n @Watch('value')\n onValueChange() {\n const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n components.forEach(component => {\n // Pass values as props into slotted components\n // component.setAttribute(\"current-language\", this.value);\n const isSelected = (component.getAttribute('code') === this.value) + '';\n if (component.getAttribute('selected') + '' !== isSelected) {\n component.setAttribute('selected', isSelected);\n }\n });\n }\n\n render() {\n return (\n <Host value={this.value}>\n <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\">\n <div class=\"languageselector-nav\" ~~aria-label={this.i18n.heading}~~>\n <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n <div class=\"languageselector-list\" role=\"list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-language-selector.js","sourceRoot":"","sources":["../../../../src/components/navigation/pn-language-selector/pn-language-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-language-selector',\n styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n @Element() hostElement: HTMLElement;\n /* Current language code */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @State() selectedLanguageName = '';\n @State() options: LanguageSelectorOption[] = [];\n @State() i18n: LanguageSelectori18n;\n\n // Events\n @Event() setLanguage: EventEmitter;\n\n componentWillLoad() {\n this.setInitialSelectedLanguageName();\n this.setTranslations();\n }\n\n componentDidLoad() {\n this.initialize();\n }\n\n initialize() {\n this.setSelectedLanguageName();\n this.addEventBindingsToOptions();\n }\n\n setInitialSelectedLanguageName() {\n if (!window.Intl \|\| !this.value) {\n return;\n }\n const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n if (!langs) {\n return;\n }\n const languageName = langs.of(this.value);\n if (!languageName) {\n return;\n }\n this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n }\n\n addEventBindingsToOptions() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n // Bind event listener for when a user change language\n option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n });\n }\n\n @Watch('value')\n setSelectedLanguageName() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n // Set current label of language selector\n if (option.getAttribute('code') == this.value) {\n // \|\| option.getAttribute(\"selected\") == \"true\"\n this.selectedLanguageName = option.getAttribute('name');\n }\n });\n }\n\n onSetCurrentLanguage(option: LanguageSelectorOption) {\n this.value = option.code;\n this.selectedLanguageName = option.name;\n this.setLanguage.emit(this.value);\n }\n\n @Watch('value')\n setTranslations() {\n if (translations[this.value]) {\n this.i18n = translations[this.value] as LanguageSelectori18n;\n }\n }\n\n @Watch('value')\n onValueChange() {\n const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n components.forEach(component => {\n // Pass values as props into slotted components\n // component.setAttribute(\"current-language\", this.value);\n const isSelected = (component.getAttribute('code') === this.value) + '';\n if (component.getAttribute('selected') + '' !== isSelected) {\n component.setAttribute('selected', isSelected);\n }\n });\n }\n\n render() {\n return (\n <Host value={this.value}>\n <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\" aria-label={this.i18n.heading}>\n <div class=\"languageselector-nav\">\n <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n <div class=\"languageselector-list\" role=\"list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"]}

package/collection/components/navigation/pn-site-selector/pn-site-selector.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class PnSiteSelector {
         }
     }
     render() {
-        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '884bffb7024ff896652e9c0df04127b77c12be56', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless" }, h("div", { key: '2d6cd4f4d959a3fce5c6c6131ddd3c18f4824320', class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
+        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '717d4412cc16fa75cc075df49b89e86b0b29cbc2', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless", "aria-label": this.i18n.navlabel }, h("div", { key: '3bec2e29f0ff717506c74d036477a31a01ee4ac8', class: "siteselector-nav" }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
     }
     static get is() { return "pn-site-selector"; }
     static get originalStyleUrls() {

package/collection/components/navigation/pn-site-selector/pn-site-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-site-selector.js","sourceRoot":"","sources":["../../../../src/components/navigation/pn-site-selector/pn-site-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKvE,MAAM,OAAO,cAAc;;0BAIoC,UAAU;uBAEb,UAAU;wBAET,IAAI;oBAC7B,EAAE,QAAQ,EAAE,eAAe,EAAE;;IARpD,WAAW,CAAc;IAUpC,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAqB,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,2EAAoB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,YAAY~~;gBACzG~~,~~4DAAK,KAAK,EAAC,kBAAkB,~~gBAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;~~oBACzD~~,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAQ,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAU,CAAC,CAAC,CAAC,IAAI;oBACnF,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB;wBACxC,8DAAQ,CACJ,CACF,CACa,CAChB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Element, Host } from '@stencil/core';\nimport { SiteSelectori18n } from './pn-site-selector-types';\nimport languageData from './pn-site-selector-i18n';\nimport { angle_small_down } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n tag: 'pn-site-selector',\n styleUrl: 'pn-site-selector.scss',\n})\nexport class PnSiteSelector {\n @Element() hostElement: HTMLElement;\n\n /* Site selector Button text /\n @Prop({ mutable: true, reflect: true }) buttontext: string = 'postnord';\n / Site selector flyout title /\n @Prop({ mutable: true, reflect: true }) heading: string = 'PostNord';\n /* Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: SiteSelectori18n = { navlabel: 'Site selector' };\n\n componentWillLoad() {\n this.setLanguage();\n }\n\n setLanguage() {\n if (languageData[this.language]) {\n this.i18n = languageData[this.language] as SiteSelectori18n;\n }\n }\n\n render() {\n return (\n <Host>\n <pn-button-dropdown label={this.buttontext} icon={angle_small_down} appearance=\"light\" variant=\"borderless\">\n <div class=\"siteselector-nav\" ~~aria-label={this.i18n.navlabel}~~>\n {this.heading ? <strong class=\"siteselector-heading\">{this.heading}</strong> : null}\n <div role=\"menu\" class=\"siteselector-list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-site-selector.js","sourceRoot":"","sources":["../../../../src/components/navigation/pn-site-selector/pn-site-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKvE,MAAM,OAAO,cAAc;;0BAIoC,UAAU;uBAEb,UAAU;wBAET,IAAI;oBAC7B,EAAE,QAAQ,EAAE,eAAe,EAAE;;IARpD,WAAW,CAAc;IAUpC,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAqB,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,2EAAoB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,YAAY,gBAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACxI,4DAAK,KAAK,EAAC,kBAAkB;oBAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAQ,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAU,CAAC,CAAC,CAAC,IAAI;oBACnF,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB;wBACxC,8DAAQ,CACJ,CACF,CACa,CAChB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Element, Host } from '@stencil/core';\nimport { SiteSelectori18n } from './pn-site-selector-types';\nimport languageData from './pn-site-selector-i18n';\nimport { angle_small_down } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n tag: 'pn-site-selector',\n styleUrl: 'pn-site-selector.scss',\n})\nexport class PnSiteSelector {\n @Element() hostElement: HTMLElement;\n\n /* Site selector Button text /\n @Prop({ mutable: true, reflect: true }) buttontext: string = 'postnord';\n / Site selector flyout title /\n @Prop({ mutable: true, reflect: true }) heading: string = 'PostNord';\n /* Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: SiteSelectori18n = { navlabel: 'Site selector' };\n\n componentWillLoad() {\n this.setLanguage();\n }\n\n setLanguage() {\n if (languageData[this.language]) {\n this.i18n = languageData[this.language] as SiteSelectori18n;\n }\n }\n\n render() {\n return (\n <Host>\n <pn-button-dropdown label={this.buttontext} icon={angle_small_down} appearance=\"light\" variant=\"borderless\" aria-label={this.i18n.navlabel}>\n <div class=\"siteselector-nav\">\n {this.heading ? <strong class=\"siteselector-heading\">{this.heading}</strong> : null}\n <div role=\"menu\" class=\"siteselector-list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"]}

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.css CHANGED Viewed

@@ -42,33 +42,40 @@ pn-chat-message .message-container {
   border-radius: 0.8rem;
   display: flex;
   gap: 1rem;
-  max-width: 75%;
+  max-width: 85%;
   overflow-x: hidden;
 }
 pn-chat-message .message-container .category {
   width: 2.6rem;
 }
-pn-chat-message .message-container.bot .message, pn-chat-message .message-container.agent .message {
+pn-chat-message .message-container.user {
+  max-width: 75%;
+}
+pn-chat-message .message-container.bot .message, pn-chat-message .message-container.agent .message, pn-chat-message .message-container.link .message {
   background-color: #f3f2f2;
 }
+pn-chat-message .message-container.bot .category, pn-chat-message .message-container.agent .category, pn-chat-message .message-container.link .category {
+  align-self: flex-end;
+}
 pn-chat-message .message-container.link {
   flex-basis: 100%;
 }
+pn-chat-message .message-container.link .category {
+  align-self: center;
+}
+pn-chat-message .message-container.link .content {
+  line-height: 1.5;
+}
 pn-chat-message .message-container.link .message {
-  background-color: #effbff;
-  box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
-  transition: box-shadow ease-in-out 0.5s;
   padding: 0;
 }
-pn-chat-message .message-container.link .message:hover {
-  box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.2), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.23);
-}
 pn-chat-message .message-container.link .message a {
-  color: #000000;
+  color: #005d92;
+  font-weight: 500;
   display: flex;
   justify-content: space-between;
   padding: 1rem 1.6rem;
-  text-decoration: none;
+  text-decoration: underline;
 }
 pn-chat-message .message-container.link .business.message {
   background-color: #fdefee;
@@ -81,6 +88,16 @@ pn-chat-message .message-container.button {
 pn-chat-message .message-container.button .message {
   padding: 0;
 }
+pn-chat-message .message-container.button .pn-button {
+  min-width: 18rem;
+}
+pn-chat-message .message-container.button .pn-button:disabled {
+  color: #969087;
+}
+pn-chat-message .message-container.button .pn-button:disabled .pn-button-bg {
+  border-color: #f3f2f2;
+  background-color: #f3f2f2;
+}
 pn-chat-message .message-container.card {
   border: solid 1px #d3cecb;
   border-radius: 1.6rem;

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { faq } from "pn-design-assets/pn-assets/icons.js";
+import { link } from "pn-design-assets/pn-assets/icons.js";
 export class PnChatMessage {
     constructor() {
         this.category = undefined;
@@ -16,7 +16,7 @@ export class PnChatMessage {
             case 'Agent':
                 return this.agentName;
             case 'Link':
-                return faq;
+                return link;
         }
         return icon;
     }
@@ -35,7 +35,7 @@ export class PnChatMessage {
     render() {
         const segmentClass = this.customerSegment?.toLowerCase() || '';
         const categoryClass = this.category?.toLowerCase() || '';
-        return (h(Host, { key: '0bd86ed5a6709fca909aa09b9b8bf6c497c230a2', class: this.getMessageClass() }, h("div", { key: '190cdd88c6b715022bad825d19f97ef2720005b9', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: 'd7ae83dba633e39b5cc08e38526acd3f3b2f8427', class: "category" }, h("pn-icon", { key: '8331458b12bc1669cba3cfc637abc2280516feec', icon: this.getIcon(), color: this.blue700, "aria-hidden": "true", role: "presentation" }))), h("span", { key: '5aa89b7fe5ff9f65f69453b23d835aad16c68190', class: `message ${segmentClass}` }, h("slot", { key: '1565b98e7b83884d8bc30a5dfcd9fce88e607a1d' })))));
+        return (h(Host, { key: 'ecf8acc954eed04ff21f75c0a371f3014c3f157e', class: this.getMessageClass() }, h("div", { key: '116ef983feb42adec2ab216af8d91301308216a8', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: 'aa873a62b005f0290d9c7b8f8b7194a29582d5a8', class: "category" }, h("pn-icon", { key: 'd0ffed7af74c0729cad09ec2a74feff48be31718', icon: this.getIcon(), color: this.blue700, "aria-hidden": "true", role: "presentation" }))), h("span", { key: '61c88e4e7febf6b3da957006c5409e927aad768d', class: `message ${segmentClass}` }, h("slot", { key: '95e479cc6a6b4940ac01275affc27cc99585b8eb' })))));
     }
     static get is() { return "pn-chat-message"; }
     static get originalStyleUrls() {

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-chat-message.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,~~GAAG~~,EAAQ,MAAM,qCAAqC,CAAC;~~AAQhE~~,MAAM,OAAO,aAAa;;;;;;IAKhB,SAAS,GAAW,uwDAAuwD,CAAC;IAC5xD,OAAO,GAAG,SAAS,CAAC;IAE5B,OAAO;QACL,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,~~GAAG~~,CAAC;~~QACf~~,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,eAAe;QACb,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,gBAAgB;gBACnB,OAAO,gBAAgB,CAAC;YAC1B,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,SAAS,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,eAAe,EAAE;YAClC,4DAAK,KAAK,EAAE,qBAAqB,aAAa,EAAE;gBAC7C,IAAI,CAAC,OAAO,EAAE,IAAI,CACjB,6DAAM,KAAK,EAAC,UAAU;oBACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,iBAAc,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW,CAChG,CACR;gBACD,6DAAM,KAAK,EAAE,WAAW,YAAY,EAAE;oBACpC,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { ~~faq~~, user } from 'pn-design-assets/pn-assets/icons.js';\n\nimport { AgentMessage, CustomerSegment, MessageCategory } from '../types';\n\n@Component({\n tag: 'pn-chat-message',\n styleUrl: 'pn-chat-message.scss',\n})\nexport class PnChatMessage {\n @Prop() category!: MessageCategory;\n @Prop() customerSegment!: CustomerSegment;\n @Prop() agentName: string;\n\n private robotIcon: string = '<?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 20 20\"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141) --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id=\"clippath\"> <rect class=\"st0\" width=\"20\" height=\"20\"/> </clipPath> </defs> <g class=\"st5\"> <g> <path class=\"st2\" d=\"M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z\"/> <path class=\"st3\" d=\"M10.5,4h-.5v2.8h.5v-2.8Z\"/> <path class=\"st3\" d=\"M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st3\" d=\"M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z\"/> <path class=\"st4\" d=\"M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z\"/> <path d=\"M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z\"/> <path class=\"st4\" d=\"M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z\"/> <path class=\"st4\" d=\"M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z\"/> <path class=\"st3\" d=\"M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z\"/> <path class=\"st6\" d=\"M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z\"/> <path class=\"st1\" d=\"M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st1\" d=\"M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path d=\"M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z\"/> </g> </g> </svg>';\n private blue700 = 'blue700';\n\n getIcon() {\n let icon = null;\n \n switch (this.category) {\n case 'Bot':\n return this.robotIcon;\n case 'Agent':\n return this.agentName;\n case 'Link':\n return ~~faq~~;\n }\n\n return icon;\n }\n\n getMessageClass(): string {\n switch (this.category) {\n case 'ButtonResponse':\n return 'buttonresponse';\n case 'User':\n return 'user';\n case 'System':\n return 'system-message';\n default: \n return undefined;\n }\n }\n\n render() {\n const segmentClass = this.customerSegment?.toLowerCase() \|\| '';\n const categoryClass = this.category?.toLowerCase() \|\| '';\n return (\n <Host class={ this.getMessageClass() }>\n <div class={`message-container ${categoryClass}`}>\n {this.getIcon() && (\n <span class=\"category\">\n <pn-icon icon={this.getIcon()} color={this.blue700} aria-hidden=\"true\" role=\"presentation\"></pn-icon>\n </span>\n )}\n <span class={`message ${segmentClass}`}>\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-chat-message.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,IAAI,EAAQ,MAAM,qCAAqC,CAAC;AAQjE,MAAM,OAAO,aAAa;;;;;;IAKhB,SAAS,GAAW,uwDAAuwD,CAAC;IAC5xD,OAAO,GAAG,SAAS,CAAC;IAE5B,OAAO;QACL,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,eAAe;QACb,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,gBAAgB;gBACnB,OAAO,gBAAgB,CAAC;YAC1B,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,SAAS,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,eAAe,EAAE;YAClC,4DAAK,KAAK,EAAE,qBAAqB,aAAa,EAAE;gBAC7C,IAAI,CAAC,OAAO,EAAE,IAAI,CACjB,6DAAM,KAAK,EAAC,UAAU;oBACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,iBAAc,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW,CAChG,CACR;gBACD,6DAAM,KAAK,EAAE,WAAW,YAAY,EAAE;oBACpC,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { link, user } from 'pn-design-assets/pn-assets/icons.js';\n\nimport { AgentMessage, CustomerSegment, MessageCategory } from '../types';\n\n@Component({\n tag: 'pn-chat-message',\n styleUrl: 'pn-chat-message.scss',\n})\nexport class PnChatMessage {\n @Prop() category!: MessageCategory;\n @Prop() customerSegment!: CustomerSegment;\n @Prop() agentName: string;\n\n private robotIcon: string = '<?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 20 20\"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141) --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id=\"clippath\"> <rect class=\"st0\" width=\"20\" height=\"20\"/> </clipPath> </defs> <g class=\"st5\"> <g> <path class=\"st2\" d=\"M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z\"/> <path class=\"st3\" d=\"M10.5,4h-.5v2.8h.5v-2.8Z\"/> <path class=\"st3\" d=\"M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st3\" d=\"M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z\"/> <path class=\"st4\" d=\"M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z\"/> <path d=\"M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z\"/> <path class=\"st4\" d=\"M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z\"/> <path class=\"st4\" d=\"M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z\"/> <path class=\"st3\" d=\"M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z\"/> <path class=\"st6\" d=\"M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z\"/> <path class=\"st1\" d=\"M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st1\" d=\"M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path d=\"M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z\"/> </g> </g> </svg>';\n private blue700 = 'blue700';\n\n getIcon() {\n let icon = null;\n \n switch (this.category) {\n case 'Bot':\n return this.robotIcon;\n case 'Agent':\n return this.agentName;\n case 'Link':\n return link;\n }\n\n return icon;\n }\n\n getMessageClass(): string {\n switch (this.category) {\n case 'ButtonResponse':\n return 'buttonresponse';\n case 'User':\n return 'user';\n case 'System':\n return 'system-message';\n default: \n return undefined;\n }\n }\n\n render() {\n const segmentClass = this.customerSegment?.toLowerCase() \|\| '';\n const categoryClass = this.category?.toLowerCase() \|\| '';\n return (\n <Host class={ this.getMessageClass() }>\n <div class={`message-container ${categoryClass}`}>\n {this.getIcon() && (\n <span class=\"category\">\n <pn-icon icon={this.getIcon()} color={this.blue700} aria-hidden=\"true\" role=\"presentation\"></pn-icon>\n </span>\n )}\n <span class={`message ${segmentClass}`}>\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/widgets/pn-chat/pn-chat-stories-constants.js CHANGED Viewed

@@ -33,6 +33,24 @@ export const hardcodedMessages = {
             "category": "Bot",
             "content": "Om du har ett kollinummer som berör din fråga, skriv gärna det här.",
             "messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5f"
+        },
+        {
+            "category": "Link",
+            "content": "Postnord.se",
+            "href": "https://www.postnord.se/",
+            "messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5t"
+        },
+        {
+            "category": "Button",
+            "content": "Click me",
+            "messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5l",
+            "props": "{\"appearance\": \"light\", \"variant\": \"outlined\", \"data-option-choice\": \"\", \"data-action\": \"choice\"}"
+        },
+        {
+            "category": "Button",
+            "content": "Click me 2",
+            "messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5l3",
+            "props": "{\"appearance\": \"light\", \"variant\": \"outlined\", \"data-option-choice\": \"\", \"data-action\": \"choice\"}"
         }
     ]
 };

package/collection/components/widgets/pn-chat/pn-chat-stories-constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-chat-stories-constants.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat-stories-constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;;;IAGvB,CAAC;AAEL,MAAM,CAAC,MAAM,iBAAiB,GAC9B;IACE,QAAQ,EAAE;QACR,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,UAAU,EAAE;QACV;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,gDAAgD;YAC3D,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,wJAAwJ;YACnK,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,yBAAyB;YACpC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,4BAA4B;YACvC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,qEAAqE;YAChF,WAAW,EAAE,sCAAsC;SACpD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE;QACN,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;KACF;CACF,CAAC","sourcesContent":["export const styleSample = `\n .sb-story,.sb-show-main { border: solid 1px #333; height: 500px; width: 800px; padding:40px; position: relative;}\n .pn-chat { position:absolute; right:50px ;bottom:50px; transform-origin: bottom right }\n }`;\n\nexport const hardcodedMessages = \n{\n \"header\": {\n \"body\": null,\n \"button\": null\n },\n \"messages\": [\n {\n \"category\": \"System\",\n \"content\": \"A customer service agent has entered the chat.\",\n \"messageId\": \"14584740-7784-4749-9b39-bce31455ea55\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.\",\n \"messageId\": \"967ddba6-ba1c-44d1-9725-386b32dc3498\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Hur kan jag hjälpa dig?\",\n \"messageId\": \"b26624af-852b-49cf-a3e6-77cc046be71f\"\n },\n {\n \"class\": null,\n \"category\": \"User\",\n \"content\": \"hejsan vart är mitt paket?\",\n \"messageId\": \"74cadc59-86ad-4f11-b4b6-a263aa9dbad9\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Om du har ett kollinummer som berör din fråga, skriv gärna det här.\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5f\"\n }\n ]\n};\n\nexport const messageObjectReal = {\n header: {\n body: null,\n button: null\n },\n messages: [\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"4a703929-4f6c-47df-bfc1-5a4ca6e31531\"\n },\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"00000000-0000-0000-0000-000000000000\"\n },\n {\n class: null,\n category: \"User\",\n content: \"m\",\n messageId: \"55d2851f-66d5-47d8-a4f7-1114a22d3d16\"\n },\n {\n class: \"\",\n props: \"1ef8d9da-316b-45de-b56a-ec595b8baef3\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"9290fec2-bf1f-4713-9060-5f88ff8a7420\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"fb0b3b50-97a0-40f7-872a-fc6d7ed0d379\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n class: \"\",\n props: \"598e284a-4480-4e09-8f69-6c7046fea704\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n }\n ]\n};\n\n"]}
1	+ {"version":3,"file":"pn-chat-stories-constants.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat-stories-constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;;;IAGvB,CAAC;AAEL,MAAM,CAAC,MAAM,iBAAiB,GAC9B;IACE,QAAQ,EAAE;QACR,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,UAAU,EAAE;QACV;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,gDAAgD;YAC3D,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,wJAAwJ;YACnK,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,yBAAyB;YACpC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,4BAA4B;YACvC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,qEAAqE;YAChF,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,aAAa;YACxB,MAAM,EAAE,0BAA0B;YAClC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,UAAU;YACrB,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,mHAAmH;SAC7H;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,YAAY;YACvB,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,mHAAmH;SAC7H;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE;QACN,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;KACF;CACF,CAAC","sourcesContent":["export const styleSample = `\n .sb-story,.sb-show-main { border: solid 1px #333; height: 500px; width: 800px; padding:40px; position: relative;}\n .pn-chat { position:absolute; right:50px ;bottom:50px; transform-origin: bottom right }\n }`;\n\nexport const hardcodedMessages = \n{\n \"header\": {\n \"body\": null,\n \"button\": null\n },\n \"messages\": [\n {\n \"category\": \"System\",\n \"content\": \"A customer service agent has entered the chat.\",\n \"messageId\": \"14584740-7784-4749-9b39-bce31455ea55\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.\",\n \"messageId\": \"967ddba6-ba1c-44d1-9725-386b32dc3498\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Hur kan jag hjälpa dig?\",\n \"messageId\": \"b26624af-852b-49cf-a3e6-77cc046be71f\"\n },\n {\n \"class\": null,\n \"category\": \"User\",\n \"content\": \"hejsan vart är mitt paket?\",\n \"messageId\": \"74cadc59-86ad-4f11-b4b6-a263aa9dbad9\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Om du har ett kollinummer som berör din fråga, skriv gärna det här.\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5f\"\n },\n {\n \"category\": \"Link\",\n \"content\": \"Postnord.se\",\n \"href\": \"https://www.postnord.se/\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5t\"\n },\n {\n \"category\": \"Button\",\n \"content\": \"Click me\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5l\",\n \"props\": \"{\\\"appearance\\\": \\\"light\\\", \\\"variant\\\": \\\"outlined\\\", \\\"data-option-choice\\\": \\\"\\\", \\\"data-action\\\": \\\"choice\\\"}\"\n },\n {\n \"category\": \"Button\",\n \"content\": \"Click me 2\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5l3\",\n \"props\": \"{\\\"appearance\\\": \\\"light\\\", \\\"variant\\\": \\\"outlined\\\", \\\"data-option-choice\\\": \\\"\\\", \\\"data-action\\\": \\\"choice\\\"}\"\n }\n ]\n};\n\nexport const messageObjectReal = {\n header: {\n body: null,\n button: null\n },\n messages: [\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"4a703929-4f6c-47df-bfc1-5a4ca6e31531\"\n },\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"00000000-0000-0000-0000-000000000000\"\n },\n {\n class: null,\n category: \"User\",\n content: \"m\",\n messageId: \"55d2851f-66d5-47d8-a4f7-1114a22d3d16\"\n },\n {\n class: \"\",\n props: \"1ef8d9da-316b-45de-b56a-ec595b8baef3\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"9290fec2-bf1f-4713-9060-5f88ff8a7420\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"fb0b3b50-97a0-40f7-872a-fc6d7ed0d379\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n class: \"\",\n props: \"598e284a-4480-4e09-8f69-6c7046fea704\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n }\n ]\n};\n\n"]}

package/collection/components/widgets/pn-chat/pn-chat.css CHANGED Viewed

@@ -31,9 +31,9 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   display: flex;
   flex-direction: column;
   height: 600px;
-  width: 100%;
+  width: 400px;
   max-width: 400px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 -2px 4px 0 rgba(240, 240, 240, 0.55);
   border-radius: 1.6rem;
 }
 @media (max-width: 768px) {
@@ -56,13 +56,13 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 .pn-chat .chat-header {
-  background-color: #005d92;
-  color: #ffffff;
+  background-color: #ffffff;
   padding: 0.8rem;
   padding-left: 1.6rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-bottom: 1px solid #f3f2f2;
 }
 @media (min-width: 768px) {
   .pn-chat .chat-header {
@@ -74,15 +74,20 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
 }
 .pn-chat .chat-header pn-button.minimize-btn button.pn-button {
   padding-bottom: 0;
+  margin-right: 1rem;
 }
 .pn-chat .chat-header pn-button.minimize-btn button.pn-button .pn-button-content {
   align-items: flex-end;
+  position: absolute;
+  bottom: 0px;
 }
 .pn-chat .chat-header #chat-title {
   margin: 0;
-  font-size: 2rem;
-  font-weight: 400;
-  line-height: 1.4;
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 1;
+  height: 100%;
+  align-content: center;
 }
 .pn-chat .chat-main {
   display: flex;
@@ -92,15 +97,12 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   gap: 1.6rem;
   padding: 1.6rem;
   padding-bottom: 3.2rem;
-  border-left: 1px solid #d3cecb;
-  border-right: 1px solid #d3cecb;
   background-color: #ffffff;
 }
 .pn-chat .chat-main.loading-chat-main {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: 1.6rem;
 }
 .pn-chat .chat-loading-spinner {
   background-color: #005d92;
@@ -147,8 +149,8 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
 }
 .pn-chat .chat-footer {
   background: #ffffff;
-  border: 1px solid #d3cecb;
-  border-top: none;
+  border-top: 1px solid #f3f2f2;
+  border-radius: 0 0 1.6rem 1.6rem;
 }
 .pn-chat .chat-footer .form {
   display: flex;
@@ -164,12 +166,12 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   border-radius: 6.4rem;
 }
 .pn-chat .chat-input-container .chat-text-input {
-  text-indent: 0.8rem;
   border: none;
   background: transparent;
   width: 100%;
   outline: 0.2rem solid transparent;
   outline-offset: 0.2rem;
+  padding-left: 1.6rem;
 }
 .pn-chat .chat-input-container .chat-text-input:focus {
   border-radius: 6.4rem;
@@ -177,6 +179,11 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
 .pn-chat .chat-input-container .chat-text-input:focus-visible {
   outline-color: #005d92;
 }
+.pn-chat .chat-input-container .chat-text-input::placeholder {
+  top: 2px;
+  position: relative;
+  color: #969087;
+}
 .pn-chat .chat-input-container .chat-disabled-button {
   display: flex;
   width: 3.5em;
@@ -230,6 +237,10 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   margin-bottom: 2rem;
   visibility: hidden;
 }
+.pn-chat .minimize-btn .pn-button pn-icon .pn-icon-svg path,
+.pn-chat .close-btn .pn-button pn-icon .pn-icon-svg path {
+  fill: #005d92;
+}
 @media (max-width: 768px) {
   body.chat-open {

package/collection/components/widgets/pn-chat/pn-chat.js CHANGED Viewed

@@ -319,16 +319,28 @@ export class PnChat {
             }
             catch (error) {
                 console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');
+                return;
             }
         }
-        const handleClick = () => {
+        const handleClick = (event) => {
+            const button = event.target.closest('button');
+            if (button === null || button?.hasAttribute('disabled')) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
             if (props['data-action'] === 'minimize') {
                 this.toggleChat();
             }
-            if (props['dataAction'] === 'choice' && props['dataOptionChoice']) {
+            if (props['data-action'] === 'choice') {
                 (async () => {
-                    await this.handleSendChoice(props['dataOptionChoice'], message.content);
+                    await this.handleSendChoice(props['data-option-choice'], message.content);
                 })();
+                const choiceButtons = document.querySelectorAll('[data-action="choice"]');
+                choiceButtons.forEach(pnButton => {
+                    const buttonInner = pnButton.querySelector('button');
+                    buttonInner?.setAttribute('disabled', 'true');
+                });
             }
         };
         return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category }, h("pn-button", { class: message.class, role: "button", ...props, onClick: handleClick, onKeyDown: e => this.handleButtonKeyDown(e) }, message.content)));
@@ -361,9 +373,9 @@ export class PnChat {
         const mainId = 'chat-main';
         const inputId = 'chat-input';
         const headerButton = this.messagesData?.header.button;
-        return (h(Host, { key: '0cf24e9474bc0e7e39ec51b8e9bf7646f4ac21d8', class: this.customerSegment }, !this.isClosed && this.messagesData && (h("div", { key: 'f275614056e1f2df7972377ae3041ab690eae830', class: `pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`, ref: el => (this.chatRef = el), role: "region", "aria-label": this.mainHeading }, !this.isMinimized && (h(Fragment, { key: '8bc0f594242ab297bc95e091a95bd382c1ce0b31' }, h("header", { key: '7a20b62deac0cb3fa34bf3abf7dba3f8eccb94e7', class: "chat-header", role: "banner" }, h("h1", { key: '0dbe95cfd3ca8856fc95bfd3e0a6e970b87ec6df', id: "chat-title" }, this.mainHeading), h("div", { key: '3c7ecf77edb890a351882a22a0910cdc8e2abc7b', class: "chat-controls", role: "toolbar", "aria-label": this.getTranslation('chatControlsAriaLabel') }, h("pn-button", { key: '564dd6d3c7234356f3805b4e0808411d97e41292', icon: minus, "icon-only": "true", class: "minimize-btn", onClick: this.toggleChat, "aria-expanded": !this.isMinimized, "aria-controls": mainId, "aria-label": this.getTranslation('minimizeChatAriaLabel'), variant: "borderless", tooltip: this.getTranslation('minimizeChatAriaLabel') }), h("pn-button", { key: '5d2873c2409d3caa7887bf9b99de5f64b5c8af22', icon: close, "icon-only": "true", class: "close-btn", onClick: this.closeChat, "aria-expanded": !this.isMinimized, "aria-label": this.getTranslation('closeChatAriaLabel'), variant: "borderless", tooltip: this.getTranslation('closeChatAriaLabel') }))), (this.messagesData?.messages?.length ?? 0) > 0 ?
+        return (h(Host, { key: 'd1b6d427a15513a46277479ece1bce7e20a1044b', class: this.customerSegment }, !this.isClosed && this.messagesData && (h("div", { key: 'ecee6b29d3730789fd4994d7a59d32166b68653e', class: `pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`, ref: el => (this.chatRef = el), role: "region", "aria-label": this.mainHeading }, !this.isMinimized && (h(Fragment, { key: '5a4fe8af5e224b59dfb53fc4c24f84041c3f8742' }, h("header", { key: 'dad77c1594f447014fcfa02dd672eb7f55d8b0d4', class: "chat-header", role: "banner" }, h("h1", { key: '2db55d9cf2e638655d5b9eb8dba92e383b81699d', id: "chat-title" }, this.mainHeading), h("div", { key: 'd5a0b03b057e16af35fc9ea61cc4e278cb3d2068', class: "chat-controls", role: "toolbar", "aria-label": this.getTranslation('chatControlsAriaLabel') }, h("pn-button", { key: '992249d07b8f6f19d6fcdf9eb4fc11efe8f63e1f', icon: minus, "icon-only": "true", class: "minimize-btn", onClick: this.toggleChat, "aria-expanded": !this.isMinimized, "aria-controls": mainId, "aria-label": this.getTranslation('minimizeChatAriaLabel'), appearance: "light", tooltip: this.getTranslation('minimizeChatAriaLabel'), small: "true" }), h("pn-button", { key: 'eeed9e762baf7ecb315e43300001f3279f14e563', icon: close, "icon-only": "true", class: "close-btn", onClick: this.closeChat, "aria-expanded": !this.isMinimized, "aria-label": this.getTranslation('closeChatAriaLabel'), appearance: "light", tooltip: this.getTranslation('closeChatAriaLabel'), small: "true" }))), (this.messagesData?.messages?.length ?? 0) > 0 ?
             (h("main", { id: mainId, class: "chat-main", role: "main", "aria-labelledby": "chat-title" }, this.messagesData.header && (h("div", { class: "chat-overview" }, h("div", { class: "body" }, this.messagesData.header.body), headerButton && (h("pn-button", { href: headerButton.href, class: headerButton.class, appearance: headerButton.appearance, variant: headerButton.variant, small: headerButton.small, role: "button", onKeyDown: e => this.handleButtonKeyDown(e) }, headerButton.content)))), h("div", { ref: el => (this.chatMessagesContainer = el), class: "chat-messages", role: "log", "aria-live": "polite", "aria-label": this.getTranslation('chatMessagesAriaLabel') }, this.groupMessages()), h("pn-icon", { class: "indicator-icon", "aria-label": this.getTranslation('waitingForAnswerLabel'), role: "presentation" })))
-            : (h("main", { id: mainId, class: "chat-main loading-chat-main", role: "main", "aria-labelledby": "chat-title" }, h("div", { class: "chat-loading-spinner" }, h("pn-spinner", { light: "true", size: "1.5" })), h("span", { class: "chat-loading-content" }, this.getTranslation('loadingText')))), h("footer", { key: '6d8a4b4e0ce587c39f307f5ad37dd7498eaaaa4a', class: "chat-footer", role: "contentinfo" }, h("div", { key: 'b2879f8c86f2d01cd9563d21d9303b2e4d649503', class: "form", role: "form", "aria-labelledby": inputId }, h("label", { key: '9af815bef9cf42c18379839844bcf0101bd3921e', htmlFor: inputId, class: "sr-only" }, this.getTranslation('writeChatMessagePlaceholder')), h("div", { key: '97007d97f8fe0a7c5f8b8e9c25bbe20918679484', class: "chat-input-container" }, h("input", { key: '6e156d7ad63763316d2be89b925099fa03984232', id: inputId, class: "chat-text-input", ref: el => (this.inputRef = el), type: "text", placeholder: this.getTranslation('writeChatMessagePlaceholder'), value: this.message, onInput: (e) => (this.message = e.target.value), onKeyPress: this.handleKeyPress, maxLength: 3990 }), !this.message.trim() ? (h("div", { class: "chat-disabled-button", role: "button", "aria-label": this.getTranslation('sendButtonText'), "aria-disabled": "true", tabIndex: -1 }, h("pn-icon", { color: "gray400", icon: submit }))) : (h("pn-button", { "icon-only": "true", variant: "borderless", appearance: "light", icon: submit, onClick: this.handleSendMessage, disabled: !this.message.trim(), "aria-label": this.getTranslation('sendButtonText'), tooltip: this.getTranslation('sendButtonText') }))))))), this.isMinimized && (h("pn-button", { key: '98f1a01a3774b504c91e72279133f46d327c723f', icon: talk_bubble, "icon-only": "true", class: "open-chat-btn", onClick: this.toggleChat, tooltip: this.getTranslation('openChatAriaLabel'), "aria-label": this.getTranslation('openChatAriaLabel'), "aria-expanded": !this.isMinimized }))))));
+            : (h("main", { id: mainId, class: "chat-main loading-chat-main", role: "main", "aria-labelledby": "chat-title" }, h("div", { class: "chat-loading-spinner" }, h("pn-spinner", { light: "true", size: "1.5" })), h("span", { class: "chat-loading-content" }, this.getTranslation('loadingText')))), h("footer", { key: '151b8cb74adc00cc941c68c14e94236e458e5b93', class: "chat-footer", role: "contentinfo" }, h("div", { key: 'f9cae25c7fdb38877a0010d01e6845e778f4658c', class: "form", role: "form", "aria-labelledby": inputId }, h("label", { key: 'b34656f59997b0e9b24f3c1e4de6df6340b260e5', htmlFor: inputId, class: "sr-only" }, this.getTranslation('writeChatMessagePlaceholder')), h("div", { key: '8c63bca6b7d0f9e9e801b7b40dff4a8d9b26e49d', class: "chat-input-container" }, h("input", { key: 'e5882f25731916a0800f4efde9a2daea72fba76d', id: inputId, class: "chat-text-input", ref: el => (this.inputRef = el), type: "text", placeholder: this.getTranslation('writeChatMessagePlaceholder'), value: this.message, onInput: (e) => (this.message = e.target.value), onKeyPress: this.handleKeyPress, maxLength: 3990 }), !this.message.trim() ? (h("div", { class: "chat-disabled-button", role: "button", "aria-label": this.getTranslation('sendButtonText'), "aria-disabled": "true", tabIndex: -1 }, h("pn-icon", { color: "gray400", icon: submit }))) : (h("pn-button", { "icon-only": "true", variant: "borderless", appearance: "light", icon: submit, onClick: this.handleSendMessage, disabled: !this.message.trim(), "aria-label": this.getTranslation('sendButtonText'), tooltip: this.getTranslation('sendButtonText') }))))))), this.isMinimized && (h("pn-button", { key: '4022adb25d86961ba4f20efd52fa8d4938f81b76', icon: talk_bubble, "icon-only": "true", class: "open-chat-btn", onClick: this.toggleChat, tooltip: this.getTranslation('openChatAriaLabel'), "aria-label": this.getTranslation('openChatAriaLabel'), "aria-expanded": !this.isMinimized }))))));
     }
     static get is() { return "pn-chat"; }
     static get originalStyleUrls() {