@maggioli-design-system/magma 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/types/components/mds-header/mds-header.d.ts

@@ -16,6 +16,12 @@ export declare class MdsHeader {
     private sanitizedAppearance;
     private appearanceThreshold;
     private headerBar;
+    consumption?: string;
+    private unsubscribeConsumption?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * Sets the appearance of the header bar element when loaded,
      * it can be changed depending on how `appearance-set` attribute is set
@@ -34,9 +40,9 @@ export declare class MdsHeader {
      */
     readonly autoHide?: number;
     /**
-     * Sets if the backdrop is shown when the mds-header-bar attribute appearace is set to `inline`
+     * Hides the backdrop shown when the mds-header-bar attribute appearace is set to `inline`
      */
-    readonly backdrop?: boolean;
+    readonly hideBackdrop?: boolean;
     /**
      * Sets the visibility type of the hamburger menu of mds-header-bar
      */
@@ -74,6 +80,7 @@ export declare class MdsHeader {
     private handleScroll;
     private setAppearanceSetData;
     private initScrollListener;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     private defineHeaderBar;

package/dist/types/components/mds-header/test/mds-header.stories.d.ts

@@ -15,7 +15,7 @@ declare const _default: {
                 type: string;
             };
         };
-        backdrop: {
+        'hide-backdrop': {
             description: string;
             type: string;
         };

package/dist/types/components/mds-header-bar/mds-header-bar.d.ts

@@ -10,6 +10,14 @@ import { HeaderBarMenuType, HeaderBarNavType } from "../../type/header-bar";
 export declare class MdsHeaderBar {
     private hasNav;
     host: HTMLMdsHeaderBarElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     isOpened: boolean;
     /**
      * Sets the visibility type of the hamburger menu
@@ -19,6 +27,8 @@ export declare class MdsHeaderBar {
      * Sets the visibility type of the navigation menu
      */
     nav: HeaderBarNavType;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     /**
      * Emits when the component is opened

package/dist/types/components/mds-help/mds-help.d.ts

@@ -8,9 +8,9 @@ export declare class MdsHelp {
      */
     readonly icon?: string;
     /**
-     * If set, the component will be placed automatically near it's caller.
+     * If set, the component will not be placed automatically near it's caller.
      */
-    readonly autoPlacement?: boolean;
+    readonly disableAutoPlacement?: boolean;
     /**
      * Specifies where the component should be placed relative to the caller.
      */

package/dist/types/components/mds-hr/mds-hr.d.ts

@@ -1,3 +1,9 @@
 export declare class MdsHr {
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-icon/mds-icon.d.ts

@@ -11,7 +11,6 @@ export declare class MdsIcon {
     hostElement: HTMLMdsIconElement;
     componentWillLoad(): void;
     private convertBase64ToSvg;
-    static setSvgPathStatic(path: string): void;
     /**
      * Set the path to the directory of svg files
      * @param svgPath path to the directory of svg files

package/dist/types/components/mds-img/mds-img.d.ts

@@ -80,6 +80,7 @@ export declare class MdsImg {
     private formatConsumptionData;
     private autoAltName;
     private setAriaAttributes;
+    private readonly handleConsumptionLoadClick;
     componentWillLoad(): void;
     componentWillRender(): void;
     componentDidLoad(): void;

package/dist/types/components/mds-input/mds-input.d.ts

@@ -41,6 +41,14 @@ export declare class MdsInput {
     private speechButton;
     private datalistId;
     el: HTMLMdsInputElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     hasFocus: boolean;
     language: string;
     isRecording: boolean;
@@ -183,6 +191,7 @@ export declare class MdsInput {
     validationEvent: EventEmitter<boolean>;
     formResetCallback(): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     private setValidators;
@@ -232,6 +241,7 @@ export declare class MdsInput {
     private stepUp;
     private stepDown;
     private toggleTextRecognition;
+    private readonly handlePasswordToggleClick;
     private onSpeechRecognitionError;
     private startRecognition;
     private stopRecognition;

package/dist/types/components/mds-input-date/mds-input-date.d.ts

@@ -3,6 +3,14 @@ import { ThemeInputVariantType } from "../../type/variant";
 import { MdsValidationErrors } from "../../components";
 export declare class MdsInputDate {
     host: HTMLMdsInputDateElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     internals: ElementInternals;
     private isSlotted;
     empty: boolean | undefined;
@@ -82,9 +90,13 @@ export declare class MdsInputDate {
      */
     getErrors(): Promise<MdsValidationErrors | null>;
     formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     private handleChange;
     private onBlur;
     private onFocus;
+    private readonly handleOpenCalendarClick;
+    private readonly handleCalendarChange;
     render(): any;
 }

package/dist/types/components/mds-input-date-range/mds-input-date-range.d.ts

@@ -11,6 +11,14 @@ export interface EventDate {
  */
 export declare class MdsInputDateRange {
     host: HTMLMdsInputDateRangeElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     internals: ElementInternals;
     calendarKey: number;
     internalStartDate: string;
@@ -84,6 +92,7 @@ export declare class MdsInputDateRange {
     handleStartDateChange(newValue: string): void;
     handleEndDateChange(newValue: string): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Applies the given preselection range to the input.
@@ -106,6 +115,8 @@ export declare class MdsInputDateRange {
     private handleCalendarHover;
     private handleCalendarChange;
     private handleCalendarNavigate;
+    private readonly handleCalendarPreselect;
+    private readonly handleOpenCalendarClick;
     private renderCalendarPreselectionPanel;
     private renderSingleCalendar;
     private renderDualCalendars;

package/dist/types/components/mds-input-range/mds-input-range.d.ts

@@ -10,6 +10,14 @@ export declare class MdsInputRange {
     private inputElement;
     private decimalPlaces;
     private element;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     internals: ElementInternals;
     /**
      * A function to custom how value is represented
@@ -53,6 +61,8 @@ export declare class MdsInputRange {
     maxChanged(): void;
     stepChanged(): void;
     formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/mds-input-select/mds-input-select.d.ts

@@ -9,6 +9,14 @@ import { ThemeStatusVariantType } from "../../type/variant";
 export declare class MdsInputSelect {
     private selectEl;
     host: HTMLMdsInputSelectElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     hasFocus: boolean;
     language: string;
     internals: ElementInternals;
@@ -83,6 +91,8 @@ export declare class MdsInputSelect {
      */
     protected placeholderChanged(newValue: string | undefined, oldValue: string | undefined): void;
     formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     private onInput;

package/dist/types/components/mds-input-switch/mds-input-switch.d.ts

@@ -8,6 +8,10 @@ import { TypographyInfoType, TypographyReadType, TypographyVariants } from "../.
 export declare class MdsInputSwitch {
     internals: ElementInternals;
     host: HTMLMdsInputSwitchElement;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     private km;
     private label;
     dirty: boolean;
@@ -80,6 +84,8 @@ export declare class MdsInputSwitch {
     protected checkedChanged(newValue?: boolean): void;
     protected explicitChanged(newValue?: boolean): void;
     formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/mds-input-tip/mds-input-tip.d.ts

@@ -3,6 +3,10 @@ import { InputTipPositionType } from './meta/types';
  * @slot - Add `mds-input-tip-item` elements or `components` to this slot.
  */
 export declare class MdsInputTip {
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Specifies if the component is active and shows expanded children or not
      */

package/dist/types/components/mds-input-tip-item/mds-input-tip-item.d.ts

@@ -4,12 +4,18 @@ import { InputTipItemVariantType } from "../../type/input-tip";
  */
 export declare class MdsInputTipItem {
     private element;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
     private t;
     language: string;
     /**
      * Updates the component's texts to the locale currently set on the host element.
      */
     updateLang(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillRender(): void;
     /**
      * Specifies the variant of the element

package/dist/types/components/mds-input-upload/mds-input-upload.d.ts

@@ -104,5 +104,8 @@ export declare class MdsInputUpload {
     private sortByStatusAndName;
     private sortById;
     private isSortTabShown;
+    private readonly handleAddFileClick;
+    private readonly handleTabChange;
+    private readonly handleFileDelete;
     render(): any;
 }

package/dist/types/components/mds-keyboard/mds-keyboard.d.ts

@@ -4,6 +4,10 @@ import { KeyboardTest } from './meta/type';
  */
 export declare class MdsKeyboard {
     private host;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     private nodes;
     private errors;
     private filteredNodes;
@@ -28,6 +32,8 @@ export declare class MdsKeyboard {
      * Sets if the keyboard key combination test is enabled
      */
     readonly try?: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     handleTryProperty(newValaue: boolean): void;
     private initKeyboardTest;
@@ -43,6 +49,5 @@ export declare class MdsKeyboard {
     private startKeyboardShortcutTest;
     private stopKeyboardShortcutTest;
     private getButtonIcon;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-kpi-item/mds-kpi-item.d.ts

@@ -5,6 +5,14 @@
  */
 export declare class MdsKpiItem {
     hostElement: HTMLMdsKpiItemElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     isIntersecting: boolean;
     private observer;
     /**
@@ -24,6 +32,8 @@ export declare class MdsKpiItem {
      */
     readonly icon?: string;
     private setObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/mds-label/mds-label.d.ts

@@ -9,6 +9,12 @@ import { TypographyTruncateType } from "../../type/text";
 export type MdsLabelVariantType = ThemeLabelVariantType | ThemeStatusVariantType;
 export declare class MdsLabel {
     private host;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     private km;
     private t;
     language: string;
@@ -46,6 +52,7 @@ export declare class MdsLabel {
      */
     deletedEvent: EventEmitter<void>;
     private handleKeyboard;
+    connectedCallback(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     disconnectedCallback(): void;

package/dist/types/components/mds-list-item/mds-list-item.d.ts

@@ -3,6 +3,10 @@ import { TypographyInfoType, TypographyReadType, TypographyReadingVariants } fro
  * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export declare class MdsListItem {
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Specifies the typography of the element
      */

package/dist/types/components/mds-modal/mds-modal.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ModalPositionType, ModalAnimationStateType, ModalOverflowType, ModalAnimationStyleType, ModalInteractionType } from './meta/types';
+import { ModalPositionType, ModalOverflowType, ModalAnimationStyleType, ModalInteractionType } from './meta/types';
 /**
  * @part action-close - Selects the close button of the modal.
  * @part window - Selects the default window element of the modal when used.
@@ -10,12 +10,14 @@ import { ModalPositionType, ModalAnimationStateType, ModalOverflowType, ModalAni
  */
 export declare class MdsModal {
     private animationDelayTimeout;
+    private dialogEl?;
     private window;
     private top;
     private bodyOverflow;
     private bottom;
     private cssTransitionDuration;
     private windowElement;
+    private windowContentWrapper?;
     private windowHeaderElement;
     private windowFooterElement;
     private windowHeaderHeight;
@@ -24,24 +26,28 @@ export declare class MdsModal {
     private touchStartY;
     private touchMargin;
     host: HTMLMdsModalElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * Specifies if the modal is opened or not
      */
     opened?: boolean;
     /**
-     * Specifies if the modal shows the backdrop
+     * Hides the modal backdrop
      */
-    backdrop?: boolean;
+    hideBackdrop?: boolean;
     /**
      * Specifies the animation position of the modal window
      */
     position?: ModalPositionType;
     /**
-     * Specifies if the component is animating itself or not
-     */
-    animating?: ModalAnimationStateType;
-    /**
-     * Specifies if the component is animating itself or not
+     * Specifies the animation style of the modal window
      */
     readonly animation?: ModalAnimationStyleType;
     /**
@@ -75,18 +81,23 @@ export declare class MdsModal {
     private stopOutroAnimationWindow;
     private disableOverflow;
     private enableOverflow;
+    private setContentOverflow;
+    private handleWindowTransitionEnd;
     private animateOpenWindow;
     private animateCloseWindow;
     private setTouchStart;
     private setTouchEnd;
     private addMobileEvents;
     componentWillLoad(): void;
-    componentWillRender(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    private closeModal;
-    handleOpenProp(newValue: boolean): void;
-    handleBackdropProp(newValue?: boolean): void;
+    private showDialog;
+    private closeDialog;
+    private handleBackdropClick;
+    private handleCancel;
+    handleOpenProp(newValue: boolean, oldValue?: boolean): void;
+    handleHideBackdropProp(newValue?: boolean): void;
     /**
      * Closes the modal.
      */

package/dist/types/components/mds-modal/meta/types.d.ts

@@ -1,5 +1,4 @@
 export type ModalPositionType = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'left' | 'right' | 'top' | 'top-left' | 'top-right';
-export type ModalAnimationStateType = 'intro' | 'none' | 'outro';
 export type ModalOverflowType = 'auto' | 'manual';
 export type ModalInteractionType = 'strict' | 'relaxed';
 export type ModalAnimationStyleType = 'slide' | 'custom' | '3d';

package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
                 name: string;
             };
         };
-        backdrop: {
+        'hide-backdrop': {
             description: string;
             type: {
                 name: string;
@@ -53,9 +53,23 @@ declare const _default: {
                 name: string;
             };
         };
+        tallContent: {
+            description: string;
+            type: {
+                name: string;
+            };
+        };
     };
 };
 export default _default;
+export declare const QAMatrix: {
+    render: (args: any) => any;
+    args: {
+        backdrop: boolean;
+        interaction: string;
+        tallContent: boolean;
+    };
+};
 export declare const Default: {
     render: (args: any) => any;
     args: {
@@ -89,7 +103,7 @@ export declare const Backdrop: {
     args: {
         position: string;
         opened: boolean;
-        backdrop: undefined;
+        'hide-backdrop': boolean;
     };
 };
 export declare const BodyOverflowDisabled: {

package/dist/types/components/mds-note/mds-note.d.ts

@@ -6,6 +6,14 @@ import { ThemeLabelVariantType } from "../../type/variant";
  */
 export declare class MdsNote {
     private host;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     private km;
     private t;
     language: string;
@@ -26,6 +34,7 @@ export declare class MdsNote {
      * Emits when the note has to be cancelled
      */
     deleteEvent: EventEmitter<void>;
+    connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;

package/dist/types/components/mds-notification/mds-notification.d.ts

@@ -2,6 +2,8 @@ import { StrategyType } from './meta/types';
 export declare class MdsNotification {
     private caller;
     private host;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     private cleanupAutoUpdate;
     /**
      * Specifies the selector of the target element, this attribute is used with `querySelector` method.
@@ -12,9 +14,9 @@ export declare class MdsNotification {
      */
     value: number;
     /**
-     * Specifies if the notification is visible
+     * Specifies if the notification is dismissed
      */
-    visible: boolean;
+    dismissed: boolean;
     /**
      * Specifies the position strategy of the notification
      */
@@ -26,6 +28,7 @@ export declare class MdsNotification {
     private placement?;
     private updatePosition;
     private clean;
+    connectedCallback(): void;
     componentDidRender(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/mds-notification/test/mds-notification.stories.d.ts

@@ -17,7 +17,7 @@ declare const _default: {
                 name: string;
             };
         };
-        visible: {
+        dismissed: {
             description: string;
             type: {
                 name: string;
@@ -33,13 +33,13 @@ export declare const Value: {
     render: (args: any) => any;
     args: {
         value: number;
-        visible: boolean;
+        dismissed: boolean;
     };
 };
 export declare const NoValue: {
     render: (args: any) => any;
     args: {
-        visible: boolean;
+        dismissed: boolean;
     };
 };
 export declare const Static: {
@@ -47,7 +47,7 @@ export declare const Static: {
     args: {
         strategy: string;
         value: number;
-        visible: boolean;
+        dismissed: boolean;
     };
 };
 export declare const StaticPositioning: {
@@ -55,7 +55,7 @@ export declare const StaticPositioning: {
     args: {
         strategy: string;
         value: number;
-        visible: boolean;
+        dismissed: boolean;
     };
 };
 export declare const Max: {
@@ -63,6 +63,6 @@ export declare const Max: {
     args: {
         value: number;
         max: number;
-        visible: boolean;
+        dismissed: boolean;
     };
 };

package/dist/types/components/mds-paginator/mds-paginator.d.ts

@@ -2,6 +2,14 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsPaginatorEventDetail } from './meta/event-detail';
 export declare class MdsPaginator {
     private element;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * Specifies the number of total pages to be handled
      */
@@ -10,6 +18,8 @@ export declare class MdsPaginator {
      * Specifies the current page selected in the paginator
      */
     currentPage: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     /**
      * Emits when a page is changed
@@ -18,5 +28,10 @@ export declare class MdsPaginator {
     private scrollPage;
     private focus;
     private goToPage;
+    private readonly handlePrevClick;
+    private readonly handleFirstClick;
+    private readonly handlePageClick;
+    private readonly handleLastClick;
+    private readonly handleNextClick;
     render(): any;
 }