@c2n/angular 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { C2_FORM_ACCESSORS, C2CheckedAccessor, C2ValueAccessor } from './value-accessors.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { C2_FORM_ACCESSORS, C2CheckedAccessor, C2ValueAccessor } from './value-accessors.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA","sourcesContent":["export { C2_FORM_ACCESSORS, C2CheckedAccessor, C2ValueAccessor } from './value-accessors.js'\n"]}

package/dist/value-accessors.d.ts

@@ -0,0 +1,39 @@
+import { type ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+/**
+ * Binds `ngModel` / `formControl` / `formControlName` to the `value` of a c2 form control.
+ *
+ * The control is read on `input`, which every one of these components fires when its value changes, and marked
+ * touched on `focusout` — `blur` does not cross the shadow boundary from the inner control.
+ *
+ * A `c2-select` carries its selection as a `string[]`, so that is what the bound model receives.
+ */
+export declare class C2ValueAccessor implements ControlValueAccessor {
+    private readonly element;
+    private notifyChange;
+    private notifyTouched;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected handleInput(): void;
+    protected handleTouched(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C2ValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C2ValueAccessor, "c2-autocomplete[ngModel], c2-autocomplete[formControl], c2-autocomplete[formControlName], c2-chat-input[ngModel], c2-chat-input[formControl], c2-chat-input[formControlName], c2-radio-group[ngModel], c2-radio-group[formControl], c2-radio-group[formControlName], c2-select[ngModel], c2-select[formControl], c2-select[formControlName], c2-slider[ngModel], c2-slider[formControl], c2-slider[formControlName], c2-text-field[ngModel], c2-text-field[formControl], c2-text-field[formControlName], c2-text-field-clear[ngModel], c2-text-field-clear[formControl], c2-text-field-clear[formControlName], c2-textarea[ngModel], c2-textarea[formControl], c2-textarea[formControlName]", never, {}, {}, never, never, true, never>;
+}
+/** The same, for the toggles: the model is the `checked` state and the control is read on `change`. */
+export declare class C2CheckedAccessor implements ControlValueAccessor {
+    private readonly element;
+    private notifyChange;
+    private notifyTouched;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected handleChange(): void;
+    protected handleTouched(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C2CheckedAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C2CheckedAccessor, "c2-checkbox[ngModel], c2-checkbox[formControl], c2-checkbox[formControlName], c2-radio[ngModel], c2-radio[formControl], c2-radio[formControlName], c2-switch[ngModel], c2-switch[formControl], c2-switch[formControlName]", never, {}, {}, never, never, true, never>;
+}
+/** Every accessor, for a component's `imports` array. */
+export declare const C2_FORM_ACCESSORS: readonly [typeof C2ValueAccessor, typeof C2CheckedAccessor];

package/dist/value-accessors.js

@@ -0,0 +1,92 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+import { Directive, ElementRef, forwardRef, inject } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+/**
+ * Binds `ngModel` / `formControl` / `formControlName` to the `value` of a c2 form control.
+ *
+ * The control is read on `input`, which every one of these components fires when its value changes, and marked
+ * touched on `focusout` — `blur` does not cross the shadow boundary from the inner control.
+ *
+ * A `c2-select` carries its selection as a `string[]`, so that is what the bound model receives.
+ */
+export class C2ValueAccessor {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.notifyChange = () => { };
+        this.notifyTouched = () => { };
+    }
+    writeValue(value) {
+        this.element.value = value ?? (Array.isArray(this.element.value) ? [] : '');
+    }
+    registerOnChange(fn) {
+        this.notifyChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.notifyTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.element.disabled = isDisabled;
+    }
+    handleInput() {
+        this.notifyChange(this.element.value);
+    }
+    handleTouched() {
+        this.notifyTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: C2ValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: C2ValueAccessor, isStandalone: true, selector: "c2-autocomplete[ngModel], c2-autocomplete[formControl], c2-autocomplete[formControlName], c2-chat-input[ngModel], c2-chat-input[formControl], c2-chat-input[formControlName], c2-radio-group[ngModel], c2-radio-group[formControl], c2-radio-group[formControlName], c2-select[ngModel], c2-select[formControl], c2-select[formControlName], c2-slider[ngModel], c2-slider[formControl], c2-slider[formControlName], c2-text-field[ngModel], c2-text-field[formControl], c2-text-field[formControlName], c2-text-field-clear[ngModel], c2-text-field-clear[formControl], c2-text-field-clear[formControlName], c2-textarea[ngModel], c2-textarea[formControl], c2-textarea[formControlName]", host: { listeners: { "input": "handleInput()", "focusout": "handleTouched()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => C2ValueAccessor), multi: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: C2ValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'c2-autocomplete[ngModel], c2-autocomplete[formControl], c2-autocomplete[formControlName], c2-chat-input[ngModel], c2-chat-input[formControl], c2-chat-input[formControlName], c2-radio-group[ngModel], c2-radio-group[formControl], c2-radio-group[formControlName], c2-select[ngModel], c2-select[formControl], c2-select[formControlName], c2-slider[ngModel], c2-slider[formControl], c2-slider[formControlName], c2-text-field[ngModel], c2-text-field[formControl], c2-text-field[formControlName], c2-text-field-clear[ngModel], c2-text-field-clear[formControl], c2-text-field-clear[formControlName], c2-textarea[ngModel], c2-textarea[formControl], c2-textarea[formControlName]',
+                    host: {
+                        '(input)': 'handleInput()',
+                        '(focusout)': 'handleTouched()',
+                    },
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => C2ValueAccessor), multi: true }],
+                }]
+        }] });
+/** The same, for the toggles: the model is the `checked` state and the control is read on `change`. */
+export class C2CheckedAccessor {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.notifyChange = () => { };
+        this.notifyTouched = () => { };
+    }
+    writeValue(value) {
+        this.element.checked = Boolean(value);
+    }
+    registerOnChange(fn) {
+        this.notifyChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.notifyTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.element.disabled = isDisabled;
+    }
+    handleChange() {
+        this.notifyChange(Boolean(this.element.checked));
+    }
+    handleTouched() {
+        this.notifyTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: C2CheckedAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: C2CheckedAccessor, isStandalone: true, selector: "c2-checkbox[ngModel], c2-checkbox[formControl], c2-checkbox[formControlName], c2-radio[ngModel], c2-radio[formControl], c2-radio[formControlName], c2-switch[ngModel], c2-switch[formControl], c2-switch[formControlName]", host: { listeners: { "change": "handleChange()", "focusout": "handleTouched()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => C2CheckedAccessor), multi: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: C2CheckedAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'c2-checkbox[ngModel], c2-checkbox[formControl], c2-checkbox[formControlName], c2-radio[ngModel], c2-radio[formControl], c2-radio[formControlName], c2-switch[ngModel], c2-switch[formControl], c2-switch[formControlName]',
+                    host: {
+                        '(change)': 'handleChange()',
+                        '(focusout)': 'handleTouched()',
+                    },
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => C2CheckedAccessor), multi: true }],
+                }]
+        }] });
+/** Every accessor, for a component's `imports` array. */
+export const C2_FORM_ACCESSORS = [C2ValueAccessor, C2CheckedAccessor];
+//# sourceMappingURL=value-accessors.js.map

package/dist/value-accessors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-accessors.js","sourceRoot":"","sources":["../src/value-accessors.ts"],"names":[],"mappings":"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","sourcesContent":["// GENERATED by @c2n/framework-types. Do not edit by hand.\nimport { Directive, ElementRef, forwardRef, inject } from '@angular/core'\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms'\n\n/** The element half of a c2 form control, as far as an accessor is concerned. */\ninterface FormControlElement extends HTMLElement {\n  value?: unknown\n  checked?: boolean\n  disabled?: boolean\n}\n\n/**\n * Binds `ngModel` / `formControl` / `formControlName` to the `value` of a c2 form control.\n *\n * The control is read on `input`, which every one of these components fires when its value changes, and marked\n * touched on `focusout` — `blur` does not cross the shadow boundary from the inner control.\n *\n * A `c2-select` carries its selection as a `string[]`, so that is what the bound model receives.\n */\n@Directive({\n  selector:\n    'c2-autocomplete[ngModel], c2-autocomplete[formControl], c2-autocomplete[formControlName], c2-chat-input[ngModel], c2-chat-input[formControl], c2-chat-input[formControlName], c2-radio-group[ngModel], c2-radio-group[formControl], c2-radio-group[formControlName], c2-select[ngModel], c2-select[formControl], c2-select[formControlName], c2-slider[ngModel], c2-slider[formControl], c2-slider[formControlName], c2-text-field[ngModel], c2-text-field[formControl], c2-text-field[formControlName], c2-text-field-clear[ngModel], c2-text-field-clear[formControl], c2-text-field-clear[formControlName], c2-textarea[ngModel], c2-textarea[formControl], c2-textarea[formControlName]',\n  host: {\n    '(input)': 'handleInput()',\n    '(focusout)': 'handleTouched()',\n  },\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => C2ValueAccessor), multi: true }],\n})\nexport class C2ValueAccessor implements ControlValueAccessor {\n  private readonly element = inject<ElementRef<FormControlElement>>(ElementRef).nativeElement\n  private notifyChange: (value: unknown) => void = () => {}\n  private notifyTouched: () => void = () => {}\n\n  writeValue(value: unknown): void {\n    this.element.value = value ?? (Array.isArray(this.element.value) ? [] : '')\n  }\n\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.notifyChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.notifyTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.element.disabled = isDisabled\n  }\n\n  protected handleInput(): void {\n    this.notifyChange(this.element.value)\n  }\n\n  protected handleTouched(): void {\n    this.notifyTouched()\n  }\n}\n\n/** The same, for the toggles: the model is the `checked` state and the control is read on `change`. */\n@Directive({\n  selector:\n    'c2-checkbox[ngModel], c2-checkbox[formControl], c2-checkbox[formControlName], c2-radio[ngModel], c2-radio[formControl], c2-radio[formControlName], c2-switch[ngModel], c2-switch[formControl], c2-switch[formControlName]',\n  host: {\n    '(change)': 'handleChange()',\n    '(focusout)': 'handleTouched()',\n  },\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => C2CheckedAccessor), multi: true }],\n})\nexport class C2CheckedAccessor implements ControlValueAccessor {\n  private readonly element = inject<ElementRef<FormControlElement>>(ElementRef).nativeElement\n  private notifyChange: (value: boolean) => void = () => {}\n  private notifyTouched: () => void = () => {}\n\n  writeValue(value: unknown): void {\n    this.element.checked = Boolean(value)\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.notifyChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.notifyTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.element.disabled = isDisabled\n  }\n\n  protected handleChange(): void {\n    this.notifyChange(Boolean(this.element.checked))\n  }\n\n  protected handleTouched(): void {\n    this.notifyTouched()\n  }\n}\n\n/** Every accessor, for a component's `imports` array. */\nexport const C2_FORM_ACCESSORS = [C2ValueAccessor, C2CheckedAccessor] as const\n"]}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@c2n/angular",
+  "version": "0.0.7",
+  "description": "Angular bindings for the c2n web components: ControlValueAccessor directives so ngModel and reactive forms work with c2-* form controls",
+  "type": "module",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "angular",
+    "web components",
+    "custom elements",
+    "forms",
+    "ControlValueAccessor"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "command": "tsc -p tsconfig.lib.json --noEmit --emitDeclarationOnly false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "files": [
+        "src/**",
+        "tsconfig.lib.json"
+      ],
+      "output": [
+        "dist/**"
+      ],
+      "command": "ngc -p tsconfig.lib.json"
+    }
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@angular/forms": ">=20"
+  },
+  "devDependencies": {
+    "@angular/compiler": "22.1.6",
+    "@angular/compiler-cli": "22.1.6",
+    "@angular/core": "22.1.6",
+    "@angular/forms": "22.1.6",
+    "@c2n/config": "*"
+  },
+  "dependencies": {
+    "tslib": "2.8.1"
+  },
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}