@salla.sa/twilight-components
Version:
Salla Web Component
144 lines (136 loc) • 12.9 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './salla-button2.js';
import { d as defineCustomElement$4 } from './salla-list-tile2.js';
import { d as defineCustomElement$3 } from './salla-loading2.js';
import { d as defineCustomElement$2 } from './salla-modal2.js';
var Bullhorn = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>bullhorn</title>
<path d="M30.129 0.264c-0.339-0.252-0.776-0.328-1.179-0.208l-24.951 7.485v-0.216c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v14.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-0.112l3.448 1.207-0.595 1.704c-0.321 1.019-0.227 2.103 0.267 3.051s1.327 1.647 2.345 1.968l6.359 2.004c0.399 0.127 0.804 0.187 1.201 0.187 1.699 0 3.277-1.091 3.812-2.785l0.423-1.295 7.633 2.672c0.143 0.049 0.292 0.075 0.44 0.075 0.273 0 0.543-0.084 0.772-0.247 0.352-0.249 0.561-0.655 0.561-1.087v-28c0-0.421-0.199-0.819-0.537-1.069zM18.297 28.4c-0.221 0.701-0.973 1.089-1.673 0.871l-6.357-2.004c-0.34-0.108-0.617-0.34-0.781-0.656s-0.196-0.676-0.101-0.977l0.581-1.665 8.777 3.072zM28 27.453l-24-8.4v-8.728l24-7.2z"></path>
</svg>
`;
var UserOff = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>user-off</title>
<path d="M10.837 19.309c-4.963 1.284-8.171 4.303-8.171 7.691v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-2.101 2.48-4.155 6.172-5.109 0.713-0.184 1.141-0.912 0.957-1.625-0.184-0.711-0.908-1.137-1.625-0.956zM12.859 3.715c0.933-0.685 2.020-1.048 3.141-1.048 2.941 0 5.333 2.392 5.333 5.333 0 1.121-0.363 2.208-1.048 3.141-0.436 0.593-0.308 1.428 0.284 1.864 0.239 0.175 0.515 0.259 0.788 0.259 0.411 0 0.815-0.188 1.076-0.544 1.025-1.393 1.567-3.025 1.567-4.72 0-4.412-3.588-8-8-8-1.695 0-3.327 0.541-4.721 1.567-0.592 0.435-0.72 1.269-0.284 1.864 0.436 0.593 1.269 0.721 1.864 0.284zM31.609 29.724l-29.333-29.333c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l29.333 29.333c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
</svg>
`;
var UserCancel = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>user-cancel</title>
<path d="M29.885 16l1.724-1.724c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-1.724 1.724-1.724-1.724c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l1.724 1.724-1.724 1.724c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l1.724-1.724 1.724 1.724c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM10.667 16c4.043 0 7.333-3.289 7.333-7.333s-3.291-7.333-7.333-7.333-7.333 3.289-7.333 7.333 3.291 7.333 7.333 7.333zM10.667 4c2.573 0 4.667 2.093 4.667 4.667s-2.093 4.667-4.667 4.667-4.667-2.093-4.667-4.667 2.093-4.667 4.667-4.667zM10.667 18.667c-5.881 0-10.667 3.813-10.667 8.5v2.167c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.167c0-3.217 3.588-5.833 8-5.833s8 2.616 8 5.833v2.167c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.167c0-4.687-4.785-8.5-10.667-8.5z"></path>
</svg>
`;
const sallaUserSettingsCss = "";
const SallaUserSettings$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserSettings extends HTMLElement {
constructor() {
super();
this.__registerHost();
// Texts
this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
this.sorryForLeavingText = salla.lang.get('pages.profile.warning_for_deactivate');
this.warningText = salla.lang.get('pages.profile.sorry_for_leaving');
this.keepAccount = salla.lang.get('pages.profile.keep_account');
this.buttonLoading = false;
this.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
salla.onReady(() => {
this.isHiddenName = salla.config.get('user.is_hidden_name');
this.isNotifiable = salla.config.get('user.is_notifiable');
this.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
if (!this.isNotifiable || !this.isHiddenName) {
salla.event.on('profile::info.fetched', res => {
this.isHiddenName = res.data.is_hidden_name;
this.isNotifiable = res.data.is_notifiable;
});
}
});
salla.lang.onLoaded(() => {
this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
this.warningText = salla.lang.get('pages.profile.warning_for_deactivate');
this.sorryForLeavingText = salla.lang.get('pages.profile.sorry_for_leaving');
this.keepAccount = salla.lang.get('pages.profile.keep_account');
});
}
toggleSetting(setting, event) {
salla.profile.updateSettings({ name: setting, value: event.target.checked });
}
capitalizeText(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
openDeactivateModal() {
this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount));
this.confirmationModal.open();
}
async deleteAccount() {
await salla.profile.delete().finally(() => this.confirmationModal.close());
}
render() {
return (h(Host, { key: 'c667b9e42004d131f39d16dd03efa385ddd2b9ac', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '5e22332ecaf3c6b81fed0475aec2a8e4772486bb', class: "s-user-settings-section" }, h("salla-list-tile", { key: '79e4d6ce1bab623fd800168c09cb3ba86f30aad3' }, h("div", { key: '0f51728728348d03ef8db50b5f2b69f9ec4952f6', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '9f0cbeb8d631b817dd12f787f6f5a24ca808a418', innerHTML: UserCancel })), h("div", { key: '7ba18d9c03f4ab0a5f698b4ea0f7d2b45503a6ed', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'b0a8da55ec8da2ea2879c32d94064d52eae49745', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '505c952f1ed44bf66678490acce7292c2262e29f', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '3f2f0b632627b765c2e3a39442b677d563bf1d98', class: "s-toggle" }, h("input", { key: '4534f72462501533966b6364188139496c005a1e', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '60741493f0919e5daccc9f2219bd55e177e1969d', class: "s-toggle-switcher" }))))), h("div", { key: 'c71f9bf392857bb103f31653f464dc937cf09e6c', class: "s-user-settings-section" }, h("salla-list-tile", { key: '519d35697291b69994a49a30191e9ba3690bdbf4' }, h("div", { key: '93e58ac81a4dda528808d224d3502c2563cc839b', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'ae3e3d3fb1154d4da1f57ea4f14b7de5a7e89ca6', innerHTML: Bullhorn })), h("div", { key: 'cb0549e5087b0b5bb0d29500b45443ab28a72999', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '250806cb3b011135d52f763977a2174136c932fb', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '85c4e3c7a2603ff15e4f9ecfb7bc4e9d8a64f8e7', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '614ad295ad8eb505b1a0d8cff486410de59bfda4', class: "s-toggle" }, h("input", { key: 'f90f68848e61e253226c5e88d43e5087d0e3ee20', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'd6b6d9e181cbf10710f5c811af295dc0910be0e2', class: "s-toggle-switcher" }))))), h("div", { key: '77b5c18198aeae7b8a7155f9b9aa3159c619d878', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'e3dccc871e44a8538b34fa372f4fc7ab8c6cd5ff' }, h("div", { key: '9732587e9e9ea444154ced92dbb40bac2081fd77', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0c0fe5602c588cd9987cd8fa56585b6dc9967f9e', innerHTML: UserOff })), h("div", { key: 'adbb6406361307e11f448f13316bcac2daf5d328', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '4ab0342675c0b7b7ab42a849320892f3f92a3d02', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'e94b080066c35a504293305dafdfc864b780c7f9', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: '07cbca4fd0e27f64b1908224c749ccc88cf057bf', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '7f0c52d2a06efbee76fe127acf248cc15e116061', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '2d01c4a0362bbc8616d38d758835051ee7fa0526', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '2a9317a26670ed303693694a05b8c79141d3e276', class: "s-user-settings-confirmation" }, h("div", { key: '69f933773e542e05ffed3e21ff090ccafccc520c', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '04aaa85ae678361c9e83c255fc74d8281d99c198', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '5a1697c757fb09edbd26a1913e8a6203379fd42e', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '01539a48796e8acb7cde26926e2f124727319d1d', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
}
static get style() { return sallaUserSettingsCss; }
}, [0, "salla-user-settings", {
"deactivateAccount": [32],
"promotionalMsgs": [32],
"hideMyName": [32],
"hideMyNameDesc": [32],
"deactivateDesc": [32],
"promotionalMsgsDesc": [32],
"sorryForLeavingText": [32],
"warningText": [32],
"keepAccount": [32],
"buttonLoading": [32],
"canHideName": [32],
"isHiddenName": [32],
"isNotifiable": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-user-settings", "salla-button", "salla-list-tile", "salla-loading", "salla-modal"];
components.forEach(tagName => { switch (tagName) {
case "salla-user-settings":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaUserSettings$1);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-list-tile":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const SallaUserSettings = SallaUserSettings$1;
const defineCustomElement = defineCustomElement$1;
export { SallaUserSettings, defineCustomElement };
//# sourceMappingURL=salla-user-settings.js.map
//# sourceMappingURL=salla-user-settings.js.map