wj-elements 0.1.177 → 0.1.179

package/dist/base-path.js

@@ -0,0 +1,23 @@
+let basePath = "";
+function setBasePath(path) {
+  basePath = path;
+}
+function getBasePath(appendedPath = "") {
+  if (!basePath) {
+    const scripts = [...document.getElementsByTagName("script")];
+    const basePathScript = scripts.find((script) => script.hasAttribute("data-base-path"));
+    if (basePathScript) {
+      setBasePath(basePathScript.dataset.basePath || "");
+    } else {
+      const path = "";
+      setBasePath(path.split("/").slice(0, -1).join("/"));
+    }
+  }
+  const subPath = appendedPath.replace(/^\//, "");
+  return basePath.replace(/\/$/, "") + (appendedPath ? "/" + subPath : "");
+}
+export {
+  getBasePath,
+  setBasePath
+};
+//# sourceMappingURL=base-path.js.map

package/dist/base-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-path.js","sources":["../packages/utils/base-path.js"],"sourcesContent":["let basePath = '';\n\n/**\n * Sets the base path for the application.\n * @param {string} path The base path to be set.\n * @returns {void} This function does not return anything.\n */\nexport function setBasePath(path) {\n  basePath = path;\n}\n\n/**\n * Returns the base path of the application, optionally appending a specified relative path.\n * If the base path has not been set, it determines the base path from the first script element\n * with a `base-path` attribute or generates it based on the current script location.\n * @param {string} [appendedPath] The relative path to append to the base path. Defaults to an empty string.\n * @returns {string} The complete base path, with the appended relative path if specified.\n */\nexport function getBasePath(appendedPath = '') {\n  if (!basePath) {\n    const scripts = [...document.getElementsByTagName('script')];\n    const basePathScript = scripts.find(script => script.hasAttribute('data-base-path'));\n\n    if (basePathScript) {\n      setBasePath(basePathScript.dataset.basePath  || '');\n    } else {\n      const path = '';\n\n      setBasePath(path.split('/').slice(0, -1).join('/'));\n    }\n  }\n\n  const subPath = appendedPath.replace(/^\\//, '');\n\n  return basePath.replace(/\\/$/, '') + (appendedPath ? '/' + subPath : '');\n}"],"names":[],"mappings":"AAAA,IAAI,WAAW;AAOR,SAAS,YAAY,MAAM;AAChC,aAAW;AACb;AASO,SAAS,YAAY,eAAe,IAAI;AAC7C,MAAI,CAAC,UAAU;AACb,UAAM,UAAU,CAAC,GAAG,SAAS,qBAAqB,QAAQ,CAAC;AAC3D,UAAM,iBAAiB,QAAQ,KAAK,YAAU,OAAO,aAAa,gBAAgB,CAAC;AAEnF,QAAI,gBAAgB;AAClB,kBAAY,eAAe,QAAQ,YAAa,EAAE;AAAA,IACxD,OAAW;AACL,YAAM,OAAO;AAEb,kBAAY,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC;AAAA,IACxD;AAAA,EACA;AAEE,QAAM,UAAU,aAAa,QAAQ,OAAO,EAAE;AAE9C,SAAO,SAAS,QAAQ,OAAO,EAAE,KAAK,eAAe,MAAM,UAAU;AACvE;"}

package/dist/dark.css

@@ -161,9 +161,9 @@
     --wje-file-upload-item-border-color: var(--wje-border-color);
 
     /* Input */
-    --wje-input-background-color: var(--wje-background);
+    --wje-input-background-color: var(--wje-color-contrast-0);
     --wje-input-color: var(--wje-color);
-    --wje-input-color-invalid: var(--wje-color-danger);
+    --wje-input-color-invalid: var(--wje-color-danger-9);
     --wje-input-border-color: var(--wje-border-color);
     --wje-input-border-color-focus: var(--wje-color-primary);
 
@@ -212,6 +212,12 @@
     --wje-rate-color: var(--wje-color-contrast-11);
     --wje-rate-selected-color: var(--wje-color-danger-6);
 
+    /* Select */
+    --wje-select-border-color: var(--wje-border-color);
+    --wje-select-options-border-color: var(--wje-border-color);
+    --wje-select-background: var(--wje-color-contrast-0);
+    --wje-select-color: var(--wje-color);
+
     /* Tab */
     --wje-tab-color-active: var(--wje-color-primary-11);
     --wje-tab-color-hover: var(--wje-color-primary-1);

package/dist/light.css

@@ -372,9 +372,9 @@
 
     /* Input */
     --wje-input-font-family: var(--wje-font-family);
-    --wje-input-background-color: var(--wje-background);
+    --wje-input-background-color: var(--wje-color-contrast-0);
     --wje-input-color: var(--wje-color);
-    --wje-input-color-invalid: var(--wje-color-danger);
+    --wje-input-color-invalid: var(--wje-color-danger-9);
     --wje-input-border-color: var(--wje-border-color);
     --wje-input-border-color-focus: var(--wje-color-primary);
     --wje-input-border-width: 1px;
@@ -386,8 +386,9 @@
     --wje-input-label-display: block;
     --wje-input-label-margin: 0;
     --wje-input-label-padding: 0;
-    --wje-input-label-line-height: var(--wje-line-height-normal);
+    --wje-input-label-line-height: 21px;
     --wje-input-label-font-size: var(--wje-font-size);
+    --wje-input-required-symbol: '*';
 
     /* Item */
     --wje-item-color: var(--wje-color);
@@ -511,7 +512,10 @@
     --wje-select-line-height: 20px;
     --wje-select-color: var(--wje-color);
     --wje-select-border-radius: var(--wje-border-radius-medium);
-    --wje-select-margin-bottom: 0.5rem;
+    --wje-select-margin-bottom: var(--wje-spacing-x-small);
+    --wje-select-find-margin-inline: var(--wje-spacing-x-small);
+    --wje-select-find-margin-block: var(--wje-spacing-x-small);
+    --wje-select-find-width: calc(100% - var(--wje-select-find-margin-inline) * 2);
 
     /* Status */
     --wje-status-size: var(--wje-size-small);

package/dist/packages/index.d.ts

@@ -1,11 +1,10 @@
-export { default as SlidingContainer } from '../experimental-packages/wje-sliding-container/sliding-container.js';
 export { fetchAndParseCSS } from './utils/animations.js';
 export { formatDate } from './utils/date.js';
 export { event } from './utils/event.js';
 export { Localizer } from './utils/localize.js';
+export { Permissions } from './utils/permissions.js';
 export { skSk } from './translations/sk-sk.js';
 export { enGb } from './translations/en-gb.js';
-export { WjePermissionsApi } from './utils/permissions-api.js';
 export { default as Accordion } from './wje-accordion/accordion.js';
 export { default as AccordionItem } from './wje-accordion-item/accordion-item.js';
 export { default as Animation } from './wje-animation/animation.js';
@@ -101,5 +100,7 @@ export { default as Tooltip } from './wje-tooltip/tooltip.js';
 export { default as Tree } from './wje-tree/tree.js';
 export { default as TreeItem } from './wje-tree-item/tree-item.js';
 export { default as VisuallyHidden } from './wje-visually-hidden/visually-hidden.js';
+export { default as SlidingContainer } from '../experimental-packages/wje-sliding-container/sliding-container.js';
+export { setBasePath, getBasePath } from './utils/base-path.js';
 export { registerIconLibrary, unregisterIconLibrary } from './wje-icon/service/library.js';
 export { defaultStoreActions, store } from './wje-store/store.js';

package/dist/packages/utils/base-path.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Sets the base path for the application.
+ * @param {string} path The base path to be set.
+ * @returns {void} This function does not return anything.
+ */
+export function setBasePath(path: string): void;
+/**
+ * Returns the base path of the application, optionally appending a specified relative path.
+ * If the base path has not been set, it determines the base path from the first script element
+ * with a `base-path` attribute or generates it based on the current script location.
+ * @param {string} [appendedPath] The relative path to append to the base path. Defaults to an empty string.
+ * @returns {string} The complete base path, with the appended relative path if specified.
+ */
+export function getBasePath(appendedPath?: string): string;

package/dist/packages/utils/permissions.d.ts

@@ -0,0 +1,40 @@
+/**
+ * PermissionsApi is a utility class for managing permissions.
+ * It allows setting, retrieving, and checking permissions stored in the browser's local storage.
+ */
+export class Permissions {
+    static _permissionKey: string;
+    /**
+     * Sets the permission key for the PermissionsApi.
+     * The key is stored internally and defaults to 'permissions' if no value is provided.
+     * @param {string} value The key to set for permissions. If no value is provided, the default is 'permissions'.
+     */
+    static set permissionKey(value: string);
+    /**
+     * Retrieves the permission key used for accessing the permissions API.
+     * @returns {string} The permission key associated with the PermissionsApi.
+     */
+    static get permissionKey(): string;
+    /**
+     * Sets the permissions by storing them in the local storage.
+     * @param {object} value The permissions object to be stored.
+     */
+    static set permissions(value: object);
+    /**
+     * Retrieves the list of permissions stored in the browser's local storage.
+     * @returns {Array} An array of permissions. If no permissions are found, returns an empty array.
+     */
+    static get permissions(): any[];
+    /**
+     * Determines whether the specified key exists in the permissions list.
+     * @param {string} key The key to check for existence in the permissions list.
+     * @returns {boolean} Returns true if the key exists in the permissions list; otherwise, returns false.
+     */
+    static includesKey(key: string): boolean;
+    /**
+     * Checks if at least one of the given permissions is fulfilled, based on the permissions available in `PermissionsApi`.
+     * @param {Array<string>} permissions The list of permissions to check against the permissions available in `PermissionsApi`.
+     * @returns {boolean} Returns `true` if any of the given permissions match the permissions available in `PermissionsApi`, otherwise returns `false`.
+     */
+    static isPermissionFulfilled(permissions: Array<string>): boolean;
+}

package/dist/packages/wje-element/element.d.ts

@@ -1,6 +1,6 @@
 import { UniversalService } from './service/universal-service.js';
 import { defaultStoreActions } from '../wje-store/store.js';
-import { WjePermissionsApi } from '../utils/permissions-api.js';
+import { Permissions } from '../utils/permissions.js';
 import { WjElementUtils } from '../utils/element-utils.js';
 import { event } from '../utils/event.js';
 export default class WJElement extends HTMLElement {
@@ -303,4 +303,4 @@ export default class WJElement extends HTMLElement {
     #private;
 }
 export let __esModule: string;
-export { WjePermissionsApi, WjElementUtils, event };
+export { Permissions, WjElementUtils, event };

package/dist/packages/wje-input/input.element.d.ts

@@ -116,6 +116,12 @@ export default class Input extends WJElement {
      * @returns {string} The default value of the input element.
      */
     get defaultValue(): string;
+    set clearable(value: boolean);
+    get clearable(): boolean;
+    set placeholder(value: string);
+    get placeholder(): string;
+    set variant(value: string);
+    get variant(): string;
     beforeDraw(): void;
     /**
      * Draws the input element.

package/dist/packages/wje-option/option.element.d.ts

@@ -1,5 +1,6 @@
 import { default as WJElement } from '../wje-element/element.js';
 import { default as Icon } from '../wje-icon/icon.js';
+import { default as Checkbox } from '../wje-checkbox/checkbox.js';
 /**
  * `Option` is a custom web component that represents an option.
  * @summary This element represents an option.
@@ -31,12 +32,28 @@ export default class Option extends WJElement {
      */
     dependencies: {
         'wje-icon': typeof Icon;
+        'wje-checkbox': typeof Checkbox;
     };
     /**
      * Sets the selected attribute of the option.
      * @param {boolean} value The value to set.
      */
     set selected(value: boolean);
+    /**
+     * Retrieves the 'selected' attribute status of the element.
+     * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.
+     */
+    get selected(): boolean;
+    /**
+     * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.
+     * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.
+     */
+    get checkbox(): boolean;
+    /**
+     * Determines whether the closest 'wje-select' element has the 'multiple' attribute.
+     * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.
+     */
+    get multiple(): boolean;
     /**
      * Sets the value attribute of the option.
      * @param {string} value The value to set.
@@ -48,14 +65,31 @@ export default class Option extends WJElement {
      * @param {string} value The text to set.
      */
     set text(value: string);
+    /**
+     * This method is called whenever an observed attribute is added, removed, or changed.
+     * @param {string} name The name of the attribute that was changed.
+     * @param {*} old The previous value of the attribute before the change.
+     * @param {*} newName The new value of the attribute after the change.
+     * @returns {void} This method does not return a value.
+     */
+    attributeChangedCallback(name: string, old: any, newName: any): void;
     /**
      * Draws the component for the option.
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    check: HTMLSlotElement;
     /**
-     * Adds event listeners after the component is drawn.
+     * Method executed after the drawing process is completed.
+     * Sets up an event listener for 'click' events, linking them to the specified callback function.
+     * @returns {void} Does not return a value.
      */
     afterDraw(): void;
-    optionClickCallback(e: any, b: any, c: any): void;
+    /**
+     * Handles the click event on an option element and dispatches a custom event when triggered.
+     * @param {Event} e The click event object that triggered the callback.
+     * @returns {void} No return value.
+     */
+    optionClickCallback(e: Event): void;
+    #private;
 }

package/dist/packages/wje-select/select.element.d.ts

@@ -7,6 +7,7 @@ import { default as Chip } from '../wje-chip/chip.js';
 import { default as Input } from '../wje-input/input.js';
 import { default as Option } from '../wje-option/option.js';
 import { default as Options } from '../wje-options/options.js';
+import { default as Checkbox } from '../wje-checkbox/checkbox.js';
 /**
  * `Select` is a custom web component that represents a select input.
  * @summary This element represents a select input.
@@ -146,6 +147,7 @@ export default class Select extends WJElement {
      * @property {Function} 'wje-input' Represents the Input component class.
      * @property {Function} 'wje-option' Represents the Option component class.
      * @property {Function} 'wje-options' Represents the Options component class.
+     * @property {Function} 'wje-checkbox' Represents the Checkbox component class.
      */
     dependencies: {
         'wje-button': typeof Button;
@@ -156,6 +158,7 @@ export default class Select extends WJElement {
         'wje-input': typeof Input;
         'wje-option': typeof Option;
         'wje-options': typeof Options;
+        'wje-checkbox': typeof Checkbox;
     };
     /**
      * Setter for the value attribute.
@@ -255,7 +258,14 @@ export default class Select extends WJElement {
      * @returns {Array} The selected value.
      */
     get selected(): any[];
-    get options(): any[];
+    /**
+     * Retrieves the complete list of options available for the component.
+     * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.
+     * If a `wje-options` element is present within the component, its loaded options are included in the merged list.
+     * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.
+     * @returns {Array<Object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
+     */
+    get options(): Array<any>;
     /**
      * Sets the trigger value.
      * @param {string} value The trigger value to set.
@@ -273,7 +283,10 @@ export default class Select extends WJElement {
     draw(): DocumentFragment;
     findEl: HTMLElement;
     /**
-     * Sets up the event listeners after the component is drawn.
+     * Performs actions and binds events after the component's markup and state are initialized.
+     * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,
+     * synchronizing the selected options, and managing a find functionality for filtering options.
+     * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.
      */
     afterDraw(): void;
     /**
@@ -391,6 +404,11 @@ export default class Select extends WJElement {
      * @param {boolean} [silent] Whether to trigger the change event or not.
      */
     selectOptions(values: any[] | any, silent?: boolean): void;
+    /**
+     * Returns the provided item.
+     * @param {any} item The item to be returned.
+     * @returns {any} The same item that was passed as input.
+     */
     htmlSelectedItem(item: any): any;
     /**
      * @summary Callback function that is called when the custom element is associated with a form.
@@ -434,5 +452,11 @@ export default class Select extends WJElement {
      * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.
      */
     areAllElementsInOptions(elements: any[], options: any[]): boolean;
+    /**
+     * Clones and appends an icon from a template with slot "check" to the given option element.
+     * @param {HTMLElement} option The target option element where the "check" icon will be added.
+     * @returns {void}
+     */
+    optionCheckSlot(option: HTMLElement): void;
     #private;
 }