inugami-ng 0.0.14 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,10 +18,10 @@ class InuInputText {
18
18
  type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
19
19
  _required = input(false, { ...(ngDevMode ? { debugName: "_required" } : {}), alias: 'required' });
20
20
  // FormValueControl
21
- formField = inject(FormField, { optional: true });
21
+ _formField = inject(FormField, { optional: true });
22
22
  value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
23
23
  valid = computed(() => {
24
- const state = this.formField?.state();
24
+ const state = this._formField?.state();
25
25
  if (!state)
26
26
  return true;
27
27
  const isInvalid = state.invalid();
@@ -74,15 +74,16 @@ class InuInputText {
74
74
  }
75
75
  onFocusOut() {
76
76
  this.focus.set(false);
77
+ this._formField?.state()?.markAsTouched();
77
78
  }
78
79
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuInputText, deps: [], target: i0.ɵɵFactoryTarget.Component });
79
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuInputText, isStandalone: true, selector: "inu-input-text", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"_styleClass()\">\n <div class=\"inu-input-text-label\">\n @if(icon()){\n <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n }\n @if (label()) {\n <label [for]=\"id()\">{{ label()! }}</label>\n }\n @if (_required()) {\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n }\n </div>\n\n <input [id]=\"id()\"\n [name]=\"name()!\"\n [type]=\"type()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focusin)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n (blur)=\"formField?.state()?.markAsTouched()\"\n (keyup)=\"onChanged($event)\" #input>\n</div>\n", styles: [".inu-input-text{display:flex;flex-direction:column;width:100%}.inu-input-text label{font-weight:700;font-size:90%;width:auto;transition:color .25s}.inu-input-text inu-icon{width:1rem}.inu-input-text input{border:none;border-bottom:2px solid var(--neutral);transition:border-bottom .25s;outline:none}.inu-input-text input:focus{border-bottom:2px solid var(--secondary-light)}.inu-input-text input.disabled{border-bottom:2px solid var(--neutral-light)}.inu-input-text .inu-input-text-label{display:flex;flex-direction:row;gap:.5rem}.inu-input-text.focus .inu-input-text-label{color:var(--secondary-light);fill:var(--secondary-light)}.inu-input-text.invalid input{border-bottom:1px solid var(--danger)}.inu-input-text.invalid .inu-input-text-label{color:var(--danger);fill:var(--danger)}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
80
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuInputText, isStandalone: true, selector: "inu-input-text", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"_styleClass()\">\n <div class=\"inu-input-text-label\">\n @if(icon()){\n <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n }\n @if (label()) {\n <label [for]=\"id()\">{{ label()! }}</label>\n }\n @if (_required()) {\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n }\n </div>\n\n <input [id]=\"id()\"\n [name]=\"name()!\"\n [type]=\"type()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focusin)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n (blur)=\"_formField?.state()?.markAsTouched()\"\n (keyup)=\"onChanged($event)\" #input>\n</div>\n", styles: [".inu-input-text{display:flex;flex-direction:column;width:100%}.inu-input-text label{font-weight:700;font-size:90%;width:auto;transition:color .25s}.inu-input-text inu-icon{width:1rem}.inu-input-text input{border:none;border-bottom:2px solid var(--neutral);transition:border-bottom .25s;outline:none}.inu-input-text input:focus{border-bottom:2px solid var(--secondary-light)}.inu-input-text input.disabled{border-bottom:2px solid var(--neutral-light)}.inu-input-text .inu-input-text-label{display:flex;flex-direction:row;gap:.5rem}.inu-input-text.focus .inu-input-text-label{color:var(--secondary-light);fill:var(--secondary-light)}.inu-input-text.invalid input{border-bottom:1px solid var(--danger)}.inu-input-text.invalid .inu-input-text-label{color:var(--danger);fill:var(--danger)}\n"], dependencies: [{ kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
80
81
  }
81
82
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuInputText, decorators: [{
82
83
  type: Component,
83
84
  args: [{ selector: 'inu-input-text', standalone: true, providers: [], imports: [
84
85
  InuIcon
85
- ], template: "<div [class]=\"_styleClass()\">\n <div class=\"inu-input-text-label\">\n @if(icon()){\n <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n }\n @if (label()) {\n <label [for]=\"id()\">{{ label()! }}</label>\n }\n @if (_required()) {\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n }\n </div>\n\n <input [id]=\"id()\"\n [name]=\"name()!\"\n [type]=\"type()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focusin)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n (blur)=\"formField?.state()?.markAsTouched()\"\n (keyup)=\"onChanged($event)\" #input>\n</div>\n", styles: [".inu-input-text{display:flex;flex-direction:column;width:100%}.inu-input-text label{font-weight:700;font-size:90%;width:auto;transition:color .25s}.inu-input-text inu-icon{width:1rem}.inu-input-text input{border:none;border-bottom:2px solid var(--neutral);transition:border-bottom .25s;outline:none}.inu-input-text input:focus{border-bottom:2px solid var(--secondary-light)}.inu-input-text input.disabled{border-bottom:2px solid var(--neutral-light)}.inu-input-text .inu-input-text-label{display:flex;flex-direction:row;gap:.5rem}.inu-input-text.focus .inu-input-text-label{color:var(--secondary-light);fill:var(--secondary-light)}.inu-input-text.invalid input{border-bottom:1px solid var(--danger)}.inu-input-text.invalid .inu-input-text-label{color:var(--danger);fill:var(--danger)}\n"] }]
86
+ ], template: "<div [class]=\"_styleClass()\">\n <div class=\"inu-input-text-label\">\n @if(icon()){\n <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n }\n @if (label()) {\n <label [for]=\"id()\">{{ label()! }}</label>\n }\n @if (_required()) {\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n }\n </div>\n\n <input [id]=\"id()\"\n [name]=\"name()!\"\n [type]=\"type()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focusin)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n (blur)=\"_formField?.state()?.markAsTouched()\"\n (keyup)=\"onChanged($event)\" #input>\n</div>\n", styles: [".inu-input-text{display:flex;flex-direction:column;width:100%}.inu-input-text label{font-weight:700;font-size:90%;width:auto;transition:color .25s}.inu-input-text inu-icon{width:1rem}.inu-input-text input{border:none;border-bottom:2px solid var(--neutral);transition:border-bottom .25s;outline:none}.inu-input-text input:focus{border-bottom:2px solid var(--secondary-light)}.inu-input-text input.disabled{border-bottom:2px solid var(--neutral-light)}.inu-input-text .inu-input-text-label{display:flex;flex-direction:row;gap:.5rem}.inu-input-text.focus .inu-input-text-label{color:var(--secondary-light);fill:var(--secondary-light)}.inu-input-text.invalid input{border-bottom:1px solid var(--danger)}.inu-input-text.invalid .inu-input-text-label{color:var(--danger);fill:var(--danger)}\n"] }]
86
87
  }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
87
88
 
88
89
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"inugami-ng-components-inu-input-text.mjs","sources":["../../../projects/inugami-ng/components/inu-input-text/inu-input-text.component.ts","../../../projects/inugami-ng/components/inu-input-text/inu-input-text.component.html","../../../projects/inugami-ng/components/inu-input-text/inugami-ng-components-inu-input-text.ts"],"sourcesContent":["import {\n Component,\n computed,\n ElementRef, inject,\n input,\n InputSignal,\n model,\n ModelSignal,\n output,\n signal,\n viewChild\n} from '@angular/core';\nimport {FormField, FormValueControl} from '@angular/forms/signals';\nimport {UuidUtils} from 'inugami-ng/services';\nimport {debounceTime, Subject} from 'rxjs';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n selector: 'inu-input-text',\n standalone: true,\n providers: [],\n imports: [\n InuIcon\n\n ],\n templateUrl: './inu-input-text.component.html',\n styleUrl: './inu-input-text.component.scss',\n})\nexport class InuInputText implements FormValueControl<string | number>,FormValueControl<string | number> {\n\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n // input\n readonly disabled = input(false);\n readonly label = input('');\n readonly icon = input('');\n readonly name = input('');\n readonly type: InputSignal<string | 'text' | 'number' | 'email' | 'password'> = input('text');\n readonly _required = input(false, {alias: 'required'});\n\n\n // FormValueControl\n formField = inject(FormField, { optional: true });\n value: ModelSignal<string | number> = model<string | number>('');\n valid = computed(() => {\n const state = this.formField?.state()\n if (!state) return true;\n const isInvalid = state.invalid();\n const hasBeenTouched = state.touched();\n return !(isInvalid && hasBeenTouched);\n });\n // internal\n changed = output<string | number>();\n debouncer = new Subject<string | number>();\n\n id = computed<string>(() => UuidUtils.buildUid());\n input = viewChild<ElementRef<HTMLInputElement>>('input');\n focus=signal<boolean>(false);\n styleClass = input<string>('');\n _styleClass = computed<string>(() => {\n return [\n 'inu-input',\n 'inu-input-text',\n this.disabled() ? 'disabled' : '',\n !this.valid() ? 'invalid' : '',\n this.focus() ? 'focus' : '',\n this.styleClass()!\n ].join(' ');\n })\n\n //==================================================================================================================\n // INIT\n //==================================================================================================================\n constructor() {\n this.debouncer.pipe(\n debounceTime(50),\n takeUntilDestroyed()\n ).subscribe(val => {\n this.value.set(val);\n this.changed.emit(val);\n });\n }\n\n protected onChanged(event: KeyboardEvent) {\n const input = this.input()?.nativeElement;\n if (!input) {\n return;\n }\n let value: number | string = input.value;\n if ('number' === this.type()) {\n try {\n value = Number(value);\n } catch (e) {\n }\n }\n\n this.debouncer.next(value)\n }\n\n protected onFocus() {\n this.focus.set(true);\n }\n\n protected onFocusOut() {\n this.focus.set(false);\n }\n}\n","<div [class]=\"_styleClass()\">\n <div class=\"inu-input-text-label\">\n @if(icon()){\n <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n }\n @if (label()) {\n <label [for]=\"id()\">{{ label()! }}</label>\n }\n @if (_required()) {\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n }\n </div>\n\n <input [id]=\"id()\"\n [name]=\"name()!\"\n [type]=\"type()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focusin)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n (blur)=\"formField?.state()?.markAsTouched()\"\n (keyup)=\"onChanged($event)\" #input>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"inugami-ng-components-inu-input-text.mjs","sources":["../../../projects/inugami-ng/components/inu-input-text/inu-input-text.component.ts","../../../projects/inugami-ng/components/inu-input-text/inu-input-text.component.html","../../../projects/inugami-ng/components/inu-input-text/inugami-ng-components-inu-input-text.ts"],"sourcesContent":["import {\n Component,\n computed,\n ElementRef, inject,\n input,\n InputSignal,\n model,\n ModelSignal,\n output,\n signal,\n viewChild\n} from '@angular/core';\nimport {FormField, FormValueControl} from '@angular/forms/signals';\nimport {UuidUtils} from 'inugami-ng/services';\nimport {debounceTime, Subject} from 'rxjs';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n selector: 'inu-input-text',\n standalone: true,\n providers: [],\n imports: [\n InuIcon\n\n ],\n templateUrl: './inu-input-text.component.html',\n styleUrl: './inu-input-text.component.scss',\n})\nexport class InuInputText implements FormValueControl<string | number>,FormValueControl<string | number> {\n\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n // input\n readonly disabled = input(false);\n readonly label = input('');\n readonly icon = input('');\n readonly name = input('');\n readonly type: InputSignal<string | 'text' | 'number' | 'email' | 'password'> = input('text');\n readonly _required = input(false, {alias: 'required'});\n\n\n // FormValueControl\n _formField = inject(FormField, { optional: true });\n value: ModelSignal<string | number> = model<string | number>('');\n valid = computed(() => {\n const state = this._formField?.state()\n if (!state) return true;\n const isInvalid = state.invalid();\n const hasBeenTouched = state.touched();\n return !(isInvalid && hasBeenTouched);\n });\n // internal\n changed = output<string | number>();\n debouncer = new Subject<string | number>();\n\n id = computed<string>(() => UuidUtils.buildUid());\n input = viewChild<ElementRef<HTMLInputElement>>('input');\n focus=signal<boolean>(false);\n styleClass = input<string>('');\n _styleClass = computed<string>(() => {\n return [\n 'inu-input',\n 'inu-input-text',\n this.disabled() ? 'disabled' : '',\n !this.valid() ? 'invalid' : '',\n this.focus() ? 'focus' : '',\n this.styleClass()!\n ].join(' ');\n })\n\n //==================================================================================================================\n // INIT\n //==================================================================================================================\n constructor() {\n this.debouncer.pipe(\n debounceTime(50),\n takeUntilDestroyed()\n ).subscribe(val => {\n this.value.set(val);\n this.changed.emit(val);\n });\n }\n\n protected onChanged(event: KeyboardEvent) {\n const input = this.input()?.nativeElement;\n if (!input) {\n return;\n }\n let value: number | string = input.value;\n if ('number' === this.type()) {\n try {\n value = Number(value);\n } catch (e) {\n }\n }\n\n this.debouncer.next(value)\n }\n\n protected onFocus() {\n this.focus.set(true);\n }\n\n protected onFocusOut() {\n this.focus.set(false);\n this._formField?.state()?.markAsTouched();\n }\n}\n","<div [class]=\"_styleClass()\">\n <div class=\"inu-input-text-label\">\n @if(icon()){\n <inu-icon [icon]=\"icon()!\" [size]=\"1\"></inu-icon>\n }\n @if (label()) {\n <label [for]=\"id()\">{{ label()! }}</label>\n }\n @if (_required()) {\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n }\n </div>\n\n <input [id]=\"id()\"\n [name]=\"name()!\"\n [type]=\"type()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focusin)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n (blur)=\"_formField?.state()?.markAsTouched()\"\n (keyup)=\"onChanged($event)\" #input>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "inugami-ng",
3
- "version": "0.0.14",
3
+ "version": "0.0.15",
4
4
  "license": "GPL-3.0-only",
5
5
  "description": "Inugami project angular library",
6
6
  "keywords": [
@@ -10,7 +10,7 @@ declare class InuInputText implements FormValueControl<string | number>, FormVal
10
10
  readonly name: InputSignal<string>;
11
11
  readonly type: InputSignal<string | 'text' | 'number' | 'email' | 'password'>;
12
12
  readonly _required: InputSignal<boolean>;
13
- formField: FormField<any> | null;
13
+ _formField: FormField<any> | null;
14
14
  value: ModelSignal<string | number>;
15
15
  valid: _angular_core.Signal<boolean>;
16
16
  changed: _angular_core.OutputEmitterRef<string | number>;