wj-elements 0.7.0 → 0.7.2

package/dist/light.css

@@ -414,6 +414,7 @@
     --wje-header-border-style: solid;
     --wje-header-top: 0;
     --wje-header-height: 60px;
+    --wje-header-z-index: 100;
 
     /* Icon */
     --wje-icon-stroke: 2;

package/dist/packages/translations/en-gb.d.ts

@@ -6,6 +6,10 @@ export const enGb: {
     'wj.file.upload.button': string;
     'wj.file.upload.uploaded': string;
     'wj.file.upload.from': string;
+    'wj.file.upload.error.invalid.type': string;
+    'wj.file.upload.error.file.too.large': string;
+    'wj.file.upload.error.max.files': string;
+    'wj.file.upload.error.generic': string;
     'wj.stepper.button.next': string;
     'wj.stepper.button.finish': string;
     'wj.stepper.button.previous': string;

package/dist/packages/translations/sk-sk.d.ts

@@ -6,6 +6,10 @@ export const skSk: {
     'wj.file.upload.button': string;
     'wj.file.upload.uploaded': string;
     'wj.file.upload.from': string;
+    'wj.file.upload.error.invalid.type': string;
+    'wj.file.upload.error.file.too.large': string;
+    'wj.file.upload.error.max.files': string;
+    'wj.file.upload.error.generic': string;
     'wj.stepper.button.next': string;
     'wj.stepper.button.finish': string;
     'wj.stepper.button.previous': string;

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

@@ -6,7 +6,9 @@ import { default as WJElement } from '../wje-element/element.js';
  * @documentation https://elements.webjet.sk/components/chip
  * @status stable
  * @augments WJElement
+ * @slot start - The chip leading content.
  * @slot - The chip main content.
+ * @slot end - The chip trailing content.
  * @csspart native - The component's native wrapper.
  * //@fires wje-chip:remove - Dispatched when the chip is removed;
  */
@@ -70,6 +72,7 @@ export default class Chip extends WJElement {
      */
     draw(): DocumentFragment;
     removeElement: HTMLElement;
+    slotStart: HTMLSlotElement;
     slotEnd: HTMLSlotElement;
     /**
      * Syncs ARIA attributes on the host element.

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

@@ -153,6 +153,7 @@ export default class FileUpload extends WJElement {
     native: HTMLDivElement;
     fileList: HTMLSlotElement;
     fileInput: HTMLInputElement;
+    errorMessage: HTMLDivElement;
     /**
      * Method to perform actions after the component is drawn.
      */
@@ -211,4 +212,19 @@ export default class FileUpload extends WJElement {
      * Method to reset the form state.
      */
     resetFormState(): void;
+    /**
+     * Shows a user-facing validation error inside the dropzone.
+     * @param {object|Error} error Error payload to display inside the dropzone.
+     */
+    showError(error: object | Error): void;
+    /**
+     * Clears the currently displayed validation error.
+     */
+    clearError(): void;
+    /**
+     * Resolves a readable upload error message.
+     * @param {object|Error} error Error payload used to resolve the translated message.
+     * @returns {string}
+     */
+    getErrorMessage(error?: object | Error): string;
 }

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

@@ -12,6 +12,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @cssproperty [--wje-header-border-style=solid] - The border styles of the header
  * @cssproperty [--wje-header-top=0] - The position top of the header
  * @cssproperty [--wje-header-height=60px] - The height of the header element.
+ * @cssproperty [--wje-header-z-index=100] - The z-index used when the header is sticky.
  * @tag wje-header
  */
 export default class Header extends WJElement {

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

@@ -24,8 +24,8 @@ import { default as WJElement } from '../wje-element/element.js';
  * @property {string} mobileBreakPoint - The viewport width where mobile presentation becomes active.
  * @property {boolean} backdropDismiss - Closes the mobile bottom sheet when the backdrop is clicked.
  * @property {boolean} sheetResizable - Enables mobile bottom sheet resizing.
- * @property {string} sheetScope - Defines whether the mobile bottom sheet is scoped to the container or viewport.
- * @property {string} sheetBoundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet.
+ * @property {string} sheetScope - Defines whether the mobile bottom sheet panel is scoped to the container or viewport.
+ * @property {string} sheetBoundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet panel.
  * @property {string} sheetHeight - The mobile bottom sheet height after opening.
  * @property {string} sheetMinHeight - The minimum mobile bottom sheet height while resizing.
  * @property {string} sheetMaxHeight - The maximum mobile bottom sheet height while resizing.
@@ -33,12 +33,17 @@ import { default as WJElement } from '../wje-element/element.js';
  * @attribute {string} mobile-break-point - Viewport width where mobile presentation becomes active. Defaults to "768".
  * @attribute {boolean} backdrop-dismiss - Closes the mobile bottom sheet when the backdrop is clicked.
  * @attribute {boolean} sheet-resizable - Enables resizing the mobile bottom sheet with a handle.
- * @attribute {string} sheet-scope - Defines whether the sheet is scoped to "viewport", "parent", or a bounded container.
- * @attribute {string} sheet-boundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet.
+ * @attribute {string} sheet-scope - Defines whether the sheet panel is scoped to "viewport", "parent", or a bounded container.
+ * @attribute {string} sheet-boundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet panel.
  * @attribute {string} sheet-height - The mobile bottom sheet height after opening.
  * @attribute {string} sheet-min-height - The minimum mobile bottom sheet height while resizing.
  * @attribute {string} sheet-max-height - The maximum mobile bottom sheet height while resizing.
  * @cssproperty [--wje-sliding-container-background=var(--wje-background)] - Background of the sliding panel.
+ * @cssproperty [--wje-sliding-container-z-index=1000] - z-index of the side sliding container.
+ * @cssproperty [--wje-sliding-container-bottom-sheet-z-index=var(--wje-sliding-container-z-index, 1000)] - z-index of the mobile bottom sheet host.
+ * @cssproperty [--wje-sliding-container-bottom-sheet-backdrop-z-index=0] - z-index of the mobile bottom sheet backdrop inside the host layer.
+ * @cssproperty [--wje-sliding-container-bottom-sheet-panel-z-index=1] - z-index of the mobile bottom sheet panel inside the host layer.
+ * @cssproperty [--wje-sliding-container-portal-backdrop-z-index] - z-index of the body-level mobile bottom sheet backdrop.
  * @cssproperty [--wje-sliding-container-backdrop-background=var(--wje-backdrop)] - Background of the mobile bottom sheet backdrop.
  * @cssproperty [--wje-sliding-container-backdrop-opacity=1] - Backdrop opacity while the mobile bottom sheet is open.
  * @cssproperty [--wje-sliding-container-box-shadow=var(--wje-sliding-container-shadow)] - Shadow of the mobile bottom sheet panel.
@@ -92,7 +97,6 @@ export default class SlidingContainer extends WJElement {
         hasMoved: boolean;
     };
     _sheetBackdropHandledUntil: number;
-    _hasLockedDocumentScroll: boolean;
     _bottomSheetScopeFrame: {
         top: number;
         left: number;
@@ -242,22 +246,22 @@ export default class SlidingContainer extends WJElement {
      */
     get sheetResizable(): boolean;
     /**
-     * Sets the mobile bottom sheet scope.
+     * Sets the mobile bottom sheet panel scope.
      * @param {string} value The new boundary mode for the mobile sheet.
      */
     set sheetScope(value: string);
     /**
-     * Gets the mobile bottom sheet scope.
+     * Gets the mobile bottom sheet panel scope. The backdrop always covers the viewport.
      * @returns {string} Either 'viewport', 'container', or 'parent'.
      */
     get sheetScope(): string;
     /**
-     * Sets the selector used for container-scoped mobile bottom sheets.
+     * Sets the selector used for container-scoped mobile bottom sheet panels.
      * @param {string} value Selector for the boundary element.
      */
     set sheetBoundary(value: string);
     /**
-     * Gets the selector used for container-scoped mobile bottom sheets.
+     * Gets the selector used for container-scoped mobile bottom sheet panels.
      * @returns {string|null} A CSS selector used to find the composed boundary ancestor.
      */
     get sheetBoundary(): string | null;
@@ -338,6 +342,60 @@ export default class SlidingContainer extends WJElement {
      * @returns {boolean}
      */
     isBottomSheet(): boolean;
+    /**
+     * Adds interaction listeners to a backdrop element.
+     * @param {HTMLElement} backdrop The backdrop element.
+     */
+    addBackdropListeners(backdrop: HTMLElement): void;
+    /**
+     * Removes interaction listeners from a backdrop element.
+     * @param {HTMLElement} backdrop The backdrop element.
+     */
+    removeBackdropListeners(backdrop: HTMLElement): void;
+    /**
+     * Checks whether an element is one of this component's backdrop layers.
+     * @param {EventTarget|null} element The event target.
+     * @returns {boolean}
+     */
+    isBackdropElement(element: EventTarget | null): boolean;
+    /**
+     * Gets the backdrop element that is active for the current presentation.
+     * @param {object} options Options for resolving the backdrop.
+     * @param {boolean} options.createPortal Creates the body-level mobile backdrop when needed.
+     * @returns {HTMLElement|null}
+     */
+    getBackdropElement({ createPortal }?: {
+        createPortal: boolean;
+    }): HTMLElement | null;
+    /**
+     * Creates the body-level backdrop used by mobile bottom sheets.
+     * @returns {HTMLElement} Element appended to document.body for page-level dimming.
+     */
+    ensurePortalBackdrop(): HTMLElement;
+    _portalBackdropElement: HTMLDivElement;
+    /**
+     * Removes the body-level mobile backdrop.
+     */
+    removePortalBackdrop(): void;
+    /**
+     * Gets the full-page z-index for the body-level mobile backdrop.
+     * @returns {string}
+     */
+    getPortalBackdropZIndex(): string;
+    /**
+     * Gets the target opacity for the active mobile backdrop.
+     * @returns {string}
+     */
+    getBackdropOpenOpacity(): string;
+    /**
+     * Syncs visual styles from the component to the body-level backdrop.
+     */
+    syncPortalBackdropStyles(): void;
+    /**
+     * Handles backdrop click dismissal.
+     * @param {MouseEvent} e The click event.
+     */
+    handleBackdropClick: (e: MouseEvent) => void;
     /**
      * Sync ARIA attributes on host.
      */
@@ -378,12 +436,12 @@ export default class SlidingContainer extends WJElement {
         height: number;
     };
     /**
-     * Returns the element that bounds the mobile bottom sheet.
+     * Returns the element that bounds the mobile bottom sheet panel.
      * @returns {Element|null} The scope element, or null for viewport scope.
      */
     getBottomSheetScopeElement(): Element | null;
     /**
-     * Returns the frame used by the mobile bottom sheet.
+     * Returns the frame used by the mobile bottom sheet panel.
      * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
      */
     getBottomSheetScopeFrame(): {
@@ -488,14 +546,6 @@ export default class SlidingContainer extends WJElement {
      * @param {Event} e The scroll event.
      */
     preventBottomSheetScroll: (e: Event) => void;
-    /**
-     * Prevents the page behind the mobile bottom sheet from scrolling.
-     */
-    lockDocumentScroll(): void;
-    /**
-     * Restores page scrolling after the mobile bottom sheet is closed.
-     */
-    unlockDocumentScroll(): void;
     /**
      * Stores the initial drag state for the mobile bottom sheet.
      * @param {number|string} pointerId The pointer identifier.