ud-components 0.1.0 → 0.1.2

package/lib/button/button.component.d.ts

@@ -0,0 +1,39 @@
+import * as i0 from "@angular/core";
+export type UdButtonVariant = 'flat' | 'stroked' | 'icon-only';
+export type UdButtonColor = 'primary' | 'secondary' | 'danger';
+export type UdButtonSize = 'sm' | 'md' | 'lg';
+export type UdButtonIconPosition = 'left' | 'right';
+/**
+ * Styled button that wraps Angular Material with the library's design tokens.
+ *
+ * Usage:
+ *   <ud-button>Save</ud-button>
+ *   <ud-button variant="stroked" color="secondary">Cancel</ud-button>
+ *   <ud-button [loading]="isSaving" icon="save">Save</ud-button>
+ *   <ud-button color="danger" variant="stroked">Delete</ud-button>
+ */
+export declare class UdButtonComponent {
+    /** Visual style of the button */
+    variant: UdButtonVariant;
+    /** Colour role */
+    color: UdButtonColor;
+    /** Size preset */
+    size: UdButtonSize;
+    /** Native button type */
+    type: 'button' | 'submit' | 'reset';
+    /** Material icon name. Shows a spinner when loading is true instead. */
+    icon?: string;
+    /** Which side the icon appears on */
+    iconPosition: UdButtonIconPosition;
+    /** Font set for the icon (default: material-icons-outlined) */
+    iconFontSet: string;
+    /** Shows a spinner and disables the button */
+    loading: boolean;
+    /** Explicitly disable the button */
+    disabled: boolean;
+    /** Stretch to fill the container width */
+    fullWidth: boolean;
+    get isDisabled(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UdButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UdButtonComponent, "ud-button", never, { "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconFontSet": { "alias": "iconFontSet"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/edit-view/edit-view-section.directive.d.ts

@@ -2,7 +2,9 @@ import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class EditViewSectionDirective {
     templateRef: TemplateRef<any>;
+    label: string;
+    icon: string;
     constructor(templateRef: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<EditViewSectionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EditViewSectionDirective, "[editViewSection]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EditViewSectionDirective, "[editViewSection]", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/form-fields/multi-select/multi-select.component.d.ts

@@ -0,0 +1,50 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export interface UdSelectOption {
+    /** The value stored in the form control */
+    value: any;
+    /** Already-translated, human-readable label */
+    label: string;
+}
+/**
+ * Styled multi-select with a chip trigger that participates in the parent FormGroup.
+ *
+ * Usage:
+ *   <ud-multi-select
+ *     controlName="roles"
+ *     label="Roles"
+ *     icon="sell"
+ *     [options]="rolesOptions"
+ *     [maxChipsVisible]="2"
+ *     moreText="+{n} more" />
+ *
+ * Pass options with already-resolved labels (translate before passing in):
+ *   rolesOptions = roles.map(r => ({ value: r.key, label: translate(r.translationKey) }));
+ */
+export declare class MultiSelectComponent implements OnInit, OnDestroy {
+    controlName: string;
+    label: string;
+    icon?: string;
+    iconFontSet: string;
+    options: UdSelectOption[];
+    /** How many chips to show before collapsing into "+N more" */
+    maxChipsVisible: number;
+    /**
+     * Template for the overflow chip. Use `{n}` as the placeholder for the count.
+     * Default: "+{n} more"
+     */
+    moreText: string;
+    selectedValues: any[];
+    private controlContainer;
+    private destroy$;
+    private labelMap;
+    get control(): FormControl;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getLabelFor(value: any): string;
+    getMoreText(count: number): string;
+    private buildLabelMap;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ud-multi-select", never, { "controlName": { "alias": "controlName"; "required": true; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconFontSet": { "alias": "iconFontSet"; "required": false; }; "options": { "alias": "options"; "required": false; }; "maxChipsVisible": { "alias": "maxChipsVisible"; "required": false; }; "moreText": { "alias": "moreText"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/form-fields/pill-toggle/pill-toggle.component.d.ts

@@ -0,0 +1,27 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export interface PillToggleOption {
+    value: string;
+    label: string;
+}
+/**
+ * Segmented pill toggle that participates in the parent FormGroup.
+ * Visually mimics a mat-form-field outline field so it aligns perfectly
+ * alongside real mat-form-fields in a form grid.
+ *
+ * Usage:
+ *   <ud-pill-toggle
+ *     controlName="gender"
+ *     label="Gender"
+ *     [options]="[{ value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }]" />
+ */
+export declare class PillToggleComponent {
+    controlName: string;
+    label: string;
+    options: PillToggleOption[];
+    private controlContainer;
+    get control(): FormControl;
+    select(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PillToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PillToggleComponent, "ud-pill-toggle", never, { "controlName": { "alias": "controlName"; "required": true; }; "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/form-fields/text-input/text-input.component.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+/**
+ * Styled text input that participates in the parent FormGroup.
+ *
+ * Usage:
+ *   <ud-text-input
+ *     controlName="name"
+ *     label="Full name"
+ *     icon="account_circle"
+ *     placeholder="Enter name" />
+ */
+export declare class TextInputComponent {
+    /** Key of the control inside the parent FormGroup */
+    controlName: string;
+    label: string;
+    placeholder: string;
+    type: 'text' | 'email' | 'password' | 'number';
+    /** Material icon name. Leave empty to show no icon. */
+    icon?: string;
+    iconFontSet: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "ud-text-input", never, { "controlName": { "alias": "controlName"; "required": true; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconFontSet": { "alias": "iconFontSet"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ud-components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0"

package/public-api.d.ts

@@ -13,6 +13,10 @@ export * from './lib/progress-bar/progress-bar.component';
 export * from './lib/summary-view/summary-view.component';
 export * from './lib/tabs/tabs.component';
 export * from './lib/tel-input/tel-input.component';
+export * from './lib/form-fields/text-input/text-input.component';
+export * from './lib/form-fields/multi-select/multi-select.component';
+export * from './lib/form-fields/pill-toggle/pill-toggle.component';
+export * from './lib/button/button.component';
 export * from './enums/application-status.enum';
 export * from './enums/custom-table.enum';
 export * from './enums/modal-input-type.enum';