eiam-user-preference 0.0.56 → 0.0.59

package/dist/esm/loader.js

@@ -1,14 +1,12 @@
-import { b as bootstrapLazy } from './index-Ko8ax98F.js';
-export { s as setNonce } from './index-Ko8ax98F.js';
+import { b as bootstrapLazy } from './index-D1G58aKM.js';
+export { s as setNonce } from './index-D1G58aKM.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["eiam-user-preference",[[1,"eiam-user-preference",{"pageId":[8,"page-id"],"cultureCode":[1,"culture-code"],"applicationId":[1,"application-id"],"apiUrl":[1,"api-url"],"currentRouteSlug":[32],"payload":[32],"userPreferences":[32],"dateFormates":[32],"timeFormats":[32],"fontSizes":[32],"displayFormats":[32],"userApplications":[32],"pages":[32],"isModalOpen":[32],"currentPage":[32],"pageSize":[32],"isPageModalOpen":[32],"selectedPage":[32],"showToastFlag":[32],"toastType":[32],"toastMessage":[32]},null,{"cultureCode":["componentWillLoad"],"applicationId":["componentWillLoad"],"pageId":["componentWillLoad"],"apiUrl":["componentWillLoad"]}]]],["my-component",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+  return bootstrapLazy([["eiam-user-preference",[[257,"eiam-user-preference",{"pageId":[8,"page-id"],"cultureCode":[1,"culture-code"],"applicationId":[1,"application-id"],"apiUrl":[1,"api-url"],"currentRouteSlug":[32],"payload":[32],"userPreferences":[32],"dateFormates":[32],"timeFormats":[32],"fontSizes":[32],"displayFormats":[32],"userApplications":[32],"pages":[32],"isModalOpen":[32],"currentPage":[32],"pageSize":[32],"isPageModalOpen":[32],"selectedPage":[32],"showToastFlag":[32],"toastType":[32],"toastMessage":[32]},null,{"cultureCode":["componentWillLoad"],"applicationId":["componentWillLoad"],"pageId":["componentWillLoad"],"apiUrl":["componentWillLoad"]}]]],["my-component",[[257,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
 };
 
 export { defineCustomElements };
 //# sourceMappingURL=loader.js.map
-
-//# sourceMappingURL=loader.js.map

package/dist/esm/my-component.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Ko8ax98F.js';
+import { r as registerInstance, h } from './index-D1G58aKM.js';
 import { format } from './index.js';
 
 const myComponentCss = ":host{display:block}";
@@ -23,12 +23,10 @@ const MyComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '57decd4aec03992e22486b0ab0d7cc68f1931c30' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'd4ea8660d4a25fd69ed93427fcb906d0631c9750' }, "Hello, World! I'm ", this.getText());
     }
 };
 MyComponent.style = myComponentCss;
 
 export { MyComponent as my_component };
 //# sourceMappingURL=my-component.entry.js.map
-
-//# sourceMappingURL=my-component.entry.js.map

package/dist/esm/my-component.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-component.entry.js","sources":["src/components/my-component/my-component.css?tag=my-component&encapsulation=shadow","src/components/my-component/my-component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","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"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW,GAAA,MAAA;;;;AACtB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,MAAM;AAEd;;AAEG;AACK,IAAA,IAAI;IAEJ,OAAO,GAAA;AACb,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;IAGnD,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,wBAAwB,IAAI,CAAC,OAAO,EAAE,CAAO;;;;;;;"}
+{"version":3,"file":"my-component.entry.js","sources":["src/components/my-component/my-component.css?tag=my-component&encapsulation=shadow","src/components/my-component/my-component.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\r\nimport { format } from '../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'my-component',\r\n  styleUrl: 'my-component.css',\r\n  shadow: true,\r\n})\r\nexport class MyComponent {\r\n  /**\r\n   * The first name\r\n   */\r\n  @Prop() first: string;\r\n\r\n  /**\r\n   * The middle name\r\n   */\r\n  @Prop() middle: string;\r\n\r\n  /**\r\n   * The last name\r\n   */\r\n  @Prop() last: string;\r\n\r\n  private getText(): string {\r\n    return format(this.first, this.middle, this.last);\r\n  }\r\n\r\n  render() {\r\n    return <div>Hello, World! I'm {this.getText()}</div>;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW,GAAA,MAAA;;;;AACtB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,MAAM;AAEd;;AAEG;AACK,IAAA,IAAI;IAEJ,OAAO,GAAA;AACb,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;IAGnD,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,wBAAwB,IAAI,CAAC,OAAO,EAAE,CAAO;;;;;;;"}

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

@@ -45,6 +45,9 @@ export declare class EiamUserPreference {
     applicationId: string;
     apiUrl: string;
     componentWillLoad(): Promise<void>;
+    private isFetchingDisplayFormats;
+    private isFetchingUserPreferences;
+    private isFetchingApplications;
     getDisplayFormats(): Promise<void>;
     getUserPreferences(): Promise<void>;
     private showToast;

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +153,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +241,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -260,6 +276,25 @@ export declare function setPlatformHelpers(helpers: {
  * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
+/**
+ * Method to render a virtual DOM tree to a container element.
+ *
+ * @example
+ * ```tsx
+ * import { render } from '@stencil/core';
+ *
+ * const vnode = (
+ *   <div>
+ *     <h1>Hello, world!</h1>
+ *   </div>
+ * );
+ * render(vnode, document.body);
+ * ```
+ *
+ * @param vnode - The virtual DOM tree to render
+ * @param container - The container element to render the virtual DOM tree to
+ */
+export declare function render(vnode: VNode, container: Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -304,7 +339,7 @@ export declare function forceUpdate(ref: any): void;
  * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
-export interface HTMLStencilElement extends HTMLElement {
+export interface HTMLStencilElement extends Omit<HTMLElement, 'autocorrect'> {
     componentOnReady(): Promise<this>;
 }
 /**
@@ -330,6 +365,37 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
+ *
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports
@@ -827,7 +893,7 @@ export declare namespace JSXBase {
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
         name?: string;
-        onToggle?: (event: Event) => void;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1533,6 +1599,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1549,6 +1622,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1567,10 +1644,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;
@@ -1582,7 +1655,7 @@ export declare namespace JSXBase {
         onKeyUp?: (event: KeyboardEvent) => void;
         onKeyUpCapture?: (event: KeyboardEvent) => void;
         onAuxClick?: (event: MouseEvent) => void;
-        onClick?: (event: MouseEvent) => void;
+        onClick?: (event: PointerEvent) => void;
         onClickCapture?: (event: MouseEvent) => void;
         onContextMenu?: (event: MouseEvent) => void;
         onContextMenuCapture?: (event: MouseEvent) => void;

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "eiam-user-preference",
-  "version": "0.0.56",
-  "description": "Stencil Component Starter",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/eiam-user-preference/eiam-user-preference.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/eiam-user-preference/eiam-user-preference.esm.js",
-      "require": "./dist/eiam-user-preference/eiam-user-preference.cjs.js"
-    },
-    "./my-component": {
-      "import": "./dist/components/my-component.js",
-      "types": "./dist/components/my-component.d.ts"
-    },
-    "./loader": {
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs",
-      "types": "./loader/index.d.ts"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/stenciljs/component-starter.git"
-  },
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate"
-  },
-  "devDependencies": {
-    "@stencil/core": "^4.27.1",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.5",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "puppeteer": "^24.3.0"
-  },
-  "peerDependencies": {
-    "@angular/common": ">=14.0.0",
-    "@angular/core": ">=14.0.0",
-    "typescript": ">=4.7.0"
-  },
-  "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=8.0.0"
-  },
-  "license": "MIT",
-  "dependencies": {},
-  "keywords": [
-    "angular",
-    "stencil",
-    "web components",
-    "user preference",
-    "user settings",
-    "date format",
-    "time format",
-    "font size",
-    "landing page",
-    "user display format",
-    "preferences component",
-    "portal settings",
-    "EIAM",
-    "eiam user preference",
-    "user profile",
-    "dynamic preferences",
-    "theme settings",
-    "stenciljs",
-    "angular integration"
-  ]
-}
+{
+  "name": "eiam-user-preference",
+  "version": "0.0.59",
+  "description": "Stencil Component Starter",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/eiam-user-preference/eiam-user-preference.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/eiam-user-preference/eiam-user-preference.esm.js",
+      "require": "./dist/eiam-user-preference/eiam-user-preference.cjs.js"
+    },
+    "./my-component": {
+      "import": "./dist/components/my-component.js",
+      "types": "./dist/components/my-component.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/core": "^4.38.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.18.12",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^24.3.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=14.0.0",
+    "@angular/core": ">=14.0.0",
+    "typescript": ">=4.7.0"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "stencil",
+    "web components",
+    "user preference",
+    "user settings",
+    "date format",
+    "time format",
+    "font size",
+    "landing page",
+    "user display format",
+    "preferences component",
+    "portal settings",
+    "EIAM",
+    "eiam user preference",
+    "user profile",
+    "dynamic preferences",
+    "theme settings",
+    "stenciljs",
+    "angular integration"
+  ]
+}

package/readme.md

@@ -1,86 +1,86 @@
-# EIAM User-preference
-
-> A Web Component built with StencilJS, used for managing user preferences in an Angular project.
-
-## ✨ Features
-  Change user settings related to the portal:
-
-  - Date Format
-
-  - Time Format
-
-  - Font Size
-
-  - User Display Format
-
-  - Default Landing Page
-
-  - Reset preferences
-
-  - Emits changes back to the host Angular app
-
-
-
-
-## 🚀 Getting Started
-
-###  Install the component:
-
-> First, install the component in your Angular project:
-
-```bash
-1. npm i eiam-user-preference
-
-
-2. Import and define custom elements in your application:
-In your main.ts, import and define custom elements:
-
- import { defineCustomElements } from 'eiam-user-preference/loader'; 
-
-  defineCustomElements(window);
-
-3. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-  @NgModule({
-  declarations: [...],
-  imports: [...],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-  })
-  export class AppModule {}
-
-
-4. Now you can use the custom elements in your HTML BUT you need to pass the dynamic properties:apiUrl, pageId, cultureCode and applicationId to the component:
-
-In your HTML:
-
- <eiam-user-preference
-[cultureCode]="cultureCode"
-[applicationId]="applicationId"
-[pageId]="pageId"
-[apiUrl]="apiURL"
-(preferencesChanged)="onPreferencesChanged($event)"
-></eiam-user-preference>
-
-
-In your Angular component, make sure to dynamically provide all required input values. If any value is missing, an error message will be displayed. 
-
-export class YourComponent implements OnInit {
-  cultureCode: string;
-  applicationId: string;   
-  apiUrl :string
-  pageId :number
-  ngOnInit() {
-    // You can update these values.
-
-     onPreferencesChanged(event: any) {
-    // Handle the emitted preferences update
-  }
-  }
-}
-
-🔁 Listening to Changes
-
-The (preferencesChanged) event emits an object containing the updated preferences.
-You can use this data to update features/settings in your application dynamically.
-
-
+# EIAM User-preference
+
+> A Web Component built with StencilJS, used for managing user preferences in an Angular project.
+
+## ✨ Features
+  Change user settings related to the portal:
+
+  - Date Format
+
+  - Time Format
+
+  - Font Size
+
+  - User Display Format
+
+  - Default Landing Page
+
+  - Reset preferences
+
+  - Emits changes back to the host Angular app
+
+
+
+
+## 🚀 Getting Started
+
+###  Install the component:
+
+> First, install the component in your Angular project:
+
+```bash
+1. npm i eiam-user-preference
+
+
+2. Import and define custom elements in your application:
+In your main.ts, import and define custom elements:
+
+ import { defineCustomElements } from 'eiam-user-preference/loader'; 
+
+  defineCustomElements(window);
+
+3. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+  @NgModule({
+  declarations: [...],
+  imports: [...],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  })
+  export class AppModule {}
+
+
+4. Now you can use the custom elements in your HTML BUT you need to pass the dynamic properties:apiUrl, pageId, cultureCode and applicationId to the component:
+
+In your HTML:
+
+ <eiam-user-preference
+[cultureCode]="cultureCode"
+[applicationId]="applicationId"
+[pageId]="pageId"
+[apiUrl]="apiURL"
+(preferencesChanged)="onPreferencesChanged($event)"
+></eiam-user-preference>
+
+
+In your Angular component, make sure to dynamically provide all required input values. If any value is missing, an error message will be displayed. 
+
+export class YourComponent implements OnInit {
+  cultureCode: string;
+  applicationId: string;   
+  apiUrl :string
+  pageId :number
+  ngOnInit() {
+    // You can update these values.
+
+     onPreferencesChanged(event: any) {
+    // Handle the emitted preferences update
+  }
+  }
+}
+
+🔁 Listening to Changes
+
+The (preferencesChanged) event emits an object containing the updated preferences.
+You can use this data to update features/settings in your application dynamically.
+
+