@sula-tech/webcomponents 0.20.0 → 0.21.0

package/dist/types/components.d.ts

@@ -9,6 +9,7 @@ import { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model
 import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
 import { SulaMenuBreadcrumb } from "./components/sula-breadcrumb/model/sula-breadcrumb.model";
 import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
+import { SulaCalendarMonthChange, SulaCalendarRange, SulaCalendarStatus } from "./components/sula-calendar/model/sula-calendar.model";
 import { SulaCheckboxType } from "./components/sula-checkbox/model/sula-checkbox.model";
 import { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model";
 import { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
@@ -34,6 +35,7 @@ export { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model
 export { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
 export { SulaMenuBreadcrumb } from "./components/sula-breadcrumb/model/sula-breadcrumb.model";
 export { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
+export { SulaCalendarMonthChange, SulaCalendarRange, SulaCalendarStatus } from "./components/sula-calendar/model/sula-calendar.model";
 export { SulaCheckboxType } from "./components/sula-checkbox/model/sula-checkbox.model";
 export { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model";
 export { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
@@ -162,6 +164,73 @@ export namespace Components {
          */
         "type": SulaButtonType;
     }
+    interface SulaCalendar {
+        /**
+          * Allows typing the date directly in the field. When false, the date can only be picked in the calendar
+          * @default true
+         */
+        "allowTyping": boolean;
+        /**
+          * Closes the calendar panel after a date is selected
+          * @default true
+         */
+        "closeOnSelect": boolean;
+        /**
+          * The calendar is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * First day of the week, where 0 is Sunday and 6 is Saturday
+          * @default 0
+         */
+        "firstDayOfWeek": number;
+        /**
+          * The help text displayed below the field
+         */
+        "helpText"?: string;
+        /**
+          * Renders only the calendar panel, without the input field
+          * @default false
+         */
+        "inline": boolean;
+        /**
+          * The calendar field label
+         */
+        "label": string;
+        /**
+          * Locale used to format month and weekday names
+          * @default 'pt-BR'
+         */
+        "locale": string;
+        /**
+          * Latest selectable date in the `DD/MM/YYYY` format
+         */
+        "maxDate"?: string;
+        /**
+          * Earliest selectable date in the `DD/MM/YYYY` format
+         */
+        "minDate"?: string;
+        /**
+          * The calendar field placeholder
+         */
+        "placeholder"?: string;
+        /**
+          * Enables selecting a date range (start and end dates) instead of a single date
+          * @default false
+         */
+        "range": boolean;
+        /**
+          * The calendar field status
+          * @default SulaCalendarStatus.Default
+         */
+        "status": SulaCalendarStatus;
+        /**
+          * Selected date in the `DD/MM/YYYY` format. In range mode the format is `DD/MM/YYYY - DD/MM/YYYY`
+          * @default ''
+         */
+        "value": string;
+    }
     interface SulaCheckbox {
         /**
           * Is checkbox checked
@@ -701,6 +770,11 @@ export namespace Components {
           * The textfield placeholder
          */
         "placeholder": string;
+        /**
+          * The textfield is read only, blocking typing while keeping it focusable
+          * @default false
+         */
+        "readOnly": boolean;
         /**
           * The textfield status
           * @default SulaTextfieldStatus.Default
@@ -888,6 +962,10 @@ export interface SulaButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaButtonElement;
 }
+export interface SulaCalendarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaCalendarElement;
+}
 export interface SulaCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaCheckboxElement;
@@ -1007,6 +1085,28 @@ declare global {
         prototype: HTMLSulaButtonElement;
         new (): HTMLSulaButtonElement;
     };
+    interface HTMLSulaCalendarElementEventMap {
+        "dateSelected": string;
+        "rangeSelected": SulaCalendarRange;
+        "valueChanged": string;
+        "monthChanged": SulaCalendarMonthChange;
+        "calendarOpened": void;
+        "calendarClosed": void;
+    }
+    interface HTMLSulaCalendarElement extends Components.SulaCalendar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaCalendarElementEventMap>(type: K, listener: (this: HTMLSulaCalendarElement, ev: SulaCalendarCustomEvent<HTMLSulaCalendarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSulaCalendarElementEventMap>(type: K, listener: (this: HTMLSulaCalendarElement, ev: SulaCalendarCustomEvent<HTMLSulaCalendarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSulaCalendarElement: {
+        prototype: HTMLSulaCalendarElement;
+        new (): HTMLSulaCalendarElement;
+    };
     interface HTMLSulaCheckboxElementEventMap {
         "valueChanged": boolean;
         "focusedOn": void;
@@ -1425,6 +1525,7 @@ declare global {
         "sula-badge": HTMLSulaBadgeElement;
         "sula-breadcrumb": HTMLSulaBreadcrumbElement;
         "sula-button": HTMLSulaButtonElement;
+        "sula-calendar": HTMLSulaCalendarElement;
         "sula-checkbox": HTMLSulaCheckboxElement;
         "sula-chip": HTMLSulaChipElement;
         "sula-dropdown": HTMLSulaDropdownElement;
@@ -1572,6 +1673,97 @@ declare namespace LocalJSX {
          */
         "type"?: SulaButtonType;
     }
+    interface SulaCalendar {
+        /**
+          * Allows typing the date directly in the field. When false, the date can only be picked in the calendar
+          * @default true
+         */
+        "allowTyping"?: boolean;
+        /**
+          * Closes the calendar panel after a date is selected
+          * @default true
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * The calendar is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * First day of the week, where 0 is Sunday and 6 is Saturday
+          * @default 0
+         */
+        "firstDayOfWeek"?: number;
+        /**
+          * The help text displayed below the field
+         */
+        "helpText"?: string;
+        /**
+          * Renders only the calendar panel, without the input field
+          * @default false
+         */
+        "inline"?: boolean;
+        /**
+          * The calendar field label
+         */
+        "label"?: string;
+        /**
+          * Locale used to format month and weekday names
+          * @default 'pt-BR'
+         */
+        "locale"?: string;
+        /**
+          * Latest selectable date in the `DD/MM/YYYY` format
+         */
+        "maxDate"?: string;
+        /**
+          * Earliest selectable date in the `DD/MM/YYYY` format
+         */
+        "minDate"?: string;
+        /**
+          * Event emitted when the calendar panel is closed
+         */
+        "onCalendarClosed"?: (event: SulaCalendarCustomEvent<void>) => void;
+        /**
+          * Event emitted when the calendar panel is opened
+         */
+        "onCalendarOpened"?: (event: SulaCalendarCustomEvent<void>) => void;
+        /**
+          * Event emitted when a date is selected, with the date in the `DD/MM/YYYY` format
+         */
+        "onDateSelected"?: (event: SulaCalendarCustomEvent<string>) => void;
+        /**
+          * Event emitted when the displayed month changes
+         */
+        "onMonthChanged"?: (event: SulaCalendarCustomEvent<SulaCalendarMonthChange>) => void;
+        /**
+          * Event emitted in range mode when both the start and end dates are selected, either by picking or by typing. In range mode `valueChanged` is not emitted
+         */
+        "onRangeSelected"?: (event: SulaCalendarCustomEvent<SulaCalendarRange>) => void;
+        /**
+          * Event emitted when the value changes, either by typing or by selecting a date. Not emitted in range mode, use `rangeSelected` instead
+         */
+        "onValueChanged"?: (event: SulaCalendarCustomEvent<string>) => void;
+        /**
+          * The calendar field placeholder
+         */
+        "placeholder"?: string;
+        /**
+          * Enables selecting a date range (start and end dates) instead of a single date
+          * @default false
+         */
+        "range"?: boolean;
+        /**
+          * The calendar field status
+          * @default SulaCalendarStatus.Default
+         */
+        "status"?: SulaCalendarStatus;
+        /**
+          * Selected date in the `DD/MM/YYYY` format. In range mode the format is `DD/MM/YYYY - DD/MM/YYYY`
+          * @default ''
+         */
+        "value"?: string;
+    }
     interface SulaCheckbox {
         /**
           * Is checkbox checked
@@ -2271,6 +2463,11 @@ declare namespace LocalJSX {
           * The textfield placeholder
          */
         "placeholder"?: string;
+        /**
+          * The textfield is read only, blocking typing while keeping it focusable
+          * @default false
+         */
+        "readOnly"?: boolean;
         /**
           * The textfield status
           * @default SulaTextfieldStatus.Default
@@ -2484,6 +2681,7 @@ declare namespace LocalJSX {
         "sula-badge": SulaBadge;
         "sula-breadcrumb": SulaBreadcrumb;
         "sula-button": SulaButton;
+        "sula-calendar": SulaCalendar;
         "sula-checkbox": SulaCheckbox;
         "sula-chip": SulaChip;
         "sula-dropdown": SulaDropdown;
@@ -2523,6 +2721,7 @@ declare module "@stencil/core" {
             "sula-badge": LocalJSX.SulaBadge & JSXBase.HTMLAttributes<HTMLSulaBadgeElement>;
             "sula-breadcrumb": LocalJSX.SulaBreadcrumb & JSXBase.HTMLAttributes<HTMLSulaBreadcrumbElement>;
             "sula-button": LocalJSX.SulaButton & JSXBase.HTMLAttributes<HTMLSulaButtonElement>;
+            "sula-calendar": LocalJSX.SulaCalendar & JSXBase.HTMLAttributes<HTMLSulaCalendarElement>;
             "sula-checkbox": LocalJSX.SulaCheckbox & JSXBase.HTMLAttributes<HTMLSulaCheckboxElement>;
             "sula-chip": LocalJSX.SulaChip & JSXBase.HTMLAttributes<HTMLSulaChipElement>;
             "sula-dropdown": LocalJSX.SulaDropdown & JSXBase.HTMLAttributes<HTMLSulaDropdownElement>;

package/dist/types/index.d.ts

@@ -9,6 +9,8 @@
  */
 export type * from './components.d.ts';
 export { SulaMenuDensity, SulaMenuLabelOverflow } from './components/sula-menu/model/sula-menu.model';
+export { SulaCalendarStatus } from './components/sula-calendar/model/sula-calendar.model';
+export type { SulaCalendarDay, SulaCalendarWeekday, SulaCalendarMonthChange, SulaCalendarRange } from './components/sula-calendar/model/sula-calendar.model';
 export type { SulaToggleEvent } from './components/sula-toggle/model/sula-toggle.model';
 export { SulaToastType } from './components/sula-toast/model/sula-toast.model';
 export type { SulaToastItem, SulaToastAnnouncement, SulaToastDismissReason, SulaToastDismissEvent, SulaToastStackDismissEvent, SulaToastStackActionEvent, } from './components/sula-toast/model/sula-toast.model';

package/dist/webcomponents/index.esm.js

@@ -1,4 +1,4 @@
-export { S as SulaMenuDensity, a as SulaMenuLabelOverflow } from "./p-Cs9RR1ZV.js";
+export { b as SulaCalendarStatus, S as SulaMenuDensity, a as SulaMenuLabelOverflow } from "./p-BbsLJDfp.js";
 
 export { S as SulaToastType } from "./p-t0X4JATS.js";
 //# sourceMappingURL=index.esm.js.map