@acorex/components 16.18.28 → 16.18.30
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/form-group/form-group.component.mjs +12 -5
- package/esm2022/lib/tab-strip/tab-strip.component.mjs +11 -4
- package/fesm2022/acorex-components.mjs +21 -7
- package/fesm2022/acorex-components.mjs.map +1 -1
- package/lib/form-group/form-group.component.d.ts +1 -0
- package/lib/tab-strip/tab-strip.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AXConfig } from '@acorex/core';
|
|
2
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, ViewChild, ViewEncapsulation, afterNextRender, inject, model, } from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, ViewChild, ViewEncapsulation, afterNextRender, inject, model, signal, } from '@angular/core';
|
|
3
3
|
import { AXBaseComponent, AXValidatableComponent, } from '../base/element.class';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "@angular/common";
|
|
@@ -10,15 +10,22 @@ export class AXFormGroupComponent extends AXBaseComponent {
|
|
|
10
10
|
component;
|
|
11
11
|
required = AXConfig.get('form')?.required || false;
|
|
12
12
|
labelMode = model(AXConfig.get('form')?.labelMode || 'static');
|
|
13
|
+
inputHeight = signal('3rem');
|
|
13
14
|
#nextRender = afterNextRender(() => {
|
|
14
15
|
this.required = this.component?.validation?.rules?.some((c) => c.type === 'required' && c.enabled);
|
|
15
16
|
this.div.nativeElement.classList.add(this.size);
|
|
16
17
|
if (this.required) {
|
|
17
18
|
this.div.nativeElement.classList.add('required-state');
|
|
18
19
|
}
|
|
20
|
+
const convertTypeComponent = this.component;
|
|
21
|
+
if (convertTypeComponent.componentName === 'selectBox') {
|
|
22
|
+
this.inputHeight.set('3.5rem');
|
|
23
|
+
}
|
|
24
|
+
if (convertTypeComponent.componentName === 'textArea') {
|
|
25
|
+
this.inputHeight.set('auto');
|
|
26
|
+
}
|
|
19
27
|
if (this.labelMode() === 'static' || this.labelMode() === 'over')
|
|
20
28
|
return;
|
|
21
|
-
const convertTypeComponent = this.component;
|
|
22
29
|
if (convertTypeComponent.value ||
|
|
23
30
|
convertTypeComponent.selectedItems?.length > 0) {
|
|
24
31
|
this.labelMode.set('over');
|
|
@@ -54,11 +61,11 @@ export class AXFormGroupComponent extends AXBaseComponent {
|
|
|
54
61
|
}
|
|
55
62
|
});
|
|
56
63
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
57
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n [style.height]=\"inputHeight()\"\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
58
65
|
}
|
|
59
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, decorators: [{
|
|
60
67
|
type: Component,
|
|
61
|
-
args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"] }]
|
|
68
|
+
args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n [style.height]=\"inputHeight()\"\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"] }]
|
|
62
69
|
}], propDecorators: { size: [{
|
|
63
70
|
type: Input
|
|
64
71
|
}], div: [{
|
|
@@ -68,4 +75,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
|
|
|
68
75
|
type: ContentChild,
|
|
69
76
|
args: [AXValidatableComponent]
|
|
70
77
|
}] } });
|
|
71
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
78
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1ncm91cC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9mb3JtLWdyb3VwL2Zvcm0tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3NyYy9saWIvZm9ybS1ncm91cC9mb3JtLWdyb3VwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDeEMsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBRVYsS0FBSyxFQUNMLFNBQVMsRUFDVCxpQkFBaUIsRUFDakIsZUFBZSxFQUNmLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDTCxlQUFlLEVBR2Ysc0JBQXNCLEdBQ3ZCLE1BQU0sdUJBQXVCLENBQUM7OztBQVkvQixNQUFNLE9BQU8sb0JBQ1gsU0FBUSxlQUFlO0lBR3ZCLEdBQUcsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztJQUdoQyxJQUFJLEdBQWtCLFFBQVEsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUUsSUFBSSxJQUFJLElBQUksQ0FBQztJQUd6RCxHQUFHLENBQWE7SUFHUixTQUFTLENBQXlCO0lBRTFDLFFBQVEsR0FBRyxRQUFRLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxFQUFFLFFBQVEsSUFBSSxLQUFLLENBQUM7SUFFbkQsU0FBUyxHQUFHLEtBQUssQ0FDZixRQUFRLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxFQUFFLFNBQVMsSUFBSSxRQUFRLENBQzVDLENBQUM7SUFFRixXQUFXLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRTdCLFdB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SUFDSCxDQUFDLENBQUMsQ0FBQzt1R0E3RVEsb0JBQW9COzJGQUFwQixvQkFBb0IseWNBWWpCLHNCQUFzQixtS0M3Q3RDLHcyQkE2QkE7OzJGRElhLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxlQUFlLGlCQUdWLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsZ0NBQWdDLEVBQUU7OEJBU2pELElBQUk7c0JBREgsS0FBSztnQkFJTixHQUFHO3NCQURGLFNBQVM7dUJBQUMsS0FBSztnQkFJUixTQUFTO3NCQURoQixZQUFZO3VCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ29uZmlnIH0gZnJvbSAnQGFjb3JleC9jb3JlJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgVmlld0NoaWxkLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgYWZ0ZXJOZXh0UmVuZGVyLFxuICBpbmplY3QsXG4gIG1vZGVsLFxuICBzaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQVhCYXNlQ29tcG9uZW50LFxuICBBWEJhc2VTaXphYmxlQ29tcG9uZW50LFxuICBBWEVsZW1lbnRTaXplLFxuICBBWFZhbGlkYXRhYmxlQ29tcG9uZW50LFxufSBmcm9tICcuLi9iYXNlL2VsZW1lbnQuY2xhc3MnO1xuaW1wb3J0IHsgQVhTZWxlY3RCb3hDb21wb25lbnQgfSBmcm9tICcuLi9zZWxlY3Rib3gvc2VsZWN0Ym94LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWFRleHRBcmVhQ29tcG9uZW50IH0gZnJvbSAnLi4vdGV4dGFyZWEvdGV4dGFyZWEuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtZm9ybS1ncm91cCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2Zvcm0tZ3JvdXAuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBzdHlsZTogJ3dpZHRoOiAxMDAlOyBkaXNwbGF5OmNvbnRlbnRzOycgfSxcbn0pXG5leHBvcnQgY2xhc3MgQVhGb3JtR3JvdXBDb21wb25lbnRcbiAgZXh0ZW5kcyBBWEJhc2VDb21wb25lbnRcbiAgaW1wbGVtZW50cyBBWEJhc2VTaXphYmxlQ29tcG9uZW50XG57XG4gIGNyZCA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG5cbiAgQElucHV0KClcbiAgc2l6ZTogQVhFbGVtZW50U2l6ZSA9IEFYQ29uZmlnLmdldCgnZm9ybScpPy5zaXplIHx8ICdtZCc7XG5cbiAgQFZpZXdDaGlsZCgnZGl2JylcbiAgZGl2OiBFbGVtZW50UmVmO1xuXG4gIEBDb250ZW50Q2hpbGQoQVhWYWxpZGF0YWJsZUNvbXBvbmVudClcbiAgcHJpdmF0ZSBjb21wb25lbnQ6IEFYVmFsaWRhdGFibGVDb21wb25lbnQ7XG5cbiAgcmVxdWlyZWQgPSBBWENvbmZpZy5nZXQoJ2Zvcm0nKT8ucmVxdWlyZWQgfHwgZmFsc2U7XG5cbiAgbGFiZWxNb2RlID0gbW9kZWw8J3N0YXRpYycgfCAnZmxvYXQnIHwgJ292ZXInPihcbiAgICBBWENvbmZpZy5nZXQoJ2Zvcm0nKT8ubGFiZWxNb2RlIHx8ICdzdGF0aWMnXG4gICk7XG5cbiAgaW5wdXRIZWlnaHQgPSBzaWduYWwoJzNyZW0nKTtcblxuICAjbmV4dFJlbmRlciA9IGFmdGVyTmV4dFJlbmRlcigoKSA9PiB7XG4gICAgdGhpcy5yZXF1aXJlZCA9IHRoaXMuY29tcG9uZW50Py52YWxpZGF0aW9uPy5ydWxlcz8uc29tZShcbiAgICAgIChjKSA9PiBjLnR5cGUgPT09ICdyZXF1aXJlZCcgJiYgYy5lbmFibGVkXG4gICAgKTtcbiAgICB0aGlzLmRpdi5uYXRpdmVFbGVtZW50LmNsYXNzTGlzdC5hZGQodGhpcy5zaXplKTtcbiAgICBpZiAodGhpcy5yZXF1aXJlZCkge1xuICAgICAgdGhpcy5kaXYubmF0aXZlRWxlbWVudC5jbGFzc0xpc3QuYWRkKCdyZXF1aXJlZC1zdGF0ZScpO1xuICAgIH1cblxuICAgIGNvbnN0IGNvbnZlcnRUeXBlQ29tcG9uZW50ID0gdGhpcy5jb21wb25lbnQgYXMgYW55O1xuICAgIGlmIChjb252ZXJ0VHlwZUNvbXBvbmVudC5jb21wb25lbnROYW1lID09PSAnc2VsZWN0Qm94Jykge1xuICAgICAgdGhpcy5pbnB1dEhlaWdodC5zZXQoJzMuNXJlbScpO1xuICAgIH1cblxuICAgIGlmIChjb252ZXJ0VHlwZUNvbXBvbmVudC5jb21wb25lbnROYW1lID09PSAndGV4dEFyZWEnKSB7XG4gICAgICB0aGlzLmlucHV0SGVpZ2h0LnNldCgnYXV0bycpO1xuICAgIH1cblxuICAgIGlmICh0aGlzLmxhYmVsTW9kZSgpID09PSAnc3RhdGljJyB8fCB0aGlzLmxhYmVsTW9kZSgpID09PSAnb3ZlcicpIHJldHVybjtcblxuICAgIGlmIChcbiAgICAgIGNvbnZlcnRUeXBlQ29tcG9uZW50LnZhbHVlIHx8XG4gICAgICBjb252ZXJ0VHlwZUNvbXBvbmVudC5zZWxlY3RlZEl0ZW1zPy5sZW5ndGggPiAwXG4gICAgKSB7XG4gICAgICB0aGlzLmxhYmVsTW9kZS5zZXQoJ292ZXInKTtcbiAgICB9XG5cbiAgICBpZiAoY29udmVydFR5cGVDb21wb25lbnQuY29tcG9uZW50TmFtZSA9PT0gJ3NlbGVjdEJveCcpIHtcbiAgICAgIGNvbnN0IHNlbGVjdEJveCA9IHRoaXMuY29tcG9uZW50IGFzIEFYU2VsZWN0Qm94Q29tcG9uZW50O1xuICAgICAgc2VsZWN0Qm94LnNlbGVjdGVkSXRlbXNDaGFuZ2Uuc3Vic2NyaWJlKChlKSA9PiB7XG4gICAgICAgIGlmIChlLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICB0aGlzLmxhYmVsTW9kZS5zZXQoJ292ZXInKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmxhYmVsTW9kZS5zZXQoJ2Zsb2F0Jyk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb252ZXJ0VHlwZUNvbXBvbmVudC5vblZhbHVlQ2hhbmdlZC5zdWJzY3JpYmUoKGU6IGFueSkgPT4ge1xuICAgICAgICBpZiAoZS52YWx1ZSkge1xuICAgICAgICAgIHRoaXMubGFiZWxNb2RlLnNldCgnb3ZlcicpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHRoaXMubGFiZWxNb2RlLnNldCgnZmxvYXQnKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuXG4gICAgaWYgKGNvbnZlcnRUeXBlQ29tcG9uZW50LmNvbXBvbmVudE5hbWUgPT09ICd0ZXh0QXJlYScpIHtcbiAgICAgIGNvbnN0IHRleHRBcmVhID0gdGhpcy5jb21wb25lbnQgYXMgQVhUZXh0QXJlYUNvbXBvbmVudDtcbiAgICAgIHRleHRBcmVhLm9uRm9jdXMuc3Vic2NyaWJlKChlKSA9PiB7XG4gICAgICAgIGlmICghZS50YXJnZXQudmFsdWUpIHtcbiAgICAgICAgICB0aGlzLmxhYmVsTW9kZS5zZXQoJ292ZXInKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuICB9KTtcbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJheCBmb3JtLWdyb3VwIHt7IHNpemUgfX0gYXgtZm9ybS1ncm91cC1jb250YWluZXIge3tcbiAgICBsYWJlbE1vZGUoKSAhPT0gJ3N0YXRpYycgJiYgJ2F4LW1hcmdpbi1mb3JtJ1xuICB9fVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJheC1sYWJsZS17eyBsYWJlbE1vZGUoKSB9fVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LWxhYmVsXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbiAgPGRpdlxuICAgIFtzdHlsZS5oZWlnaHRdPVwiaW5wdXRIZWlnaHQoKVwiXG4gICAgI2RpdlxuICAgIGNsYXNzPVwiYXggZm9ybS1pdGVtIHt7IHNpemUgfX1cIlxuICAgIFtuZ0NsYXNzXT1cInsgJ3JlcXVpcmVkLXN0YXRlJzogcmVxdWlyZWQgfVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwiYXggYnV0dG9ucyBzdGFydC1idXR0b25zXCIgI3N0YXJ0QnV0dG9ucz5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LWJ1dHRvbltzdGFydF1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjb250ZW50IHt7IGxhYmVsTW9kZSgpID09PSAnb3ZlcicgJiYgJ2F4LW92ZXItYXBwbHknIH19XCJcbiAgICAgICNjb250ZW50XG4gICAgPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJheCBidXR0b25zIGVuZC1idXR0b25zXCIgI2VuZEJ1dHRvbnM+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1idXR0b25bZW5kXVwiPjwvbmctY29udGVudD5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LWJ1dHRvblwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -14,8 +14,15 @@ export class AXTabStripComponent {
|
|
|
14
14
|
maxWidth;
|
|
15
15
|
items = [];
|
|
16
16
|
onTabChanged = new EventEmitter();
|
|
17
|
-
handleClick(i) {
|
|
17
|
+
handleClick(i, e) {
|
|
18
18
|
if (!i.disable) {
|
|
19
|
+
if (this.maxWidth) {
|
|
20
|
+
const clickedItem = e.target;
|
|
21
|
+
clickedItem.scrollIntoView({
|
|
22
|
+
behavior: 'smooth',
|
|
23
|
+
inline: 'center',
|
|
24
|
+
});
|
|
25
|
+
}
|
|
19
26
|
this.items.forEach((c) => (c.active = false));
|
|
20
27
|
i.active = true;
|
|
21
28
|
this.onTabChanged.emit({
|
|
@@ -26,11 +33,11 @@ export class AXTabStripComponent {
|
|
|
26
33
|
}
|
|
27
34
|
}
|
|
28
35
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { maxWidth: "maxWidth", items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { maxWidth: "maxWidth", items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
30
37
|
}
|
|
31
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabStripComponent, decorators: [{
|
|
32
39
|
type: Component,
|
|
33
|
-
args: [{ selector: 'ax-tab-strip', template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n" }]
|
|
40
|
+
args: [{ selector: 'ax-tab-strip', template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n" }]
|
|
34
41
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { maxWidth: [{
|
|
35
42
|
type: Input
|
|
36
43
|
}], items: [{
|
|
@@ -38,4 +45,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
|
|
|
38
45
|
}], onTabChanged: [{
|
|
39
46
|
type: Output
|
|
40
47
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLXN0cmlwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL3RhYi1zdHJpcC90YWItc3RyaXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3NyYy9saWIvdGFiLXN0cmlwL3RhYi1zdHJpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFVBQVUsR0FDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7OztBQWVuRCxNQUFNLE9BQU8sc0JBQXVCLFNBQVEsV0FBVztJQUNyRCxXQUFXLENBQWlCO0NBQzdCO0FBTUQsTUFBTSxPQUFPLG1CQUFtQjtJQUNWO0lBQXBCLFlBQW9CLEdBQWU7UUFBZixRQUFHLEdBQUgsR0FBRyxDQUFZO0lBQUcsQ0FBQztJQUV2QyxRQUFRLEtBQVUsQ0FBQztJQUduQixRQUFRLENBQVM7SUFHakIsS0FBSyxHQUFxQixFQUFFLENBQUM7SUFHN0IsWUFBWSxHQUNWLElBQUksWUFBWSxFQUEwQixDQUFDO0lBRTdDLFdBQVcsQ0FBQyxDQUFpQixFQUFFLENBQWE7UUFDMUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNmLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO2dCQUNsQixNQUFNLFdBQVcsR0FBRyxDQUFDLENBQUMsTUFBcUIsQ0FBQztnQkFDNUMsV0FBVyxDQUFDLGNBQWMsQ0FBQztvQkFDekIsUUFBUSxFQUFFLFFBQVE7b0JBQ2xCLE1BQU0sRUFBRSxRQUFRO2lCQUNqQixDQUFDLENBQUM7WUFDTCxDQUFDO1lBQ0QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO1lBQzlDLENBQUMsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1lBQ2hCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO2dCQUNyQixTQUFTLEVBQUUsSUFBSTtnQkFDZixXQUFXLEVBQUUsQ0FBQztnQkFDZCxXQUFXLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhO2FBQ3BDLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO3VHQWhDVSxtQkFBbUI7MkZBQW5CLG1CQUFtQixpSkMvQmhDLHliQWdCQTs7MkZEZWEsbUJBQW1CO2tCQUovQixTQUFTOytCQUNFLGNBQWM7K0VBU3hCLFFBQVE7c0JBRFAsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sWUFBWTtzQkFEWCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBPbkluaXQsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgRWxlbWVudFJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWEJhc2VFdmVudCB9IGZyb20gJy4uL2Jhc2UvZXZlbnRzLmNsYXNzJztcblxuZXhwb3J0IGRlY2xhcmUgY2xhc3MgQVhUYWJTdHJpcEl0ZW0ge1xuICBpZDogc3RyaW5nO1xuICBuYW1lPzogc3RyaW5nO1xuICB0ZXh0Pzogc3RyaW5nO1xuICB0b29sdGlwPzogc3RyaW5nO1xuICBpY29uPzogc3RyaW5nO1xuICB2aXNpYmxlPzogYm9vbGVhbjtcbiAgZGlzYWJsZT86IGJvb2xlYW47XG4gIGRhdGE/OiBhbnk7XG4gIHN0eWxlPzogc3RyaW5nO1xuICBhY3RpdmU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY2xhc3MgQVhUYWJTdHJpcENoYW5nZWRFdmVudCBleHRlbmRzIEFYQmFzZUV2ZW50IHtcbiAgc2VsZWR0ZWRUYWI6IEFYVGFiU3RyaXBJdGVtO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC10YWItc3RyaXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLXN0cmlwLmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgQVhUYWJTdHJpcENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVmOiBFbGVtZW50UmVmKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICBASW5wdXQoKVxuICBtYXhXaWR0aDogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGl0ZW1zOiBBWFRhYlN0cmlwSXRlbVtdID0gW107XG5cbiAgQE91dHB1dCgpXG4gIG9uVGFiQ2hhbmdlZDogRXZlbnRFbWl0dGVyPEFYVGFiU3RyaXBDaGFuZ2VkRXZlbnQ+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPEFYVGFiU3RyaXBDaGFuZ2VkRXZlbnQ+KCk7XG5cbiAgaGFuZGxlQ2xpY2soaTogQVhUYWJTdHJpcEl0ZW0sIGU6IE1vdXNlRXZlbnQpIHtcbiAgICBpZiAoIWkuZGlzYWJsZSkge1xuICAgICAgaWYgKHRoaXMubWF4V2lkdGgpIHtcbiAgICAgICAgY29uc3QgY2xpY2tlZEl0ZW0gPSBlLnRhcmdldCBhcyBIVE1MRWxlbWVudDtcbiAgICAgICAgY2xpY2tlZEl0ZW0uc2Nyb2xsSW50b1ZpZXcoe1xuICAgICAgICAgIGJlaGF2aW9yOiAnc21vb3RoJyxcbiAgICAgICAgICBpbmxpbmU6ICdjZW50ZXInLFxuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICAgIHRoaXMuaXRlbXMuZm9yRWFjaCgoYykgPT4gKGMuYWN0aXZlID0gZmFsc2UpKTtcbiAgICAgIGkuYWN0aXZlID0gdHJ1ZTtcbiAgICAgIHRoaXMub25UYWJDaGFuZ2VkLmVtaXQoe1xuICAgICAgICBjb21wb25lbnQ6IHRoaXMsXG4gICAgICAgIHNlbGVkdGVkVGFiOiBpLFxuICAgICAgICBodG1sRWxlbWVudDogdGhpcy5yZWYubmF0aXZlRWxlbWVudCxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPHVsXG4gIGNsYXNzPVwidGFiLXN0cmlwLWNvbnRhaW5lclwiXG4gIFtuZ0NsYXNzXT1cInsgJ3RhYi1zdHJpcC1jdXN0b20td2lkdGgnOiBtYXhXaWR0aCB9XCJcbiAgW3N0eWxlLm1heC13aWR0aF09XCJtYXhXaWR0aFwiXG4+XG4gIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIj5cbiAgICA8bGlcbiAgICAgICpuZ0lmPVwiISFpdGVtLnZpc2libGUgfHwgaXRlbS52aXNpYmxlID09IHVuZGVmaW5lZFwiXG4gICAgICBbY2xhc3MuYWN0aXZlXT1cIml0ZW0uYWN0aXZlXCJcbiAgICAgIFtjbGFzcy5kaXNhYmxlZF09XCJpdGVtLmRpc2FibGVcIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZUNsaWNrKGl0ZW0sICRldmVudClcIlxuICAgID5cbiAgICAgIHt7IGl0ZW0udGV4dCB9fVxuICAgIDwvbGk+XG4gIDwvbmctY29udGFpbmVyPlxuPC91bD5cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, inject, ChangeDetectorRef, model, afterNextRender, input, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
|
|
2
|
+
import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, inject, ChangeDetectorRef, model, signal, afterNextRender, input, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1$2 from '@acorex/core';
|
|
4
4
|
import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
|
|
5
5
|
import * as i1 from '@angular/cdk/overlay';
|
|
@@ -6185,15 +6185,22 @@ class AXFormGroupComponent extends AXBaseComponent {
|
|
|
6185
6185
|
component;
|
|
6186
6186
|
required = AXConfig.get('form')?.required || false;
|
|
6187
6187
|
labelMode = model(AXConfig.get('form')?.labelMode || 'static');
|
|
6188
|
+
inputHeight = signal('3rem');
|
|
6188
6189
|
#nextRender = afterNextRender(() => {
|
|
6189
6190
|
this.required = this.component?.validation?.rules?.some((c) => c.type === 'required' && c.enabled);
|
|
6190
6191
|
this.div.nativeElement.classList.add(this.size);
|
|
6191
6192
|
if (this.required) {
|
|
6192
6193
|
this.div.nativeElement.classList.add('required-state');
|
|
6193
6194
|
}
|
|
6195
|
+
const convertTypeComponent = this.component;
|
|
6196
|
+
if (convertTypeComponent.componentName === 'selectBox') {
|
|
6197
|
+
this.inputHeight.set('3.5rem');
|
|
6198
|
+
}
|
|
6199
|
+
if (convertTypeComponent.componentName === 'textArea') {
|
|
6200
|
+
this.inputHeight.set('auto');
|
|
6201
|
+
}
|
|
6194
6202
|
if (this.labelMode() === 'static' || this.labelMode() === 'over')
|
|
6195
6203
|
return;
|
|
6196
|
-
const convertTypeComponent = this.component;
|
|
6197
6204
|
if (convertTypeComponent.value ||
|
|
6198
6205
|
convertTypeComponent.selectedItems?.length > 0) {
|
|
6199
6206
|
this.labelMode.set('over');
|
|
@@ -6229,11 +6236,11 @@ class AXFormGroupComponent extends AXBaseComponent {
|
|
|
6229
6236
|
}
|
|
6230
6237
|
});
|
|
6231
6238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6239
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n [style.height]=\"inputHeight()\"\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6233
6240
|
}
|
|
6234
6241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, decorators: [{
|
|
6235
6242
|
type: Component,
|
|
6236
|
-
args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"] }]
|
|
6243
|
+
args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-margin-form'\n }}\"\n>\n <div class=\"ax-lable-{{ labelMode() }}\">\n <ng-content select=\"ax-label\"></ng-content>\n </div>\n <div\n [style.height]=\"inputHeight()\"\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div\n class=\"content {{ labelMode() === 'over' && 'ax-over-apply' }}\"\n #content\n >\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:7%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over .form-group-label,.ax-form-group-container .ax-lable-float .form-group-label{padding:.1rem .5rem!important;font-size:.7rem!important}.ax-form-group-container .content.ax-over-apply{padding:.8rem 0 0}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"] }]
|
|
6237
6244
|
}], propDecorators: { size: [{
|
|
6238
6245
|
type: Input
|
|
6239
6246
|
}], div: [{
|
|
@@ -15620,8 +15627,15 @@ class AXTabStripComponent {
|
|
|
15620
15627
|
maxWidth;
|
|
15621
15628
|
items = [];
|
|
15622
15629
|
onTabChanged = new EventEmitter();
|
|
15623
|
-
handleClick(i) {
|
|
15630
|
+
handleClick(i, e) {
|
|
15624
15631
|
if (!i.disable) {
|
|
15632
|
+
if (this.maxWidth) {
|
|
15633
|
+
const clickedItem = e.target;
|
|
15634
|
+
clickedItem.scrollIntoView({
|
|
15635
|
+
behavior: 'smooth',
|
|
15636
|
+
inline: 'center',
|
|
15637
|
+
});
|
|
15638
|
+
}
|
|
15625
15639
|
this.items.forEach((c) => (c.active = false));
|
|
15626
15640
|
i.active = true;
|
|
15627
15641
|
this.onTabChanged.emit({
|
|
@@ -15632,11 +15646,11 @@ class AXTabStripComponent {
|
|
|
15632
15646
|
}
|
|
15633
15647
|
}
|
|
15634
15648
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
15635
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { maxWidth: "maxWidth", items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
15649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { maxWidth: "maxWidth", items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
15636
15650
|
}
|
|
15637
15651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabStripComponent, decorators: [{
|
|
15638
15652
|
type: Component,
|
|
15639
|
-
args: [{ selector: 'ax-tab-strip', template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n" }]
|
|
15653
|
+
args: [{ selector: 'ax-tab-strip', template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n" }]
|
|
15640
15654
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { maxWidth: [{
|
|
15641
15655
|
type: Input
|
|
15642
15656
|
}], items: [{
|