@brandsync/angular 1.7.0 → 1.9.0

package/README.md

@@ -50,3 +50,76 @@ or via a plain `@import` in `src/styles.css`:
 Note: the vendored stylesheet currently contains a handful of malformed token declarations from an upstream `brandsync-tokens` export step (e.g. `--bs-5-brand-colors-jade-brand-700: {Brand Colors.teal.700};`), which Angular's build may warn about. These are pre-existing in the vendored dependency and harmless — they don't affect any token this library actually uses.
 
 See `@brandsync/wc`'s own README ("Design tokens — required, not optional") for the full explanation.
+
+## Events are typed
+
+Each component's outputs are real Angular outputs whose payload is typed, so you read the value from
+`$event.detail` without `$any`:
+
+```ts
+@Component({
+  standalone: true,
+  imports: [BsCheckbox],
+  template: `<bs-checkbox (bsChange)="onChange($event.detail)">I agree</bs-checkbox>`,
+})
+export class Example {
+  onChange(checked: boolean) {} // `$event.detail` is a `boolean` here
+}
+```
+
+The emitted event is a `BsCheckboxCustomEvent<boolean>` (a `CustomEvent` whose `detail` and `target` are
+typed), exported from `@brandsync/wc`.
+
+## No `CUSTOM_ELEMENTS_SCHEMA`
+
+You do not need `CUSTOM_ELEMENTS_SCHEMA`. Importing a component class (`imports: [BsButton]`) is what
+makes `<bs-button>` a known element in that component's template. If you see "`bs-button` is not a known
+element", the class is not in that component's `imports`.
+
+## Forms: `ngModel` and `formControlName`
+
+`bs-input`, `bs-checkbox`, `bs-switch` and `bs-slider` work with Angular forms. Import the matching
+`ControlValueAccessor` directive next to the component:
+
+| Component | Accessor | Control value |
+| --- | --- | --- |
+| `bs-input` | `TextValueAccessor` | `string` |
+| `bs-checkbox`, `bs-switch` | `BooleanValueAccessor` | `boolean` |
+| `bs-slider` | `NumericValueAccessor` | `number` (not for `type="range"`, which has two values) |
+
+```ts
+import { ReactiveFormsModule } from '@angular/forms';
+import { BsInput, BsCheckbox, TextValueAccessor, BooleanValueAccessor } from '@brandsync/angular';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, BsInput, TextValueAccessor, BsCheckbox, BooleanValueAccessor],
+  template: `
+    <form [formGroup]="form">
+      <bs-input formControlName="email" label="Email"></bs-input>
+      <bs-checkbox formControlName="terms">I accept the terms</bs-checkbox>
+    </form>`,
+})
+export class SignupForm {
+  form = new FormGroup({ email: new FormControl(''), terms: new FormControl(false) });
+}
+```
+
+- `@angular/forms` (`^19.0.0`) is a peer dependency.
+- `bs-input` updates the control when the value is **committed** (blur, Enter, and immediately for the
+  number stepper, dropdown and pin), like `updateOn: 'blur'`. Use `(bsInput)` for every keystroke.
+- `control.disable()` disables the component.
+- `bs-radio` has no accessor yet: bind it with `[checked]` and `(bsChange)`.
+- Two-way `[(value)]` / `[(checked)]` is not provided; use `ngModel` or `formControlName` instead.
+- A native `<form>` also works: give the controls a `name`, and a `<bs-button type="submit">` submits it.
+
+See **Guides / Forms (Angular)** in the Angular Storybook for a working example.
+
+## Boolean inputs need property binding
+
+Bind booleans with `[...]`: `<bs-checkbox [disabled]="true">`, `<bs-input [required]="true">`. A bare
+attribute (`<bs-checkbox disabled>`) is **not** coerced: Angular passes it as an empty string, which the
+component treats as `false`. (Stencil's Angular output target can generate a coercion transform for this
+via its `booleanAttributes` option, but that currently does not compile under this package's TypeScript
+configuration, so it is not enabled.)
+

package/fesm2022/brandsync-angular.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, Output, ChangeDetectionStrategy, Component, HostListener, Directive, forwardRef } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { defineCustomElement as defineCustomElement$1 } from '@brandsync/wc/dist/components/bs-accordion.js';
 import { defineCustomElement as defineCustomElement$2 } from '@brandsync/wc/dist/components/bs-ai-disclaimer.js';
@@ -56,6 +56,7 @@ import { defineCustomElement as defineCustomElement$P } from '@brandsync/wc/dist
 import { defineCustomElement as defineCustomElement$Q } from '@brandsync/wc/dist/components/bs-tabs.js';
 import { defineCustomElement as defineCustomElement$R } from '@brandsync/wc/dist/components/bs-toast.js';
 import { defineCustomElement as defineCustomElement$S } from '@brandsync/wc/dist/components/bs-tooltip.js';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /* eslint-disable */
 /* tslint:disable */
@@ -341,13 +342,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 let BsBreadcrumb = class BsBreadcrumb {
     z;
     el;
+    bsNavigate = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsBreadcrumb, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsBreadcrumb, isStandalone: true, selector: "bs-breadcrumb", inputs: { current: "current", href: "href", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsBreadcrumb, isStandalone: true, selector: "bs-breadcrumb", inputs: { current: "current", href: "href", size: "size" }, outputs: { bsNavigate: "bsNavigate" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsBreadcrumb = __decorate([
     ProxyCmp({
@@ -363,18 +365,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['current', 'href', 'size'],
+                    outputs: ['bsNavigate'],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsNavigate: [{
+                type: Output
+            }] } });
 let BsBreadcrumbOverflow = class BsBreadcrumbOverflow {
     z;
     el;
+    bsNavigate = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsBreadcrumbOverflow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsBreadcrumbOverflow, isStandalone: true, selector: "bs-breadcrumb-overflow", inputs: { items: "items", overflowLabel: "overflowLabel", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsBreadcrumbOverflow, isStandalone: true, selector: "bs-breadcrumb-overflow", inputs: { items: "items", overflowLabel: "overflowLabel", size: "size" }, outputs: { bsNavigate: "bsNavigate" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsBreadcrumbOverflow = __decorate([
     ProxyCmp({
@@ -390,8 +396,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['items', 'overflowLabel', 'size'],
+                    outputs: ['bsNavigate'],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsNavigate: [{
+                type: Output
+            }] } });
 let BsBreadcrumbs = class BsBreadcrumbs {
     z;
     el;
@@ -735,12 +744,12 @@ let BsCheckbox = class BsCheckbox {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsCheckbox, isStandalone: true, selector: "bs-checkbox", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", error: "error", indeterminate: "indeterminate", size: "size" }, outputs: { bsChange: "bsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsCheckbox, isStandalone: true, selector: "bs-checkbox", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", error: "error", indeterminate: "indeterminate", name: "name", required: "required", size: "size", value: "value" }, outputs: { bsChange: "bsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsCheckbox = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$l,
-        inputs: ['ariaLabel', 'checked', 'disabled', 'error', 'indeterminate', 'size']
+        inputs: ['ariaLabel', 'checked', 'disabled', 'error', 'indeterminate', 'name', 'required', 'size', 'value']
     })
 ], BsCheckbox);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsCheckbox, decorators: [{
@@ -750,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaLabel', 'checked', 'disabled', 'error', 'indeterminate', 'size'],
+                    inputs: ['ariaLabel', 'checked', 'disabled', 'error', 'indeterminate', 'name', 'required', 'size', 'value'],
                     outputs: ['bsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsChange: [{
@@ -1126,12 +1135,12 @@ let BsInlineTab = class BsInlineTab {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsInlineTab, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsInlineTab, isStandalone: true, selector: "bs-inline-tab", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", selected: "selected" }, outputs: { bsSelect: "bsSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsInlineTab, isStandalone: true, selector: "bs-inline-tab", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", selected: "selected", tabbable: "tabbable", value: "value" }, outputs: { bsSelect: "bsSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsInlineTab = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$x,
-        inputs: ['ariaLabel', 'disabled', 'selected']
+        inputs: ['ariaLabel', 'disabled', 'selected', 'tabbable', 'value']
     })
 ], BsInlineTab);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsInlineTab, decorators: [{
@@ -1141,7 +1150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaLabel', 'disabled', 'selected'],
+                    inputs: ['ariaLabel', 'disabled', 'selected', 'tabbable', 'value'],
                     outputs: ['bsSelect'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsSelect: [{
@@ -1163,12 +1172,12 @@ let BsInput = class BsInput {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsInput, isStandalone: true, selector: "bs-input", inputs: { chips: "chips", country: "country", countryOptions: "countryOptions", description: "description", disabled: "disabled", error: "error", initialsTitle: "initialsTitle", label: "label", length: "length", max: "max", min: "min", open: "open", options: "options", placeholder: "placeholder", required: "required", rows: "rows", step: "step", titleOptions: "titleOptions", type: "type", value: "value" }, outputs: { bsInput: "bsInput", bsChange: "bsChange", bsOpen: "bsOpen", bsChipAdd: "bsChipAdd", bsChipRemove: "bsChipRemove", bsTitleChange: "bsTitleChange", bsCountryChange: "bsCountryChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsInput, isStandalone: true, selector: "bs-input", inputs: { chips: "chips", country: "country", countryOptions: "countryOptions", description: "description", disabled: "disabled", error: "error", initialsTitle: "initialsTitle", label: "label", length: "length", max: "max", min: "min", name: "name", open: "open", options: "options", placeholder: "placeholder", required: "required", rows: "rows", step: "step", titleOptions: "titleOptions", type: "type", value: "value" }, outputs: { bsInput: "bsInput", bsChange: "bsChange", bsOpen: "bsOpen", bsChipAdd: "bsChipAdd", bsChipRemove: "bsChipRemove", bsTitleChange: "bsTitleChange", bsCountryChange: "bsCountryChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsInput = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$y,
-        inputs: ['chips', 'country', 'countryOptions', 'description', 'disabled', 'error', 'initialsTitle', 'label', 'length', 'max', 'min', 'open', 'options', 'placeholder', 'required', 'rows', 'step', 'titleOptions', 'type', 'value']
+        inputs: ['chips', 'country', 'countryOptions', 'description', 'disabled', 'error', 'initialsTitle', 'label', 'length', 'max', 'min', 'name', 'open', 'options', 'placeholder', 'required', 'rows', 'step', 'titleOptions', 'type', 'value']
     })
 ], BsInput);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsInput, decorators: [{
@@ -1178,7 +1187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['chips', 'country', 'countryOptions', 'description', 'disabled', 'error', 'initialsTitle', 'label', 'length', 'max', 'min', 'open', 'options', 'placeholder', 'required', 'rows', 'step', 'titleOptions', 'type', 'value'],
+                    inputs: ['chips', 'country', 'countryOptions', 'description', 'disabled', 'error', 'initialsTitle', 'label', 'length', 'max', 'min', 'name', 'open', 'options', 'placeholder', 'required', 'rows', 'step', 'titleOptions', 'type', 'value'],
                     outputs: ['bsInput', 'bsChange', 'bsOpen', 'bsChipAdd', 'bsChipRemove', 'bsTitleChange', 'bsCountryChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsInput: [{
@@ -1285,18 +1294,19 @@ let BsNavigationDrawer = class BsNavigationDrawer {
     el;
     bsCollapse = new EventEmitter();
     bsSearchClick = new EventEmitter();
+    bsClose = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsNavigationDrawer, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsNavigationDrawer, isStandalone: true, selector: "bs-navigation-drawer", inputs: { collapsed: "collapsed", collapsible: "collapsible", heading: "heading", logoBackground: "logoBackground", showLogo: "showLogo" }, outputs: { bsCollapse: "bsCollapse", bsSearchClick: "bsSearchClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsNavigationDrawer, isStandalone: true, selector: "bs-navigation-drawer", inputs: { collapsed: "collapsed", collapsible: "collapsible", heading: "heading", logoBackground: "logoBackground", open: "open", showLogo: "showLogo" }, outputs: { bsCollapse: "bsCollapse", bsSearchClick: "bsSearchClick", bsClose: "bsClose" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsNavigationDrawer = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$C,
-        inputs: ['collapsed', 'collapsible', 'heading', 'logoBackground', 'showLogo']
+        inputs: ['collapsed', 'collapsible', 'heading', 'logoBackground', 'open', 'showLogo']
     })
 ], BsNavigationDrawer);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsNavigationDrawer, decorators: [{
@@ -1306,13 +1316,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['collapsed', 'collapsible', 'heading', 'logoBackground', 'showLogo'],
-                    outputs: ['bsCollapse', 'bsSearchClick'],
+                    inputs: ['collapsed', 'collapsible', 'heading', 'logoBackground', 'open', 'showLogo'],
+                    outputs: ['bsCollapse', 'bsSearchClick', 'bsClose'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsCollapse: [{
                 type: Output
             }], bsSearchClick: [{
                 type: Output
+            }], bsClose: [{
+                type: Output
             }] } });
 let BsNavigationDrawerItem = class BsNavigationDrawerItem {
     z;
@@ -1415,12 +1427,12 @@ let BsProgress = class BsProgress {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsProgress, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsProgress, isStandalone: true, selector: "bs-progress", inputs: { showLabel: "showLabel", size: "size", strokeWidth: "strokeWidth", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsProgress, isStandalone: true, selector: "bs-progress", inputs: { ariaLabel: "ariaLabel", showLabel: "showLabel", size: "size", strokeWidth: "strokeWidth", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsProgress = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$G,
-        inputs: ['showLabel', 'size', 'strokeWidth', 'type', 'value']
+        inputs: ['ariaLabel', 'showLabel', 'size', 'strokeWidth', 'type', 'value']
     })
 ], BsProgress);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsProgress, decorators: [{
@@ -1430,7 +1442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['showLabel', 'size', 'strokeWidth', 'type', 'value'],
+                    inputs: ['ariaLabel', 'showLabel', 'size', 'strokeWidth', 'type', 'value'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
 let BsProgressLinear = class BsProgressLinear {
@@ -1502,12 +1514,12 @@ let BsSlider = class BsSlider {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsSlider, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsSlider, isStandalone: true, selector: "bs-slider", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", label: "label", max: "max", min: "min", segments: "segments", showLabel: "showLabel", step: "step", type: "type", value: "value", valueEnd: "valueEnd", valueStart: "valueStart" }, outputs: { bsChange: "bsChange", bsRangeChange: "bsRangeChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsSlider, isStandalone: true, selector: "bs-slider", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", label: "label", max: "max", min: "min", name: "name", segments: "segments", showLabel: "showLabel", step: "step", type: "type", value: "value", valueEnd: "valueEnd", valueStart: "valueStart" }, outputs: { bsChange: "bsChange", bsRangeChange: "bsRangeChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsSlider = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$J,
-        inputs: ['ariaLabel', 'disabled', 'label', 'max', 'min', 'segments', 'showLabel', 'step', 'type', 'value', 'valueEnd', 'valueStart']
+        inputs: ['ariaLabel', 'disabled', 'label', 'max', 'min', 'name', 'segments', 'showLabel', 'step', 'type', 'value', 'valueEnd', 'valueStart']
     })
 ], BsSlider);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsSlider, decorators: [{
@@ -1517,7 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaLabel', 'disabled', 'label', 'max', 'min', 'segments', 'showLabel', 'step', 'type', 'value', 'valueEnd', 'valueStart'],
+                    inputs: ['ariaLabel', 'disabled', 'label', 'max', 'min', 'name', 'segments', 'showLabel', 'step', 'type', 'value', 'valueEnd', 'valueStart'],
                     outputs: ['bsChange', 'bsRangeChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsChange: [{
@@ -1654,12 +1666,12 @@ let BsSwitch = class BsSwitch {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsSwitch, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsSwitch, isStandalone: true, selector: "bs-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", size: "size" }, outputs: { bsChange: "bsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsSwitch, isStandalone: true, selector: "bs-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", name: "name", size: "size", value: "value" }, outputs: { bsChange: "bsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsSwitch = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$O,
-        inputs: ['ariaLabel', 'checked', 'disabled', 'size']
+        inputs: ['ariaLabel', 'checked', 'disabled', 'name', 'size', 'value']
     })
 ], BsSwitch);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsSwitch, decorators: [{
@@ -1669,7 +1681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaLabel', 'checked', 'disabled', 'size'],
+                    inputs: ['ariaLabel', 'checked', 'disabled', 'name', 'size', 'value'],
                     outputs: ['bsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsChange: [{
@@ -1685,12 +1697,12 @@ let BsTab = class BsTab {
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsTab, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsTab, isStandalone: true, selector: "bs-tab", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", iconPosition: "iconPosition", selected: "selected" }, outputs: { bsSelect: "bsSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsTab, isStandalone: true, selector: "bs-tab", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", iconPosition: "iconPosition", selected: "selected", tabbable: "tabbable", value: "value" }, outputs: { bsSelect: "bsSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsTab = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$P,
-        inputs: ['ariaLabel', 'disabled', 'iconPosition', 'selected']
+        inputs: ['ariaLabel', 'disabled', 'iconPosition', 'selected', 'tabbable', 'value']
     })
 ], BsTab);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsTab, decorators: [{
@@ -1700,7 +1712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaLabel', 'disabled', 'iconPosition', 'selected'],
+                    inputs: ['ariaLabel', 'disabled', 'iconPosition', 'selected', 'tabbable', 'value'],
                     outputs: ['bsSelect'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsSelect: [{
@@ -1709,18 +1721,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 let BsTabs = class BsTabs {
     z;
     el;
+    bsChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsTabs, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsTabs, isStandalone: true, selector: "bs-tabs", inputs: { orientation: "orientation", type: "type" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BsTabs, isStandalone: true, selector: "bs-tabs", inputs: { orientation: "orientation", type: "type", value: "value" }, outputs: { bsChange: "bsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 BsTabs = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineCustomElement$Q,
-        inputs: ['orientation', 'type']
+        inputs: ['orientation', 'type', 'value']
     })
 ], BsTabs);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BsTabs, decorators: [{
@@ -1730,9 +1743,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['orientation', 'type'],
+                    inputs: ['orientation', 'type', 'value'],
+                    outputs: ['bsChange'],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { bsChange: [{
+                type: Output
+            }] } });
 let BsToast = class BsToast {
     z;
     el;
@@ -1849,6 +1865,147 @@ const DIRECTIVES = [
     BsTooltip
 ];
 
+class ValueAccessor {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    lastValue;
+    constructor(el) {
+        this.el = el;
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+    }
+    handleChangeEvent(value) {
+        if (value !== this.lastValue) {
+            this.lastValue = value;
+            this.onChange(value);
+        }
+    }
+    _handleBlurEvent() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ValueAccessor, isStandalone: true, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class TextValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TextValueAccessor, isStandalone: true, selector: "bs-input", host: { listeners: { "bsChange": "handleChangeEvent($event.target?.[\"value\"])" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextValueAccessor),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'bs-input',
+                    host: {
+                        '(bsChange)': 'handleChangeEvent($event.target?.["value"])'
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextValueAccessor),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class BooleanValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: BooleanValueAccessor, isStandalone: true, selector: "bs-checkbox, bs-switch", host: { listeners: { "bsChange": "handleChangeEvent($event.target?.[\"checked\"])" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BooleanValueAccessor),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BooleanValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'bs-checkbox, bs-switch',
+                    host: {
+                        '(bsChange)': 'handleChangeEvent($event.target?.["checked"])'
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BooleanValueAccessor),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class NumericValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    registerOnChange(fn) {
+        super.registerOnChange(value => {
+            fn(value === '' ? null : parseFloat(value));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NumericValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: NumericValueAccessor, isStandalone: true, selector: "bs-slider", host: { listeners: { "bsChange": "handleChangeEvent($event.target?.[\"value\"])" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumericValueAccessor),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NumericValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'bs-slider',
+                    host: {
+                        '(bsChange)': 'handleChangeEvent($event.target?.["value"])'
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumericValueAccessor),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
 /*
  * Public API surface of @brandsync/angular
  */
@@ -1857,5 +2014,5 @@ const DIRECTIVES = [
  * Generated bundle index. Do not edit.
  */
 
-export { BsAccordion, BsAiDisclaimer, BsAiGreeting, BsAiThinking, BsAttachment, BsAttachmentList, BsAvatar, BsBadge, BsBreadcrumb, BsBreadcrumbOverflow, BsBreadcrumbs, BsButton, BsButtonSkeleton, BsCard, BsCarousel, BsChatbotFeedback, BsChatbotHeader, BsChatbotResponseAction, BsChatbotSourcesDrawer, BsChatbotSuggestionButton, BsCheckbox, BsCheckboxSkeleton, BsChipFilter, BsChipInformative, BsChipInput, BsComposer, BsComposerStatusBanner, BsDataTable, BsDialog, BsFileUpload, BsFileUploadItem, BsIconButton, BsInlineTab, BsInput, BsLogo, BsMenu, BsMenuItem, BsNavigationDrawer, BsNavigationDrawerItem, BsNavigationHeader, BsPagination, BsProgress, BsProgressLinear, BsRadio, BsSlider, BsSnackbar, BsSourceLink, BsStepper, BsStepperStep, BsSwitch, BsTab, BsTabs, BsToast, BsTooltip, DIRECTIVES };
+export { BooleanValueAccessor, BsAccordion, BsAiDisclaimer, BsAiGreeting, BsAiThinking, BsAttachment, BsAttachmentList, BsAvatar, BsBadge, BsBreadcrumb, BsBreadcrumbOverflow, BsBreadcrumbs, BsButton, BsButtonSkeleton, BsCard, BsCarousel, BsChatbotFeedback, BsChatbotHeader, BsChatbotResponseAction, BsChatbotSourcesDrawer, BsChatbotSuggestionButton, BsCheckbox, BsCheckboxSkeleton, BsChipFilter, BsChipInformative, BsChipInput, BsComposer, BsComposerStatusBanner, BsDataTable, BsDialog, BsFileUpload, BsFileUploadItem, BsIconButton, BsInlineTab, BsInput, BsLogo, BsMenu, BsMenuItem, BsNavigationDrawer, BsNavigationDrawerItem, BsNavigationHeader, BsPagination, BsProgress, BsProgressLinear, BsRadio, BsSlider, BsSnackbar, BsSourceLink, BsStepper, BsStepperStep, BsSwitch, BsTab, BsTabs, BsToast, BsTooltip, DIRECTIVES, NumericValueAccessor, TextValueAccessor, ValueAccessor };
 //# sourceMappingURL=brandsync-angular.mjs.map