wj-elements 0.6.1 → 0.7.1

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-breadcrumbs/breadcrumbs.element.d.ts

@@ -7,7 +7,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @slot - The container for breadcrumb elements.
  * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse="menu" moves the full trail into a dropdown.
  * @csspart container - The component's container wrapper.
- * @property {Array<{id: string|number, label: string, href?: string, icon?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.
+ * @property {Array<{id: string|number, label: string, href?: string, icon?: string, title?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.
  * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.
  * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.
  * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.

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-dropdown/dropdown.element.d.ts

@@ -7,10 +7,24 @@ import { default as Popup } from '../wje-popup/popup.element.js';
  * @status stable
  * @augments {WJElement}
  * @csspart native - The native part of the dropdown.
+ * @csspart popup-native - The exported native popup panel part.
+ * @csspart backdrop - The exported mobile bottom sheet backdrop part.
  * @slot trigger - The slot for the trigger of the dropdown.
  * @slot - The default slot for the dropdown.
+ * @property {string} mobilePresentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @property {string} mobileBreakPoint - Viewport width where the mobile presentation becomes active. Defaults to "768".
+ * @attribute {string} mobile-presentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @attribute {string} mobile-break-point - Viewport width where the mobile presentation becomes active. Defaults to "768".
  * // @fires wje-dropdown:open - Event fired when the dropdown is opened.
  * // @fires wje-dropdown:close - Event fired when the dropdown is closed.
+ * @cssproperty [--wje-popup-backdrop-background=var(--wje-backdrop)] - Backdrop background used by mobile bottom sheet dropdowns.
+ * @cssproperty [--wje-popup-backdrop-opacity=1] - Backdrop opacity used by mobile bottom sheet dropdowns.
+ * @cssproperty [--wje-popup-mobile-background=var(--wje-select-options-background-color)] - Background of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-border-radius=var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0] - Border radius of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-box-shadow=0 -8px 32px rgba(0, 0, 0, 0.16)] - Shadow of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-max-height=90vh] - Maximum height of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-transition-duration=250ms] - Transition duration for the mobile bottom sheet and backdrop.
+ * @cssproperty [--wje-popup-mobile-transition-easing=ease] - Transition easing for the mobile bottom sheet and backdrop.
  * @tag wje-dropdown
  */
 export default class Dropdown extends WJElement {
@@ -56,6 +70,10 @@ export default class Dropdown extends WJElement {
      * @returns {string|string}
      */
     get trigger(): string | string;
+    set mobilePresentation(value: string);
+    get mobilePresentation(): string;
+    set mobileBreakPoint(value: string);
+    get mobileBreakPoint(): string;
     /**
      * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
      * @param {Event} e The event object.

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-popup/popup.element.d.ts

@@ -6,12 +6,27 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments {WJElement}
  * @csspart native - The native part of the popup.
+ * @csspart backdrop - The backdrop used by mobile bottom sheet presentation.
  * @slot anchor - The slot for the anchor of the popup.
  * @slot arrow - The slot for the arrow of the popup.
  * @slot - The default slot for the popup.
+ * @property {boolean} contentAwareSize - Allows a size popup to grow to its content instead of locking to the anchor width.
+ * @property {string} mobilePresentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @property {string} mobileBreakPoint - Viewport width where the mobile presentation becomes active. Defaults to "768".
+ * @attribute {string} mobile-presentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @attribute {string} mobile-break-point - Viewport width where the mobile presentation becomes active. Defaults to "768".
  * // @fires wje-popup:reposition - Event fired when the popup is repositioned.
  * // @fires wje-popup:show - Event fired when the popup is shown.
  * // @fires wje-popup:hide - Event fired when the popup is hidden.
+ * @cssproperty [--wje-popup-backdrop-background=var(--wje-backdrop)] - Backdrop background used by mobile bottom sheet popups.
+ * @cssproperty [--wje-popup-backdrop-opacity=1] - Backdrop opacity used by mobile bottom sheet popups.
+ * @cssproperty [--wje-popup-mobile-background=var(--wje-select-options-background-color)] - Background of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-border-radius=var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0] - Border radius of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-box-shadow=0 -8px 32px rgba(0, 0, 0, 0.16)] - Shadow of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-max-height=90vh] - Maximum height of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-transition-duration=250ms] - Transition duration for the mobile bottom sheet and backdrop.
+ * @cssproperty [--wje-popup-mobile-transition-easing=ease] - Transition easing for the mobile bottom sheet and backdrop.
+ * @cssproperty [--wje-popup-loader-inset=0] - Inset used by the popup loader overlay.
  * @tag wje-popup
  */
 export default class Popup extends WJElement {
@@ -28,8 +43,13 @@ export default class Popup extends WJElement {
      */
     static get observedAttributes(): Array<string>;
     _manual: boolean;
+    _contentAwareSize: boolean;
+    _contentReadyHandler: () => void;
+    _bottomSheetRestoreTimeout: any;
     set loader(value: boolean);
     get loader(): boolean;
+    set contentAwareSize(value: boolean);
+    get contentAwareSize(): boolean;
     /**
      * Sets the manual property of the popup.
      * @param {boolean} value The value to set.
@@ -52,7 +72,12 @@ export default class Popup extends WJElement {
      * @returns {boolean} True if the 'portal' attribute exists, otherwise false.
      */
     get portal(): boolean;
+    set mobilePresentation(value: string);
+    get mobilePresentation(): string;
+    set mobileBreakPoint(value: string);
+    get mobileBreakPoint(): string;
     get floatingEl(): HTMLDivElement;
+    get backdropEl(): HTMLDivElement;
     _hideFloatingLightDomContentBeforeRender(): void;
     _hiddenFloatingLightDomContent: {
         el: Element;
@@ -60,6 +85,7 @@ export default class Popup extends WJElement {
         priority: any;
     }[];
     _restoreFloatingLightDomContentAfterRender(): void;
+    _contentReadyListenerAttached: boolean;
     beforeDraw(context: any, store: any, params: any): void;
     /**
      * Draws the component for the popup.
@@ -68,6 +94,8 @@ export default class Popup extends WJElement {
     draw(): DocumentFragment;
     slotAnchor: HTMLSlotElement;
     slotArrow: HTMLSlotElement;
+    defaultSlot: HTMLSlotElement;
+    backdrop: HTMLDivElement;
     native: HTMLDivElement;
     loaderEl: HTMLDivElement;
     /**
@@ -82,6 +110,16 @@ export default class Popup extends WJElement {
     anchorEl: any;
     manualCallback: (e: any) => void;
     clickHandler: (e: any) => void;
+    handleBackdropClick: (e: any) => void;
+    clearBottomSheetRestoreTimeout(): void;
+    handleViewportResize: () => void;
+    isBottomSheetActive(): boolean;
+    setBottomSheetState(isActive: any): void;
+    clearBottomSheetState(): void;
+    rebindPortaledRouter(): void;
+    syncResponsivePresentation(): void;
+    cleanup: any;
+    getBottomSheetTransitionDurationMs(): number;
     /**
      * Toggles the active attribute of the popup.
      */
@@ -101,6 +139,7 @@ export default class Popup extends WJElement {
      * @returns {void} Does not return a value.
      */
     _mountContentToPortal(): void;
+    _portalBackdrop: HTMLDivElement;
     _portalNative: HTMLDivElement;
     _portalSlot: HTMLSlotElement;
     _portalArrowSlot: HTMLSlotElement;
@@ -137,7 +176,6 @@ export default class Popup extends WJElement {
      * @returns {void} Does not return any value.
      */
     show(dispatchEvent?: boolean): void;
-    cleanup: any;
     /**
      * Hides the popup.
      * Removes the popup-active class from the floating element.
@@ -148,5 +186,7 @@ export default class Popup extends WJElement {
      * Removes the active attribute when the popup is hidden.
      */
     handleHide: () => void;
+    _showLoader(): void;
+    _hideLoader(): void;
     markContentReady(): void;
 }