@basis-ng/primitives 0.0.1-alpha.18 → 0.0.1-alpha.19

package/core/components/input/input.component.d.ts

@@ -5,22 +5,6 @@ export declare class Input implements AfterViewInit {
      * The type of the input.
      */
     readonly type: import("@angular/core").InputSignal<"number" | "text" | "password" | "email">;
-    /**
-     * The placeholder text for the input.
-     */
-    readonly placeholder: import("@angular/core").InputSignal<string>;
-    /**
-     * The value of the input.
-     */
-    readonly value: import("@angular/core").WritableSignal<string | number | null>;
-    /**
-     * Whether the input is invalid.
-     */
-    readonly invalid: import("@angular/core").ModelSignal<boolean>;
-    /**
-     * Whether the input is disabled.
-     */
-    readonly disabled: import("@angular/core").ModelSignal<boolean>;
     /**
      * The maximum width of the input.
      */
@@ -37,14 +21,6 @@ export declare class Input implements AfterViewInit {
      * Whether the input type is number.
      */
     readonly isNumberType: import("@angular/core").Signal<boolean>;
-    /**
-     * Whether the input is focused.
-     */
-    readonly focused: import("@angular/core").WritableSignal<boolean>;
-    /**
-     * Event emitted when the value changes.
-     */
-    valueChange: import("@angular/core").OutputEmitterRef<string | number | null>;
     /**
      * Reference to the input element.
      */
@@ -53,10 +29,19 @@ export declare class Input implements AfterViewInit {
      * Reference to the ngModel directive.
      */
     private ngModel;
+    /**
+     * The size of the input.
+     */
+    readonly size: import("@angular/core").InputSignal<"1" | "2" | "3">;
     /**
      * After the view has been initialized, set the value of the select.
      */
     ngAfterViewInit(): void;
+    /**
+     * Sets the value of the input element.
+     * @param value The value to set.
+     */
+    setValue(value: string): void;
     /**
      * Handles the input event.
      * @param event The input event.
@@ -74,5 +59,5 @@ export declare class Input implements AfterViewInit {
      */
     formatNumber(value: string | null): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Input, "input[b-input]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "numberType": { "alias": "numberType"; "required": false; "isSignal": true; }; }, { "invalid": "invalidChange"; "disabled": "disabledChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Input, "input[b-input]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "numberType": { "alias": "numberType"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/fesm2022/basis-ng-primitives.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, model, computed, output, contentChildren, viewChild, contentChild, linkedSignal, forwardRef, HostListener, effect, afterNextRender, afterRenderEffect } from '@angular/core';
+import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, computed, output, contentChildren, viewChild, contentChild, linkedSignal, model, forwardRef, HostListener, effect, afterNextRender, afterRenderEffect } from '@angular/core';
 import { NgStyle, NgClass, CommonModule } from '@angular/common';
 import { NgModel, NG_VALUE_ACCESSOR, ControlContainer } from '@angular/forms';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
@@ -159,22 +159,6 @@ class Input {
      * The type of the input.
      */
     type = input('text');
-    /**
-     * The placeholder text for the input.
-     */
-    placeholder = input('');
-    /**
-     * The value of the input.
-     */
-    value = signal(null);
-    /**
-     * Whether the input is invalid.
-     */
-    invalid = model(false);
-    /**
-     * Whether the input is disabled.
-     */
-    disabled = model(false);
     /**
      * The maximum width of the input.
      */
@@ -191,14 +175,6 @@ class Input {
      * Whether the input type is number.
      */
     isNumberType = computed(() => this.type() === 'number');
-    /**
-     * Whether the input is focused.
-     */
-    focused = signal(false);
-    /**
-     * Event emitted when the value changes.
-     */
-    valueChange = output();
     /**
      * Reference to the input element.
      */
@@ -207,12 +183,26 @@ class Input {
      * Reference to the ngModel directive.
      */
     ngModel = inject(NgModel, { optional: true });
+    /**
+     * The size of the input.
+     */
+    size = input('2');
     /**
      * After the view has been initialized, set the value of the select.
      */
     ngAfterViewInit() {
         const value = this.el.nativeElement.value || this.ngModel?.model;
-        this.value.set(this.isNumberType() ? this.formatNumber(value) : value);
+        if (this.isNumberType()) {
+            const formattedValue = this.formatNumber(value) || '';
+            this.setValue(formattedValue);
+        }
+    }
+    /**
+     * Sets the value of the input element.
+     * @param value The value to set.
+     */
+    setValue(value) {
+        this.el.nativeElement.value = value;
     }
     /**
      * Handles the input event.
@@ -222,8 +212,7 @@ class Input {
         const target = event.target;
         // If the input is not of number type, update the value and emit the value change event.
         if (!this.isNumberType()) {
-            this.value.set(target.value);
-            this.valueChange.emit(target.value);
+            this.setValue(target.value);
         }
     }
     /**
@@ -231,13 +220,10 @@ class Input {
      * @param event - The blur event.
      */
     onBlur(event) {
-        this.focused.set(false);
         // If the input is of number type, format the value and emit the value change event.
         if (this.isNumberType()) {
             const formattedValue = this.formatNumber(event.target.value);
-            this.el.nativeElement.value = formattedValue || '';
-            this.value.set(formattedValue);
-            this.valueChange.emit(formattedValue);
+            this.setValue(formattedValue || '');
         }
     }
     /**
@@ -257,7 +243,7 @@ class Input {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Input, isStandalone: true, selector: "input[b-input]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, numberType: { classPropertyName: "numberType", publicName: "numberType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "input": "onInput($event)", "focus": "focused.set(true)", "blur": "onBlur($event)" }, properties: { "type": "type()", "placeholder": "placeholder() || \"\"", "class.ng-invalid": "invalid()", "class.disabled": "disabled()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Input, isStandalone: true, selector: "input[b-input]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, numberType: { classPropertyName: "numberType", publicName: "numberType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)" }, properties: { "type": "type()", "style.max-width": "maxWidth()", "class": " \"size-\" + size() " } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Input, decorators: [{
             type: Component,
@@ -266,13 +252,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     template: ``,
                     host: {
                         '[type]': 'type()',
-                        '[placeholder]': 'placeholder() || ""',
-                        '[class.ng-invalid]': 'invalid()',
-                        '[class.disabled]': 'disabled()',
                         '[style.max-width]': 'maxWidth()',
                         '(input)': 'onInput($event)',
-                        '(focus)': 'focused.set(true)',
                         '(blur)': 'onBlur($event)',
+                        '[class]': ' "size-" + size() ',
                     },
                 }]
         }] });
@@ -1641,63 +1624,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-class Label {
-    /**
-     * The input element.
-     */
-    input = contentChild(Input);
-    /**
-     * The switch element.
-     */
-    switch = contentChild(Switch);
-    /**
-     * The checkbox element.
-     */
-    checkbox = contentChild(Checkbox);
-    /**
-     * The textarea element.
-     */
-    textarea = contentChild(Textarea);
-    /**
-     * Whether the label should be up.
-     */
-    labelUp = computed(() => {
-        const input = this.input();
-        const textarea = this.textarea();
-        return (input?.focused() ||
-            input?.value() ||
-            input?.placeholder() ||
-            textarea?.focused() ||
-            textarea?.value() ||
-            textarea?.placeholder());
-    });
-    /**
-     * The label width.
-     */
-    maxWidth = computed(() => {
-        const input = this.input();
-        const textarea = this.textarea();
-        return input?.maxWidth() || textarea?.cols();
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Label, isStandalone: true, selector: "b-label", host: { properties: { "class.up": "labelUp()", "style.max-width": "maxWidth()", "class.is-switch": "switch()", "class.is-checkbox": "checkbox()", "class.is-textarea": "textarea()" } }, queries: [{ propertyName: "input", first: true, predicate: Input, descendants: true, isSignal: true }, { propertyName: "switch", first: true, predicate: Switch, descendants: true, isSignal: true }, { propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true, isSignal: true }, { propertyName: "textarea", first: true, predicate: Textarea, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-label',
-                    imports: [],
-                    template: `<ng-content />`,
-                    host: {
-                        '[class.up]': 'labelUp()',
-                        '[style.max-width]': 'maxWidth()',
-                        '[class.is-switch]': 'switch()',
-                        '[class.is-checkbox]': 'checkbox()',
-                        '[class.is-textarea]': 'textarea()',
-                    },
-                }]
-        }] });
-
 class Badge {
     /** The variant of the badge. */
     variant = input('primary');
@@ -2651,7 +2577,7 @@ class CommandComponent {
       (keydown.arrowUp)="commandOptions()?.previousOption()"
       (keydown.enter)="commandOptions()?.selectOption()"
       (blur)="isDesktop() && trappedInput.el.nativeElement.focus()" />
-    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: Input, selector: "input[b-input]", inputs: ["type", "placeholder", "invalid", "disabled", "maxWidth", "decimals", "numberType"], outputs: ["invalidChange", "disabledChange", "valueChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: Input, selector: "input[b-input]", inputs: ["type", "maxWidth", "decimals", "numberType", "size"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
@@ -2972,5 +2898,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, ComboboxComponent, CommandComponent, CommandOptionsComponent, Icon, InViewportDirective, InViewportService, Input, InputGroup, Label, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, OptionComponent, Range, ResponsiveService, Row, RowItem, SelectComponent, SelectOptionsComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
+export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, ComboboxComponent, CommandComponent, CommandOptionsComponent, Icon, InViewportDirective, InViewportService, Input, InputGroup, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, OptionComponent, Range, ResponsiveService, Row, RowItem, SelectComponent, SelectOptionsComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map