@koalarx/ui 20.0.35 → 20.0.36
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, linkedSignal, input, booleanAttribute, effect, Directive, Component } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, signal, linkedSignal, input, booleanAttribute, effect, Directive, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { Validators, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { randomString } from '@koalarx/utils/KlString';
|
|
@@ -7,6 +7,7 @@ import { FieldErrors } from '@koalarx/ui/shared/components/field-errors';
|
|
|
7
7
|
import { InputMask } from '@koalarx/ui/shared/directives';
|
|
8
8
|
|
|
9
9
|
class InputFieldBase {
|
|
10
|
+
elementRef = inject(ElementRef);
|
|
10
11
|
required = signal(false);
|
|
11
12
|
isDisabled = linkedSignal(() => this.disabled());
|
|
12
13
|
isRequired = this.required.asReadonly();
|
|
@@ -20,6 +21,16 @@ class InputFieldBase {
|
|
|
20
21
|
disabled = input(false, { transform: booleanAttribute });
|
|
21
22
|
constructor() {
|
|
22
23
|
effect(() => this.checkIsRequired(this.control()));
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
const container = this.elementRef.nativeElement.parentElement;
|
|
26
|
+
if (container) {
|
|
27
|
+
let containerBgColor = window.getComputedStyle(container).backgroundColor;
|
|
28
|
+
if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {
|
|
29
|
+
containerBgColor = 'var(--color-base-100)';
|
|
30
|
+
}
|
|
31
|
+
this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;
|
|
32
|
+
}
|
|
33
|
+
});
|
|
23
34
|
}
|
|
24
35
|
checkIsRequired(control) {
|
|
25
36
|
this.required.set(control.hasValidator(Validators.required));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koalarx-ui-shared-components-input-field.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-field.base.ts","../../projects/koala-ui/shared/components/input-field/input-field.ts","../../projects/koala-ui/shared/components/input-field/input-field.html","../../projects/koala-ui/shared/components/input-field/koalarx-ui-shared-components-input-field.ts"],"sourcesContent":["import {\n booleanAttribute,\n Directive,\n effect,\n input,\n linkedSignal,\n signal,\n} from '@angular/core';\nimport { FormControl, Validators } from '@angular/forms';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase {\n private readonly required = signal(false);\n protected readonly isDisabled = linkedSignal(() => this.disabled());\n protected readonly isRequired = this.required.asReadonly();\n protected readonly fieldId = randomString(10, {\n lowercase: true,\n uppercase: true,\n });\n\n control = input.required<FormControl>();\n label = input<string>();\n placeholder = input<string>('');\n disabled = input(false, { transform: booleanAttribute });\n\n constructor() {\n effect(() => this.checkIsRequired(this.control()));\n }\n\n private checkIsRequired(control: FormControl) {\n this.required.set(control.hasValidator(Validators.required));\n }\n}\n","import { Component, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputMask } from '@koalarx/ui/shared/directives';\nimport { InputFieldBase } from './input-field.base';\n\ntype InputTypeField =\n | 'text'\n | 'email'\n | 'password'\n | 'number'\n | 'tel'\n | 'url'\n | 'date'\n | 'datetime-local'\n | 'month'\n | 'time'\n | 'search';\n\n@Component({\n selector: 'kl-input-field',\n templateUrl: './input-field.html',\n imports: [ReactiveFormsModule, InputMask, FieldErrors],\n})\nexport class InputField extends InputFieldBase {\n type = input<InputTypeField>('text');\n mask = input<string>('');\n min = input<string>();\n max = input<string>();\n}\n","<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n @if (label(); as label) {\n <span>\n <ng-content select=\"[icon]\" />\n {{ label }} {{ isRequired() ? '*' : '' }}\n </span>\n }\n\n <input\n [id]=\"fieldId\"\n [formControl]=\"control()\"\n [placeholder]=\"label()\n ? label() + (isRequired() ? '*' : '')\n : placeholder()\"\n [required]=\"isRequired()\"\n [mask]=\"mask()\"\n [type]=\"type()\"\n [min]=\"min()\"\n [max]=\"max()\"\n />\n\n <ng-content select=\"[suffix]\" />\n</label>\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"koalarx-ui-shared-components-input-field.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-field.base.ts","../../projects/koala-ui/shared/components/input-field/input-field.ts","../../projects/koala-ui/shared/components/input-field/input-field.html","../../projects/koala-ui/shared/components/input-field/koalarx-ui-shared-components-input-field.ts"],"sourcesContent":["import {\n booleanAttribute,\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n signal,\n} from '@angular/core';\nimport { FormControl, Validators } from '@angular/forms';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase {\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly required = signal(false);\n protected readonly isDisabled = linkedSignal(() => this.disabled());\n protected readonly isRequired = this.required.asReadonly();\n protected readonly fieldId = randomString(10, {\n lowercase: true,\n uppercase: true,\n });\n\n control = input.required<FormControl>();\n label = input<string>();\n placeholder = input<string>('');\n disabled = input(false, { transform: booleanAttribute });\n\n constructor() {\n effect(() => this.checkIsRequired(this.control()));\n\n setTimeout(() => {\n const container = this.elementRef.nativeElement.parentElement;\n\n if (container) {\n let containerBgColor =\n window.getComputedStyle(container).backgroundColor;\n\n if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {\n containerBgColor = 'var(--color-base-100)';\n }\n\n this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;\n }\n });\n }\n\n private checkIsRequired(control: FormControl) {\n this.required.set(control.hasValidator(Validators.required));\n }\n}\n","import { Component, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputMask } from '@koalarx/ui/shared/directives';\nimport { InputFieldBase } from './input-field.base';\n\ntype InputTypeField =\n | 'text'\n | 'email'\n | 'password'\n | 'number'\n | 'tel'\n | 'url'\n | 'date'\n | 'datetime-local'\n | 'month'\n | 'time'\n | 'search';\n\n@Component({\n selector: 'kl-input-field',\n templateUrl: './input-field.html',\n imports: [ReactiveFormsModule, InputMask, FieldErrors],\n})\nexport class InputField extends InputFieldBase {\n type = input<InputTypeField>('text');\n mask = input<string>('');\n min = input<string>();\n max = input<string>();\n}\n","<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n @if (label(); as label) {\n <span>\n <ng-content select=\"[icon]\" />\n {{ label }} {{ isRequired() ? '*' : '' }}\n </span>\n }\n\n <input\n [id]=\"fieldId\"\n [formControl]=\"control()\"\n [placeholder]=\"label()\n ? label() + (isRequired() ? '*' : '')\n : placeholder()\"\n [required]=\"isRequired()\"\n [mask]=\"mask()\"\n [type]=\"type()\"\n [min]=\"min()\"\n [max]=\"max()\"\n />\n\n <ng-content select=\"[suffix]\" />\n</label>\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAcsB,cAAc,CAAA;AACjB,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;IACtB,UAAU,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;AAChD,IAAA,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;AACvC,IAAA,OAAO,GAAG,YAAY,CAAC,EAAE,EAAE;AAC5C,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,SAAS,EAAE,IAAI;AAChB,KAAA,CAAC;AAEF,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAe;IACvC,KAAK,GAAG,KAAK,EAAU;AACvB,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,CAAC;IAC/B,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAExD,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAElD,UAAU,CAAC,MAAK;YACd,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa;YAE7D,IAAI,SAAS,EAAE;gBACb,IAAI,gBAAgB,GAClB,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,eAAe;AAEpD,gBAAA,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,KAAK,kBAAkB,EAAE;oBAChE,gBAAgB,GAAG,uBAAuB;;gBAG5C,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,GAAG,CAAA,YAAA,EAAe,gBAAgB,CAAA,CAAE;;AAE3E,SAAC,CAAC;;AAGI,IAAA,eAAe,CAAC,OAAoB,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;;uGAnC1C,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBADnC;;;ACWK,MAAO,UAAW,SAAQ,cAAc,CAAA;AAC5C,IAAA,IAAI,GAAG,KAAK,CAAiB,MAAM,CAAC;AACpC,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;IACxB,GAAG,GAAG,KAAK,EAAU;IACrB,GAAG,GAAG,KAAK,EAAU;uGAJV,UAAU,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,2jBCxBvB,2tBA6BA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,mBAAmB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,0EAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE1C,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WAEjB,CAAC,mBAAmB,EAAE,SAAS,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,2tBAAA,EAAA;;;AEtBxD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { FormControl } from '@angular/forms';
|
|
3
3
|
|
|
4
4
|
declare abstract class InputFieldBase {
|
|
5
|
+
private readonly elementRef;
|
|
5
6
|
private readonly required;
|
|
6
7
|
protected readonly isDisabled: _angular_core.WritableSignal<boolean>;
|
|
7
8
|
protected readonly isRequired: _angular_core.Signal<boolean>;
|
package/theme/form.css
CHANGED
|
@@ -29,7 +29,7 @@ kl-autocomplete-field .has-value .autocomplete-label:after {
|
|
|
29
29
|
position: absolute;
|
|
30
30
|
width: 100%;
|
|
31
31
|
height: 1px;
|
|
32
|
-
background-color: var(--
|
|
32
|
+
background-color: var(--bg-input);
|
|
33
33
|
bottom: 0.5rem;
|
|
34
34
|
left: 0;
|
|
35
35
|
}
|
|
@@ -61,13 +61,15 @@ kl-autocomplete-field .has-value:focus .autocomplete-label:after {
|
|
|
61
61
|
|
|
62
62
|
.input,
|
|
63
63
|
.select,
|
|
64
|
-
.textarea
|
|
65
|
-
|
|
64
|
+
.textarea,
|
|
65
|
+
.input span,
|
|
66
|
+
.select span,
|
|
67
|
+
.textarea span {
|
|
68
|
+
background-color: var(--bg-input);
|
|
66
69
|
}
|
|
67
70
|
|
|
68
71
|
.input:focus,
|
|
69
72
|
.select:focus,
|
|
70
|
-
textarea:focus,
|
|
71
73
|
button:focus {
|
|
72
74
|
outline: none;
|
|
73
75
|
box-shadow: 0 0 0 3px var(--color-neutral-600) !important;
|