quang 20.7.2-1 → 20.7.3

package/auth/index.d.ts

@@ -0,0 +1,194 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EnvironmentProviders, Provider, ViewContainerRef, EmbeddedViewRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { QuangFeature, QuangFeatureKind } from 'quang';
+import * as _ngrx_signals from '@ngrx/signals';
+import { AuthConfig, OAuthStorage } from 'angular-oauth2-oidc';
+import * as rxjs from 'rxjs';
+import { CanActivateFn } from '@angular/router';
+import { HttpInterceptorFn } from '@angular/common/http';
+import { UrlData } from 'quang/shared';
+
+declare const AUTH_CONFIG: InjectionToken<QuangAuthConfig | undefined>;
+interface QuangAuthConfig extends AuthConfig {
+    autoLogin: boolean;
+    sendAccessToken: boolean;
+    urlsToSendToken: string[];
+    revokeTokensOnLogout?: boolean;
+    getUserProfileOnLoginSuccess?: boolean;
+    useSilentRefresh: boolean;
+}
+declare function provideQuangAuthConfig(authConfig?: QuangAuthConfig): EnvironmentProviders;
+declare const OPEN_URI: InjectionToken<(uri: string) => void | undefined>;
+declare function provideOpenURI(openURI: (uri: string) => void | undefined): EnvironmentProviders;
+interface TokenStatus {
+    accessToken: string | null;
+    accessTokenExpiresAt: number | null;
+    idToken: string | null;
+    idTokenExpiresAt: number | null;
+    refreshToken: string | null;
+}
+declare class QuangAuthService {
+    private config;
+    logLevel: "normal" | "verbose" | null;
+    private oAuthService;
+    private state;
+    loginChecked: i0.Signal<boolean>;
+    isAuthenticated: i0.Signal<boolean>;
+    authenticationError: i0.Signal<boolean>;
+    tokenStatus: _ngrx_signals.DeepSignal<TokenStatus>;
+    roles: i0.Signal<Set<string>>;
+    user: i0.Signal<Record<string, any> | null>;
+    constructor();
+    init(): Promise<void>;
+    checkForAuthentication(forceRefresh?: boolean): Promise<boolean | undefined>;
+    private refreshAuth;
+    login(): void;
+    logout(): Promise<void>;
+    private loginError;
+    getUserProfile(): Promise<void>;
+    private setTokens;
+    waitForLoginCheck(): Promise<void>;
+    getAuthResult(): Promise<boolean>;
+    addRoles(rolesToAdd: string[]): void;
+    removeRoles(rolesToRemove: string[]): void;
+    hasEveryRole(roles: string[]): boolean;
+    hasAtLeastOneRole(roles: string[]): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuangAuthService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<QuangAuthService>;
+}
+
+declare function provideAuth(authConfig?: QuangAuthConfig, ...features: QuangAuthFeatures[]): EnvironmentProviders;
+declare function withAuth(authConfig?: QuangAuthConfig, ...features: QuangAuthFeatures[]): QuangFeature<QuangFeatureKind.LoaderFeature>;
+/**
+ * Helper type to represent a QuangAuth feature.
+ *
+ * @publicApi
+ */
+interface QuangAuthFeature<FeatureKind extends QuangAuthFeatureKind> {
+    ɵkind: FeatureKind;
+    ɵproviders: (Provider | EnvironmentProviders)[];
+}
+/**
+ * Helper function to create an object that represents a QuangAuth feature.
+ */
+declare function quangAuthFeature<FeatureKind extends QuangAuthFeatureKind>(kind: FeatureKind, providers: (Provider | EnvironmentProviders)[]): QuangAuthFeature<FeatureKind>;
+/**
+ * A type alias that represents all QuangAuth features available for use with `provideAuth`.
+ * Features can be enabled by adding special functions to the `provideAuth` call.
+ * See documentation for each symbol to find corresponding function name. See also `provideAuth`
+ * documentation on how to use those functions.
+ *
+ * @see {@link provideAuth}
+ *
+ * @publicApi
+ */
+type QuangAuthFeatures = QuangAuthFeature<QuangAuthFeatureKind>;
+/**
+ * The list of features as an enum to uniquely type each feature.
+ */
+declare const enum QuangAuthFeatureKind {
+    MobileAuthFeature = 0,
+    SessionStorageFeature = 1,
+    LocalStorageFeature = 2,
+    MemoryStorageFeature = 3,
+    LogoutOnErrorFeature = 4
+}
+
+/**
+ * This directive conditionally renders the associated template if the authenticated user
+ * has at least one of the specified roles. By using the `QuangAuthService.hasAtLeastOneRole()` method it checks the user's roles against
+ * the required roles provided through the `quangHasAtLeastOneRole` directive.
+ *
+ * @example
+ * <div *quangHasAtLeastOneRole="['admin', 'editor']">
+ *   This content will only be visible to users with 'admin' or 'editor' roles.
+ * </div>
+ */
+declare class QuangHasAtLeastOneRoleDirective {
+    logLevel: "normal" | "verbose" | null;
+    targetRoles: i0.InputSignal<string[]>;
+    viewContainerRef: ViewContainerRef;
+    embeddedViewRef: EmbeddedViewRef<unknown> | null;
+    templateRef: TemplateRef<any>;
+    authService: QuangAuthService;
+    takeUntilDestroyed: rxjs.MonoTypeOperatorFunction<unknown>;
+    changeDetectorRef: ChangeDetectorRef;
+    hideViewIfNotAllowed: i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuangHasAtLeastOneRoleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<QuangHasAtLeastOneRoleDirective, "[quangHasAtLeastOneRole]", never, { "targetRoles": { "alias": "quangHasAtLeastOneRole"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * This directive conditionally renders the associated template if the authenticated user
+ * has every of the specified roles. By using the `QuangAuthService.hasEveryRole()` method it checks the user's roles against
+ * the required roles provided through the `quangHasEveryRole` required input.
+ *
+ * @example
+ * <div *quangHasEveryRole="['admin', 'editor']">
+ *   This content will only be visible to users with 'admin' and 'editor' roles.
+ * </div>
+ */
+declare class QuangHasEveryRoleDirective {
+    logLevel: "normal" | "verbose" | null;
+    targetRoles: i0.InputSignal<string[]>;
+    viewContainerRef: ViewContainerRef;
+    embeddedViewRef: EmbeddedViewRef<unknown> | null;
+    templateRef: TemplateRef<any>;
+    authService: QuangAuthService;
+    takeUntilDestroyed: rxjs.MonoTypeOperatorFunction<unknown>;
+    changeDetectorRef: ChangeDetectorRef;
+    hideViewIfNotAllowed: i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuangHasEveryRoleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<QuangHasEveryRoleDirective, "[quangHasEveryRole]", never, { "targetRoles": { "alias": "quangHasEveryRole"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class QuangIsAuthenticatedDirective {
+    viewContainerRef: ViewContainerRef;
+    templateRef: TemplateRef<unknown>;
+    embeddedViewRef: EmbeddedViewRef<unknown> | null;
+    authService: QuangAuthService;
+    takeUntilDestroyed: rxjs.MonoTypeOperatorFunction<unknown>;
+    changeDetectorRef: ChangeDetectorRef;
+    hideViewIfNotAuthenticated: i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuangIsAuthenticatedDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<QuangIsAuthenticatedDirective, "[quangIsAuthenticated]", never, {}, {}, never, never, true, never>;
+}
+
+declare class QuangIsNotAuthenticatedDirective {
+    viewContainerRef: ViewContainerRef;
+    templateRef: TemplateRef<unknown>;
+    embeddedViewRef: EmbeddedViewRef<unknown> | null;
+    authService: QuangAuthService;
+    takeUntilDestroyed: rxjs.MonoTypeOperatorFunction<unknown>;
+    changeDetectorRef: ChangeDetectorRef;
+    showViewIfNotAuthenticated: i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuangIsNotAuthenticatedDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<QuangIsNotAuthenticatedDirective, "[quangIsNotAuthenticated]", never, {}, {}, never, never, true, never>;
+}
+
+declare const quangIsAllowedGuardFactory: (roles: string[], behavior: "every" | "atLeastOne") => CanActivateFn;
+
+declare const quangIsAuthenticatedGuard: CanActivateFn;
+
+declare const LOGOUT_RETRIES: InjectionToken<number>;
+declare const LOGOUT_STATUSES: InjectionToken<number[]>;
+declare const LOGOUT_EXCLUDED_URLS: InjectionToken<UrlData[]>;
+declare const logoutOnErrorInterceptor: HttpInterceptorFn;
+declare function withLogoutOnError(excludedUrls?: UrlData[], statuses?: number[], retries?: number): QuangAuthFeature<QuangAuthFeatureKind.LogoutOnErrorFeature>;
+
+declare function withLocalStorage(): QuangAuthFeature<QuangAuthFeatureKind.LocalStorageFeature>;
+
+declare class MemoryStorage implements OAuthStorage {
+    private data;
+    getItem(key: string): string;
+    removeItem(key: string): void;
+    setItem(key: string, data: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MemoryStorage, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MemoryStorage>;
+}
+declare function withMemoryStorage(): QuangAuthFeature<QuangAuthFeatureKind.MemoryStorageFeature>;
+
+declare function withSessionStorage(): QuangAuthFeature<QuangAuthFeatureKind.SessionStorageFeature>;
+
+export { AUTH_CONFIG, LOGOUT_EXCLUDED_URLS, LOGOUT_RETRIES, LOGOUT_STATUSES, MemoryStorage, OPEN_URI, QuangAuthFeatureKind, QuangAuthService, QuangHasAtLeastOneRoleDirective, QuangHasEveryRoleDirective, QuangIsAuthenticatedDirective, QuangIsNotAuthenticatedDirective, logoutOnErrorInterceptor, provideAuth, provideOpenURI, provideQuangAuthConfig, quangAuthFeature, quangIsAllowedGuardFactory, quangIsAuthenticatedGuard, withAuth, withLocalStorage, withLogoutOnError, withMemoryStorage, withSessionStorage };
+export type { QuangAuthConfig, QuangAuthFeature, QuangAuthFeatures };

package/auth/mobile/index.d.ts

@@ -0,0 +1,5 @@
+import { QuangAuthFeature, QuangAuthFeatureKind } from 'quang/auth';
+
+declare function withMobileAuth(toolbarColor?: string, presentationStyle?: 'popover' | 'fullscreen'): QuangAuthFeature<QuangAuthFeatureKind.MobileAuthFeature>;
+
+export { withMobileAuth };

package/components/autocomplete/index.d.ts

@@ -0,0 +1,296 @@
+import * as _angular_core from '@angular/core';
+import { QuangBaseComponent, SelectOption, QuangOptionListComponent, OptionListParentType } from 'quang/components/shared';
+
+/**
+ * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.
+ *
+ * @usageNotes
+ * This component displays a list of filtered options based on user input.
+ * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.
+ *
+ * `searchTextDebounce` is by default set to 300ms.
+ */
+declare class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[] | null> {
+    /**
+     * The list of options to display in the autocomplete dropdown.
+     */
+    selectOptions: _angular_core.InputSignal<SelectOption[]>;
+    /**
+     * When true, allows any text input as a valid form value, not just option values.
+     * The form value will sync with whatever text the user types.
+     * When false (default), the form value must match one of the option values.
+     * @default false
+     */
+    allowFreeText: _angular_core.InputSignal<boolean>;
+    /**
+     * When true and allowFreeText is false, automatically selects an option if the user's
+     * input text matches an option's label exactly (case-insensitive, trimmed).
+     * This provides a better UX by auto-selecting when users type a complete option label.
+     * @default true
+     */
+    autoSelectOnExactMatch: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, updates the form value as the user types (after debounce).
+     * When false (default), the form value is only updated when:
+     * - User selects an option from the dropdown
+     * - User stops typing and the input loses focus (blur)
+     * @default false
+     */
+    updateValueOnType: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the form value can be any text or must match one of the options.
+     * When true, the form value syncs with the input text.
+     * When false (default), the form value must be one of the option values.
+     * @default false
+     * @deprecated Use `allowFreeText` instead. This input will be removed in a future version.
+     */
+    syncFormWithText: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum height of the option list before scrolling.
+     * @default '200px'
+     */
+    optionListMaxHeight: _angular_core.InputSignal<string>;
+    /**
+     * Whether to translate option labels.
+     * @default true
+     */
+    translateValue: _angular_core.InputSignal<boolean>;
+    /**
+     * Scroll behavior when the option list opens.
+     * @default 'smooth'
+     */
+    scrollBehaviorOnOpen: _angular_core.InputSignal<ScrollBehavior>;
+    /**
+     * When true, only emits the value without saving it to ngControl.
+     * @default false
+     */
+    emitOnly: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable multiple selection mode with chips.
+     * @default false
+     */
+    multiple: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum length in characters for chip display text.
+     * When set, chips will be truncated and show a tooltip with full text.
+     * @default 0 (no limit)
+     */
+    chipMaxLength: _angular_core.InputSignal<number>;
+    /**
+     * Layout direction for chips in multiple selection mode.
+     * @default 'vertical'
+     */
+    multiSelectDisplayMode: _angular_core.InputSignal<"vertical" | "horizontal">;
+    /**
+     * Position of chips relative to the input in multiple selection mode.
+     * - 'top': Chips are displayed above the input (default)
+     * - 'bottom': Chips are displayed below the input
+     * @default 'top'
+     */
+    chipsPosition: _angular_core.InputSignal<"top" | "bottom">;
+    /**
+     * Debounce time in milliseconds for search text changes.
+     * @default 300
+     */
+    searchTextDebounce: _angular_core.InputSignal<number>;
+    /**
+     * Whether to filter options internally based on input text.
+     * When false, filtering should be handled externally via searchTextChange event.
+     * @default true
+     */
+    internalFilterOptions: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when an option is selected.
+     * Emits the selected option's value, or null when cleared.
+     */
+    selectedOption: _angular_core.OutputEmitterRef<string | number | null>;
+    /**
+     * Emitted when the search text changes (after debounce).
+     * Useful for external filtering or API calls.
+     */
+    searchTextChange: _angular_core.OutputEmitterRef<string>;
+    /** Reference to the option list component */
+    protected readonly optionList: _angular_core.Signal<QuangOptionListComponent | undefined>;
+    /** Reference to the input element */
+    private readonly selectInput;
+    /** Reference to the chip container element */
+    private readonly chipContainer;
+    /** Reference to the main autocomplete container */
+    private readonly autocompleteContainer;
+    /** Constant for option list parent type */
+    readonly ParentType = OptionListParentType.AUTOCOMPLETE;
+    /** Height of the input element (used for positioning) */
+    readonly inputHeight: _angular_core.WritableSignal<number>;
+    /**
+     * The display text for the input field.
+     * - When searching: shows what the user typed
+     * - When allowFreeText/syncFormWithText is true and no matching option: shows the raw value
+     * - When not searching: shows the selected option's label (derived from _value)
+     */
+    readonly _inputValue: _angular_core.Signal<string>;
+    /** Whether the option list is currently visible */
+    readonly _showOptions: _angular_core.WritableSignal<boolean | null>;
+    /** List of selected chip values (for multiple mode) */
+    readonly _chipList: _angular_core.WritableSignal<string[]>;
+    /** List of selected option objects (for multiple mode) */
+    readonly _selectedOptions: _angular_core.WritableSignal<SelectOption[]>;
+    /** Filtered options based on search text and chip selection */
+    readonly _filteredOptions: _angular_core.Signal<SelectOption[]>;
+    /**
+     * The value to use for highlighting in the option list.
+     * When searching: shows the matched option (if any) based on exact label match
+     * When not searching: shows the current form value
+     * This keeps highlighting in sync with what will be selected on blur.
+     */
+    readonly _highlightedValue: _angular_core.Signal<string | number | string[] | number[] | null>;
+    /** Whether the user is actively typing/searching */
+    protected readonly _isSearching: _angular_core.WritableSignal<boolean>;
+    /** The text the user is currently typing while searching */
+    protected readonly _userSearchText: _angular_core.WritableSignal<string>;
+    /**
+     * Internal computed that returns true if free text input is allowed.
+     * Combines both `allowFreeText` and deprecated `syncFormWithText` inputs.
+     */
+    protected readonly _allowFreeTextInternal: _angular_core.Signal<boolean>;
+    /**
+     * Finds an option whose label exactly matches the given text (case-insensitive, trimmed).
+     * @param text The text to match against option labels
+     * @returns The matching option, or undefined if no match
+     */
+    protected findMatchingOption(text: string | null | undefined): SelectOption | undefined;
+    /** Timer for search text debounce */
+    private _searchDebounceTimer;
+    /** Last emitted search text (for distinctUntilChanged behavior) */
+    private _lastEmittedSearchText;
+    /** Whether the component has been destroyed */
+    private _isDestroyed;
+    /** Subscription to form value changes */
+    private formValueChangeSubscription;
+    /** Effect to handle input element setup and keyboard events */
+    private readonly onChangeSelectInputEffect;
+    /** Subscription to options changes */
+    private readonly selectOptionsChangeSubscription;
+    /** Subscription to show options changes */
+    private readonly showOptionsChangeSubscription;
+    constructor();
+    setupFormControl(): void;
+    writeValue(val: string | number | string[] | number[] | null): void;
+    onChangedHandler(value: string | number | string[] | number[] | null): void;
+    onBlurHandler(): void;
+    /**
+     * Shows the option list dropdown.
+     */
+    showOptionVisibility(): void;
+    /**
+     * Hides the option list dropdown.
+     */
+    hideOptionVisibility(): void;
+    /**
+     * Handles input text changes (typing).
+     * @param event The input event
+     */
+    onChangeInput(event: Event): void;
+    /**
+     * Handles option selection from the dropdown.
+     * @param value The selected option's value
+     * @param hideOptions Whether to hide the dropdown after selection
+     */
+    onValueChange(value: string | number | null, hideOptions?: boolean): void;
+    /**
+     * Handles keydown events on the input element for accessibility.
+     * @param event The keyboard event
+     */
+    onInputKeydown(event: KeyboardEvent): void;
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to input.
+     */
+    onEscapePressed(): void;
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event: {
+        shiftKey: boolean;
+    }): void;
+    /**
+     * Sets focus to the input element.
+     */
+    focusInput(): void;
+    /**
+     * Handles input blur event.
+     * @param event The focus event
+     */
+    onBlurInput(event: FocusEvent): void;
+    /**
+     * Handles blur event on the option list.
+     * @param event The blur event (truthy if should hide)
+     */
+    onBlurOptionList(event: FocusEvent | boolean): void;
+    /**
+     * Gets the display description for a chip value.
+     * @param chipValue The chip's value
+     * @returns The chip's display label
+     */
+    getDescription(chipValue: string | number): string;
+    getOptionByValue(value: string | number): SelectOption | undefined;
+    getOptionIndex(option: SelectOption): number;
+    /**
+     * Removes a chip from the selection (multiple mode).
+     * @param chipValue The chip value to remove
+     */
+    deleteChip(chipValue: string | number): void;
+    /**
+     * Filters options based on input text.
+     * @param value The search text
+     * @returns Filtered options
+     */
+    protected filterOptions(value: string): SelectOption[];
+    /**
+     * Core method that processes text input and updates form value accordingly.
+     *
+     * Matching logic:
+     * - If text matches an option label (case-insensitive, trimmed) and autoSelectOnExactMatch is true, select that option
+     * - If no match and allowFreeText is true, use the typed text as value
+     * - If no match and allowFreeText is false, clear the value
+     *
+     * @param text The text to process
+     * @param options Configuration options:
+     *   - exitSearchMode: If true, uses onChangedHandler which exits search mode. If false, stays in search mode.
+     *   - updateOnMatch: If true, updates form when match found. If false, only clears on no-match.
+     *   - clearSearchText: If true, clears _userSearchText after processing.
+     */
+    private processTextToFormValue;
+    /**
+     * Handles keyboard events on the input element.
+     */
+    private handleInputKeydown;
+    /**
+     * Handles changes to the select options input.
+     */
+    private handleOptionsChange;
+    /**
+     * Handles form value changes from external sources.
+     */
+    private handleFormValueChange;
+    /**
+     * Handles selecting a value (adding to chip list in multiple mode).
+     */
+    private handleSelectValue;
+    /**
+     * Emits search text change after debounce.
+     * When `updateValueOnType` is true, also updates the form value using the same
+     * matching logic as processTextToFormValue (auto-select matching options, or use free text).
+     */
+    private emitDebouncedSearchText;
+    /**
+     * Updates the form value and internal _value signal without exiting search mode.
+     * This is used when clearing the value during typing - we want to update the form
+     * but keep the user in search mode so they can continue typing.
+     */
+    private updateValueWithoutExitingSearchMode;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangAutocompleteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangAutocompleteComponent, "quang-autocomplete", never, { "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "allowFreeText": { "alias": "allowFreeText"; "required": false; "isSignal": true; }; "autoSelectOnExactMatch": { "alias": "autoSelectOnExactMatch"; "required": false; "isSignal": true; }; "updateValueOnType": { "alias": "updateValueOnType"; "required": false; "isSignal": true; }; "syncFormWithText": { "alias": "syncFormWithText"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "emitOnly": { "alias": "emitOnly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "chipMaxLength": { "alias": "chipMaxLength"; "required": false; "isSignal": true; }; "multiSelectDisplayMode": { "alias": "multiSelectDisplayMode"; "required": false; "isSignal": true; }; "chipsPosition": { "alias": "chipsPosition"; "required": false; "isSignal": true; }; "searchTextDebounce": { "alias": "searchTextDebounce"; "required": false; "isSignal": true; }; "internalFilterOptions": { "alias": "internalFilterOptions"; "required": false; "isSignal": true; }; }, { "selectedOption": "selectedOption"; "searchTextChange": "searchTextChange"; }, never, ["[help-icon]"], true, never>;
+}
+
+export { QuangAutocompleteComponent };

package/components/checkbox/index.d.ts

@@ -0,0 +1,15 @@
+import * as _angular_core from '@angular/core';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+type LabelPosition = 'top' | 'left' | 'right' | 'bottom';
+declare class QuangCheckboxComponent extends QuangBaseComponent<boolean> {
+    labelPosition: _angular_core.InputSignal<LabelPosition>;
+    checkType: _angular_core.InputSignal<"checkbox" | "toggle">;
+    removeMargin: _angular_core.InputSignal<boolean>;
+    onChangedEventHandler($event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangCheckboxComponent, "quang-checkbox", never, { "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "checkType": { "alias": "checkType"; "required": true; "isSignal": true; }; "removeMargin": { "alias": "removeMargin"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]"], true, never>;
+}
+
+export { QuangCheckboxComponent };
+export type { LabelPosition };

package/components/date/index.d.ts

@@ -0,0 +1,103 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import AirDatepicker, { AirDatepickerOptions, AirDatepickerPosition, AirDatepickerLocale } from 'air-datepicker';
+import { QuangTranslationService } from 'quang/translation';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+interface DateRange {
+    dateFrom: string | null;
+    dateTo: string | null;
+}
+type QuangDatepickerOptions = AirDatepickerOptions;
+declare class QuangDateComponent extends QuangBaseComponent<string | DateRange | null> {
+    private readonly _ngZone;
+    private readonly _cdr;
+    private readonly _appRef;
+    private _tickScheduled;
+    /**
+     * Format to use to show on the input field.
+     * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}
+     * Default: dd/MM/yyyy
+     * @default dd/MM/yyyy
+     */
+    dateFormat: _angular_core.InputSignal<string>;
+    /**
+     * Format to use to show on the time inside the input field.
+     * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}
+     * Default: HH:mm
+     * @default HH:mm
+     */
+    timeFormat: _angular_core.InputSignal<string>;
+    /**
+     * Calendar locale, if not provided the component will try to use the one provided in {@link QuangTranslationService}
+     * if the language is not set in {@link QuangTranslationService} it will use the browser language
+     * Use this parameter only to override default behavior
+     */
+    activeLanguageOverride: _angular_core.InputSignal<string | undefined>;
+    /**
+     * If true enable the timepicker inside the calendar
+     */
+    timepicker: _angular_core.InputSignal<boolean>;
+    /**
+     * The message to show inside the input if the date is invalid
+     */
+    invalidDateMessage: _angular_core.InputSignal<string>;
+    showOnlyTimepicker: _angular_core.InputSignal<boolean>;
+    minHour: _angular_core.InputSignal<number>;
+    maxHour: _angular_core.InputSignal<number>;
+    minMinute: _angular_core.InputSignal<number>;
+    maxMinute: _angular_core.InputSignal<number>;
+    minDate: _angular_core.InputSignal<Date | undefined>;
+    maxDate: _angular_core.InputSignal<Date | undefined>;
+    showInline: _angular_core.InputSignal<boolean>;
+    calendarClasses: _angular_core.InputSignal<string>;
+    buttonClass: _angular_core.InputSignal<string>;
+    datepickerOptions: _angular_core.InputSignal<QuangDatepickerOptions | undefined>;
+    _inputForDate: _angular_core.Signal<ElementRef<any> | undefined>;
+    contentTemplate: _angular_core.Signal<ElementRef<any>>;
+    hasNoContent: _angular_core.Signal<boolean>;
+    _quangTranslationService: _angular_core.WritableSignal<QuangTranslationService | undefined>;
+    _quangTranslationActiveLang: _angular_core.Signal<string | null>;
+    multipleDatesSeparator: _angular_core.InputSignal<string>;
+    rangeSelection: _angular_core.InputSignal<boolean>;
+    _activeLanguage: _angular_core.Signal<string | null | undefined>;
+    _airDatepickerInstance: _angular_core.WritableSignal<AirDatepicker<HTMLInputElement> | undefined>;
+    private readonly _airDatepickerInlineMode;
+    searchTextDebounce: _angular_core.InputSignal<number>;
+    targetPosition: _angular_core.WritableSignal<AirDatepickerPosition>;
+    _generateAirDatepickerEffect: _angular_core.EffectRef;
+    valueFormat: _angular_core.Signal<string>;
+    inputValueString: _angular_core.Signal<string>;
+    constructor();
+    showTimepicker: _angular_core.Signal<boolean>;
+    isMouseInsideCalendar: _angular_core.WritableSignal<boolean>;
+    isMouseOutsideCalendar: _angular_core.Signal<boolean>;
+    private _shouldRefocusInputOnHide;
+    setupCalendar(): void;
+    private handleDisabledState;
+    onChangeText($event: Event): void;
+    onBlurHandler(): void;
+    setupInputStringToDate(value: string): Date;
+    onChangedHandler(value: string | DateRange | null): void;
+    private propagateValueToControl;
+    private requestRender;
+    private syncValueFromDatepickerSelection;
+    onHideCalendar(): void;
+    formatDate(val: string | DateRange | null): string;
+    openDatePicker(): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    interceptInputInteraction($event: Event): void;
+    getLocale(): AirDatepickerLocale;
+    private unwrapLocaleModule;
+    onCancel(): void;
+    private dateToUtc;
+    private setCalendarPosition;
+    private setupTimepicker;
+    checkDateMatch(date: string): boolean;
+    private setTimepickerInputValues;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangDateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangDateComponent, "quang-date", never, { "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "activeLanguageOverride": { "alias": "activeLanguageOverride"; "required": false; "isSignal": true; }; "timepicker": { "alias": "timepicker"; "required": false; "isSignal": true; }; "invalidDateMessage": { "alias": "invalidDateMessage"; "required": false; "isSignal": true; }; "showOnlyTimepicker": { "alias": "showOnlyTimepicker"; "required": false; "isSignal": true; }; "minHour": { "alias": "minHour"; "required": false; "isSignal": true; }; "maxHour": { "alias": "maxHour"; "required": false; "isSignal": true; }; "minMinute": { "alias": "minMinute"; "required": false; "isSignal": true; }; "maxMinute": { "alias": "maxMinute"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "showInline": { "alias": "showInline"; "required": false; "isSignal": true; }; "calendarClasses": { "alias": "calendarClasses"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "buttonClass"; "required": false; "isSignal": true; }; "datepickerOptions": { "alias": "datepickerOptions"; "required": false; "isSignal": true; }; "multipleDatesSeparator": { "alias": "multipleDatesSeparator"; "required": false; "isSignal": true; }; "rangeSelection": { "alias": "rangeSelection"; "required": false; "isSignal": true; }; "searchTextDebounce": { "alias": "searchTextDebounce"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]", "*"], true, never>;
+}
+
+export { QuangDateComponent };
+export type { DateRange, QuangDatepickerOptions };

package/components/input/index.d.ts

@@ -0,0 +1,24 @@
+import * as _angular_core from '@angular/core';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+type InputType = 'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color';
+declare class QuangInputComponent extends QuangBaseComponent<string | number> {
+    componentType: _angular_core.InputSignal<InputType>;
+    maxLengthText: _angular_core.InputSignal<number | null>;
+    minLengthText: _angular_core.InputSignal<number | null>;
+    minNumber: _angular_core.InputSignal<number | undefined>;
+    maxNumber: _angular_core.InputSignal<number | undefined>;
+    componentStep: _angular_core.InputSignal<number>;
+    resizable: _angular_core.InputSignal<boolean>;
+    buttonClass: _angular_core.InputSignal<string>;
+    showHidePasswordButton: _angular_core.InputSignal<boolean>;
+    showPassword: _angular_core.WritableSignal<boolean>;
+    componentInputType: _angular_core.Signal<InputType>;
+    constructor();
+    onTogglePasswordVisibility(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangInputComponent, "quang-input", never, { "componentType": { "alias": "componentType"; "required": true; "isSignal": true; }; "maxLengthText": { "alias": "maxLengthText"; "required": false; "isSignal": true; }; "minLengthText": { "alias": "minLengthText"; "required": false; "isSignal": true; }; "minNumber": { "alias": "minNumber"; "required": false; "isSignal": true; }; "maxNumber": { "alias": "maxNumber"; "required": false; "isSignal": true; }; "componentStep": { "alias": "componentStep"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "buttonClass"; "required": false; "isSignal": true; }; "showHidePasswordButton": { "alias": "showHidePasswordButton"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]", "[hide-password]", "[show-password]"], true, never>;
+}
+
+export { QuangInputComponent };
+export type { InputType };