@gravionlabs/helix-core 22.0.0

package/types/gravionlabs-helix-core-types-datepicker.d.ts

@@ -0,0 +1,521 @@
+import { TemplateRef } from '@angular/core';
+import { MotionOptions } from '@gravionlabs/helix-core/uix/motion';
+import { PassThrough, PassThroughOption } from '@gravionlabs/helix-core/api';
+import { ButtonPassThrough } from '@gravionlabs/helix-core/types/button';
+import { InputTextPassThrough } from '@gravionlabs/helix-core/types/inputtext';
+
+/**
+ * Custom pass-through(pt) options.
+ * @template I Type of instance.
+ * @see {@link DatePicker.pt}
+ * @group Interface
+ */
+interface DatePickerPassThroughOptions<I = unknown> {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThrough}
+     */
+    pcInputText?: InputTextPassThrough;
+    /**
+     * Used to pass attributes to the dropdown button's DOM element.
+     */
+    dropdown?: PassThroughOption<HTMLButtonElement, I>;
+    /**
+     * Used to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: PassThroughOption<SVGElement, I>;
+    /**
+     * Used to pass attributes to the input icon container's DOM element.
+     */
+    inputIconContainer?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the input icon's DOM element.
+     */
+    inputIcon?: PassThroughOption<SVGElement, I>;
+    /**
+     * Used to pass attributes to the panel's DOM element.
+     */
+    panel?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the calendar container's DOM element.
+     */
+    calendarContainer?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the calendar's DOM element.
+     */
+    calendar?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the previous button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcPrevButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the select month's DOM element.
+     */
+    selectMonth?: PassThroughOption<HTMLSelectElement, I>;
+    /**
+     * Used to pass attributes to the select year's DOM element.
+     */
+    selectYear?: PassThroughOption<HTMLSelectElement, I>;
+    /**
+     * Used to pass attributes to the decade's DOM element.
+     */
+    decade?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the next button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcNextButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the day view's DOM element.
+     */
+    dayView?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the table's DOM element.
+     */
+    table?: PassThroughOption<HTMLTableElement, I>;
+    /**
+     * Used to pass attributes to the table header's DOM element.
+     */
+    tableHeader?: PassThroughOption<HTMLTableSectionElement, I>;
+    /**
+     * Used to pass attributes to the table header row's DOM element.
+     */
+    tableHeaderRow?: PassThroughOption<HTMLTableRowElement, I>;
+    /**
+     * Used to pass attributes to the week header's DOM element.
+     */
+    weekHeader?: PassThroughOption<HTMLTableCellElement, I>;
+    /**
+     * Used to pass attributes to the week header label's DOM element.
+     */
+    weekHeaderLabel?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the table header cell's DOM element.
+     */
+    tableHeaderCell?: PassThroughOption<HTMLTableCellElement, I>;
+    /**
+     * Used to pass attributes to the week day cell's DOM element.
+     */
+    weekDayCell?: PassThroughOption<HTMLTableCellElement, I>;
+    /**
+     * Used to pass attributes to the week day's DOM element.
+     */
+    weekDay?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the table body's DOM element.
+     */
+    tableBody?: PassThroughOption<HTMLTableSectionElement, I>;
+    /**
+     * Used to pass attributes to the table body row's DOM element.
+     */
+    tableBodyRow?: PassThroughOption<HTMLTableRowElement, I>;
+    /**
+     * Used to pass attributes to the week number's DOM element.
+     */
+    weekNumber?: PassThroughOption<HTMLTableCellElement, I>;
+    /**
+     * Used to pass attributes to the week label container's DOM element.
+     */
+    weekLabelContainer?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the day cell's DOM element.
+     */
+    dayCell?: PassThroughOption<HTMLTableCellElement, I>;
+    /**
+     * Used to pass attributes to the day's DOM element.
+     */
+    day?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the month view's DOM element.
+     */
+    monthView?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the month's DOM element.
+     */
+    month?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the year view's DOM element.
+     */
+    yearView?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the year's DOM element.
+     */
+    year?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the time picker's DOM element.
+     */
+    timePicker?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the hour picker's DOM element.
+     */
+    hourPicker?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the hour's DOM element.
+     */
+    hour?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the separator container's DOM element.
+     */
+    separatorContainer?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the separator's DOM element.
+     */
+    separator?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the minute picker's DOM element.
+     */
+    minutePicker?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the minute's DOM element.
+     */
+    minute?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the second picker's DOM element.
+     */
+    secondPicker?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the second's DOM element.
+     */
+    second?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the ampm picker's DOM element.
+     */
+    ampmPicker?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the ampm's DOM element.
+     */
+    ampm?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the increment button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcIncrementButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the decrement button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcDecrementButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the today button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcTodayButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the clear button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcClearButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the hidden selected day's DOM element.
+     */
+    hiddenSelectedDay?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the hidden month's DOM element.
+     */
+    hiddenMonth?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the hidden year's DOM element.
+     */
+    hiddenYear?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass options to the motion component/directive.
+     */
+    motion?: MotionOptions;
+}
+/**
+ * Defines valid pass-through options in DatePicker.
+ * @see {@link DatePickerPassThroughOptions}
+ * @template I Type of instance.
+ */
+type DatePickerPassThrough<I = unknown> = PassThrough<I, DatePickerPassThroughOptions<I>>;
+/**
+ * Represents metadata for a single date cell in the DatePicker.
+ * @group Interface
+ */
+interface DatePickerDateMeta {
+    /**
+     * Day of the month (1-31).
+     */
+    day: number;
+    /**
+     * Month (0-11).
+     */
+    month: number;
+    /**
+     * Year.
+     */
+    year: number;
+    /**
+     * Whether this date belongs to a different month than the displayed month.
+     */
+    otherMonth?: boolean;
+    /**
+     * Whether this date is today.
+     */
+    today?: boolean;
+    /**
+     * Whether this date is selectable.
+     */
+    selectable?: boolean;
+}
+/**
+ * Custom date template context.
+ * @group Interface
+ */
+interface DatePickerDateTemplateContext {
+    /**
+     * Date metadata object.
+     */
+    $implicit: DatePickerDateMeta;
+}
+/**
+ * Custom disabled date template context.
+ * @group Interface
+ */
+interface DatePickerDisabledDateTemplateContext {
+    /**
+     * Disabled date metadata object.
+     */
+    $implicit: DatePickerDateMeta;
+}
+/**
+ * Custom decade template context.
+ * @group Interface
+ */
+interface DatePickerDecadeTemplateContext {
+    /**
+     * Function that returns an array of years for the decade.
+     */
+    $implicit: () => number[];
+}
+/**
+ * Custom input icon template context.
+ * @group Interface
+ */
+interface DatePickerInputIconTemplateContext {
+    /**
+     * Click callback function to open the DatePicker.
+     */
+    clickCallBack: (event: Event) => void;
+}
+/**
+ * Custom button bar template context.
+ * @group Interface
+ */
+interface DatePickerButtonBarTemplateContext {
+    /**
+     * Today button click callback.
+     */
+    todayCallback: (event: Event) => void;
+    /**
+     * Clear button click callback.
+     */
+    clearCallback: (event: Event) => void;
+}
+/**
+ * Defines valid templates in DatePicker.
+ * @group Templates
+ */
+interface DatePickerTemplates {
+    /**
+     * Custom date template.
+     * @param {Object} context - date metadata.
+     */
+    date(context: DatePickerDateTemplateContext): TemplateRef<DatePickerDateTemplateContext>;
+    /**
+     * Custom decade template.
+     * @param {Object} context - decade years function.
+     */
+    decade(context: DatePickerDecadeTemplateContext): TemplateRef<DatePickerDecadeTemplateContext>;
+    /**
+     * Custom disabled date template.
+     * @param {Object} context - disabled date metadata.
+     */
+    disabledDate(context: DatePickerDisabledDateTemplateContext): TemplateRef<DatePickerDisabledDateTemplateContext>;
+    /**
+     * Custom header template.
+     */
+    header(): TemplateRef<void>;
+    /**
+     * Custom input icon template.
+     * @param {Object} context - input icon template params.
+     */
+    inputicon(context: DatePickerInputIconTemplateContext): TemplateRef<DatePickerInputIconTemplateContext>;
+    /**
+     * Custom previous icon template.
+     */
+    previousicon(): TemplateRef<void>;
+    /**
+     * Custom next icon template.
+     */
+    nexticon(): TemplateRef<void>;
+    /**
+     * Custom dropdown trigger icon template.
+     */
+    triggericon(): TemplateRef<void>;
+    /**
+     * Custom clear icon template.
+     */
+    clearicon(): TemplateRef<void>;
+    /**
+     * Custom decrement icon template.
+     */
+    decrementicon(): TemplateRef<void>;
+    /**
+     * Custom increment icon template.
+     */
+    incrementicon(): TemplateRef<void>;
+    /**
+     * Custom footer template.
+     */
+    footer(): TemplateRef<void>;
+    /**
+     * Custom button bar template.
+     * @param {Object} context - button bar template params.
+     */
+    buttonbar(context: DatePickerButtonBarTemplateContext): TemplateRef<DatePickerButtonBarTemplateContext>;
+}
+/**
+ * Locale settings options.
+ * @group Interface
+ */
+interface LocaleSettings {
+    /**
+     * Day value.
+     */
+    firstDayOfWeek?: number;
+    /**
+     * Day names.
+     */
+    dayNames?: string[];
+    /**
+     * Shortened day names.
+     */
+    dayNamesShort?: string[];
+    /**
+     * Minimum days names.
+     */
+    dayNamesMin?: string[];
+    /**
+     * Month names.
+     */
+    monthNames?: string[];
+    /**
+     * Shortened month names.
+     */
+    monthNamesShort?: string[];
+    /**
+     * Value of today date string.
+     */
+    today?: string;
+    /**
+     * Clear.
+     */
+    clear?: string;
+    /**
+     * Date format.
+     */
+    dateFormat?: string;
+    /**
+     * Week header.
+     */
+    weekHeader?: string;
+}
+/**
+ * Month interface.
+ * @group Interface
+ */
+interface Month {
+    /**
+     * Mont value.
+     */
+    month?: number;
+    /**
+     * Year value.
+     */
+    year?: number;
+    /**
+     * Array of dates.
+     */
+    dates?: Date[];
+    /**
+     * Array of week numbers.
+     */
+    weekNumbers?: number[];
+}
+/**
+ * Custom DatePicker responsive options metadata.
+ * @group Interface
+ */
+interface DatePickerResponsiveOptions {
+    /**
+     * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}
+     */
+    breakpoint?: string;
+    /**
+     * The number of visible months on breakpoint.
+     */
+    numMonths?: number;
+}
+/**
+ * Custom type for the DatePicker views.
+ * @group Types
+ */
+type DatePickerTypeView = 'date' | 'month' | 'year';
+/**
+ * Custom type for the DatePicker navigation state.
+ * @group Types
+ */
+type NavigationState = {
+    backward?: boolean;
+    button?: boolean;
+};
+/**
+ * Custom DatePicker year change event.
+ * @see {@link DatePicker.onYearChange}
+ * @group Events
+ */
+interface DatePickerYearChangeEvent {
+    /**
+     * New month.
+     */
+    month?: number;
+    /**
+     * New year.
+     */
+    year?: number;
+}
+/**
+ * Custom DatePicker month change event.
+ * @see {@link DatePicker.onMonthChange}
+ * @group Events
+ */
+interface DatePickerMonthChangeEvent {
+    /**
+     * New month.
+     */
+    month?: number;
+    /**
+     * New year.
+     */
+    year?: number;
+}
+
+export type { DatePickerButtonBarTemplateContext, DatePickerDateMeta, DatePickerDateTemplateContext, DatePickerDecadeTemplateContext, DatePickerDisabledDateTemplateContext, DatePickerInputIconTemplateContext, DatePickerMonthChangeEvent, DatePickerPassThrough, DatePickerPassThroughOptions, DatePickerResponsiveOptions, DatePickerTemplates, DatePickerTypeView, DatePickerYearChangeEvent, LocaleSettings, Month, NavigationState };

package/types/gravionlabs-helix-core-types-dialog.d.ts

@@ -0,0 +1,107 @@
+import { PassThrough, PassThroughOption } from '@gravionlabs/helix-core/api';
+import { ButtonPassThrough } from '@gravionlabs/helix-core/types/button';
+import { TemplateRef } from '@angular/core';
+import { MotionOptions } from '@gravionlabs/helix-core/uix/motion';
+
+/**
+ * Custom pass-through(pt) options.
+ * @template I Type of instance.
+ *
+ * @see {@link Dialog.pt}
+ * @group Interface
+ */
+interface DialogPassThroughOptions<I = unknown> {
+    /**
+     * Used to pass attributes to the host's DOM element.
+     */
+    host?: PassThroughOption<HTMLElement, I>;
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the mask's DOM element.
+     */
+    mask?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the resize handle's DOM element.
+     */
+    resizeHandle?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: PassThroughOption<HTMLSpanElement, I>;
+    /**
+     * Used to pass attributes to the header actions' DOM element.
+     */
+    headerActions?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the maximize Button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcMaximizeButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the close Button component.
+     * @see {@link ButtonPassThrough}
+     */
+    pcCloseButton?: ButtonPassThrough;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass attributes to the footer's DOM element.
+     */
+    footer?: PassThroughOption<HTMLDivElement, I>;
+    /**
+     * Used to pass options to the motion component/directive.
+     */
+    motion?: MotionOptions;
+}
+/**
+ * Defines valid pass-through options in Dialog.
+ * @see {@link DialogPassThroughOptions}
+ *
+ * @template I Type of instance.
+ */
+type DialogPassThrough<I = unknown> = PassThrough<I, DialogPassThroughOptions<I>>;
+/**
+ * Defines valid templates in Dialog.
+ * @group Templates
+ */
+interface DialogTemplates {
+    /**
+     * Custom template of header.
+     */
+    header(): TemplateRef<void>;
+    /**
+     * Custom template of content.
+     */
+    content(): TemplateRef<void>;
+    /**
+     * Custom template of footer.
+     */
+    footer(): TemplateRef<void>;
+    /**
+     * Custom template of closeicon.
+     */
+    closeicon(): TemplateRef<void>;
+    /**
+     * Custom template of maximizeicon.
+     */
+    maximizeicon(): TemplateRef<void>;
+    /**
+     * Custom template of minimizeicon.
+     */
+    minimizeicon(): TemplateRef<void>;
+    /**
+     * Custom headless template to replace the entire dialog content.
+     */
+    headless(): TemplateRef<void>;
+}
+
+export type { DialogPassThrough, DialogPassThroughOptions, DialogTemplates };

package/types/gravionlabs-helix-core-types-divider.d.ts

@@ -0,0 +1,28 @@
+import { PassThrough, PassThroughOption } from '@gravionlabs/helix-core/api';
+
+/**
+ * Custom pass-through(pt) options.
+ * @template I Type of instance.
+ *
+ * @see {@link Divider.pt}
+ * @group Interface
+ */
+interface DividerPassThroughOptions<I = unknown> {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: PassThroughOption<HTMLElement, I>;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: PassThroughOption<HTMLDivElement, I>;
+}
+/**
+ * Defines valid pass-through options in Divider component.
+ * @see {@link DividerPassThroughOptions}
+ *
+ * @template I Type of instance.
+ */
+type DividerPassThrough<I = unknown> = PassThrough<I, DividerPassThroughOptions<I>>;
+
+export type { DividerPassThrough, DividerPassThroughOptions };