@underlayerdev/ui 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",

package/types/underlayerdev-ui.d.ts

@@ -639,6 +639,12 @@ declare class DropdownComponent {
      * Emitted when a new item is selected from the dropdown.
      */
     selectedItemChange: _angular_core.OutputEmitterRef<DropdownItem>;
+    /**
+     * Emitted when the menu closes, whether or not a selection was made —
+     * the closest thing this component has to a "blur" for form controls
+     * built on top of it (see ul-select's touch output).
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
     /**
      * Handles the selection of a dropdown item.
      * @param index - The index of the selected item
@@ -647,7 +653,7 @@ declare class DropdownComponent {
     onMenuOpened(): void;
     onMenuClosed(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "ul-dropdown", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuTriggerIcons": { "alias": "menuTriggerIcons"; "required": false; "isSignal": true; }; "triggerIconOnly": { "alias": "triggerIconOnly"; "required": false; "isSignal": true; }; "iconOnlyLabel": { "alias": "iconOnlyLabel"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectedItemChange": "selectedItemChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "ul-dropdown", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuTriggerIcons": { "alias": "menuTriggerIcons"; "required": false; "isSignal": true; }; "triggerIconOnly": { "alias": "triggerIconOnly"; "required": false; "isSignal": true; }; "iconOnlyLabel": { "alias": "iconOnlyLabel"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectedItemChange": "selectedItemChange"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /** Border and hover style: border-only (hover = border only), subtle-tint (hover = border + 5% fill). */
@@ -675,6 +681,8 @@ declare class FileInputComponent implements FormValueControl<FileList | null> {
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
     readonly touched: _angular_core.ModelSignal<boolean>;
+    /** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     readonly error: _angular_core.InputSignal<boolean>;
     readonly value: _angular_core.ModelSignal<FileList | null>;
     protected readonly fileInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
@@ -700,7 +708,7 @@ declare class FileInputComponent implements FormValueControl<FileList | null> {
     triggerClick(): void;
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileInputComponent, "ul-file-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "placeholderText": { "alias": "placeholderText"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, never, ["[ul-file-input-left-elements]", "[ul-file-input-right-elements]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileInputComponent, "ul-file-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "placeholderText": { "alias": "placeholderText"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, never, ["[ul-file-input-left-elements]", "[ul-file-input-right-elements]"], true, never>;
 }
 
 declare class FooterComponent {
@@ -876,6 +884,8 @@ declare class InputComponent implements FormValueControl<string> {
     readonly errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
     /** FormUiControl optional: control sets on blur */
     readonly touched: _angular_core.ModelSignal<boolean>;
+    /** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     readonly value: _angular_core.ModelSignal<string>;
     protected readonly ids: {
         controlId: string;
@@ -908,7 +918,7 @@ declare class InputComponent implements FormValueControl<string> {
     focus(): void;
     select(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ul-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "showPasswordLabel": { "alias": "showPasswordLabel"; "required": false; "isSignal": true; }; "hidePasswordLabel": { "alias": "hidePasswordLabel"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "inputEnter": "inputEnter"; }, never, ["[ul-input-left-elements]", "[ul-input-right-elements]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ul-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "showPasswordLabel": { "alias": "showPasswordLabel"; "required": false; "isSignal": true; }; "hidePasswordLabel": { "alias": "hidePasswordLabel"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "inputEnter": "inputEnter"; }, never, ["[ul-input-left-elements]", "[ul-input-right-elements]"], true, never>;
 }
 
 type ModalVariant = 'default' | 'success' | 'error' | 'custom' | 'bottom-sheet' | 'confirmation';
@@ -1375,6 +1385,8 @@ declare class SelectComponent implements FormValueControl<string | null> {
     readonly options: _angular_core.InputSignal<SelectOption[]>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
+    /** FormUiControl optional: [formField] listens to this to mark the bound field touched when the dropdown closes */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     readonly value: _angular_core.ModelSignal<string | null>;
     protected readonly selectedIndex: _angular_core.ModelSignal<number>;
     protected readonly ids: {
@@ -1388,8 +1400,9 @@ declare class SelectComponent implements FormValueControl<string | null> {
     constructor();
     /** Handles index changes coming from the dropdown */
     protected onSelectedIndexChange(index: number): void;
+    protected onDropdownClosed(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ul-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectedIndex": "selectedIndexChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ul-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; "selectedIndex": "selectedIndexChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1548,6 +1561,8 @@ declare class TextareaComponent implements FormValueControl<string> {
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
     readonly touched: _angular_core.ModelSignal<boolean>;
+    /** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     readonly value: _angular_core.ModelSignal<string>;
     protected readonly customField: _angular_core.Signal<TextareaFieldDirective | undefined>;
     protected readonly ids: {
@@ -1567,7 +1582,7 @@ declare class TextareaComponent implements FormValueControl<string> {
     focus(): void;
     select(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "ul-textarea", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "groupFocused": { "alias": "groupFocused"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, ["customField"], ["[ul-textarea-left-elements]", "[ul-textarea-field]", "[ul-textarea-right-elements]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "ul-textarea", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "groupFocused": { "alias": "groupFocused"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, ["customField"], ["[ul-textarea-left-elements]", "[ul-textarea-field]", "[ul-textarea-right-elements]"], true, never>;
 }
 
 export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchSelectComponent, SelectComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };