@koalarx/ui 20.3.0 → 20.3.3
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.
- package/core/config/index.d.ts +4 -1
- package/fesm2022/koalarx-ui-core-components-kl-root.mjs +13 -0
- package/fesm2022/koalarx-ui-core-components-kl-root.mjs.map +1 -1
- package/fesm2022/koalarx-ui-core-config.mjs +3 -1
- package/fesm2022/koalarx-ui-core-config.mjs.map +1 -1
- package/fesm2022/koalarx-ui-shared-components-input-field.mjs +12 -12
- package/fesm2022/koalarx-ui-shared-components-input-field.mjs.map +1 -1
- package/fesm2022/koalarx-ui-theme.mjs +4 -0
- package/fesm2022/koalarx-ui-theme.mjs.map +1 -0
- package/package.json +17 -13
- package/shared/components/input-field/index.d.ts +1 -3
- package/theme/index.d.ts +3 -0
- package/theme/index.ts +1 -0
- package/theme/ng-package.json +6 -0
- package/theme/package.json +3 -0
- package/theme/theme-name.ts +37 -0
package/core/config/index.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ThemeName } from '@koalarx/ui/theme';
|
|
1
3
|
import { HttpClientErrorsMiddleware } from '@koalarx/ui/core/middlewares';
|
|
2
4
|
import { AuthConfig } from '@koalarx/ui/core/models';
|
|
3
5
|
import { KoalaLanguage, Translation } from '@koalarx/ui/core/translations';
|
|
4
6
|
|
|
5
7
|
declare const GENERIC_COMPONENT_CONTAINER_NAME = ".kl-generic-component-container";
|
|
8
|
+
declare const CURRENT_THEME: _angular_core.WritableSignal<ThemeName | null>;
|
|
6
9
|
|
|
7
10
|
declare class AppConfig {
|
|
8
11
|
private _hostApi;
|
|
@@ -22,4 +25,4 @@ declare class AppConfig {
|
|
|
22
25
|
get authConfig(): AuthConfig | undefined;
|
|
23
26
|
}
|
|
24
27
|
|
|
25
|
-
export { AppConfig, GENERIC_COMPONENT_CONTAINER_NAME };
|
|
28
|
+
export { AppConfig, CURRENT_THEME, GENERIC_COMPONENT_CONTAINER_NAME };
|
|
@@ -4,6 +4,7 @@ import { DialogContainer } from '@koalarx/ui/core/components/dialog';
|
|
|
4
4
|
import { LoaderPageContent } from '@koalarx/ui/core/components/loader-page';
|
|
5
5
|
import { SideWindowContainer } from '@koalarx/ui/core/components/side-window';
|
|
6
6
|
import { SnackbarContainer } from '@koalarx/ui/core/components/snackbar';
|
|
7
|
+
import { CURRENT_THEME } from '@koalarx/ui/core/config';
|
|
7
8
|
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
|
|
8
9
|
import * as i1 from '@ngx-loading-bar/core';
|
|
9
10
|
|
|
@@ -13,6 +14,18 @@ class KlRoot {
|
|
|
13
14
|
if (document.querySelector('html')?.getAttribute('data-theme') === null) {
|
|
14
15
|
document.querySelector('html')?.setAttribute('data-theme', 'light');
|
|
15
16
|
}
|
|
17
|
+
const htmlElement = document.querySelector('html');
|
|
18
|
+
if (htmlElement) {
|
|
19
|
+
htmlElement.onchange = () => {
|
|
20
|
+
setTimeout(() => {
|
|
21
|
+
const theme = htmlElement.getAttribute('data-theme');
|
|
22
|
+
if (theme === CURRENT_THEME()) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
CURRENT_THEME.set(theme);
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
}
|
|
16
29
|
}
|
|
17
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: KlRoot, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
31
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: KlRoot, isStandalone: true, selector: "kl-root", inputs: { routerLoaderColor: { classPropertyName: "routerLoaderColor", publicName: "routerLoaderColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ngx-loading-bar\n [color]=\"routerLoaderColor()\"\n height=\"4px\"\n [includeSpinner]=\"false\"\n/>\n\n<main class=\"overflow-x-hidden\">\n <kl-loader-page-content />\n <kl-snackbar-container />\n <kl-dialog-container />\n <kl-side-window-container />\n <div class=\"kl-generic-component-container\"></div>\n\n <ng-content />\n</main>\n", dependencies: [{ kind: "component", type: DialogContainer, selector: "kl-dialog-container" }, { kind: "ngmodule", type: LoadingBarRouterModule }, { kind: "component", type: i1.LoadingBarComponent, selector: "ngx-loading-bar" }, { kind: "component", type: SideWindowContainer, selector: "kl-side-window-container" }, { kind: "component", type: SnackbarContainer, selector: "kl-snackbar-container" }, { kind: "component", type: LoaderPageContent, selector: "kl-loader-page-content" }] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koalarx-ui-core-components-kl-root.mjs","sources":["../../projects/koala-ui/core/components/kl-root/kl-root.ts","../../projects/koala-ui/core/components/kl-root/kl-root.html","../../projects/koala-ui/core/components/kl-root/koalarx-ui-core-components-kl-root.ts"],"sourcesContent":["import { Component, input, OnInit } from '@angular/core';\nimport { DialogContainer } from '@koalarx/ui/core/components/dialog';\nimport { LoaderPageContent } from '@koalarx/ui/core/components/loader-page';\nimport { SideWindowContainer } from '@koalarx/ui/core/components/side-window';\nimport { SnackbarContainer } from '@koalarx/ui/core/components/snackbar';\nimport { LoadingBarRouterModule } from '@ngx-loading-bar/router';\n\n@Component({\n selector: 'kl-root',\n templateUrl: './kl-root.html',\n imports: [\n DialogContainer,\n LoadingBarRouterModule,\n SideWindowContainer,\n SnackbarContainer,\n LoaderPageContent,\n ],\n})\nexport class KlRoot implements OnInit {\n routerLoaderColor = input<string>('#6A1B9A');\n\n ngOnInit(): void {\n if (document.querySelector('html')?.getAttribute('data-theme') === null) {\n document.querySelector('html')?.setAttribute('data-theme', 'light');\n }\n }\n}\n","<ngx-loading-bar\n [color]=\"routerLoaderColor()\"\n height=\"4px\"\n [includeSpinner]=\"false\"\n/>\n\n<main class=\"overflow-x-hidden\">\n <kl-loader-page-content />\n <kl-snackbar-container />\n <kl-dialog-container />\n <kl-side-window-container />\n <div class=\"kl-generic-component-container\"></div>\n\n <ng-content />\n</main>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"koalarx-ui-core-components-kl-root.mjs","sources":["../../projects/koala-ui/core/components/kl-root/kl-root.ts","../../projects/koala-ui/core/components/kl-root/kl-root.html","../../projects/koala-ui/core/components/kl-root/koalarx-ui-core-components-kl-root.ts"],"sourcesContent":["import { Component, input, OnInit } from '@angular/core';\nimport { DialogContainer } from '@koalarx/ui/core/components/dialog';\nimport { LoaderPageContent } from '@koalarx/ui/core/components/loader-page';\nimport { SideWindowContainer } from '@koalarx/ui/core/components/side-window';\nimport { SnackbarContainer } from '@koalarx/ui/core/components/snackbar';\nimport { CURRENT_THEME } from '@koalarx/ui/core/config';\nimport { ThemeName } from '@koalarx/ui/theme';\nimport { LoadingBarRouterModule } from '@ngx-loading-bar/router';\n\n@Component({\n selector: 'kl-root',\n templateUrl: './kl-root.html',\n imports: [\n DialogContainer,\n LoadingBarRouterModule,\n SideWindowContainer,\n SnackbarContainer,\n LoaderPageContent,\n ],\n})\nexport class KlRoot implements OnInit {\n routerLoaderColor = input<string>('#6A1B9A');\n\n ngOnInit(): void {\n if (document.querySelector('html')?.getAttribute('data-theme') === null) {\n document.querySelector('html')?.setAttribute('data-theme', 'light');\n }\n\n const htmlElement = document.querySelector('html');\n\n if (htmlElement) {\n htmlElement.onchange = () => {\n setTimeout(() => {\n const theme = htmlElement.getAttribute(\n 'data-theme'\n ) as ThemeName | null;\n\n if (theme === CURRENT_THEME()) {\n return;\n }\n\n CURRENT_THEME.set(theme);\n });\n };\n }\n }\n}\n","<ngx-loading-bar\n [color]=\"routerLoaderColor()\"\n height=\"4px\"\n [includeSpinner]=\"false\"\n/>\n\n<main class=\"overflow-x-hidden\">\n <kl-loader-page-content />\n <kl-snackbar-container />\n <kl-dialog-container />\n <kl-side-window-container />\n <div class=\"kl-generic-component-container\"></div>\n\n <ng-content />\n</main>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAoBa,MAAM,CAAA;AACjB,IAAA,iBAAiB,GAAG,KAAK,CAAS,SAAS,6DAAC;IAE5C,QAAQ,GAAA;AACN,QAAA,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE;AACvE,YAAA,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC;;QAGrE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;QAElD,IAAI,WAAW,EAAE;AACf,YAAA,WAAW,CAAC,QAAQ,GAAG,MAAK;gBAC1B,UAAU,CAAC,MAAK;oBACd,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CACpC,YAAY,CACO;AAErB,oBAAA,IAAI,KAAK,KAAK,aAAa,EAAE,EAAE;wBAC7B;;AAGF,oBAAA,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,iBAAC,CAAC;AACJ,aAAC;;;uGAvBM,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAN,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBnB,4VAeA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDFI,eAAe,EAAA,QAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,sBAAsB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,mBAAmB,EAAA,QAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,iBAAiB,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,iBAAiB,EAAA,QAAA,EAAA,wBAAA,EAAA,CAAA,EAAA,CAAA;;2FAGR,MAAM,EAAA,UAAA,EAAA,CAAA;kBAXlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,OAAA,EAEV;wBACP,eAAe;wBACf,sBAAsB;wBACtB,mBAAmB;wBACnB,iBAAiB;wBACjB,iBAAiB;AAClB,qBAAA,EAAA,QAAA,EAAA,4VAAA,EAAA;;;AElBH;;AAEG;;;;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { signal } from '@angular/core';
|
|
1
2
|
import { en } from '@koalarx/ui/core/translations';
|
|
2
3
|
|
|
3
4
|
const GENERIC_COMPONENT_CONTAINER_NAME = '.kl-generic-component-container';
|
|
5
|
+
const CURRENT_THEME = signal(null, ...(ngDevMode ? [{ debugName: "CURRENT_THEME" }] : []));
|
|
4
6
|
|
|
5
7
|
class AppConfig {
|
|
6
8
|
_hostApi;
|
|
@@ -44,5 +46,5 @@ class AppConfig {
|
|
|
44
46
|
* Generated bundle index. Do not edit.
|
|
45
47
|
*/
|
|
46
48
|
|
|
47
|
-
export { AppConfig, GENERIC_COMPONENT_CONTAINER_NAME };
|
|
49
|
+
export { AppConfig, CURRENT_THEME, GENERIC_COMPONENT_CONTAINER_NAME };
|
|
48
50
|
//# sourceMappingURL=koalarx-ui-core-config.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koalarx-ui-core-config.mjs","sources":["../../projects/koala-ui/core/config/constants.ts","../../projects/koala-ui/core/config/app-config.ts","../../projects/koala-ui/core/config/koalarx-ui-core-config.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"koalarx-ui-core-config.mjs","sources":["../../projects/koala-ui/core/config/constants.ts","../../projects/koala-ui/core/config/app-config.ts","../../projects/koala-ui/core/config/koalarx-ui-core-config.ts"],"sourcesContent":["import { signal } from '@angular/core';\nimport { ThemeName } from '@koalarx/ui/theme';\n\nexport const GENERIC_COMPONENT_CONTAINER_NAME =\n '.kl-generic-component-container';\nexport const CURRENT_THEME = signal<ThemeName | null>(null);\n","import { HttpClientErrorsMiddleware } from '@koalarx/ui/core/middlewares';\nimport { AuthConfig } from '@koalarx/ui/core/models';\nimport { KoalaLanguage, Translation, en } from '@koalarx/ui/core/translations';\n\nexport class AppConfig {\n private _hostApi: string | undefined;\n private _language: KoalaLanguage | undefined;\n private _translation: Translation | undefined;\n private _httpClientErrorsMiddleware: HttpClientErrorsMiddleware | undefined;\n private _authConfig: AuthConfig | undefined;\n\n set hostApi(hostApi: string | undefined) {\n this._hostApi = hostApi;\n }\n\n get hostApi(): string | undefined {\n return this._hostApi;\n }\n\n set language(language: KoalaLanguage | undefined) {\n this._language = language;\n }\n\n get language(): KoalaLanguage | undefined {\n return this._language;\n }\n\n set translation(translation: Translation | undefined) {\n this._translation = translation;\n }\n\n get translation(): Translation {\n return this._translation ?? en;\n }\n\n set httpClientErrorsMiddleware(\n httpClientErrorsMiddleware: HttpClientErrorsMiddleware | undefined\n ) {\n this._httpClientErrorsMiddleware = httpClientErrorsMiddleware;\n }\n\n get httpClientErrorsMiddleware(): HttpClientErrorsMiddleware | undefined {\n return this._httpClientErrorsMiddleware;\n }\n\n set authConfig(authConfig: AuthConfig | undefined) {\n this._authConfig = authConfig;\n }\n\n get authConfig(): AuthConfig | undefined {\n return this._authConfig;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGO,MAAM,gCAAgC,GAC3C;MACW,aAAa,GAAG,MAAM,CAAmB,IAAI;;MCD7C,SAAS,CAAA;AACZ,IAAA,QAAQ;AACR,IAAA,SAAS;AACT,IAAA,YAAY;AACZ,IAAA,2BAA2B;AAC3B,IAAA,WAAW;IAEnB,IAAI,OAAO,CAAC,OAA2B,EAAA;AACrC,QAAA,IAAI,CAAC,QAAQ,GAAG,OAAO;;AAGzB,IAAA,IAAI,OAAO,GAAA;QACT,OAAO,IAAI,CAAC,QAAQ;;IAGtB,IAAI,QAAQ,CAAC,QAAmC,EAAA;AAC9C,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;;AAG3B,IAAA,IAAI,QAAQ,GAAA;QACV,OAAO,IAAI,CAAC,SAAS;;IAGvB,IAAI,WAAW,CAAC,WAAoC,EAAA;AAClD,QAAA,IAAI,CAAC,YAAY,GAAG,WAAW;;AAGjC,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,YAAY,IAAI,EAAE;;IAGhC,IAAI,0BAA0B,CAC5B,0BAAkE,EAAA;AAElE,QAAA,IAAI,CAAC,2BAA2B,GAAG,0BAA0B;;AAG/D,IAAA,IAAI,0BAA0B,GAAA;QAC5B,OAAO,IAAI,CAAC,2BAA2B;;IAGzC,IAAI,UAAU,CAAC,UAAkC,EAAA;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;AAG/B,IAAA,IAAI,UAAU,GAAA;QACZ,OAAO,IAAI,CAAC,WAAW;;AAE1B;;ACpDD;;AAEG;;;;"}
|
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
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
|
+
import { CURRENT_THEME } from '@koalarx/ui/core/config';
|
|
5
6
|
import { randomString } from '@koalarx/utils/KlString';
|
|
6
7
|
import { FieldErrors } from '@koalarx/ui/shared/components/field-errors';
|
|
7
8
|
import { InputMask } from '@koalarx/ui/shared/directives';
|
|
@@ -22,6 +23,17 @@ class InputFieldBase {
|
|
|
22
23
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
23
24
|
constructor() {
|
|
24
25
|
effect(() => this.checkIsRequired(this.control()));
|
|
26
|
+
effect(() => {
|
|
27
|
+
CURRENT_THEME();
|
|
28
|
+
if (this.elementRef.nativeElement?.tagName.toLowerCase() !==
|
|
29
|
+
'kl-input-field') {
|
|
30
|
+
const container = this.elementRef.nativeElement.parentElement;
|
|
31
|
+
if (container) {
|
|
32
|
+
const containerBgColor = this.getBgColorParent(container);
|
|
33
|
+
this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
});
|
|
25
37
|
}
|
|
26
38
|
getBgColorParent(element) {
|
|
27
39
|
const containerBgColor = window.getComputedStyle(element).backgroundColor;
|
|
@@ -36,18 +48,6 @@ class InputFieldBase {
|
|
|
36
48
|
checkIsRequired(control) {
|
|
37
49
|
this.required.set(control.hasValidator(Validators.required));
|
|
38
50
|
}
|
|
39
|
-
ngAfterViewInit() {
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
if (this.elementRef.nativeElement?.tagName.toLowerCase() !==
|
|
42
|
-
'kl-input-field') {
|
|
43
|
-
const container = this.elementRef.nativeElement.parentElement;
|
|
44
|
-
if (container) {
|
|
45
|
-
const containerBgColor = this.getBgColorParent(container);
|
|
46
|
-
this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}, 50);
|
|
50
|
-
}
|
|
51
51
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
52
52
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: InputFieldBase, isStandalone: true, inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
53
53
|
}
|
|
@@ -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
|
|
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 { CURRENT_THEME } from '@koalarx/ui/core/config';\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 hint = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n\n constructor() {\n effect(() => this.checkIsRequired(this.control()));\n\n effect(() => {\n CURRENT_THEME();\n\n if (\n this.elementRef.nativeElement?.tagName.toLowerCase() !==\n 'kl-input-field'\n ) {\n const container = this.elementRef.nativeElement.parentElement;\n\n if (container) {\n const containerBgColor = this.getBgColorParent(container);\n\n this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;\n }\n }\n });\n }\n\n private getBgColorParent(element: HTMLElement): string {\n const containerBgColor = window.getComputedStyle(element).backgroundColor;\n\n if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {\n if (!element.parentElement) {\n return 'var(--color-base-100)';\n }\n\n return this.getBgColorParent(element.parentElement!);\n }\n\n return containerBgColor;\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@if (hint()) {\n <span class=\"hint-content\">\n <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n </span>\n}\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":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"koalarx-ui-theme.mjs","sources":["../../projects/koala-ui/theme/koalarx-ui-theme.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@koalarx/ui",
|
|
3
|
-
"version": "20.3.
|
|
3
|
+
"version": "20.3.3",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=20.0.0",
|
|
6
6
|
"@angular/core": ">=20.0.0"
|
|
@@ -58,6 +58,10 @@
|
|
|
58
58
|
"types": "./index.d.ts",
|
|
59
59
|
"default": "./fesm2022/koalarx-ui.mjs"
|
|
60
60
|
},
|
|
61
|
+
"./theme": {
|
|
62
|
+
"types": "./theme/index.d.ts",
|
|
63
|
+
"default": "./fesm2022/koalarx-ui-theme.mjs"
|
|
64
|
+
},
|
|
61
65
|
"./core/base": {
|
|
62
66
|
"types": "./core/base/index.d.ts",
|
|
63
67
|
"default": "./fesm2022/koalarx-ui-core-base.mjs"
|
|
@@ -202,10 +206,6 @@
|
|
|
202
206
|
"types": "./shared/components/input-field/input-checkbox/index.d.ts",
|
|
203
207
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-checkbox.mjs"
|
|
204
208
|
},
|
|
205
|
-
"./shared/components/input-field/input-cnpj": {
|
|
206
|
-
"types": "./shared/components/input-field/input-cnpj/index.d.ts",
|
|
207
|
-
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-cnpj.mjs"
|
|
208
|
-
},
|
|
209
209
|
"./shared/components/input-field/input-cpf": {
|
|
210
210
|
"types": "./shared/components/input-field/input-cpf/index.d.ts",
|
|
211
211
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-cpf.mjs"
|
|
@@ -214,6 +214,10 @@
|
|
|
214
214
|
"types": "./shared/components/input-field/input-currency/index.d.ts",
|
|
215
215
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-currency.mjs"
|
|
216
216
|
},
|
|
217
|
+
"./shared/components/input-field/input-cnpj": {
|
|
218
|
+
"types": "./shared/components/input-field/input-cnpj/index.d.ts",
|
|
219
|
+
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-cnpj.mjs"
|
|
220
|
+
},
|
|
217
221
|
"./shared/components/input-field/input-date": {
|
|
218
222
|
"types": "./shared/components/input-field/input-date/index.d.ts",
|
|
219
223
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-date.mjs"
|
|
@@ -230,14 +234,14 @@
|
|
|
230
234
|
"types": "./shared/components/input-field/input-month/index.d.ts",
|
|
231
235
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-month.mjs"
|
|
232
236
|
},
|
|
233
|
-
"./shared/components/input-field/input-password": {
|
|
234
|
-
"types": "./shared/components/input-field/input-password/index.d.ts",
|
|
235
|
-
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-password.mjs"
|
|
236
|
-
},
|
|
237
237
|
"./shared/components/input-field/input-radio": {
|
|
238
238
|
"types": "./shared/components/input-field/input-radio/index.d.ts",
|
|
239
239
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-radio.mjs"
|
|
240
240
|
},
|
|
241
|
+
"./shared/components/input-field/input-password": {
|
|
242
|
+
"types": "./shared/components/input-field/input-password/index.d.ts",
|
|
243
|
+
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-password.mjs"
|
|
244
|
+
},
|
|
241
245
|
"./shared/components/input-field/input-text": {
|
|
242
246
|
"types": "./shared/components/input-field/input-text/index.d.ts",
|
|
243
247
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-text.mjs"
|
|
@@ -250,14 +254,14 @@
|
|
|
250
254
|
"types": "./shared/components/input-field/input-url/index.d.ts",
|
|
251
255
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-input-url.mjs"
|
|
252
256
|
},
|
|
253
|
-
"./shared/components/input-field/select": {
|
|
254
|
-
"types": "./shared/components/input-field/select/index.d.ts",
|
|
255
|
-
"default": "./fesm2022/koalarx-ui-shared-components-input-field-select.mjs"
|
|
256
|
-
},
|
|
257
257
|
"./shared/components/input-field/switcher": {
|
|
258
258
|
"types": "./shared/components/input-field/switcher/index.d.ts",
|
|
259
259
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-switcher.mjs"
|
|
260
260
|
},
|
|
261
|
+
"./shared/components/input-field/select": {
|
|
262
|
+
"types": "./shared/components/input-field/select/index.d.ts",
|
|
263
|
+
"default": "./fesm2022/koalarx-ui-shared-components-input-field-select.mjs"
|
|
264
|
+
},
|
|
261
265
|
"./shared/components/input-field/textarea": {
|
|
262
266
|
"types": "./shared/components/input-field/textarea/index.d.ts",
|
|
263
267
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-textarea.mjs"
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { AfterViewInit } from '@angular/core';
|
|
3
2
|
import { FormControl } from '@angular/forms';
|
|
4
3
|
|
|
5
|
-
declare abstract class InputFieldBase
|
|
4
|
+
declare abstract class InputFieldBase {
|
|
6
5
|
private readonly elementRef;
|
|
7
6
|
private readonly required;
|
|
8
7
|
protected readonly isDisabled: _angular_core.WritableSignal<boolean>;
|
|
@@ -16,7 +15,6 @@ declare abstract class InputFieldBase implements AfterViewInit {
|
|
|
16
15
|
constructor();
|
|
17
16
|
private getBgColorParent;
|
|
18
17
|
private checkIsRequired;
|
|
19
|
-
ngAfterViewInit(): void;
|
|
20
18
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputFieldBase, never>;
|
|
21
19
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputFieldBase, never, never, { "control": { "alias": "control"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
22
20
|
}
|
package/theme/index.d.ts
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
type ThemeName = 'koala' | 'light' | 'dark' | 'cupcake' | 'bumblebee' | 'emerald' | 'corporate' | 'synthwave' | 'retro' | 'cyberpunk' | 'valentine' | 'halloween' | 'garden' | 'forest' | 'aqua' | 'lofi' | 'pastel' | 'fantasy' | 'wireframe' | 'black' | 'luxury' | 'dracula' | 'cmyk' | 'autumn' | 'business' | 'acid' | 'lemonade' | 'night' | 'coffee' | 'winter' | 'dim' | 'nord' | 'sunset' | 'caramellatte' | 'abyss' | 'silk';
|
|
2
|
+
|
|
3
|
+
export type { ThemeName };
|
package/theme/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './theme-name';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export type ThemeName =
|
|
2
|
+
| 'koala'
|
|
3
|
+
| 'light'
|
|
4
|
+
| 'dark'
|
|
5
|
+
| 'cupcake'
|
|
6
|
+
| 'bumblebee'
|
|
7
|
+
| 'emerald'
|
|
8
|
+
| 'corporate'
|
|
9
|
+
| 'synthwave'
|
|
10
|
+
| 'retro'
|
|
11
|
+
| 'cyberpunk'
|
|
12
|
+
| 'valentine'
|
|
13
|
+
| 'halloween'
|
|
14
|
+
| 'garden'
|
|
15
|
+
| 'forest'
|
|
16
|
+
| 'aqua'
|
|
17
|
+
| 'lofi'
|
|
18
|
+
| 'pastel'
|
|
19
|
+
| 'fantasy'
|
|
20
|
+
| 'wireframe'
|
|
21
|
+
| 'black'
|
|
22
|
+
| 'luxury'
|
|
23
|
+
| 'dracula'
|
|
24
|
+
| 'cmyk'
|
|
25
|
+
| 'autumn'
|
|
26
|
+
| 'business'
|
|
27
|
+
| 'acid'
|
|
28
|
+
| 'lemonade'
|
|
29
|
+
| 'night'
|
|
30
|
+
| 'coffee'
|
|
31
|
+
| 'winter'
|
|
32
|
+
| 'dim'
|
|
33
|
+
| 'nord'
|
|
34
|
+
| 'sunset'
|
|
35
|
+
| 'caramellatte'
|
|
36
|
+
| 'abyss'
|
|
37
|
+
| 'silk';
|