eiam-user-preference 0.0.13

package/dist/collection/components/my-component/my-component.js

@@ -0,0 +1,96 @@
+import { h } from "@stencil/core";
+import { format } from "../../utils/utils";
+export class MyComponent {
+    /**
+     * The first name
+     */
+    first;
+    /**
+     * The middle name
+     */
+    middle;
+    /**
+     * The last name
+     */
+    last;
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return h("div", { key: '76b1efbfabf4194a3615ca3c9f0af80d326fed1c' }, "Hello, World! I'm ", this.getText());
+    }
+    static get is() { return "my-component"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "first": {
+                "type": "string",
+                "attribute": "first",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The first name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "middle": {
+                "type": "string",
+                "attribute": "middle",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The middle name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "last": {
+                "type": "string",
+                "attribute": "last",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The last name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=my-component.js.map

package/dist/collection/components/my-component/my-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-component.js","sourceRoot":"","sources":["../../../src/components/my-component/my-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAO3C,MAAM,OAAO,WAAW;IACtB;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,MAAM,CAAS;IAEvB;;OAEG;IACK,IAAI,CAAS;IAEb,OAAO;QACb,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO;;YAAwB,IAAI,CAAC,OAAO,EAAE,CAAO,CAAC;IACvD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { format } from '../../utils/utils';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.css',\n  shadow: true,\n})\nexport class MyComponent {\n  /**\n   * The first name\n   */\n  @Prop() first: string;\n\n  /**\n   * The middle name\n   */\n  @Prop() middle: string;\n\n  /**\n   * The last name\n   */\n  @Prop() last: string;\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return <div>Hello, World! I'm {this.getText()}</div>;\n  }\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components.d.ts';\n"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,4 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}

package/dist/components/eiam-user-preference.d.ts

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

package/dist/components/eiam-user-preference.js

@@ -0,0 +1,418 @@
+import { p as proxyCustomElement, H, h, a as Host } from './p-CkpXNKI5.js';
+
+const eiamUserPreferenceCss = ".kt-quick-panel.kt-quick-panel--on{-webkit-transition:left 0.3s ease, right 0.3s ease;transition:left 0.3s ease, right 0.3s ease;right:0;left:auto}.kt-quick-panel-close{width:25px;height:25px;top:1px;z-index:1002;-webkit-transition:left 0.3s ease, right 0.3s ease;transition:left 0.3s ease, right 0.3s ease;position:fixed;border:0;-webkit-box-shadow:none;box-shadow:none;border-radius:3px;cursor:pointer;outline:none !important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;left:-25px}";
+
+const EiamUserPreference$1 = /*@__PURE__*/ proxyCustomElement(class EiamUserPreference extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get host() { return this; }
+    apiUrl = window['config']?.apiUrl || 'http://localhost:5000';
+    currentRouteSlug;
+    payload = {
+        pagination: {
+            pageIndex: 0,
+            pageSize: 1000,
+        },
+        search: {
+            pageName: '',
+        },
+    };
+    userPreferences = {
+        dateFormate: 'dd/MM/yyyy',
+        timeFormate: '',
+        fontSize: null,
+        displayFormat: 4,
+        defaultLandingPageId: '',
+        pageName: '',
+    };
+    dateFormates = ['dd/MM/yyyy', 'MM/dd/yyyy', 'yyyy-MM-dd'];
+    timeFormats = ['h:mm a'];
+    fontSizes = [
+        { label: 'Small', value: '14' },
+        { label: 'Medium', value: '16' },
+        { label: 'Large', value: '18' },
+    ];
+    displayFormats = [];
+    userApplications = [];
+    pages = [];
+    totalPages = 0;
+    isModalOpen = false;
+    isPageModalOpen = false; // Controls the visibility of the secondary modal
+    selectedPage = { id: null, name: '' }; // To store selected page
+    pageParams = {
+        pageName: '',
+        status: 0,
+        pageCategory: 0,
+        cultureId: 0,
+        cultureCode: '',
+        pageNumber: 0,
+        pageSize: 10,
+        applicationId: 0,
+        searchText: '',
+    };
+    pageId;
+    cultureCode;
+    applicationId;
+    async componentWillLoad() {
+        await this.getDisplayFormats();
+        await this.getUserPreferences();
+        await this.getUserApplications();
+    }
+    componentDidLoad() {
+        if (this.host.shadowRoot) {
+            const existingLink = this.host.shadowRoot.querySelector('link[rel="stylesheet"]');
+            if (!existingLink) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
+                this.host.shadowRoot.appendChild(link);
+                // console.log('FontAwesome added to shadow DOM');
+            }
+            else {
+                console.log('FontAwesome already added to shadow DOM');
+            }
+        }
+        else {
+            console.warn('shadowRoot is null');
+        }
+    }
+    async getDisplayFormats() {
+        try {
+            const headers = {
+                'Content-Type': 'application/json',
+                'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
+                'CultureCode': this.cultureCode,
+                'Source': '2',
+                'applicationId': this.applicationId,
+            };
+            const response = await fetch(`${this.apiUrl}/api/UserPreferences/DisplayFormats`, {
+                method: 'GET', // Specify GET method
+                headers: headers,
+                credentials: 'include', // Include credentials (cookies) in the request
+            });
+            const data = await response.json();
+            if (Array.isArray(data.content)) {
+                this.displayFormats = data.content;
+            }
+            else {
+                console.error('Invalid response structure:', data);
+            }
+        }
+        catch (error) {
+            console.error('Error fetching display formats:', error);
+        }
+    }
+    async getUserPreferences() {
+        try {
+            const headers = {
+                'Content-Type': 'application/json',
+                'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
+                'CultureCode': this.cultureCode,
+                'Source': '2',
+                'applicationId': this.applicationId,
+            };
+            const response = await fetch(`${this.apiUrl}/api/UserPreferences/GetUserPreferences`, {
+                method: 'GET',
+                headers: headers,
+                credentials: 'include',
+            });
+            const data = await response.json();
+            if (data && typeof data !== 'string') {
+                const fontSizeValue = parseFloat(data.fontSize);
+                this.userPreferences = {
+                    ...this.userPreferences,
+                    dateFormate: data.dateFormate || 'dd/MM/yyyy',
+                    timeFormate: data.timeFormate || this.timeFormats[0], // fallback!
+                    fontSize: !isNaN(fontSizeValue) ? fontSizeValue : this.fontSizes[0]?.value,
+                    displayFormat: data.displayFormat || 1,
+                    defaultLandingPageId: data.defaultLandingPageId,
+                    pageName: data?.defaultLandingPageDetails?.name || '',
+                };
+            }
+        }
+        catch (error) {
+            console.error('Error fetching user preferences:', error);
+        }
+    }
+    async getUserApplications() {
+        try {
+            const headers = {
+                'Content-Type': 'application/json',
+                'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
+                'CultureCode': this.cultureCode,
+                'Source': '2',
+                'applicationId': this.applicationId,
+            };
+            const response = await fetch(`${this.apiUrl}/api/OrganizationApplicationsApi/GetAssigndApplicationForUser`, {
+                method: 'GET',
+                headers: headers,
+                credentials: 'include',
+            });
+            const data = await response.json();
+            if (data && Array.isArray(data.content)) {
+                this.userApplications = data.content;
+            }
+            else {
+                console.error('Invalid response structure:', data);
+            }
+        }
+        catch (error) {
+            console.error('Error fetching applications:', error);
+        }
+    }
+    changeApplication(application) {
+        if (application.applicationId) {
+            this.pageParams.applicationId = application.applicationId;
+            this.getPagesSApplications();
+        }
+    }
+    async getPagesSApplications() {
+        const requestBody = {}; // Create the request body (you can modify based on your needs)
+        try {
+            const response = await fetch(`${this.apiUrl}/api/Pages/GetPages`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
+                    'CultureCode': this.cultureCode,
+                    'Source': '2',
+                    'applicationId': this.applicationId,
+                },
+                credentials: 'include',
+                body: JSON.stringify(requestBody),
+            });
+            if (!response.ok) {
+                console.error('Failed to fetch pages');
+                return;
+            }
+            const data = await response.json();
+            console.log(data, 'data of all pages ');
+        }
+        catch (error) {
+            console.error('Error fetching pages:', error);
+        }
+    }
+    //   async submitPreferences() {
+    //     const fontSize = this.userPreferences.fontSize ? this.userPreferences.fontSize + 'px' : null;
+    //     const headers = {
+    //       'Content-Type': 'application/json',
+    //       'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
+    //       'CultureCode': this.cultureCode,
+    //       'Source': '2',
+    //       'applicationId': this.applicationId,
+    //     };
+    //     try {
+    //       const response = await fetch(`${this.apiUrl}/api/UserPreferences/SaveUserPreferences`, {
+    //         method: 'POST',
+    //         headers: headers,
+    //         body: JSON.stringify({ ...this.userPreferences, fontSize }),
+    //         credentials: 'include',
+    //       });
+    //       if (!response.ok) {
+    //         console.error('Failed to save preferences:', response.statusText);
+    //         return;
+    //       }
+    //       await this.getUserPreferences();
+    //     } catch (error) {
+    //       console.error('Error submitting preferences:', error);
+    //     }
+    //   }
+    async submitPreferences() {
+        const fontSizeValue = parseFloat(this.userPreferences.fontSize);
+        const fontSize = !isNaN(fontSizeValue) ? `${fontSizeValue}px` : null;
+        const headers = {
+            'Content-Type': 'application/json',
+            'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
+            'CultureCode': this.cultureCode,
+            'Source': '2',
+            'applicationId': this.applicationId,
+        };
+        try {
+            const response = await fetch(`${this.apiUrl}/api/UserPreferences/SaveUserPreferences`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({ ...this.userPreferences, fontSize }),
+                credentials: 'include',
+            });
+            if (!response.ok) {
+                console.error('Failed to save preferences:', response.statusText);
+                return;
+            }
+            // Fetch updated preferences
+            const newPrefs = await this.getUserPreferences();
+            if (!newPrefs || typeof newPrefs === 'string')
+                return;
+            // Apply updated preferences like Angular code
+            const { displayFormat, fontSize: newFontSize, dateFormate, timeFormate } = newPrefs;
+            if (displayFormat) {
+                localStorage.setItem('displayFormat', displayFormat);
+                // this.emit('displayFormatUpdated', displayFormat);
+            }
+            if (newFontSize) {
+                document.body.setAttribute('style', `font-size: ${newFontSize} !important`);
+            }
+            localStorage.setItem('dateFormat', dateFormate || 'dd/MM/yyyy');
+            localStorage.setItem('timeFormat', timeFormate || '');
+            // this.emit('dateFormatUpdated', dateFormate || 'dd/MM/yyyy');
+            // this.emit('timeFormatUpdated', timeFormate || '');
+        }
+        catch (error) {
+            console.error('Error submitting preferences:', error);
+        }
+    }
+    async resetPreferences() {
+        try {
+            await fetch(`${this.apiUrl}/api/UserPreferences/Delete`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+            this.userPreferences = {
+                dateFormate: 'dd/MM/yyyy',
+                timeFormate: '',
+                fontSize: '',
+                displayFormat: 4,
+                defaultLandingPageId: '',
+                pageName: '',
+            };
+            localStorage.removeItem('dateFormat');
+            localStorage.removeItem('displayFormat');
+            localStorage.removeItem('fontSize');
+            location.reload(); // If you want to refresh the UI
+        }
+        catch (error) {
+            console.error('Failed to reset preferences', error);
+        }
+    }
+    toggleModal() {
+        this.isModalOpen = !this.isModalOpen;
+    }
+    togglePageModal() {
+        this.isPageModalOpen = !this.isPageModalOpen;
+    }
+    selectPage(page) {
+        this.selectedPage = page;
+        this.userPreferences.defaultLandingPageId = page.id; // Update default landing page
+        this.togglePageModal(); // Close the page selection modal
+    }
+    //   render() {
+    //     return (
+    //       <Host>
+    //         <div>
+    //           <i class="fas fa-cogs" onClick={() => this.toggleModal()} style={{ cursor: 'pointer', fontSize: '24px' }}></i>
+    //           {/* Modal */}
+    //           {this.isModalOpen && (
+    //             <div class="modal">
+    //               <div class="modal-content">
+    //                 <span class="close" onClick={() => this.toggleModal()}>
+    //                   &times;
+    //                 </span>
+    //                 <h2>User Preferences</h2>
+    //                 <div>
+    //                   <label>Date Format</label>
+    //                   <select onInput={e => (this.userPreferences.dateFormate = (e.target as HTMLSelectElement).value)}>
+    //                     {this.dateFormates.map(format => (
+    //                       <option value={format} selected={this.userPreferences.dateFormate === format}>
+    //                         {format}
+    //                       </option>
+    //                     ))}
+    //                   </select>
+    //                   <label>Time Format</label>
+    //                   <select onInput={e => (this.userPreferences.timeFormate = (e.target as HTMLSelectElement).value)}>
+    //                     {this.timeFormats.map(format => (
+    //                       <option value={format} selected={this.userPreferences.timeFormate === format}>
+    //                         {format}
+    //                       </option>
+    //                     ))}
+    //                   </select>
+    //                   <label>Font Size</label>
+    //                   <select onInput={e => (this.userPreferences.fontSize = (e.target as HTMLSelectElement).value)}>
+    //                     {this.fontSizes.map(size => (
+    //                       <option value={size.value} selected={this.userPreferences.fontSize === size.value}>
+    //                         {size.label}
+    //                       </option>
+    //                     ))}
+    //                   </select>
+    //                   <label>User Display Format</label>
+    //                   <select onInput={e => (this.userPreferences.displayFormat = parseInt((e.target as HTMLSelectElement).value))}>
+    //                     {this.displayFormats.map(format => (
+    //                       <option value={format.value} selected={this.userPreferences.displayFormat === format.value}>
+    //                         {format.label}
+    //                       </option>
+    //                     ))}
+    //                   </select>
+    //                   <label>Default Landing Page</label>
+    //                   <select onInput={e => (this.userPreferences.defaultLandingPageId = (e.target as HTMLSelectElement).value)}>
+    //                     {this.pages.map(page => (
+    //                       <option value={page.id} selected={this.userPreferences.defaultLandingPageId === page.id}>
+    //                         {page.name}
+    //                       </option>
+    //                     ))}
+    //                   </select>
+    //                   <button onClick={() => this.submitPreferences()}>Save</button>
+    //                   <button onClick={() => this.resetPreferences()}>Reset</button>
+    //                 </div>
+    //               </div>
+    //             </div>
+    //           )}
+    //         </div>
+    //       </Host>
+    //     );
+    //   }
+    render() {
+        return (h(Host, { key: '73268d667553094939f061bcb072bda06c14b214' }, h("div", { key: '9eb1fd24078089437f64a4840f738a1f942452b0' }, h("i", { key: '8ad9ea93263a7695eed25fb3fe33893c22e2a989', class: "fas fa-cogs", onClick: () => this.toggleModal(), style: { cursor: 'pointer', fontSize: '24px' } }), this.isModalOpen && (h("div", { key: '988a1a24b362afc61f0e9398a6c401dacfc42837', class: "kt-quick-panel kt-quick-panel--on" }, h("a", { key: 'd969cf578cab9d74ce3bc9203beab91d7d47f1b2', onClick: () => this.toggleModal(), id: "kt_quick_panel_close_btn", class: "kt-quick-panel__close" }, h("i", { key: 'a575b9ee906bd938bfb324835e56b04f9ce256f1', class: "fas fa-times" })), h("div", { key: 'e35452dc147593b9b10707c8efa15e600d8b38c2', class: "kt-quick-panel__nav" }, h("ul", { key: 'b5eb70a8f79b795e53dd364e6c518f623ea0680c', role: "tablist", class: "nav nav-tabs nav-tabs-line nav-tabs-bold nav-tabs-line-3x nav-tabs-line-brand kt-notification-item-padding-x" }, h("li", { key: '2a4efe276341c924f7c3437643c9aa23f2739ca6', class: "nav-item active" }, h("a", { key: 'a301c57cc56e752b21881037f02abbaf5e721060', "data-toggle": "tab", role: "tab", class: "nav-link active" }, "User Preference")))), h("div", { key: '2a2a0a8df42f12ae43290fa82649492faf118a1a', class: "kt-quick-panel__content" }, h("div", { key: 'df7abede8ff8e7c6219939f32bb097e4126b513c', class: "tab-content" }, h("div", { key: 'aef7806fef44acb6179007e5af991ec1a9ef1148', id: "kt_quick_panel_tab_notifications", role: "tabpanel", class: "tab-pane fade show kt-scroll active ps ps--active-y" }, h("div", { key: 'ceb62ff2e5d97947c7746cc3ba8359a903106261', class: "kt-notification" }, h("div", { key: '345c04d2b76a353e6336d87d6cf7fb0ba831183f', class: "kt-portlet__body" }, h("div", { key: 'e8f3b6eaacea413e7f8fa9a05d7e4a1ecd4f3abf', class: "form-group" }, h("label", { key: '7f4f8b89e8bb8fce52da354579c305edfdbfbd7b' }, "Date Format"), h("select", { key: '802e4604185a71450e19fe0ff80091c11aa607aa', onInput: e => (this.userPreferences.dateFormate = e.target.value) }, this.dateFormates.map(format => (h("option", { value: format, selected: this.userPreferences.dateFormate === format }, format))))), h("div", { key: 'da29120fb40a409f143a212b592455ee0a3e9486', class: "form-group" }, h("label", { key: 'db8adfe511a9647822add835b2e79b35551e8ae8' }, "Time Format"), h("select", { key: 'aa335e039c7509388ae5b0ebb95e38a2dd26dd84', onInput: e => (this.userPreferences.timeFormate = e.target.value) }, this.timeFormats.map(format => (h("option", { value: format, selected: this.userPreferences.timeFormate === format }, format))))), h("div", { key: '95591ac88b995c9a2bc9c7e85dc4d86fabd49111', class: "form-group" }, h("label", { key: 'abcc1107a38ab88df414cb6e0b0f89d30db14edb' }, "Font Size"), h("select", { key: '2500ac6ead59cdfd696fb70de46d80395f09b7ba', onInput: e => (this.userPreferences.fontSize = e.target.value) }, this.fontSizes.map(size => (h("option", { value: size.value, selected: this.userPreferences.fontSize === size.value }, size.label))))), h("div", { key: '8e28e4ea701c85a9df01c6e377ff41e0775d217f', class: "form-group" }, h("label", { key: '63a1fca56a0bdae7c4aa91f97e00e764d130b61d' }, "User Display Format"), h("select", { key: 'd637292ae9df0ad9694119d3ed9eb653aa318350', onInput: e => (this.userPreferences.displayFormat = parseInt(e.target.value)) }, this.displayFormats.map(format => (h("option", { value: format.value, selected: this.userPreferences.displayFormat === format.value }, format.label))))), h("div", { key: 'a05f5a4620222485b3d70e662675f79a344cbfc6', class: "form-group" }, h("label", { key: '163feb5c4c8707d3b5de2e7ece82d725de954814' }, "Default Landing Page"), h("div", { key: 'f45690926ace8996450fc90856d725c49ad87efd', class: "input-group", onClick: () => this.togglePageModal() }, h("div", { key: '96be1b6688f8b8d354662e2978d5d767c2d097b5', class: "input-group-prepend" }, h("span", { key: '71f477fe498f90e3b440fdde31fb17e7ffa6743e', class: "input-group-text" }, h("i", { key: '5491f0b4b917a953590e9d3b40ac04fcf767a357', class: "fas fa-link" }))), h("input", { key: '8ab0f12f72e0a2911a8803c79409de0fdbc9a935', type: "text", class: "form-control", readonly: true, value: this.selectedPage.name || 'Select page', placeholder: "Select page" })))), h("div", { key: 'd031e47045efa5108f70e7d1e97700b348c34654', class: "kt-portlet__foot" }, h("div", { key: 'fc41e360f1331381d73bac4f9bb0c6c89ae3262c', class: "kt-form__actions" }, h("button", { key: 'f6e0948a440fbd83885bd20549ddc2bbddf3219c', class: "btn btn-primary", onClick: () => this.submitPreferences() }, "Save"), h("button", { key: 'db3e6b974e20adb93c7dcca03fa52dfdbea57d82', class: "btn btn-secondary", onClick: () => this.resetPreferences() }, "Reset"))))))))), this.isPageModalOpen && (h("div", { key: '36ed3547d24490064ad098ff6893f64abafa612f', class: "modal-dialog modal-md landing-modal" }, h("div", { key: '425a4cdbe00179fb0628ddd46f1ea8699c52aa8b', class: "modal-content landing-page" }, h("div", { key: '0ea6be6c543941262e28a029990bf3d5a3d65f6b', class: "modal-header" }, h("h4", { key: '36644da5cf638a4c24179cc553ec74db1705315e', class: "modal-title pull-left" }, " Default Landing Page "), h("button", { key: 'e59f82a9c151a80ae4300e432172d767e819ba9a', onClick: () => this.togglePageModal(), type: "button", "aria-label": "Close", class: "close pull-right" }, h("span", { key: '6c36480c025d8c7a9ddbee1ca2c3d8c15b01b917' }, h("i", { key: '22e67e915e5dc2cdee997c48b548710c9038941f', class: "fas fa-times" })))), h("div", { key: '5afc1b174e337ac3656d7f2a268d245acb65a8a2', class: "modal-body" }, h("div", { key: '08b55625de4683aad5c3eeede962029701b7d8c6', class: "row" }, h("div", { key: 'f7eebf3e41024676b42c956addef734e18aa2d05', class: "col-12" }, h("div", { key: '2e4bec9be8c15162b43e202623ebf79367783ff0', class: "row" }, h("div", { key: 'd10ec0ce280235ad7bdad74d65f1158e53966519', class: "form-group" }, h("label", { key: 'c67179f8a27436aeec5a209a4b6a169f31bc367b', htmlFor: "" }, " Default Landing Page "), h("select", { key: 'bf0f2664891f7b581ee60cba7c14296e25f2e218', onInput: e => this.changeApplication(e) }, this.userApplications.map(application => (h("option", { value: application.applicationId }, application.applicationName)))))), h("label", { key: '17fa28c79845986510a0d2a538251673cdde4dc6' }, "Select Page"), h("div", { key: 'ceaf84ad32062d5b3a6c125b77f4b8c37c82ca37', style: { maxHeight: '300px', overflowY: 'auto', overflowX: 'hidden' } }, this.pages.map(page => (h("div", { class: "slug-item", onClick: () => this.selectPage(page) }, h("div", { class: "row" }, h("span", { class: "text-brand", style: { fontWeight: '600', lineHeight: '1' } }, page.name), h("small", { class: {
+                'culture-unpublished': page.pageCultureStatus == 1,
+                'culture-published': page.pageCultureStatus == 2,
+            } }, "| ", page.cultureCode)))))), h("div", { key: 'fe6fd591d3f70ed1903b49d927b6efd3006d82cf', class: "d-flex justify-content-center mt-2 pagination-class" }))))))))));
+    }
+    static get watchers() { return {
+        "cultureCode": ["componentWillLoad"],
+        "applicationId": ["componentWillLoad"]
+    }; }
+    static get style() { return eiamUserPreferenceCss; }
+}, [1, "eiam-user-preference", {
+        "cultureCode": [1, "culture-code"],
+        "applicationId": [1, "application-id"],
+        "currentRouteSlug": [32],
+        "payload": [32],
+        "userPreferences": [32],
+        "dateFormates": [32],
+        "timeFormats": [32],
+        "fontSizes": [32],
+        "displayFormats": [32],
+        "userApplications": [32],
+        "pages": [32],
+        "totalPages": [32],
+        "isModalOpen": [32],
+        "isPageModalOpen": [32],
+        "selectedPage": [32],
+        "pageParams": [32],
+        "pageId": [32]
+    }, undefined, {
+        "cultureCode": ["componentWillLoad"],
+        "applicationId": ["componentWillLoad"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eiam-user-preference"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eiam-user-preference":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EiamUserPreference$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const EiamUserPreference = EiamUserPreference$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EiamUserPreference, defineCustomElement };
+//# sourceMappingURL=eiam-user-preference.js.map
+
+//# sourceMappingURL=eiam-user-preference.js.map