aeb-ui-kit 10.0.0-preview.1175 → 10.0.0-preview.1183
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/fesm2022/aeb-ui-kit.mjs +384 -237
- package/fesm2022/aeb-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/types/aeb-ui-kit.d.ts +83 -83
package/fesm2022/aeb-ui-kit.mjs
CHANGED
|
@@ -65,8 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
65
65
|
|
|
66
66
|
class ActionBar {
|
|
67
67
|
constructor() {
|
|
68
|
-
this.isOpen = input(
|
|
69
|
-
this.zIndex = input(
|
|
68
|
+
this.isOpen = input(...(ngDevMode ? [undefined, { debugName: "isOpen" }] : []));
|
|
69
|
+
this.zIndex = input(...(ngDevMode ? [undefined, { debugName: "zIndex" }] : []));
|
|
70
70
|
}
|
|
71
71
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
72
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: ActionBar, isStandalone: true, selector: "aeb-action-bar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"aeb-action-bar\"\n [style]=\"'z-index: ' + (zIndex() || 'var(--z-fixed)')\"\n [ngClass]=\"{\n 'aeb-action-bar--open': isOpen()\n }\"\n>\n <ng-content />\n</div>\n", styles: [".aeb-action-bar{position:fixed;bottom:-90px;z-index:var(--z-fixed);width:100vw;height:90px;background-color:var(--color-mono-0);transition:position,.2s}.aeb-action-bar--open{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -169,10 +169,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
169
169
|
class Checkbox {
|
|
170
170
|
constructor() {
|
|
171
171
|
this._checkboxInput = viewChild('checkbox', ...(ngDevMode ? [{ debugName: "_checkboxInput" }] : []));
|
|
172
|
-
this.id = input(
|
|
172
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
173
173
|
this.isValid = input(true, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
|
|
174
174
|
this.hasText = input(true, ...(ngDevMode ? [{ debugName: "hasText" }] : []));
|
|
175
|
-
this.name = input(
|
|
175
|
+
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
176
176
|
this.initialChecked = input(false, ...(ngDevMode ? [{ debugName: "initialChecked" }] : []));
|
|
177
177
|
this.initialDisabled = input(false, ...(ngDevMode ? [{ debugName: "initialDisabled" }] : []));
|
|
178
178
|
this.valueChange = output();
|
|
@@ -210,7 +210,10 @@ class Checkbox {
|
|
|
210
210
|
}
|
|
211
211
|
setDisabledState(isDisabled) {
|
|
212
212
|
this._isDisabled = isDisabled;
|
|
213
|
-
this._checkboxInput()
|
|
213
|
+
const checkboxInput = this._checkboxInput();
|
|
214
|
+
if (checkboxInput) {
|
|
215
|
+
checkboxInput.nativeElement.disabled = isDisabled;
|
|
216
|
+
}
|
|
214
217
|
}
|
|
215
218
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
216
219
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Checkbox, isStandalone: true, selector: "aeb-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, hasText: { classPropertyName: "hasText", publicName: "hasText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initialChecked: { classPropertyName: "initialChecked", publicName: "initialChecked", isSignal: true, isRequired: false, transformFunction: null }, initialDisabled: { classPropertyName: "initialDisabled", publicName: "initialDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.aeb-checkbox--checked": "_isChecked", "class.aeb-checkbox--disabled": "_isDisabled", "class.aeb-checkbox--error": "!isValid()" }, classAttribute: "aeb-checkbox" }, providers: [
|
|
@@ -261,12 +264,16 @@ class CheckboxGroup {
|
|
|
261
264
|
});
|
|
262
265
|
}
|
|
263
266
|
isControlValid(checkboxOld) {
|
|
267
|
+
const control = this.checkboxFormGroup.get(checkboxOld.name);
|
|
268
|
+
if (!control) {
|
|
269
|
+
return true;
|
|
270
|
+
}
|
|
264
271
|
if (checkboxOld.checkValidationAfterUncheck &&
|
|
265
|
-
!
|
|
266
|
-
!
|
|
272
|
+
!control.dirty &&
|
|
273
|
+
!control.touched) {
|
|
267
274
|
return true;
|
|
268
275
|
}
|
|
269
|
-
return
|
|
276
|
+
return control.valid;
|
|
270
277
|
}
|
|
271
278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
272
279
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CheckboxGroup, isStandalone: true, selector: "aeb-checkbox-group", inputs: { checkboxArray: { classPropertyName: "checkboxArray", publicName: "checkboxArray", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"aeb-checkbox-group__header\">\u0413\u0440\u0443\u043F\u043F\u0430 \u0447\u0435\u043A\u0431\u043E\u043A\u0441\u043E\u0432</div>\n<form [formGroup]=\"checkboxFormGroup\">\n @for (data of checkboxArray(); track data) {\n <aeb-checkbox\n class=\"aeb-checkbox-layout\"\n [id]=\"data.id\"\n [name]=\"data.name\"\n [required]=\"data.required\"\n [isValid]=\"isControlValid(data)\"\n formControlName=\"{{ data.name }}\"\n >\n {{ data.label }}\n </aeb-checkbox>\n }\n</form>\n", styles: [".aeb-checkbox-group__header{margin-bottom:16px;font-size:var(--font-size-s);color:var(--color-mono-300)}.aeb-checkbox-layout{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: Checkbox, selector: "aeb-checkbox", inputs: ["id", "isValid", "hasText", "name", "initialChecked", "initialDisabled"], outputs: ["valueChange"] }] }); }
|
|
@@ -318,8 +325,8 @@ class CodeInput {
|
|
|
318
325
|
this._destroy$ = new Subject();
|
|
319
326
|
// Internal state for ControlValueAccessor
|
|
320
327
|
this._disabled = false;
|
|
321
|
-
this.title = input(
|
|
322
|
-
this.tip = input(
|
|
328
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
329
|
+
this.tip = input(...(ngDevMode ? [undefined, { debugName: "tip" }] : []));
|
|
323
330
|
this.initialDisabled = input(false, ...(ngDevMode ? [{ debugName: "initialDisabled" }] : []));
|
|
324
331
|
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
325
332
|
this.isResendable = input(true, ...(ngDevMode ? [{ debugName: "isResendable" }] : []));
|
|
@@ -464,7 +471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
464
471
|
|
|
465
472
|
class ErrorMessageDirective {
|
|
466
473
|
constructor() {
|
|
467
|
-
this.errorMessage = input(
|
|
474
|
+
this.errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
|
|
468
475
|
}
|
|
469
476
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ErrorMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
470
477
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: ErrorMessageDirective, isStandalone: true, selector: "[errorMessage]", inputs: { errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
@@ -499,7 +506,7 @@ class FormFieldDirective {
|
|
|
499
506
|
this._value = value;
|
|
500
507
|
}
|
|
501
508
|
disable() {
|
|
502
|
-
if (this.ngControl) {
|
|
509
|
+
if (this.ngControl?.control) {
|
|
503
510
|
this.ngControl.control.disable();
|
|
504
511
|
}
|
|
505
512
|
else {
|
|
@@ -507,7 +514,7 @@ class FormFieldDirective {
|
|
|
507
514
|
}
|
|
508
515
|
}
|
|
509
516
|
enable() {
|
|
510
|
-
if (this.ngControl) {
|
|
517
|
+
if (this.ngControl?.control) {
|
|
511
518
|
this.ngControl.control.enable();
|
|
512
519
|
}
|
|
513
520
|
else {
|
|
@@ -524,7 +531,7 @@ class FormFieldDirective {
|
|
|
524
531
|
this.isFocused = false;
|
|
525
532
|
}
|
|
526
533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
527
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: FormFieldDirective, isStandalone: true, selector: "input[aebInput], textarea[aebTextarea]", inputs: { value: "value" }, host: { listeners: { "input": "change($event.target)", "focus": "focus()", "blur": "blur()" }, properties: { "attr.disabled": "isDisabled" }, classAttribute: "aeb-input" }, ngImport: i0 }); }
|
|
534
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: FormFieldDirective, isStandalone: true, selector: "input[aebInput], textarea[aebTextarea]", inputs: { value: "value" }, host: { listeners: { "input": " change($any($event.target))", "focus": "focus()", "blur": "blur()" }, properties: { "attr.disabled": "isDisabled" }, classAttribute: "aeb-input" }, ngImport: i0 }); }
|
|
528
535
|
}
|
|
529
536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDirective, decorators: [{
|
|
530
537
|
type: Directive,
|
|
@@ -533,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
533
540
|
host: {
|
|
534
541
|
class: 'aeb-input',
|
|
535
542
|
'[attr.disabled]': 'isDisabled',
|
|
536
|
-
'(input)': 'change($event.target)',
|
|
543
|
+
'(input)': ' change($any($event.target))',
|
|
537
544
|
'(focus)': 'focus()',
|
|
538
545
|
'(blur)': 'blur()'
|
|
539
546
|
}
|
|
@@ -544,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
544
551
|
|
|
545
552
|
class IconDirective {
|
|
546
553
|
constructor() {
|
|
547
|
-
this.aebIcon = input(
|
|
554
|
+
this.aebIcon = input(...(ngDevMode ? [undefined, { debugName: "aebIcon" }] : []));
|
|
548
555
|
}
|
|
549
556
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
550
557
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: IconDirective, isStandalone: true, selector: "[aebIcon]", inputs: { aebIcon: { classPropertyName: "aebIcon", publicName: "aebIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
@@ -556,7 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
556
563
|
|
|
557
564
|
class LabelDirective {
|
|
558
565
|
constructor() {
|
|
559
|
-
this.aebLabel = input(
|
|
566
|
+
this.aebLabel = input(...(ngDevMode ? [undefined, { debugName: "aebLabel" }] : []));
|
|
560
567
|
}
|
|
561
568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
562
569
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: LabelDirective, isStandalone: true, selector: "[aebLabel]", inputs: { aebLabel: { classPropertyName: "aebLabel", publicName: "aebLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
@@ -606,19 +613,26 @@ class FormField {
|
|
|
606
613
|
return true;
|
|
607
614
|
}
|
|
608
615
|
if (this.formField?.ngControl) {
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
616
|
+
const ngControl = this.formField.ngControl;
|
|
617
|
+
const invalid = ngControl.invalid ?? false;
|
|
618
|
+
const dirty = ngControl.dirty ?? false;
|
|
619
|
+
const touched = ngControl.touched ?? false;
|
|
620
|
+
const pending = ngControl.pending ?? false;
|
|
621
|
+
return (invalid &&
|
|
622
|
+
(this.validateOnDirty() ? dirty : true) &&
|
|
623
|
+
touched &&
|
|
624
|
+
!pending);
|
|
613
625
|
}
|
|
626
|
+
return false;
|
|
614
627
|
}
|
|
615
628
|
get isDisabled() {
|
|
616
629
|
if (this.disabled()) {
|
|
617
630
|
return true;
|
|
618
631
|
}
|
|
619
632
|
if (this.formField) {
|
|
620
|
-
return this.formField.isDisabled;
|
|
633
|
+
return !!this.formField.isDisabled;
|
|
621
634
|
}
|
|
635
|
+
return false;
|
|
622
636
|
}
|
|
623
637
|
get hasIcon() {
|
|
624
638
|
return this.showIcon();
|
|
@@ -722,10 +736,13 @@ class DomService {
|
|
|
722
736
|
this._componentRef = null;
|
|
723
737
|
this._containerElement = null;
|
|
724
738
|
}
|
|
725
|
-
attachComponent(component, componentProps
|
|
739
|
+
attachComponent(component, componentProps) {
|
|
726
740
|
// Create a container element for the component
|
|
727
741
|
this._containerElement = this._renderer.createElement('div');
|
|
728
742
|
this._renderer.appendChild(this._document.body, this._containerElement);
|
|
743
|
+
if (!this._containerElement) {
|
|
744
|
+
return null;
|
|
745
|
+
}
|
|
729
746
|
// Create component using modern API (Angular 14+)
|
|
730
747
|
// createComponent replaces the deprecated ComponentFactoryResolver
|
|
731
748
|
const componentRef = createComponent(component, {
|
|
@@ -733,7 +750,7 @@ class DomService {
|
|
|
733
750
|
environmentInjector: this._environmentInjector
|
|
734
751
|
});
|
|
735
752
|
// Set component inputs
|
|
736
|
-
if (componentProps
|
|
753
|
+
if (componentProps && typeof componentRef.instance === 'object') {
|
|
737
754
|
for (const [key, value] of Object.entries(componentProps)) {
|
|
738
755
|
// Use Angular's setInput API to support both classic @Input and signal inputs
|
|
739
756
|
componentRef.setInput(key, value);
|
|
@@ -807,7 +824,7 @@ class TooltipDirective {
|
|
|
807
824
|
this._tooltipConfig = {
|
|
808
825
|
right: (boundaries, tooltip) => {
|
|
809
826
|
const targetHalf = boundaries.top + boundaries.height / 2;
|
|
810
|
-
const tooltipHalf = tooltip.offsetHeight / 2;
|
|
827
|
+
const tooltipHalf = (tooltip.offsetHeight || 0) / 2;
|
|
811
828
|
return [
|
|
812
829
|
boundaries.left + boundaries.width + 15,
|
|
813
830
|
targetHalf - tooltipHalf
|
|
@@ -815,23 +832,23 @@ class TooltipDirective {
|
|
|
815
832
|
},
|
|
816
833
|
bottom: (boundaries, tooltip) => {
|
|
817
834
|
const targetHalf = boundaries.right - boundaries.width / 2;
|
|
818
|
-
const tooltipHalf = tooltip.offsetWidth / 2;
|
|
835
|
+
const tooltipHalf = (tooltip.offsetWidth || 0) / 2;
|
|
819
836
|
return [targetHalf - tooltipHalf, boundaries.bottom + 15];
|
|
820
837
|
},
|
|
821
838
|
left: (boundaries, tooltip) => {
|
|
822
839
|
const targetHalf = boundaries.top + boundaries.height / 2;
|
|
823
|
-
const tooltipHalf = tooltip.offsetHeight / 2;
|
|
840
|
+
const tooltipHalf = (tooltip.offsetHeight || 0) / 2;
|
|
824
841
|
return [
|
|
825
|
-
boundaries.left - tooltip.offsetWidth - 15,
|
|
842
|
+
boundaries.left - (tooltip.offsetWidth || 0) - 15,
|
|
826
843
|
targetHalf - tooltipHalf
|
|
827
844
|
];
|
|
828
845
|
},
|
|
829
846
|
top: (boundaries, tooltip) => {
|
|
830
847
|
const targetHalf = boundaries.right - boundaries.width / 2;
|
|
831
|
-
const tooltipHalf = tooltip.offsetWidth / 2;
|
|
848
|
+
const tooltipHalf = (tooltip.offsetWidth || 0) / 2;
|
|
832
849
|
return [
|
|
833
850
|
targetHalf - tooltipHalf,
|
|
834
|
-
boundaries.top - tooltip.offsetHeight - 15
|
|
851
|
+
boundaries.top - (tooltip.offsetHeight || 0) - 15
|
|
835
852
|
];
|
|
836
853
|
}
|
|
837
854
|
};
|
|
@@ -867,7 +884,9 @@ class TooltipDirective {
|
|
|
867
884
|
orientationChangeHandler() {
|
|
868
885
|
if (this.tooltipOpen) {
|
|
869
886
|
this.hideTooltip();
|
|
870
|
-
this.tooltip
|
|
887
|
+
if (this.tooltip?.tooltip?.nativeElement) {
|
|
888
|
+
this.tooltip.tooltip.nativeElement.setAttribute('style', '');
|
|
889
|
+
}
|
|
871
890
|
}
|
|
872
891
|
}
|
|
873
892
|
ngOnDestroy() {
|
|
@@ -901,17 +920,22 @@ class TooltipDirective {
|
|
|
901
920
|
}
|
|
902
921
|
showTooltip() {
|
|
903
922
|
this.tooltipOpen = true;
|
|
904
|
-
const
|
|
923
|
+
const tooltipEl = this.tooltip?.tooltip?.nativeElement;
|
|
924
|
+
if (!tooltipEl) {
|
|
925
|
+
return;
|
|
926
|
+
}
|
|
905
927
|
const boundaries = this._el.nativeElement.getBoundingClientRect();
|
|
906
|
-
const [left, top] = this._tooltipConfig[this.tooltipPosition()](boundaries,
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
928
|
+
const [left, top] = this._tooltipConfig[this.tooltipPosition()](boundaries, tooltipEl);
|
|
929
|
+
tooltipEl.style.left = `${left}px`;
|
|
930
|
+
tooltipEl.style.top = `${top}px`;
|
|
931
|
+
tooltipEl.className = `aeb-tooltip aeb-tooltip--open aeb-tooltip--${this.tooltipPosition()} aeb-tooltip--${this.tooltipType()}`;
|
|
910
932
|
}
|
|
911
933
|
hideTooltip() {
|
|
912
934
|
this.tooltipOpen = false;
|
|
913
|
-
const
|
|
914
|
-
|
|
935
|
+
const tooltipEl = this.tooltip?.tooltip?.nativeElement;
|
|
936
|
+
if (tooltipEl) {
|
|
937
|
+
tooltipEl.className = 'aeb-tooltip';
|
|
938
|
+
}
|
|
915
939
|
}
|
|
916
940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
917
941
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: TooltipDirective, isStandalone: true, selector: "[aebTooltip]", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, tooltipData: { classPropertyName: "tooltipData", publicName: "tooltipData", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipType: { classPropertyName: "tooltipType", publicName: "tooltipType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mouseenter": "onMouseEnter()", "touch": "onClick()", "window:orientationchange": "orientationChangeHandler()" } }, queries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0 }); }
|
|
@@ -948,7 +972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
948
972
|
class Comment {
|
|
949
973
|
constructor() {
|
|
950
974
|
this._formBuilder = inject(FormBuilder);
|
|
951
|
-
this.comment = input(
|
|
975
|
+
this.comment = input(...(ngDevMode ? [undefined, { debugName: "comment" }] : []));
|
|
952
976
|
this.tooltip = viewChild(TooltipDirective, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
|
|
953
977
|
this.response = output();
|
|
954
978
|
this.isExpanded = false;
|
|
@@ -968,11 +992,12 @@ class Comment {
|
|
|
968
992
|
if (this.responseForm.invalid) {
|
|
969
993
|
return;
|
|
970
994
|
}
|
|
995
|
+
const comment = this.comment();
|
|
971
996
|
this.response.emit({
|
|
972
997
|
...this.responseForm.value,
|
|
973
|
-
hash:
|
|
974
|
-
parentHash:
|
|
975
|
-
parentName:
|
|
998
|
+
hash: comment?.hash,
|
|
999
|
+
parentHash: comment?.parentHash,
|
|
1000
|
+
parentName: comment?.parentName,
|
|
976
1001
|
firstName: 'Дмитрий',
|
|
977
1002
|
lastName: 'Сахаров'
|
|
978
1003
|
});
|
|
@@ -991,7 +1016,7 @@ class Comment {
|
|
|
991
1016
|
});
|
|
992
1017
|
}
|
|
993
1018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Comment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Comment, isStandalone: true, selector: "aeb-comment", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { response: "response" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-comment\">\n <div class=\"aeb-comment__avatar-column\">\n <div class=\"aeb-comment__avatar\">\n @if (comment()?.avatar) {\n <img [src]=\"comment().avatar\" alt=\"Avatar\" />\n } @else {\n <div class=\"aeb-comment__initials\">\n {{ comment().firstName.slice(0, 1) }}{{ comment().lastName.slice(0, 1) }}\n </div>\n }\n </div>\n </div>\n <div class=\"aeb-comment__comment-column\">\n <div class=\"aeb-comment__author-wrapper\">\n <div class=\"aeb-comment__author-group\">\n {{ comment().group }} @if (comment()?.parentName) {\n <div class=\"aeb-comment__reply-icon\">\n <svg\n width=\"10\"\n height=\"8\"\n viewBox=\"0 0 10 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.68742 1.87519H3.7499V0.312666C3.7499 0.183289 3.67053 0.0676621 3.55052 0.0207864C3.43052 -0.0254644 3.29365 0.00703617 3.20614 0.102663L0.081095 3.54022C-0.0270317 3.65897 -0.0270317 3.84085 0.081095 3.96022L3.20614 7.39778C3.26677 7.46403 3.35115 7.50028 3.4374 7.50028C3.47552 7.50028 3.51365 7.4934 3.55052 7.47965C3.67053 7.43278 3.7499 7.31715 3.7499 7.18777V5.62525H4.61929C6.40307 5.62525 8.1306 6.26401 9.48437 7.42528C9.57624 7.50465 9.70812 7.52278 9.81812 7.47153C9.92937 7.4209 10 7.30965 10 7.18777C10 4.25835 7.61684 1.87519 4.68742 1.87519Z\"\n fill=\"#A3AAAE\"\n />\n </svg>\n </div>\n <span class=\"aeb-comment__reply-host\"> {{ comment().parentName }} </span>\n }\n </div>\n <div class=\"aeb-comment__author-name\">\n {{ comment().fullName }}\n <div\n aebTooltip\n [tooltipPosition]=\"'right'\"\n [tooltipData]=\"comment().aboutAuthor\"\n class=\"aeb-comment__author-info\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8Z\"\n stroke=\"#27303E\"\n />\n <path\n d=\"M5.8125 6.3584C5.83529 5.78223 6.03874 5.31348 6.42285 4.95215C6.81022 4.59082 7.3457 4.41016 8.0293 4.41016C8.66732 4.41016 9.18652 4.58105 9.58691 4.92285C9.9873 5.26139 10.1875 5.69434 10.1875 6.22168C10.1875 6.92806 9.8457 7.48633 9.16211 7.89648C8.84961 8.08203 8.63639 8.25456 8.52246 8.41406C8.40853 8.57031 8.35156 8.77539 8.35156 9.0293V9.32715H7.34082L7.33594 8.93652C7.32292 8.59798 7.39128 8.3099 7.54102 8.07227C7.69401 7.83464 7.93978 7.61328 8.27832 7.4082C8.5778 7.22917 8.78613 7.05664 8.90332 6.89062C9.02051 6.72461 9.0791 6.51628 9.0791 6.26562C9.0791 5.98568 8.97819 5.75618 8.77637 5.57715C8.57454 5.39811 8.30762 5.30859 7.97559 5.30859C7.6403 5.30859 7.37012 5.40299 7.16504 5.5918C6.95996 5.7806 6.84603 6.03613 6.82324 6.3584H5.8125ZM7.85352 11.5879C7.67448 11.5879 7.52311 11.5277 7.39941 11.4072C7.27572 11.2868 7.21387 11.137 7.21387 10.958C7.21387 10.779 7.27572 10.6292 7.39941 10.5088C7.52311 10.3883 7.67448 10.3281 7.85352 10.3281C8.03581 10.3281 8.1888 10.3883 8.3125 10.5088C8.4362 10.6292 8.49805 10.779 8.49805 10.958C8.49805 11.137 8.4362 11.2868 8.3125 11.4072C8.1888 11.5277 8.03581 11.5879 7.85352 11.5879Z\"\n fill=\"#27303E\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div class=\"aeb-comment__comment-wrapper\">\n <div class=\"aeb-comment__comment-header\">{{ comment().title }}</div>\n <div class=\"aeb-comment__comment-txt\">{{ comment().content }}</div>\n </div>\n <div class=\"aeb-comment__date-response\">\n <div class=\"aeb-comment__comment-date\">{{ comment().date }}</div>\n <div class=\"aeb-comment__comment-response\" (click)=\"responseHandler()\">\n \u041E\u0442\u0432\u0435\u0442\u0438\u0442\u044C\n </div>\n </div>\n @if (onResponse) {\n <form\n class=\"aeb-comment__response-form\"\n [formGroup]=\"responseForm\"\n (submit)=\"nullTarget($event)\"\n >\n <div\n class=\"aeb-comment__input\"\n [ngClass]=\"{\n 'aeb-comment__input--error': titleError\n }\"\n >\n <aeb-form-field>\n <label aebLabel>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n <label errorMessage>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n <input aebInput type=\"text\" formControlName=\"title\" />\n </aeb-form-field>\n </div>\n <div\n class=\"aeb-comment__input\"\n [ngClass]=\"{\n 'aeb-comment__input--error': contentError\n }\"\n >\n <aeb-form-field>\n <label errorMessage>\u041F\u043E\u043B\u0435 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n <label aebLabel>\u041F\u043E\u043B\u0435 \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n <textarea\n aebTextarea\n style=\"height: 140px\"\n formControlName=\"content\"\n required\n >\n </textarea>\n </aeb-form-field>\n </div>\n <div class=\"aeb-comment__submit\">\n <button aebButton (click)=\"submitHandler()\" [disabled]>\n \u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C\n </button>\n </div>\n </form>\n } @if (comment()?.nestedComments && comment().nestedComments.length) {\n <div (click)=\"expandHandler()\" class=\"aeb-comment__response-ctrls\">\n <div class=\"aeb-comment__responses\">\u041E\u0442\u0432\u0435\u0442\u044B</div>\n <div class=\"aeb-comment__response-counter\">\n {{ comment().nestedComments.length }}\n </div>\n <div\n class=\"aeb-comment__arrow-icon\"\n [ngClass]=\"{\n 'aeb-comment__arrow-icon--active': isExpanded\n }\"\n >\n <svg\n width=\"10\"\n height=\"6\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0.999999 5L4.92929 1.07071C4.96834 1.03166 5.03166 1.03166 5.07071 1.07071L9 5\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n } @if ( comment()?.nestedComments && comment().nestedComments.length &&\n isExpanded ) { @for (nestedComment of comment().nestedComments; track\n nestedComment) {\n <aeb-comment (response)=\"hoistHandler($event)\" [comment]=\"nestedComment\">\n </aeb-comment>\n } }\n </div>\n</div>\n", styles: [".aeb-comment{display:flex;width:100%;color:var(--color-mono-900)}.aeb-comment__avatar-column{margin-right:12px}.aeb-comment__comment-column{flex-grow:1}.aeb-comment__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--color-blue-500);border-radius:50%}.aeb-comment__avatar img{width:90%;border-radius:50%}.aeb-comment__initials{position:relative;bottom:1px;color:var(--color-mono-0)}.aeb-comment__author-group{display:flex;align-items:center;margin-bottom:4px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.aeb-comment__reply-icon{position:relative;bottom:4px;margin-left:32px}.aeb-comment__reply-host{margin-left:8px;font-size:var(--font-size-xxs);color:var(--color-mono-300)}.aeb-comment__author-name{display:flex;align-items:center;font-size:var(--font-size-s);color:var(--color-mono-300)}.aeb-comment__author-info{position:relative;top:3px;margin-left:12px;cursor:pointer}.aeb-comment__author-wrapper{margin-bottom:20px}.aeb-comment__comment-wrapper{box-sizing:border-box;width:100%;padding:16px;background:var(--color-mono-10);border-radius:8px}.aeb-comment__comment-header{margin-bottom:10px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-mono-900)}.aeb-comment__date-response{display:flex;align-items:center;margin-top:20px;margin-bottom:25px}.aeb-comment__comment-date{margin-right:30px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__comment-response{font-size:var(--font-size-xs);color:var(--color-blue-500);cursor:pointer}.aeb-comment__response-ctrls{display:inline-flex;align-items:center;margin-bottom:28px;cursor:pointer}.aeb-comment__responses{margin-right:15px;font-size:var(--font-size-xs);color:var(--color-mono-900)}.aeb-comment__response-counter{margin-right:12px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__arrow-icon{position:relative;top:2px;transform:rotate(180deg)}.aeb-comment__arrow-icon--active{top:unset;bottom:3px;transform:none}.aeb-comment__input{margin-bottom:24px}.aeb-comment__submit{display:flex;justify-content:flex-end;width:100%;margin-top:24px}.aeb-comment__response-form{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: Comment, selector: "aeb-comment", inputs: ["comment"], outputs: ["response"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: TooltipDirective, selector: "[aebTooltip]", inputs: ["tooltipTitle", "tooltipData", "tooltipPosition", "tooltipType"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: ErrorMessageDirective, selector: "[errorMessage]", inputs: ["errorMessage"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Comment, isStandalone: true, selector: "aeb-comment", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { response: "response" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-comment\">\n <div class=\"aeb-comment__avatar-column\">\n <div class=\"aeb-comment__avatar\">\n @if (comment()?.avatar) {\n <img [src]=\"comment()?.avatar\" alt=\"Avatar\" />\n } @else {\n <div class=\"aeb-comment__initials\">\n {{ comment()?.firstName?.slice(0, 1) }}{{ comment()?.lastName?.slice(0,\n 1) }}\n </div>\n }\n </div>\n </div>\n <div class=\"aeb-comment__comment-column\">\n <div class=\"aeb-comment__author-wrapper\">\n <div class=\"aeb-comment__author-group\">\n {{ comment()?.group }} @if (comment()?.parentName) {\n <div class=\"aeb-comment__reply-icon\">\n <svg\n width=\"10\"\n height=\"8\"\n viewBox=\"0 0 10 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.68742 1.87519H3.7499V0.312666C3.7499 0.183289 3.67053 0.0676621 3.55052 0.0207864C3.43052 -0.0254644 3.29365 0.00703617 3.20614 0.102663L0.081095 3.54022C-0.0270317 3.65897 -0.0270317 3.84085 0.081095 3.96022L3.20614 7.39778C3.26677 7.46403 3.35115 7.50028 3.4374 7.50028C3.47552 7.50028 3.51365 7.4934 3.55052 7.47965C3.67053 7.43278 3.7499 7.31715 3.7499 7.18777V5.62525H4.61929C6.40307 5.62525 8.1306 6.26401 9.48437 7.42528C9.57624 7.50465 9.70812 7.52278 9.81812 7.47153C9.92937 7.4209 10 7.30965 10 7.18777C10 4.25835 7.61684 1.87519 4.68742 1.87519Z\"\n fill=\"#A3AAAE\"\n />\n </svg>\n </div>\n <span class=\"aeb-comment__reply-host\">\n {{ comment()?.parentName }}\n </span>\n }\n </div>\n <div class=\"aeb-comment__author-name\">\n {{ comment()?.fullName }}\n <div\n aebTooltip\n [tooltipPosition]=\"'right'\"\n [tooltipData]=\"comment()?.aboutAuthor || ''\"\n class=\"aeb-comment__author-info\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8Z\"\n stroke=\"#27303E\"\n />\n <path\n d=\"M5.8125 6.3584C5.83529 5.78223 6.03874 5.31348 6.42285 4.95215C6.81022 4.59082 7.3457 4.41016 8.0293 4.41016C8.66732 4.41016 9.18652 4.58105 9.58691 4.92285C9.9873 5.26139 10.1875 5.69434 10.1875 6.22168C10.1875 6.92806 9.8457 7.48633 9.16211 7.89648C8.84961 8.08203 8.63639 8.25456 8.52246 8.41406C8.40853 8.57031 8.35156 8.77539 8.35156 9.0293V9.32715H7.34082L7.33594 8.93652C7.32292 8.59798 7.39128 8.3099 7.54102 8.07227C7.69401 7.83464 7.93978 7.61328 8.27832 7.4082C8.5778 7.22917 8.78613 7.05664 8.90332 6.89062C9.02051 6.72461 9.0791 6.51628 9.0791 6.26562C9.0791 5.98568 8.97819 5.75618 8.77637 5.57715C8.57454 5.39811 8.30762 5.30859 7.97559 5.30859C7.6403 5.30859 7.37012 5.40299 7.16504 5.5918C6.95996 5.7806 6.84603 6.03613 6.82324 6.3584H5.8125ZM7.85352 11.5879C7.67448 11.5879 7.52311 11.5277 7.39941 11.4072C7.27572 11.2868 7.21387 11.137 7.21387 10.958C7.21387 10.779 7.27572 10.6292 7.39941 10.5088C7.52311 10.3883 7.67448 10.3281 7.85352 10.3281C8.03581 10.3281 8.1888 10.3883 8.3125 10.5088C8.4362 10.6292 8.49805 10.779 8.49805 10.958C8.49805 11.137 8.4362 11.2868 8.3125 11.4072C8.1888 11.5277 8.03581 11.5879 7.85352 11.5879Z\"\n fill=\"#27303E\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div class=\"aeb-comment__comment-wrapper\">\n <div class=\"aeb-comment__comment-header\">{{ comment()?.title }}</div>\n <div class=\"aeb-comment__comment-txt\">{{ comment()?.content }}</div>\n </div>\n <div class=\"aeb-comment__date-response\">\n <div class=\"aeb-comment__comment-date\">{{ comment()?.date }}</div>\n <div class=\"aeb-comment__comment-response\" (click)=\"responseHandler()\">\n \u041E\u0442\u0432\u0435\u0442\u0438\u0442\u044C\n </div>\n </div>\n @if (onResponse) {\n <form\n class=\"aeb-comment__response-form\"\n [formGroup]=\"responseForm\"\n (submit)=\"nullTarget($event)\"\n >\n <div\n class=\"aeb-comment__input\"\n [ngClass]=\"{\n 'aeb-comment__input--error': titleError\n }\"\n >\n <aeb-form-field>\n <label aebLabel>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n <label errorMessage>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n <input aebInput type=\"text\" formControlName=\"title\" />\n </aeb-form-field>\n </div>\n <div\n class=\"aeb-comment__input\"\n [ngClass]=\"{\n 'aeb-comment__input--error': contentError\n }\"\n >\n <aeb-form-field>\n <label errorMessage>\u041F\u043E\u043B\u0435 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n <label aebLabel>\u041F\u043E\u043B\u0435 \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n <textarea\n aebTextarea\n style=\"height: 140px\"\n formControlName=\"content\"\n required\n >\n </textarea>\n </aeb-form-field>\n </div>\n <div class=\"aeb-comment__submit\">\n <button aebButton (click)=\"submitHandler()\" [disabled]>\n \u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C\n </button>\n </div>\n </form>\n } @if (comment()?.nestedComments && comment()!.nestedComments.length) {\n <div (click)=\"expandHandler()\" class=\"aeb-comment__response-ctrls\">\n <div class=\"aeb-comment__responses\">\u041E\u0442\u0432\u0435\u0442\u044B</div>\n <div class=\"aeb-comment__response-counter\">\n {{ comment()!.nestedComments.length }}\n </div>\n <div\n class=\"aeb-comment__arrow-icon\"\n [ngClass]=\"{\n 'aeb-comment__arrow-icon--active': isExpanded\n }\"\n >\n <svg\n width=\"10\"\n height=\"6\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0.999999 5L4.92929 1.07071C4.96834 1.03166 5.03166 1.03166 5.07071 1.07071L9 5\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n } @if ( comment()?.nestedComments && comment()!.nestedComments.length &&\n isExpanded ) { @for (nestedComment of comment()!.nestedComments; track\n nestedComment) {\n <aeb-comment (response)=\"hoistHandler($event)\" [comment]=\"nestedComment\">\n </aeb-comment>\n } }\n </div>\n</div>\n", styles: [".aeb-comment{display:flex;width:100%;color:var(--color-mono-900)}.aeb-comment__avatar-column{margin-right:12px}.aeb-comment__comment-column{flex-grow:1}.aeb-comment__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--color-blue-500);border-radius:50%}.aeb-comment__avatar img{width:90%;border-radius:50%}.aeb-comment__initials{position:relative;bottom:1px;color:var(--color-mono-0)}.aeb-comment__author-group{display:flex;align-items:center;margin-bottom:4px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.aeb-comment__reply-icon{position:relative;bottom:4px;margin-left:32px}.aeb-comment__reply-host{margin-left:8px;font-size:var(--font-size-xxs);color:var(--color-mono-300)}.aeb-comment__author-name{display:flex;align-items:center;font-size:var(--font-size-s);color:var(--color-mono-300)}.aeb-comment__author-info{position:relative;top:3px;margin-left:12px;cursor:pointer}.aeb-comment__author-wrapper{margin-bottom:20px}.aeb-comment__comment-wrapper{box-sizing:border-box;width:100%;padding:16px;background:var(--color-mono-10);border-radius:8px}.aeb-comment__comment-header{margin-bottom:10px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-mono-900)}.aeb-comment__date-response{display:flex;align-items:center;margin-top:20px;margin-bottom:25px}.aeb-comment__comment-date{margin-right:30px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__comment-response{font-size:var(--font-size-xs);color:var(--color-blue-500);cursor:pointer}.aeb-comment__response-ctrls{display:inline-flex;align-items:center;margin-bottom:28px;cursor:pointer}.aeb-comment__responses{margin-right:15px;font-size:var(--font-size-xs);color:var(--color-mono-900)}.aeb-comment__response-counter{margin-right:12px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__arrow-icon{position:relative;top:2px;transform:rotate(180deg)}.aeb-comment__arrow-icon--active{top:unset;bottom:3px;transform:none}.aeb-comment__input{margin-bottom:24px}.aeb-comment__submit{display:flex;justify-content:flex-end;width:100%;margin-top:24px}.aeb-comment__response-form{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: Comment, selector: "aeb-comment", inputs: ["comment"], outputs: ["response"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: TooltipDirective, selector: "[aebTooltip]", inputs: ["tooltipTitle", "tooltipData", "tooltipPosition", "tooltipType"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: ErrorMessageDirective, selector: "[errorMessage]", inputs: ["errorMessage"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
995
1020
|
}
|
|
996
1021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Comment, decorators: [{
|
|
997
1022
|
type: Component,
|
|
@@ -1002,7 +1027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1002
1027
|
TooltipModule,
|
|
1003
1028
|
FormFieldModule,
|
|
1004
1029
|
ButtonModule
|
|
1005
|
-
], template: "<div class=\"aeb-comment\">\n <div class=\"aeb-comment__avatar-column\">\n <div class=\"aeb-comment__avatar\">\n @if (comment()?.avatar) {\n <img [src]=\"comment()
|
|
1030
|
+
], template: "<div class=\"aeb-comment\">\n <div class=\"aeb-comment__avatar-column\">\n <div class=\"aeb-comment__avatar\">\n @if (comment()?.avatar) {\n <img [src]=\"comment()?.avatar\" alt=\"Avatar\" />\n } @else {\n <div class=\"aeb-comment__initials\">\n {{ comment()?.firstName?.slice(0, 1) }}{{ comment()?.lastName?.slice(0,\n 1) }}\n </div>\n }\n </div>\n </div>\n <div class=\"aeb-comment__comment-column\">\n <div class=\"aeb-comment__author-wrapper\">\n <div class=\"aeb-comment__author-group\">\n {{ comment()?.group }} @if (comment()?.parentName) {\n <div class=\"aeb-comment__reply-icon\">\n <svg\n width=\"10\"\n height=\"8\"\n viewBox=\"0 0 10 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.68742 1.87519H3.7499V0.312666C3.7499 0.183289 3.67053 0.0676621 3.55052 0.0207864C3.43052 -0.0254644 3.29365 0.00703617 3.20614 0.102663L0.081095 3.54022C-0.0270317 3.65897 -0.0270317 3.84085 0.081095 3.96022L3.20614 7.39778C3.26677 7.46403 3.35115 7.50028 3.4374 7.50028C3.47552 7.50028 3.51365 7.4934 3.55052 7.47965C3.67053 7.43278 3.7499 7.31715 3.7499 7.18777V5.62525H4.61929C6.40307 5.62525 8.1306 6.26401 9.48437 7.42528C9.57624 7.50465 9.70812 7.52278 9.81812 7.47153C9.92937 7.4209 10 7.30965 10 7.18777C10 4.25835 7.61684 1.87519 4.68742 1.87519Z\"\n fill=\"#A3AAAE\"\n />\n </svg>\n </div>\n <span class=\"aeb-comment__reply-host\">\n {{ comment()?.parentName }}\n </span>\n }\n </div>\n <div class=\"aeb-comment__author-name\">\n {{ comment()?.fullName }}\n <div\n aebTooltip\n [tooltipPosition]=\"'right'\"\n [tooltipData]=\"comment()?.aboutAuthor || ''\"\n class=\"aeb-comment__author-info\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8Z\"\n stroke=\"#27303E\"\n />\n <path\n d=\"M5.8125 6.3584C5.83529 5.78223 6.03874 5.31348 6.42285 4.95215C6.81022 4.59082 7.3457 4.41016 8.0293 4.41016C8.66732 4.41016 9.18652 4.58105 9.58691 4.92285C9.9873 5.26139 10.1875 5.69434 10.1875 6.22168C10.1875 6.92806 9.8457 7.48633 9.16211 7.89648C8.84961 8.08203 8.63639 8.25456 8.52246 8.41406C8.40853 8.57031 8.35156 8.77539 8.35156 9.0293V9.32715H7.34082L7.33594 8.93652C7.32292 8.59798 7.39128 8.3099 7.54102 8.07227C7.69401 7.83464 7.93978 7.61328 8.27832 7.4082C8.5778 7.22917 8.78613 7.05664 8.90332 6.89062C9.02051 6.72461 9.0791 6.51628 9.0791 6.26562C9.0791 5.98568 8.97819 5.75618 8.77637 5.57715C8.57454 5.39811 8.30762 5.30859 7.97559 5.30859C7.6403 5.30859 7.37012 5.40299 7.16504 5.5918C6.95996 5.7806 6.84603 6.03613 6.82324 6.3584H5.8125ZM7.85352 11.5879C7.67448 11.5879 7.52311 11.5277 7.39941 11.4072C7.27572 11.2868 7.21387 11.137 7.21387 10.958C7.21387 10.779 7.27572 10.6292 7.39941 10.5088C7.52311 10.3883 7.67448 10.3281 7.85352 10.3281C8.03581 10.3281 8.1888 10.3883 8.3125 10.5088C8.4362 10.6292 8.49805 10.779 8.49805 10.958C8.49805 11.137 8.4362 11.2868 8.3125 11.4072C8.1888 11.5277 8.03581 11.5879 7.85352 11.5879Z\"\n fill=\"#27303E\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div class=\"aeb-comment__comment-wrapper\">\n <div class=\"aeb-comment__comment-header\">{{ comment()?.title }}</div>\n <div class=\"aeb-comment__comment-txt\">{{ comment()?.content }}</div>\n </div>\n <div class=\"aeb-comment__date-response\">\n <div class=\"aeb-comment__comment-date\">{{ comment()?.date }}</div>\n <div class=\"aeb-comment__comment-response\" (click)=\"responseHandler()\">\n \u041E\u0442\u0432\u0435\u0442\u0438\u0442\u044C\n </div>\n </div>\n @if (onResponse) {\n <form\n class=\"aeb-comment__response-form\"\n [formGroup]=\"responseForm\"\n (submit)=\"nullTarget($event)\"\n >\n <div\n class=\"aeb-comment__input\"\n [ngClass]=\"{\n 'aeb-comment__input--error': titleError\n }\"\n >\n <aeb-form-field>\n <label aebLabel>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n <label errorMessage>\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n <input aebInput type=\"text\" formControlName=\"title\" />\n </aeb-form-field>\n </div>\n <div\n class=\"aeb-comment__input\"\n [ngClass]=\"{\n 'aeb-comment__input--error': contentError\n }\"\n >\n <aeb-form-field>\n <label errorMessage>\u041F\u043E\u043B\u0435 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0443\u0441\u0442\u044B\u043C</label>\n <label aebLabel>\u041F\u043E\u043B\u0435 \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F</label>\n <textarea\n aebTextarea\n style=\"height: 140px\"\n formControlName=\"content\"\n required\n >\n </textarea>\n </aeb-form-field>\n </div>\n <div class=\"aeb-comment__submit\">\n <button aebButton (click)=\"submitHandler()\" [disabled]>\n \u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C\n </button>\n </div>\n </form>\n } @if (comment()?.nestedComments && comment()!.nestedComments.length) {\n <div (click)=\"expandHandler()\" class=\"aeb-comment__response-ctrls\">\n <div class=\"aeb-comment__responses\">\u041E\u0442\u0432\u0435\u0442\u044B</div>\n <div class=\"aeb-comment__response-counter\">\n {{ comment()!.nestedComments.length }}\n </div>\n <div\n class=\"aeb-comment__arrow-icon\"\n [ngClass]=\"{\n 'aeb-comment__arrow-icon--active': isExpanded\n }\"\n >\n <svg\n width=\"10\"\n height=\"6\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0.999999 5L4.92929 1.07071C4.96834 1.03166 5.03166 1.03166 5.07071 1.07071L9 5\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n } @if ( comment()?.nestedComments && comment()!.nestedComments.length &&\n isExpanded ) { @for (nestedComment of comment()!.nestedComments; track\n nestedComment) {\n <aeb-comment (response)=\"hoistHandler($event)\" [comment]=\"nestedComment\">\n </aeb-comment>\n } }\n </div>\n</div>\n", styles: [".aeb-comment{display:flex;width:100%;color:var(--color-mono-900)}.aeb-comment__avatar-column{margin-right:12px}.aeb-comment__comment-column{flex-grow:1}.aeb-comment__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--color-blue-500);border-radius:50%}.aeb-comment__avatar img{width:90%;border-radius:50%}.aeb-comment__initials{position:relative;bottom:1px;color:var(--color-mono-0)}.aeb-comment__author-group{display:flex;align-items:center;margin-bottom:4px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.aeb-comment__reply-icon{position:relative;bottom:4px;margin-left:32px}.aeb-comment__reply-host{margin-left:8px;font-size:var(--font-size-xxs);color:var(--color-mono-300)}.aeb-comment__author-name{display:flex;align-items:center;font-size:var(--font-size-s);color:var(--color-mono-300)}.aeb-comment__author-info{position:relative;top:3px;margin-left:12px;cursor:pointer}.aeb-comment__author-wrapper{margin-bottom:20px}.aeb-comment__comment-wrapper{box-sizing:border-box;width:100%;padding:16px;background:var(--color-mono-10);border-radius:8px}.aeb-comment__comment-header{margin-bottom:10px;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-mono-900)}.aeb-comment__date-response{display:flex;align-items:center;margin-top:20px;margin-bottom:25px}.aeb-comment__comment-date{margin-right:30px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__comment-response{font-size:var(--font-size-xs);color:var(--color-blue-500);cursor:pointer}.aeb-comment__response-ctrls{display:inline-flex;align-items:center;margin-bottom:28px;cursor:pointer}.aeb-comment__responses{margin-right:15px;font-size:var(--font-size-xs);color:var(--color-mono-900)}.aeb-comment__response-counter{margin-right:12px;font-size:var(--font-size-xs);color:var(--color-mono-300)}.aeb-comment__arrow-icon{position:relative;top:2px;transform:rotate(180deg)}.aeb-comment__arrow-icon--active{top:unset;bottom:3px;transform:none}.aeb-comment__input{margin-bottom:24px}.aeb-comment__submit{display:flex;justify-content:flex-end;width:100%;margin-top:24px}.aeb-comment__response-form{margin-bottom:24px}\n"] }]
|
|
1006
1031
|
}], propDecorators: { comment: [{ type: i0.Input, args: [{ isSignal: true, alias: "comment", required: false }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TooltipDirective), { isSignal: true }] }], response: [{ type: i0.Output, args: ["response"] }] } });
|
|
1007
1032
|
|
|
1008
1033
|
class CommentModule {
|
|
@@ -1025,11 +1050,11 @@ class CreditItemCard {
|
|
|
1025
1050
|
this.infoClickEvent = output();
|
|
1026
1051
|
}
|
|
1027
1052
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CreditItemCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CreditItemCard, isStandalone: true, selector: "aeb-credit-item-card", inputs: { cardInfo: { classPropertyName: "cardInfo", publicName: "cardInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent", infoClickEvent: "infoClickEvent" }, ngImport: i0, template: "<div\n class=\"credit-item-card\"\n [style.background-image]=\"'url(' + cardInfo()
|
|
1053
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CreditItemCard, isStandalone: true, selector: "aeb-credit-item-card", inputs: { cardInfo: { classPropertyName: "cardInfo", publicName: "cardInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent", infoClickEvent: "infoClickEvent" }, ngImport: i0, template: "<div\n class=\"credit-item-card\"\n [style.background-image]=\"'url(' + (cardInfo()?.image || '') + ')'\"\n [style.background-color]=\"cardInfo()?.backgroundColor || ''\"\n>\n <div\n class=\"credit-item-card__info-icon\"\n (click)=\"infoClickEvent.emit()\"\n ></div>\n <div\n class=\"credit-item-card__title-wrapper\"\n (click)=\"buttonClickEvent.emit()\"\n >\n <div class=\"credit-item-card__title\">\u00AB{{ cardInfo()?.title }}\u00BB</div>\n <div class=\"credit-item-card__title-text\">{{ cardInfo()?.caption }}</div>\n </div>\n <div class=\"credit-item-card__details-wrapper\">\n <div class=\"credit-item-card__credit-details\">\n @if (cardInfo()?.details?.time) {\n <div class=\"credit-item-card__credit-details-item\">\n <div class=\"credit-item-card__credit-details-item-title\">\n \u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n </div>\n <div class=\"credit-item-card__credit-details-item-separator\"></div>\n <div class=\"credit-item-card__credit-details-item-value\">\n \u0434\u043E {{ cardInfo()?.details?.time }} {{ cardInfo()?.details?.timeMeasure\n }}\n </div>\n </div>\n } @if (cardInfo()?.details?.rate) {\n <div class=\"credit-item-card__credit-details-item\">\n <div class=\"credit-item-card__credit-details-item-title\">\u0421\u0442\u0430\u0432\u043A\u0430</div>\n <div class=\"credit-item-card__credit-details-item-separator\"></div>\n <div class=\"credit-item-card__credit-details-item-value\">\n {{ cardInfo()?.details?.rate }} %\n </div>\n </div>\n } @if (cardInfo()?.details?.amount) {\n <div class=\"credit-item-card__credit-details-item\">\n <div class=\"ccredit-item-card__credit-details-item-title\">\n \u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n </div>\n <div class=\"credit-item-card__credit-details-item-separator\"></div>\n <div class=\"credit-item-card__credit-details-item-value\">\n \u0434\u043E {{ cardInfo()?.details?.amount }} {{\n cardInfo()?.details?.amountMeasure }}\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"credit-item-card__button-wrapper\">\n <button aebButton (click)=\"buttonClickEvent.emit()\">\n \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\n </button>\n </div>\n</div>\n", styles: [".credit-item-card{position:relative;box-sizing:border-box;width:100%;height:359px;padding:32px;color:var(--color-mono-900);zoom:98%;background-repeat:no-repeat;background-position:right;background-size:contain;border-radius:8px}@media screen and (max-width:767px){.credit-item-card{zoom:54%}}@media screen and (max-width:374px){.credit-item-card{zoom:48%}}.credit-item-card__info-icon{position:absolute;right:38px;width:27px;height:27px;cursor:pointer;background:url('data:image/svg+xml,<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z\" fill=\"white\" stroke=\"%2394A8BE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A<path d=\"M24 32V24\" stroke=\"%2394A8BE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A<path d=\"M24 16H24.02\" stroke=\"%2394A8BE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A');background-repeat:no-repeat;background-size:cover}.credit-item-card__title-wrapper{display:inline-flex;flex-direction:column;align-items:flex-start;cursor:pointer}.credit-item-card__title{display:inline-block;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);line-height:42px}.credit-item-card__title-text{display:inline-block;font-size:var(--font-size-m);line-height:42px}.credit-item-card__details-wrapper{width:375px;margin-top:48px}.credit-item-card__button-wrapper{margin-top:16px}.credit-item-card__credit-details{display:flex;justify-content:space-between;width:100%;height:90px}.credit-item-card__credit-details-item{display:flex;flex-direction:column;align-items:flex-start}.credit-item-card__credit-details-item-title{font-size:var(--font-size-s);line-height:20px}.credit-item-card__credit-details-item-separator{width:50px;height:2px;margin-top:16px;background-color:var(--color-mono-900)}.credit-item-card__credit-details-item-value{font-size:var(--font-size-l);font-weight:var(--font-weight-medium);line-height:52px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1029
1054
|
}
|
|
1030
1055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CreditItemCard, decorators: [{
|
|
1031
1056
|
type: Component,
|
|
1032
|
-
args: [{ selector: 'aeb-credit-item-card', encapsulation: ViewEncapsulation.None, imports: [ButtonModule], template: "<div\n class=\"credit-item-card\"\n [style.background-image]=\"'url(' + cardInfo()
|
|
1057
|
+
args: [{ selector: 'aeb-credit-item-card', encapsulation: ViewEncapsulation.None, imports: [ButtonModule], template: "<div\n class=\"credit-item-card\"\n [style.background-image]=\"'url(' + (cardInfo()?.image || '') + ')'\"\n [style.background-color]=\"cardInfo()?.backgroundColor || ''\"\n>\n <div\n class=\"credit-item-card__info-icon\"\n (click)=\"infoClickEvent.emit()\"\n ></div>\n <div\n class=\"credit-item-card__title-wrapper\"\n (click)=\"buttonClickEvent.emit()\"\n >\n <div class=\"credit-item-card__title\">\u00AB{{ cardInfo()?.title }}\u00BB</div>\n <div class=\"credit-item-card__title-text\">{{ cardInfo()?.caption }}</div>\n </div>\n <div class=\"credit-item-card__details-wrapper\">\n <div class=\"credit-item-card__credit-details\">\n @if (cardInfo()?.details?.time) {\n <div class=\"credit-item-card__credit-details-item\">\n <div class=\"credit-item-card__credit-details-item-title\">\n \u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n </div>\n <div class=\"credit-item-card__credit-details-item-separator\"></div>\n <div class=\"credit-item-card__credit-details-item-value\">\n \u0434\u043E {{ cardInfo()?.details?.time }} {{ cardInfo()?.details?.timeMeasure\n }}\n </div>\n </div>\n } @if (cardInfo()?.details?.rate) {\n <div class=\"credit-item-card__credit-details-item\">\n <div class=\"credit-item-card__credit-details-item-title\">\u0421\u0442\u0430\u0432\u043A\u0430</div>\n <div class=\"credit-item-card__credit-details-item-separator\"></div>\n <div class=\"credit-item-card__credit-details-item-value\">\n {{ cardInfo()?.details?.rate }} %\n </div>\n </div>\n } @if (cardInfo()?.details?.amount) {\n <div class=\"credit-item-card__credit-details-item\">\n <div class=\"ccredit-item-card__credit-details-item-title\">\n \u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430\n </div>\n <div class=\"credit-item-card__credit-details-item-separator\"></div>\n <div class=\"credit-item-card__credit-details-item-value\">\n \u0434\u043E {{ cardInfo()?.details?.amount }} {{\n cardInfo()?.details?.amountMeasure }}\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"credit-item-card__button-wrapper\">\n <button aebButton (click)=\"buttonClickEvent.emit()\">\n \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\n </button>\n </div>\n</div>\n", styles: [".credit-item-card{position:relative;box-sizing:border-box;width:100%;height:359px;padding:32px;color:var(--color-mono-900);zoom:98%;background-repeat:no-repeat;background-position:right;background-size:contain;border-radius:8px}@media screen and (max-width:767px){.credit-item-card{zoom:54%}}@media screen and (max-width:374px){.credit-item-card{zoom:48%}}.credit-item-card__info-icon{position:absolute;right:38px;width:27px;height:27px;cursor:pointer;background:url('data:image/svg+xml,<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z\" fill=\"white\" stroke=\"%2394A8BE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A<path d=\"M24 32V24\" stroke=\"%2394A8BE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A<path d=\"M24 16H24.02\" stroke=\"%2394A8BE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A');background-repeat:no-repeat;background-size:cover}.credit-item-card__title-wrapper{display:inline-flex;flex-direction:column;align-items:flex-start;cursor:pointer}.credit-item-card__title{display:inline-block;font-size:var(--font-size-lm);font-weight:var(--font-weight-medium);line-height:42px}.credit-item-card__title-text{display:inline-block;font-size:var(--font-size-m);line-height:42px}.credit-item-card__details-wrapper{width:375px;margin-top:48px}.credit-item-card__button-wrapper{margin-top:16px}.credit-item-card__credit-details{display:flex;justify-content:space-between;width:100%;height:90px}.credit-item-card__credit-details-item{display:flex;flex-direction:column;align-items:flex-start}.credit-item-card__credit-details-item-title{font-size:var(--font-size-s);line-height:20px}.credit-item-card__credit-details-item-separator{width:50px;height:2px;margin-top:16px;background-color:var(--color-mono-900)}.credit-item-card__credit-details-item-value{font-size:var(--font-size-l);font-weight:var(--font-weight-medium);line-height:52px}\n"] }]
|
|
1033
1058
|
}], propDecorators: { cardInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardInfo", required: false }] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }], infoClickEvent: [{ type: i0.Output, args: ["infoClickEvent"] }] } });
|
|
1034
1059
|
|
|
1035
1060
|
class CreditItemCardModule {
|
|
@@ -1336,9 +1361,12 @@ class IsDisabledPipe {
|
|
|
1336
1361
|
this._utils = inject(DatepickerUtilsService);
|
|
1337
1362
|
}
|
|
1338
1363
|
transform(date, minDate, maxDate, excludedDates) {
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1364
|
+
if (!date) {
|
|
1365
|
+
return false;
|
|
1366
|
+
}
|
|
1367
|
+
return ((minDate && this._utils.isMinOverlap(minDate, date)) ||
|
|
1368
|
+
(maxDate && this._utils.isMaxOverlap(maxDate, date)) ||
|
|
1369
|
+
!!excludedDates.filter((item) => item && this._utils.isSameDay(item, date)).length);
|
|
1342
1370
|
}
|
|
1343
1371
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IsDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1344
1372
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: IsDisabledPipe, isStandalone: true, name: "isDisabled" }); }
|
|
@@ -1353,6 +1381,9 @@ class IsSameDatePipe {
|
|
|
1353
1381
|
this._utils = inject(DatepickerUtilsService);
|
|
1354
1382
|
}
|
|
1355
1383
|
transform(date1, date2) {
|
|
1384
|
+
if (!date1 || !date2) {
|
|
1385
|
+
return false;
|
|
1386
|
+
}
|
|
1356
1387
|
return this._utils.isSameDay(date1, date2);
|
|
1357
1388
|
}
|
|
1358
1389
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IsSameDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
@@ -1368,6 +1399,9 @@ class IsTodayPipe {
|
|
|
1368
1399
|
this._utils = inject(DatepickerUtilsService);
|
|
1369
1400
|
}
|
|
1370
1401
|
transform(date) {
|
|
1402
|
+
if (!date) {
|
|
1403
|
+
return false;
|
|
1404
|
+
}
|
|
1371
1405
|
return this._utils.isToday(date);
|
|
1372
1406
|
}
|
|
1373
1407
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IsTodayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
@@ -1383,11 +1417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1383
1417
|
*/
|
|
1384
1418
|
class DatepickerMonth {
|
|
1385
1419
|
constructor() {
|
|
1386
|
-
this.month = input(
|
|
1387
|
-
this.date = input(
|
|
1388
|
-
this.minDate = input(
|
|
1389
|
-
this.maxDate = input(
|
|
1390
|
-
this.excludedDates = input(
|
|
1420
|
+
this.month = input(...(ngDevMode ? [undefined, { debugName: "month" }] : []));
|
|
1421
|
+
this.date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
|
|
1422
|
+
this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
1423
|
+
this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
1424
|
+
this.excludedDates = input([], ...(ngDevMode ? [{ debugName: "excludedDates" }] : []));
|
|
1391
1425
|
this.setDate = output();
|
|
1392
1426
|
this.week = signal(weekLocal, ...(ngDevMode ? [{ debugName: "week" }] : []));
|
|
1393
1427
|
}
|
|
@@ -1395,11 +1429,11 @@ class DatepickerMonth {
|
|
|
1395
1429
|
this.setDate.emit(date);
|
|
1396
1430
|
}
|
|
1397
1431
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatepickerMonth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatepickerMonth, isStandalone: true, selector: "div[aebDatepickerMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setDate: "setDate" }, ngImport: i0, template: "<div class=\"aeb-datepicker-month__header\">\n @for (day of week(); track $index) {\n <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n @for (day of week; track $index) { @if (!!day) {\n <div\n class=\"aeb-datepicker-month__day\"\n [ngClass]=\"{\n 'aeb-datepicker-month__day--today': day | isToday,\n 'aeb-datepicker-month__day--picked': day | isSameDate: date(),\n 'aeb-datepicker-month__day--disabled':\n day | isDisabled: minDate() : maxDate() : excludedDates()\n }\"\n (click)=\"emitDate(day)\"\n >\n {{ day | dateToStr }}\n </div>\n } @else {\n <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DateToStrPipe, name: "dateToStr" }, { kind: "pipe", type: IsTodayPipe, name: "isToday" }, { kind: "pipe", type: IsSameDatePipe, name: "isSameDate" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatepickerMonth, isStandalone: true, selector: "div[aebDatepickerMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setDate: "setDate" }, ngImport: i0, template: "<div class=\"aeb-datepicker-month__header\">\n @for (day of week(); track $index) {\n <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n @for (day of week; track $index) { @if (!!day) {\n <div\n class=\"aeb-datepicker-month__day\"\n [ngClass]=\"{\n 'aeb-datepicker-month__day--today': day | isToday,\n 'aeb-datepicker-month__day--picked': day | isSameDate: (date() || null),\n 'aeb-datepicker-month__day--disabled':\n day | isDisabled: (minDate() || null) : (maxDate() || null) : excludedDates()\n }\"\n (click)=\"emitDate(day)\"\n >\n {{ day | dateToStr }}\n </div>\n } @else {\n <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DateToStrPipe, name: "dateToStr" }, { kind: "pipe", type: IsTodayPipe, name: "isToday" }, { kind: "pipe", type: IsSameDatePipe, name: "isSameDate" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1399
1433
|
}
|
|
1400
1434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatepickerMonth, decorators: [{
|
|
1401
1435
|
type: Component,
|
|
1402
|
-
args: [{ selector: 'div[aebDatepickerMonth]', encapsulation: ViewEncapsulation.None, imports: [NgClass, DateToStrPipe, IsTodayPipe, IsSameDatePipe, IsDisabledPipe], template: "<div class=\"aeb-datepicker-month__header\">\n @for (day of week(); track $index) {\n <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n @for (day of week; track $index) { @if (!!day) {\n <div\n class=\"aeb-datepicker-month__day\"\n [ngClass]=\"{\n 'aeb-datepicker-month__day--today': day | isToday,\n 'aeb-datepicker-month__day--picked': day | isSameDate: date(),\n 'aeb-datepicker-month__day--disabled':\n day | isDisabled: minDate() : maxDate() : excludedDates()\n }\"\n (click)=\"emitDate(day)\"\n >\n {{ day | dateToStr }}\n </div>\n } @else {\n <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"] }]
|
|
1436
|
+
args: [{ selector: 'div[aebDatepickerMonth]', encapsulation: ViewEncapsulation.None, imports: [NgClass, DateToStrPipe, IsTodayPipe, IsSameDatePipe, IsDisabledPipe], template: "<div class=\"aeb-datepicker-month__header\">\n @for (day of week(); track $index) {\n <div class=\"aeb-datepicker-month__header-day\">{{ day }}</div>\n }\n</div>\n@for (week of month(); track $index) {\n<div class=\"aeb-datepicker-month__week\">\n @for (day of week; track $index) { @if (!!day) {\n <div\n class=\"aeb-datepicker-month__day\"\n [ngClass]=\"{\n 'aeb-datepicker-month__day--today': day | isToday,\n 'aeb-datepicker-month__day--picked': day | isSameDate: (date() || null),\n 'aeb-datepicker-month__day--disabled':\n day | isDisabled: (minDate() || null) : (maxDate() || null) : excludedDates()\n }\"\n (click)=\"emitDate(day)\"\n >\n {{ day | dateToStr }}\n </div>\n } @else {\n <div class=\"aeb-datepicker-month__day aeb-datepicker-month__day--stub\"></div>\n } }\n</div>\n}\n", styles: [".aeb-datepicker-month__header{display:flex;align-items:center;justify-content:space-between;width:fit-content;margin-bottom:16px;font-size:12px;gap:8px}.aeb-datepicker-month__header-day{text-align:center;font-size:12px;color:var(--c-t-secondary);cursor:default;width:32px;height:14px}.aeb-datepicker-month__week{display:flex;align-items:center;width:fit-content}.aeb-datepicker-month__week:not(:last-child){margin-bottom:8px}.aeb-datepicker-month__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:26px;font-size:16px;cursor:pointer;border-radius:8px}.aeb-datepicker-month__day:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--stub{pointer-events:none;cursor:none}.aeb-datepicker-month__day--today{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month__day--picked{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month__day--picked:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month__day--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}.aeb-datepicker-month__day:not(:last-child){margin-right:8px}\n"] }]
|
|
1403
1437
|
}], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], excludedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedDates", required: false }] }], setDate: [{ type: i0.Output, args: ["setDate"] }] } });
|
|
1404
1438
|
|
|
1405
1439
|
const monthsLocal = [
|
|
@@ -1434,7 +1468,7 @@ class IsMonthDisabledPipe {
|
|
|
1434
1468
|
* @returns true if the month should be disabled
|
|
1435
1469
|
*/
|
|
1436
1470
|
transform(month, woDays, year, minDate, maxDate) {
|
|
1437
|
-
if (woDays) {
|
|
1471
|
+
if (woDays && minDate && maxDate) {
|
|
1438
1472
|
return (this._utils.isMinOverlap(minDate, new Date(year, month)) ||
|
|
1439
1473
|
this._utils.isMaxOverlap(maxDate, new Date(year, month)));
|
|
1440
1474
|
}
|
|
@@ -1456,10 +1490,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1456
1490
|
*/
|
|
1457
1491
|
class DatepickerMonthTiles {
|
|
1458
1492
|
constructor() {
|
|
1459
|
-
this.year = input(
|
|
1460
|
-
this.month = input(
|
|
1461
|
-
this.minDate = input(
|
|
1462
|
-
this.maxDate = input(
|
|
1493
|
+
this.year = input(...(ngDevMode ? [undefined, { debugName: "year" }] : []));
|
|
1494
|
+
this.month = input(...(ngDevMode ? [undefined, { debugName: "month" }] : []));
|
|
1495
|
+
this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
1496
|
+
this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
1463
1497
|
this.woDays = input(false, ...(ngDevMode ? [{ debugName: "woDays" }] : []));
|
|
1464
1498
|
this.setMonth = output();
|
|
1465
1499
|
this.months = signal(monthsLocal, ...(ngDevMode ? [{ debugName: "months" }] : []));
|
|
@@ -1468,13 +1502,13 @@ class DatepickerMonthTiles {
|
|
|
1468
1502
|
this.setMonth.emit(month);
|
|
1469
1503
|
}
|
|
1470
1504
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatepickerMonthTiles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatepickerMonthTiles, isStandalone: true, selector: "div[aebDatepickerMonthTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setMonth: "setMonth" }, host: { properties: { "class.aeb-datepicker-month-tiles": "true" } }, ngImport: i0, template: "@for (monthNum of months(); track monthNum; let i = $index) {\n<div\n class=\"aeb-datepicker-month-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-month-tiles__tile--active': i === month(),\n 'aeb-datepicker-month-tiles__tile--disabled':\n i | isMonthDisabled: woDays() : year() : minDate() : maxDate()\n }\"\n (click)=\"emitMonth(i)\"\n>\n {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsMonthDisabledPipe, name: "isMonthDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1505
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatepickerMonthTiles, isStandalone: true, selector: "div[aebDatepickerMonthTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setMonth: "setMonth" }, host: { properties: { "class.aeb-datepicker-month-tiles": "true" } }, ngImport: i0, template: "@for (monthNum of months(); track monthNum; let i = $index) {\n<div\n class=\"aeb-datepicker-month-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-month-tiles__tile--active': i === month(),\n 'aeb-datepicker-month-tiles__tile--disabled':\n i | isMonthDisabled: woDays() : (year() || 0) : (minDate() || null) : (maxDate() || null)\n }\"\n (click)=\"emitMonth(i)\"\n>\n {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsMonthDisabledPipe, name: "isMonthDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1472
1506
|
}
|
|
1473
1507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatepickerMonthTiles, decorators: [{
|
|
1474
1508
|
type: Component,
|
|
1475
1509
|
args: [{ selector: 'div[aebDatepickerMonthTiles]', encapsulation: ViewEncapsulation.None, host: {
|
|
1476
1510
|
'[class.aeb-datepicker-month-tiles]': 'true'
|
|
1477
|
-
}, imports: [NgClass, IsMonthDisabledPipe], template: "@for (monthNum of months(); track monthNum; let i = $index) {\n<div\n class=\"aeb-datepicker-month-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-month-tiles__tile--active': i === month(),\n 'aeb-datepicker-month-tiles__tile--disabled':\n i | isMonthDisabled: woDays() : year() : minDate() : maxDate()\n }\"\n (click)=\"emitMonth(i)\"\n>\n {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
|
|
1511
|
+
}, imports: [NgClass, IsMonthDisabledPipe], template: "@for (monthNum of months(); track monthNum; let i = $index) {\n<div\n class=\"aeb-datepicker-month-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-month-tiles__tile--active': i === month(),\n 'aeb-datepicker-month-tiles__tile--disabled':\n i | isMonthDisabled: woDays() : (year() || 0) : (minDate() || null) : (maxDate() || null)\n }\"\n (click)=\"emitMonth(i)\"\n>\n {{ monthNum }}\n</div>\n}\n", styles: [".aeb-datepicker-month-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.aeb-datepicker-month-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-month-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-month-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-month-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-month-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-month-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
|
|
1478
1512
|
}], propDecorators: { year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], woDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "woDays", required: false }] }], setMonth: [{ type: i0.Output, args: ["setMonth"] }] } });
|
|
1479
1513
|
|
|
1480
1514
|
/**
|
|
@@ -1493,7 +1527,7 @@ class IsYearDisabledPipe {
|
|
|
1493
1527
|
* @returns true if the year should be disabled
|
|
1494
1528
|
*/
|
|
1495
1529
|
transform(year, woDays, minDate, maxDate) {
|
|
1496
|
-
if (woDays) {
|
|
1530
|
+
if (woDays && minDate && maxDate) {
|
|
1497
1531
|
return (this._utils.isMinOverlap(minDate, new Date(year, 11, 31)) ||
|
|
1498
1532
|
this._utils.isMaxOverlap(maxDate, new Date(year, 0)));
|
|
1499
1533
|
}
|
|
@@ -1516,18 +1550,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1516
1550
|
class DatepickerYearTiles {
|
|
1517
1551
|
constructor() {
|
|
1518
1552
|
this._utils = inject(DatepickerUtilsService);
|
|
1519
|
-
this.year = input(
|
|
1520
|
-
this.minYear = input(
|
|
1521
|
-
this.maxYear = input(
|
|
1522
|
-
this.minDate = input(
|
|
1523
|
-
this.maxDate = input(
|
|
1553
|
+
this.year = input(...(ngDevMode ? [undefined, { debugName: "year" }] : []));
|
|
1554
|
+
this.minYear = input(...(ngDevMode ? [undefined, { debugName: "minYear" }] : []));
|
|
1555
|
+
this.maxYear = input(...(ngDevMode ? [undefined, { debugName: "maxYear" }] : []));
|
|
1556
|
+
this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
1557
|
+
this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
1524
1558
|
this.woDays = input(false, ...(ngDevMode ? [{ debugName: "woDays" }] : []));
|
|
1525
1559
|
this.setYear = output();
|
|
1526
1560
|
this.yearTiles = viewChildren('yearTile', ...(ngDevMode ? [{ debugName: "yearTiles" }] : []));
|
|
1527
1561
|
this.years = signal([], ...(ngDevMode ? [{ debugName: "years" }] : []));
|
|
1528
1562
|
}
|
|
1529
1563
|
ngOnInit() {
|
|
1530
|
-
|
|
1564
|
+
const minYear = this.minYear();
|
|
1565
|
+
const maxYear = this.maxYear();
|
|
1566
|
+
if (minYear && maxYear) {
|
|
1567
|
+
this.years.set(this._utils.genYears(minYear, maxYear).reverse());
|
|
1568
|
+
}
|
|
1531
1569
|
}
|
|
1532
1570
|
ngAfterViewInit() {
|
|
1533
1571
|
this.scrollToCurrentSelection();
|
|
@@ -1543,51 +1581,58 @@ class DatepickerYearTiles {
|
|
|
1543
1581
|
});
|
|
1544
1582
|
}
|
|
1545
1583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatepickerYearTiles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatepickerYearTiles, isStandalone: true, selector: "div[aebDatepickerYearTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setYear: "setYear" }, host: { properties: { "class.aeb-datepicker-year-tiles": "true" } }, viewQueries: [{ propertyName: "yearTiles", predicate: ["yearTile"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (yearNum of years(); track yearNum) {\n<div\n #yearTile\n class=\"aeb-datepicker-year-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n 'aeb-datepicker-year-tiles__tile--disabled':\n yearNum | isYearDisabled: woDays() : minDate() : maxDate()\n }\"\n (click)=\"emitYear(yearNum)\"\n>\n {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsYearDisabledPipe, name: "isYearDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatepickerYearTiles, isStandalone: true, selector: "div[aebDatepickerYearTiles]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, woDays: { classPropertyName: "woDays", publicName: "woDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setYear: "setYear" }, host: { properties: { "class.aeb-datepicker-year-tiles": "true" } }, viewQueries: [{ propertyName: "yearTiles", predicate: ["yearTile"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (yearNum of years(); track yearNum) {\n<div\n #yearTile\n class=\"aeb-datepicker-year-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n 'aeb-datepicker-year-tiles__tile--disabled':\n yearNum | isYearDisabled: woDays() : (minDate() || null) : (maxDate() || null)\n }\"\n (click)=\"emitYear(yearNum)\"\n>\n {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsYearDisabledPipe, name: "isYearDisabled" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1547
1585
|
}
|
|
1548
1586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatepickerYearTiles, decorators: [{
|
|
1549
1587
|
type: Component,
|
|
1550
1588
|
args: [{ selector: 'div[aebDatepickerYearTiles]', encapsulation: ViewEncapsulation.None, host: {
|
|
1551
1589
|
'[class.aeb-datepicker-year-tiles]': 'true'
|
|
1552
|
-
}, imports: [NgClass, IsYearDisabledPipe], template: "@for (yearNum of years(); track yearNum) {\n<div\n #yearTile\n class=\"aeb-datepicker-year-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n 'aeb-datepicker-year-tiles__tile--disabled':\n yearNum | isYearDisabled: woDays() : minDate() : maxDate()\n }\"\n (click)=\"emitYear(yearNum)\"\n>\n {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
|
|
1590
|
+
}, imports: [NgClass, IsYearDisabledPipe], template: "@for (yearNum of years(); track yearNum) {\n<div\n #yearTile\n class=\"aeb-datepicker-year-tiles__tile\"\n [ngClass]=\"{\n 'aeb-datepicker-year-tiles__tile--active': yearNum === year(),\n 'aeb-datepicker-year-tiles__tile--disabled':\n yearNum | isYearDisabled: woDays() : (minDate() || null) : (maxDate() || null)\n }\"\n (click)=\"emitYear(yearNum)\"\n>\n {{ yearNum }}\n</div>\n}\n", styles: [".aeb-datepicker-year-tiles{width:100%;max-height:192px;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.aeb-datepicker-year-tiles::-webkit-scrollbar{display:none}.aeb-datepicker-year-tiles__tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:42px;font-size:16px;border-radius:8px;cursor:pointer;padding:0}.aeb-datepicker-year-tiles__tile:hover{background-color:var(--c-btn-ps-default)}.aeb-datepicker-year-tiles__tile--active{color:var(--c-bg-light);background-color:var(--c-btn-p-default)}.aeb-datepicker-year-tiles__tile--active:hover{background-color:var(--c-btn-p-hovered)}.aeb-datepicker-year-tiles__tile--disabled{color:var(--c-btn-p-disabled);pointer-events:none;cursor:none}\n"] }]
|
|
1553
1591
|
}], propDecorators: { year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], woDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "woDays", required: false }] }], setYear: [{ type: i0.Output, args: ["setYear"] }], yearTiles: [{ type: i0.ViewChildren, args: ['yearTile', { isSignal: true }] }] } });
|
|
1554
1592
|
|
|
1555
1593
|
class DatepickerCore {
|
|
1556
1594
|
constructor() {
|
|
1557
1595
|
this._utils = inject(DatepickerUtilsService);
|
|
1558
|
-
this.date = input(
|
|
1559
|
-
this.minDate = input(
|
|
1560
|
-
this.maxDate = input(
|
|
1561
|
-
this.excludedDates = input(
|
|
1562
|
-
this.minYear = input(
|
|
1563
|
-
this.maxYear = input(
|
|
1596
|
+
this.date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
|
|
1597
|
+
this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
1598
|
+
this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
1599
|
+
this.excludedDates = input([], ...(ngDevMode ? [{ debugName: "excludedDates" }] : []));
|
|
1600
|
+
this.minYear = input(...(ngDevMode ? [undefined, { debugName: "minYear" }] : []));
|
|
1601
|
+
this.maxYear = input(...(ngDevMode ? [undefined, { debugName: "maxYear" }] : []));
|
|
1564
1602
|
this.withoutDays = input(false, ...(ngDevMode ? [{ debugName: "withoutDays" }] : []));
|
|
1565
1603
|
this.hidden = input(true, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
1566
1604
|
this.dateChange = output();
|
|
1567
1605
|
this.woDaysMonth = output();
|
|
1568
1606
|
this.woDaysYear = output();
|
|
1569
1607
|
this.woDaysMonthSubInc = output();
|
|
1570
|
-
this.month = signal(
|
|
1608
|
+
this.month = signal([], ...(ngDevMode ? [{ debugName: "month" }] : []));
|
|
1571
1609
|
this.mode = signal('none', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1572
1610
|
this.currentMonth = signal(undefined, ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
|
|
1573
1611
|
this.currentYear = signal(undefined, ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
|
|
1574
1612
|
}
|
|
1575
1613
|
ngOnInit() {
|
|
1576
|
-
this.
|
|
1577
|
-
|
|
1578
|
-
|
|
1614
|
+
const date = this.date();
|
|
1615
|
+
if (date) {
|
|
1616
|
+
this.currentMonth.set(this._utils.getMonth(date));
|
|
1617
|
+
this.currentYear.set(this._utils.getYear(date));
|
|
1618
|
+
this.month.set(this._utils.genMonth(date));
|
|
1619
|
+
}
|
|
1579
1620
|
if (this.withoutDays()) {
|
|
1580
1621
|
this.mode.set('months');
|
|
1581
1622
|
}
|
|
1582
1623
|
}
|
|
1583
1624
|
addMonth() {
|
|
1584
1625
|
const startOfMonth = this.firstDay();
|
|
1585
|
-
if (
|
|
1626
|
+
if (!startOfMonth) {
|
|
1627
|
+
return;
|
|
1628
|
+
}
|
|
1629
|
+
const currentMonth = this.currentMonth();
|
|
1630
|
+
if (currentMonth === 11) {
|
|
1586
1631
|
this.currentMonth.set(0);
|
|
1587
|
-
this.currentYear.update((value) => value + 1);
|
|
1632
|
+
this.currentYear.update((value) => (value || 0) + 1);
|
|
1588
1633
|
}
|
|
1589
1634
|
else {
|
|
1590
|
-
this.currentMonth.update((value) => value + 1);
|
|
1635
|
+
this.currentMonth.update((value) => (value || 0) + 1);
|
|
1591
1636
|
}
|
|
1592
1637
|
this.month.set(this._utils.genMonth(this._utils.addMonths(startOfMonth, 1)));
|
|
1593
1638
|
if (this.withoutDays()) {
|
|
@@ -1596,12 +1641,16 @@ class DatepickerCore {
|
|
|
1596
1641
|
}
|
|
1597
1642
|
subMonth() {
|
|
1598
1643
|
const startOfMonth = this.firstDay();
|
|
1599
|
-
if (
|
|
1644
|
+
if (!startOfMonth) {
|
|
1645
|
+
return;
|
|
1646
|
+
}
|
|
1647
|
+
const currentMonth = this.currentMonth();
|
|
1648
|
+
if (currentMonth === 0) {
|
|
1600
1649
|
this.currentMonth.set(11);
|
|
1601
|
-
this.currentYear.update((value) => value - 1);
|
|
1650
|
+
this.currentYear.update((value) => (value || 0) - 1);
|
|
1602
1651
|
}
|
|
1603
1652
|
else {
|
|
1604
|
-
this.currentMonth.update((value) => value - 1);
|
|
1653
|
+
this.currentMonth.update((value) => (value || 0) - 1);
|
|
1605
1654
|
}
|
|
1606
1655
|
this.month.set(this._utils.genMonth(this._utils.subMonths(startOfMonth, 1)));
|
|
1607
1656
|
if (this.withoutDays()) {
|
|
@@ -1610,7 +1659,7 @@ class DatepickerCore {
|
|
|
1610
1659
|
}
|
|
1611
1660
|
setMonth(month, erase) {
|
|
1612
1661
|
if (this.withoutDays()) {
|
|
1613
|
-
this.woDaysMonth.emit([month, erase]);
|
|
1662
|
+
this.woDaysMonth.emit([month, erase || false]);
|
|
1614
1663
|
this.currentMonth.set(month);
|
|
1615
1664
|
this.reDraw();
|
|
1616
1665
|
return;
|
|
@@ -1621,7 +1670,7 @@ class DatepickerCore {
|
|
|
1621
1670
|
}
|
|
1622
1671
|
setYear(year, erase) {
|
|
1623
1672
|
if (this.withoutDays()) {
|
|
1624
|
-
this.woDaysYear.emit([year, erase]);
|
|
1673
|
+
this.woDaysYear.emit([year, erase || false]);
|
|
1625
1674
|
this.currentYear.set(year);
|
|
1626
1675
|
this.reDraw();
|
|
1627
1676
|
return;
|
|
@@ -1634,11 +1683,20 @@ class DatepickerCore {
|
|
|
1634
1683
|
this.dateChange.emit(date);
|
|
1635
1684
|
}
|
|
1636
1685
|
reDraw() {
|
|
1637
|
-
const
|
|
1686
|
+
const month = this.currentMonth();
|
|
1687
|
+
const year = this.currentYear();
|
|
1688
|
+
if (month === undefined || year === undefined) {
|
|
1689
|
+
return;
|
|
1690
|
+
}
|
|
1691
|
+
const startOfMonth = this._utils.setMonth(month, year);
|
|
1638
1692
|
this.month.set(this._utils.genMonth(startOfMonth));
|
|
1639
1693
|
}
|
|
1640
1694
|
firstDay() {
|
|
1641
|
-
|
|
1695
|
+
const firstWeek = this.month()[0];
|
|
1696
|
+
if (!firstWeek) {
|
|
1697
|
+
return null;
|
|
1698
|
+
}
|
|
1699
|
+
return firstWeek.find((item) => item !== null) || null;
|
|
1642
1700
|
}
|
|
1643
1701
|
showMonthsHandler() {
|
|
1644
1702
|
if (this.withoutDays() && this.mode() === 'months') {
|
|
@@ -1883,7 +1941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1883
1941
|
class Datepicker {
|
|
1884
1942
|
constructor() {
|
|
1885
1943
|
this._utils = inject(DatepickerUtilsService);
|
|
1886
|
-
this.hasError = input(
|
|
1944
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
1887
1945
|
this.minDate = input(this._utils.subYears(new Date(), 100), ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
1888
1946
|
this.maxDate = input(this._utils.addYears(new Date(), 50), ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
1889
1947
|
this.excludedDates = input([], ...(ngDevMode ? [{ debugName: "excludedDates" }] : []));
|
|
@@ -1896,9 +1954,20 @@ class Datepicker {
|
|
|
1896
1954
|
this.core = viewChild(DatepickerCore, ...(ngDevMode ? [{ debugName: "core" }] : []));
|
|
1897
1955
|
this.input = viewChild(FormFieldDirective, ...(ngDevMode ? [{ debugName: "input" }] : []));
|
|
1898
1956
|
this.internalDate = null;
|
|
1957
|
+
this.inputValue = '';
|
|
1958
|
+
this.lastValidInput = '';
|
|
1899
1959
|
this.isOpen = false;
|
|
1900
1960
|
this.disabled = false;
|
|
1901
1961
|
this.touched = false;
|
|
1962
|
+
this.woDaysMonth = 0;
|
|
1963
|
+
this.woDaysYear = 0;
|
|
1964
|
+
this._onTouch = () => {
|
|
1965
|
+
// ignore
|
|
1966
|
+
};
|
|
1967
|
+
// ControlValueAccessor methods
|
|
1968
|
+
this._onChange = () => {
|
|
1969
|
+
// ignore
|
|
1970
|
+
};
|
|
1902
1971
|
}
|
|
1903
1972
|
clickOutsideHandler() {
|
|
1904
1973
|
if (this.isOpen) {
|
|
@@ -2014,14 +2083,14 @@ class Datepicker {
|
|
|
2014
2083
|
targetDate = `${String(this.woDaysMonth + 1).length === 1
|
|
2015
2084
|
? `0${this.woDaysMonth + 1}`
|
|
2016
2085
|
: this.woDaysMonth + 1}.${this.woDaysYear}`;
|
|
2017
|
-
this.core()
|
|
2086
|
+
this.core()?.setMonth(this.woDaysMonth);
|
|
2018
2087
|
}
|
|
2019
2088
|
else if (this._utils.isMaxOverlap(maxDate, this._utils.parseDate(`01.${targetDate}`))) {
|
|
2020
2089
|
this.woDaysMonth = new Date(maxDate).getMonth();
|
|
2021
2090
|
targetDate = `${String(this.woDaysMonth + 1).length === 1
|
|
2022
2091
|
? `0${this.woDaysMonth + 1}`
|
|
2023
2092
|
: this.woDaysMonth + 1}.${this.woDaysYear}`;
|
|
2024
|
-
this.core()
|
|
2093
|
+
this.core()?.setMonth(this.woDaysMonth);
|
|
2025
2094
|
}
|
|
2026
2095
|
if (!erase) {
|
|
2027
2096
|
this.inputValue = targetDate;
|
|
@@ -2042,13 +2111,14 @@ class Datepicker {
|
|
|
2042
2111
|
const eventValue = event.target.value;
|
|
2043
2112
|
if (!this.touched) {
|
|
2044
2113
|
this.touched = true;
|
|
2114
|
+
this._onTouch();
|
|
2045
2115
|
}
|
|
2046
2116
|
// Handle empty input
|
|
2047
2117
|
if (!eventValue || eventValue.trim() === '') {
|
|
2048
2118
|
this.writeValue(null);
|
|
2049
2119
|
this._onChange(null);
|
|
2050
|
-
this.core()
|
|
2051
|
-
this.core()
|
|
2120
|
+
this.core()?.setMonth(this._utils.getMonth(new Date()), true);
|
|
2121
|
+
this.core()?.setYear(this._utils.getYear(new Date()), true);
|
|
2052
2122
|
return;
|
|
2053
2123
|
}
|
|
2054
2124
|
// Check if the input is a complete date format
|
|
@@ -2080,8 +2150,8 @@ class Datepicker {
|
|
|
2080
2150
|
this.woDaysYear = parsedDate.getFullYear();
|
|
2081
2151
|
}
|
|
2082
2152
|
// Update the calendar view
|
|
2083
|
-
this.core()
|
|
2084
|
-
this.core()
|
|
2153
|
+
this.core()?.setMonth(this._utils.getMonth(parsedDate));
|
|
2154
|
+
this.core()?.setYear(this._utils.getYear(parsedDate));
|
|
2085
2155
|
// Emit the change
|
|
2086
2156
|
this.writeValue(parsedDate);
|
|
2087
2157
|
this._onChange(parsedDate);
|
|
@@ -2092,6 +2162,7 @@ class Datepicker {
|
|
|
2092
2162
|
handleDateChange(date) {
|
|
2093
2163
|
if (!this.touched) {
|
|
2094
2164
|
this.touched = true;
|
|
2165
|
+
this._onTouch();
|
|
2095
2166
|
}
|
|
2096
2167
|
this.inputValue = this._utils.formatDate(date);
|
|
2097
2168
|
this.lastValidInput = this.inputValue;
|
|
@@ -2102,43 +2173,33 @@ class Datepicker {
|
|
|
2102
2173
|
this.isOpen = false;
|
|
2103
2174
|
}
|
|
2104
2175
|
}
|
|
2105
|
-
// ControlValueAccessor overrides
|
|
2106
2176
|
writeValue(value) {
|
|
2107
|
-
if (this.
|
|
2108
|
-
|
|
2177
|
+
if (!this.touched) {
|
|
2178
|
+
this.touched = true;
|
|
2179
|
+
this._onTouch();
|
|
2109
2180
|
}
|
|
2110
|
-
this.internalDate = value || new Date();
|
|
2111
|
-
this.woDaysMonth = this.internalDate.getMonth();
|
|
2112
|
-
this.woDaysYear = this.internalDate.getFullYear();
|
|
2113
2181
|
if (!value) {
|
|
2182
|
+
this.internalDate = null;
|
|
2114
2183
|
this.inputValue = '';
|
|
2184
|
+
return;
|
|
2115
2185
|
}
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
if (!this.touched) {
|
|
2123
|
-
this.touched = true;
|
|
2186
|
+
this.internalDate = value;
|
|
2187
|
+
this.inputValue = this._utils.formatDate(value);
|
|
2188
|
+
this.lastValidInput = this.inputValue;
|
|
2189
|
+
if (this.withoutDays()) {
|
|
2190
|
+
this.woDaysMonth = value.getMonth();
|
|
2191
|
+
this.woDaysYear = value.getFullYear();
|
|
2124
2192
|
}
|
|
2125
|
-
this.dateChange.emit(value);
|
|
2126
|
-
}
|
|
2127
|
-
registerOnChange(fn) {
|
|
2128
|
-
this._onChange = fn;
|
|
2129
2193
|
}
|
|
2130
2194
|
registerOnTouched(fn) {
|
|
2131
2195
|
this._onTouch = fn;
|
|
2132
2196
|
}
|
|
2197
|
+
registerOnChange(fn) {
|
|
2198
|
+
this._onChange = fn;
|
|
2199
|
+
}
|
|
2133
2200
|
setDisabledState(disabled) {
|
|
2134
2201
|
this.disabled = disabled;
|
|
2135
2202
|
}
|
|
2136
|
-
_onChange(_) {
|
|
2137
|
-
// ignore
|
|
2138
|
-
}
|
|
2139
|
-
_onTouch() {
|
|
2140
|
-
// ignore
|
|
2141
|
-
}
|
|
2142
2203
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Datepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2143
2204
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: Datepicker, isStandalone: true, selector: "aeb-datepicker", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, excludedDates: { classPropertyName: "excludedDates", publicName: "excludedDates", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, collapseOnChange: { classPropertyName: "collapseOnChange", publicName: "collapseOnChange", isSignal: true, isRequired: false, transformFunction: null }, withoutDays: { classPropertyName: "withoutDays", publicName: "withoutDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { listeners: { "clickOutside": "clickOutsideHandler()" }, properties: { "class.aeb-datepicker": "true", "class.aeb-datepicker--disabled": "disabled" } }, providers: [
|
|
2144
2205
|
{
|
|
@@ -2146,7 +2207,7 @@ class Datepicker {
|
|
|
2146
2207
|
useExisting: forwardRef(() => Datepicker),
|
|
2147
2208
|
multi: true
|
|
2148
2209
|
}
|
|
2149
|
-
], viewQueries: [{ propertyName: "core", first: true, predicate: DatepickerCore, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: FormFieldDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ClickOutsideDirective, outputs: ["clickOutside", "clickOutside"] }], ngImport: i0, template: "<aeb-form-field\n class=\"aeb-datepicker__field\"\n [ngClass]=\"{ 'aeb-datepicker__field--onerror': hasError() }\"\n>\n <label aebLabel class=\"aeb-datepicker__label\">{{ placeholder() }}</label>\n <input\n aebInput\n type=\"text\"\n class=\"aeb-datepicker__input\"\n [maxlength]=\"withoutDays() ? 7 : 10\"\n [(ngModel)]=\"inputValue\"\n (change)=\"handleInput($event)\"\n (click)=\"clickInputHandler()\"\n (input)=\"typeHandler()\"\n (keydown)=\"keyDownHandler($event)\"\n #input\n />\n <div class=\"aeb-datepicker__calendar-icon\" (click)=\"handleOpen()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n stroke=\"#BFC6D0\"\n stroke-width=\"2\"\n />\n <rect x=\"4\" y=\"5\" width=\"16\" height=\"4\" rx=\"2\" fill=\"#BFC6D0\" />\n <rect\n x=\"9\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 9 3)\"\n fill=\"#BFC6D0\"\n />\n <rect\n x=\"17\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 17 3)\"\n fill=\"#BFC6D0\"\n />\n </svg>\n </div>\n</aeb-form-field>\n<div\n aebDatepickerCore\n [date]=\"internalDate\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [excludedDates]=\"excludedDates()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [withoutDays]=\"withoutDays()\"\n [hidden]=\"!isOpen\"\n (dateChange)=\"handleDateChange($event)\"\n (woDaysMonth)=\"woDaysMonthSet($event)\"\n (woDaysYear)=\"woDaysYearSet($event)\"\n (woDaysMonthSubInc)=\"woMonthIncSub($event)\"\n #core\n></div>\n", styles: [".aeb-datepicker{position:relative;width:100%;color:var(--c-t-primary)}.aeb-datepicker--disabled{pointer-events:none;opacity:.7}.aeb-datepicker__field{position:relative;min-width:312px}.aeb-datepicker__input{padding-right:35px!important}.aeb-datepicker__calendar-icon{position:absolute;top:16px;right:12px;width:24px;height:24px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerCore, selector: "div[aebDatepickerCore]", inputs: ["date", "minDate", "maxDate", "excludedDates", "minYear", "maxYear", "withoutDays", "hidden"], outputs: ["dateChange", "woDaysMonth", "woDaysYear", "woDaysMonthSubInc"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2210
|
+
], viewQueries: [{ propertyName: "core", first: true, predicate: DatepickerCore, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: FormFieldDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ClickOutsideDirective, outputs: ["clickOutside", "clickOutside"] }], ngImport: i0, template: "<aeb-form-field\n class=\"aeb-datepicker__field\"\n [ngClass]=\"{ 'aeb-datepicker__field--onerror': hasError() }\"\n>\n <label aebLabel class=\"aeb-datepicker__label\">{{ placeholder() }}</label>\n <input\n aebInput\n type=\"text\"\n class=\"aeb-datepicker__input\"\n [maxlength]=\"withoutDays() ? 7 : 10\"\n [(ngModel)]=\"inputValue\"\n (change)=\"handleInput($event)\"\n (click)=\"clickInputHandler()\"\n (input)=\"typeHandler()\"\n (keydown)=\"keyDownHandler($event)\"\n #input\n />\n <div class=\"aeb-datepicker__calendar-icon\" (click)=\"handleOpen()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n stroke=\"#BFC6D0\"\n stroke-width=\"2\"\n />\n <rect x=\"4\" y=\"5\" width=\"16\" height=\"4\" rx=\"2\" fill=\"#BFC6D0\" />\n <rect\n x=\"9\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 9 3)\"\n fill=\"#BFC6D0\"\n />\n <rect\n x=\"17\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 17 3)\"\n fill=\"#BFC6D0\"\n />\n </svg>\n </div>\n</aeb-form-field>\n<div\n aebDatepickerCore\n [date]=\"internalDate ?? undefined\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [excludedDates]=\"excludedDates()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [withoutDays]=\"withoutDays()\"\n [hidden]=\"!isOpen\"\n (dateChange)=\"handleDateChange($event)\"\n (woDaysMonth)=\"woDaysMonthSet($event)\"\n (woDaysYear)=\"woDaysYearSet($event)\"\n (woDaysMonthSubInc)=\"woMonthIncSub($event)\"\n #core\n></div>\n", styles: [".aeb-datepicker{position:relative;width:100%;color:var(--c-t-primary)}.aeb-datepicker--disabled{pointer-events:none;opacity:.7}.aeb-datepicker__field{position:relative;min-width:312px}.aeb-datepicker__input{padding-right:35px!important}.aeb-datepicker__calendar-icon{position:absolute;top:16px;right:12px;width:24px;height:24px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: FormField, selector: "aeb-form-field", inputs: ["showDescription", "showErrorMessage", "disabled", "isInvalid", "showIcon", "validateOnDirty"] }, { kind: "directive", type: FormFieldDirective, selector: "input[aebInput], textarea[aebTextarea]", inputs: ["value"] }, { kind: "directive", type: LabelDirective, selector: "[aebLabel]", inputs: ["aebLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerCore, selector: "div[aebDatepickerCore]", inputs: ["date", "minDate", "maxDate", "excludedDates", "minYear", "maxYear", "withoutDays", "hidden"], outputs: ["dateChange", "woDaysMonth", "woDaysYear", "woDaysMonthSubInc"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2150
2211
|
}
|
|
2151
2212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Datepicker, decorators: [{
|
|
2152
2213
|
type: Component,
|
|
@@ -2165,7 +2226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2165
2226
|
'[class.aeb-datepicker]': 'true',
|
|
2166
2227
|
'[class.aeb-datepicker--disabled]': 'disabled',
|
|
2167
2228
|
'(clickOutside)': 'clickOutsideHandler()'
|
|
2168
|
-
}, imports: [FormFieldModule, NgClass, FormsModule, DatepickerCore], template: "<aeb-form-field\n class=\"aeb-datepicker__field\"\n [ngClass]=\"{ 'aeb-datepicker__field--onerror': hasError() }\"\n>\n <label aebLabel class=\"aeb-datepicker__label\">{{ placeholder() }}</label>\n <input\n aebInput\n type=\"text\"\n class=\"aeb-datepicker__input\"\n [maxlength]=\"withoutDays() ? 7 : 10\"\n [(ngModel)]=\"inputValue\"\n (change)=\"handleInput($event)\"\n (click)=\"clickInputHandler()\"\n (input)=\"typeHandler()\"\n (keydown)=\"keyDownHandler($event)\"\n #input\n />\n <div class=\"aeb-datepicker__calendar-icon\" (click)=\"handleOpen()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n stroke=\"#BFC6D0\"\n stroke-width=\"2\"\n />\n <rect x=\"4\" y=\"5\" width=\"16\" height=\"4\" rx=\"2\" fill=\"#BFC6D0\" />\n <rect\n x=\"9\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 9 3)\"\n fill=\"#BFC6D0\"\n />\n <rect\n x=\"17\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 17 3)\"\n fill=\"#BFC6D0\"\n />\n </svg>\n </div>\n</aeb-form-field>\n<div\n aebDatepickerCore\n [date]=\"internalDate\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [excludedDates]=\"excludedDates()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [withoutDays]=\"withoutDays()\"\n [hidden]=\"!isOpen\"\n (dateChange)=\"handleDateChange($event)\"\n (woDaysMonth)=\"woDaysMonthSet($event)\"\n (woDaysYear)=\"woDaysYearSet($event)\"\n (woDaysMonthSubInc)=\"woMonthIncSub($event)\"\n #core\n></div>\n", styles: [".aeb-datepicker{position:relative;width:100%;color:var(--c-t-primary)}.aeb-datepicker--disabled{pointer-events:none;opacity:.7}.aeb-datepicker__field{position:relative;min-width:312px}.aeb-datepicker__input{padding-right:35px!important}.aeb-datepicker__calendar-icon{position:absolute;top:16px;right:12px;width:24px;height:24px;cursor:pointer}\n"] }]
|
|
2229
|
+
}, imports: [FormFieldModule, NgClass, FormsModule, DatepickerCore], template: "<aeb-form-field\n class=\"aeb-datepicker__field\"\n [ngClass]=\"{ 'aeb-datepicker__field--onerror': hasError() }\"\n>\n <label aebLabel class=\"aeb-datepicker__label\">{{ placeholder() }}</label>\n <input\n aebInput\n type=\"text\"\n class=\"aeb-datepicker__input\"\n [maxlength]=\"withoutDays() ? 7 : 10\"\n [(ngModel)]=\"inputValue\"\n (change)=\"handleInput($event)\"\n (click)=\"clickInputHandler()\"\n (input)=\"typeHandler()\"\n (keydown)=\"keyDownHandler($event)\"\n #input\n />\n <div class=\"aeb-datepicker__calendar-icon\" (click)=\"handleOpen()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n stroke=\"#BFC6D0\"\n stroke-width=\"2\"\n />\n <rect x=\"4\" y=\"5\" width=\"16\" height=\"4\" rx=\"2\" fill=\"#BFC6D0\" />\n <rect\n x=\"9\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 9 3)\"\n fill=\"#BFC6D0\"\n />\n <rect\n x=\"17\"\n y=\"3\"\n width=\"3\"\n height=\"2\"\n rx=\"1\"\n transform=\"rotate(90 17 3)\"\n fill=\"#BFC6D0\"\n />\n </svg>\n </div>\n</aeb-form-field>\n<div\n aebDatepickerCore\n [date]=\"internalDate ?? undefined\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [excludedDates]=\"excludedDates()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [withoutDays]=\"withoutDays()\"\n [hidden]=\"!isOpen\"\n (dateChange)=\"handleDateChange($event)\"\n (woDaysMonth)=\"woDaysMonthSet($event)\"\n (woDaysYear)=\"woDaysYearSet($event)\"\n (woDaysMonthSubInc)=\"woMonthIncSub($event)\"\n #core\n></div>\n", styles: [".aeb-datepicker{position:relative;width:100%;color:var(--c-t-primary)}.aeb-datepicker--disabled{pointer-events:none;opacity:.7}.aeb-datepicker__field{position:relative;min-width:312px}.aeb-datepicker__input{padding-right:35px!important}.aeb-datepicker__calendar-icon{position:absolute;top:16px;right:12px;width:24px;height:24px;cursor:pointer}\n"] }]
|
|
2169
2230
|
}], propDecorators: { hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], excludedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedDates", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], collapseOnChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOnChange", required: false }] }], withoutDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "withoutDays", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], core: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DatepickerCore), { isSignal: true }] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormFieldDirective), { isSignal: true }] }] } });
|
|
2170
2231
|
|
|
2171
2232
|
class DatepickerModule {
|
|
@@ -2217,10 +2278,9 @@ class DropdownMenu {
|
|
|
2217
2278
|
});
|
|
2218
2279
|
}
|
|
2219
2280
|
get maxHeight() {
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
'px');
|
|
2281
|
+
const maxShown = this.maxShownOptions();
|
|
2282
|
+
const optionHeight = this.optionHeightPx();
|
|
2283
|
+
return maxShown * (optionHeight || 0) + 16 + maxShown * 2 + 'px';
|
|
2224
2284
|
}
|
|
2225
2285
|
clickOutsideHandler(event) {
|
|
2226
2286
|
event.stopPropagation();
|
|
@@ -2395,7 +2455,10 @@ class Dropdown {
|
|
|
2395
2455
|
return;
|
|
2396
2456
|
}
|
|
2397
2457
|
this._value.set(value);
|
|
2398
|
-
this.
|
|
2458
|
+
const selected = this._selectedOption();
|
|
2459
|
+
if (selected) {
|
|
2460
|
+
this.optionSelect.emit(selected);
|
|
2461
|
+
}
|
|
2399
2462
|
}
|
|
2400
2463
|
registerOnChange(fn) {
|
|
2401
2464
|
this.onChange = fn;
|
|
@@ -2403,7 +2466,7 @@ class Dropdown {
|
|
|
2403
2466
|
registerOnTouched(fn) {
|
|
2404
2467
|
this.onTouch = fn;
|
|
2405
2468
|
}
|
|
2406
|
-
setDisabledState(
|
|
2469
|
+
setDisabledState(_disabled) {
|
|
2407
2470
|
// This is called by Angular forms API
|
|
2408
2471
|
// We'll use our disabled input signal instead
|
|
2409
2472
|
}
|
|
@@ -2706,9 +2769,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2706
2769
|
|
|
2707
2770
|
class AttachButton {
|
|
2708
2771
|
constructor() {
|
|
2709
|
-
this.attachButtonIcon = input(
|
|
2772
|
+
this.attachButtonIcon = input(...(ngDevMode ? [undefined, { debugName: "attachButtonIcon" }] : []));
|
|
2710
2773
|
this.filesAmount = input(0, ...(ngDevMode ? [{ debugName: "filesAmount" }] : []));
|
|
2711
|
-
this.requirement = input(
|
|
2774
|
+
this.requirement = input(...(ngDevMode ? [undefined, { debugName: "requirement" }] : []));
|
|
2712
2775
|
this.attachButtonText = input('Выберите файл', ...(ngDevMode ? [{ debugName: "attachButtonText" }] : []));
|
|
2713
2776
|
this.multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
|
|
2714
2777
|
this.showErrorMessage = input(true, ...(ngDevMode ? [{ debugName: "showErrorMessage" }] : []));
|
|
@@ -2721,14 +2784,22 @@ class AttachButton {
|
|
|
2721
2784
|
chooseFile(event) {
|
|
2722
2785
|
const target = event.target;
|
|
2723
2786
|
const files = target.files;
|
|
2724
|
-
|
|
2787
|
+
if (files) {
|
|
2788
|
+
this.fileChoosen.emit(files);
|
|
2789
|
+
}
|
|
2725
2790
|
}
|
|
2726
2791
|
onButtonClick() {
|
|
2727
|
-
this.fileInputRef()
|
|
2792
|
+
const fileInput = this.fileInputRef();
|
|
2793
|
+
if (fileInput) {
|
|
2794
|
+
fileInput.nativeElement.click();
|
|
2795
|
+
}
|
|
2728
2796
|
this.buttonClick.emit();
|
|
2729
2797
|
}
|
|
2730
2798
|
clearFileList() {
|
|
2731
|
-
this.fileInputRef()
|
|
2799
|
+
const fileInput = this.fileInputRef();
|
|
2800
|
+
if (fileInput) {
|
|
2801
|
+
fileInput.nativeElement.value = '';
|
|
2802
|
+
}
|
|
2732
2803
|
this.fileListCleared.emit();
|
|
2733
2804
|
}
|
|
2734
2805
|
getCaseByNumber(word) {
|
|
@@ -2747,13 +2818,13 @@ class AttachButton {
|
|
|
2747
2818
|
}
|
|
2748
2819
|
}
|
|
2749
2820
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AttachButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AttachButton, isStandalone: true, selector: "aeb-attach-button", inputs: { attachButtonIcon: { classPropertyName: "attachButtonIcon", publicName: "attachButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, filesAmount: { classPropertyName: "filesAmount", publicName: "filesAmount", isSignal: true, isRequired: false, transformFunction: null }, requirement: { classPropertyName: "requirement", publicName: "requirement", isSignal: true, isRequired: false, transformFunction: null }, attachButtonText: { classPropertyName: "attachButtonText", publicName: "attachButtonText", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessage: { classPropertyName: "showErrorMessage", publicName: "showErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessageText: { classPropertyName: "showErrorMessageText", publicName: "showErrorMessageText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChoosen: "fileChoosen", buttonClick: "buttonClick", fileListCleared: "fileListCleared" }, host: { classAttribute: "aeb-attach-button" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button aebButton [size]=\"'L'\" [variant]=\"'outline'\" (click)=\"onButtonClick()\">\n {{ attachButtonText() }} @if (attachButtonIcon()) {\n <img class=\"aeb-icon-left\" [src]=\"attachButtonIcon()\" alt=\"attach-icon\" />\n } @else {\n <svg\n class=\"aeb-icon-left\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 10.376L11.5445 19.2938C10.3861 20.3862 8.81499 21 7.1768 21C5.53861 21 3.96752 20.3862 2.80914 19.2938C1.65077 18.2013 1 16.7195 1 15.1745C1 13.6295 1.65077 12.1477 2.80914 11.0553L12.2647 2.1375C13.0369 1.40917 14.0843 1 15.1765 1C16.2686 1 17.316 1.40917 18.0882 2.1375C18.8605 2.86583 19.2943 3.85365 19.2943 4.88366C19.2943 5.91367 18.8605 6.9015 18.0882 7.62983L8.6224 16.5476C8.23627 16.9118 7.71257 17.1163 7.16651 17.1163C6.62045 17.1163 6.09675 16.9118 5.71063 16.5476C5.3245 16.1834 5.10758 15.6895 5.10758 15.1745C5.10758 14.6595 5.3245 14.1656 5.71063 13.8014L14.4459 5.57263\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n</button>\n<input\n #fileInput\n type=\"file\"\n [multiple]=\"multi()\"\n (change)=\"chooseFile($event)\"\n style=\"display: none\"\n/>\n<div class=\"aeb-attach-button__file-message\">\n @if (showErrorMessageText() | async; as errorText) {\n <div class=\"aeb-attach-button__file-message__error\">\n @if (showErrorMessage()) {\n <div>{{ errorText }}</div>\n }\n </div>\n } @if (filesAmount() === 0 && requirement() !== undefined) {\n <div class=\"aeb-attach-button__file-message__container\">\n <p [innerHTML]=\"requirement()
|
|
2821
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AttachButton, isStandalone: true, selector: "aeb-attach-button", inputs: { attachButtonIcon: { classPropertyName: "attachButtonIcon", publicName: "attachButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, filesAmount: { classPropertyName: "filesAmount", publicName: "filesAmount", isSignal: true, isRequired: false, transformFunction: null }, requirement: { classPropertyName: "requirement", publicName: "requirement", isSignal: true, isRequired: false, transformFunction: null }, attachButtonText: { classPropertyName: "attachButtonText", publicName: "attachButtonText", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessage: { classPropertyName: "showErrorMessage", publicName: "showErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, showErrorMessageText: { classPropertyName: "showErrorMessageText", publicName: "showErrorMessageText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChoosen: "fileChoosen", buttonClick: "buttonClick", fileListCleared: "fileListCleared" }, host: { classAttribute: "aeb-attach-button" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button aebButton [size]=\"'L'\" [variant]=\"'outline'\" (click)=\"onButtonClick()\">\n {{ attachButtonText() }} @if (attachButtonIcon()) {\n <img class=\"aeb-icon-left\" [src]=\"attachButtonIcon()\" alt=\"attach-icon\" />\n } @else {\n <svg\n class=\"aeb-icon-left\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 10.376L11.5445 19.2938C10.3861 20.3862 8.81499 21 7.1768 21C5.53861 21 3.96752 20.3862 2.80914 19.2938C1.65077 18.2013 1 16.7195 1 15.1745C1 13.6295 1.65077 12.1477 2.80914 11.0553L12.2647 2.1375C13.0369 1.40917 14.0843 1 15.1765 1C16.2686 1 17.316 1.40917 18.0882 2.1375C18.8605 2.86583 19.2943 3.85365 19.2943 4.88366C19.2943 5.91367 18.8605 6.9015 18.0882 7.62983L8.6224 16.5476C8.23627 16.9118 7.71257 17.1163 7.16651 17.1163C6.62045 17.1163 6.09675 16.9118 5.71063 16.5476C5.3245 16.1834 5.10758 15.6895 5.10758 15.1745C5.10758 14.6595 5.3245 14.1656 5.71063 13.8014L14.4459 5.57263\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n</button>\n<input\n #fileInput\n type=\"file\"\n [multiple]=\"multi()\"\n (change)=\"chooseFile($event)\"\n style=\"display: none\"\n/>\n<div class=\"aeb-attach-button__file-message\">\n @if (showErrorMessageText() | async; as errorText) {\n <div class=\"aeb-attach-button__file-message__error\">\n @if (showErrorMessage()) {\n <div>{{ errorText }}</div>\n }\n </div>\n } @if (filesAmount() === 0 && requirement() !== undefined) {\n <div class=\"aeb-attach-button__file-message__container\">\n <p [innerHTML]=\"requirement()?.text || ''\"></p>\n </div>\n } @if (filesAmount() > 0) {\n <div class=\"aeb-attach-button__file-message__file-amount\">\n <div>\n {{ filesAmount() === 1 ? '\u0412\u044B\u0431\u0440\u0430\u043D' : '\u0412\u044B\u0431\u0440\u0430\u043D\u043E' }} {{ filesAmount() }} {{\n getCaseByNumber(['\u0444\u0430\u0439\u043B', '\u0444\u0430\u0439\u043B\u0430', '\u0444\u0430\u0439\u043B\u043E\u0432']) }}\n </div>\n <div class=\"aeb-attach-button__remove-icon\" (click)=\"clearFileList()\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5 10.7609L11.0268 4.73413\"\n stroke=\"#27303E\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M11.0268 10.7609L5 4.73413\"\n stroke=\"#27303E\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n }\n</div>\n", styles: [".aeb-attach-button{display:flex;align-items:center}.aeb-attach-button__file-message{display:flex;flex-direction:column;margin-left:20px;font-size:var(--font-size-xs);line-height:16px;gap:8px}@media screen and (max-width:599px){.aeb-attach-button__file-message{margin-top:16px;margin-left:0}}.aeb-attach-button__file-message__container p{margin:0}.aeb-attach-button__file-message__error{color:var(--color-red-500)}.aeb-attach-button__file-message__file-amount{display:flex}.aeb-attach-button__remove-icon{width:16px;height:16px;margin-left:20px;cursor:pointer}.aeb-attach-button__remove-icon:hover svg path{stroke:var(--color-blue-500)}@media screen and (max-width:599px){.aeb-attach-button{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }, { kind: "directive", type: ButtonLeftIconDirective, selector: "img.aeb-icon-left, svg.aeb-icon-left" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2751
2822
|
}
|
|
2752
2823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AttachButton, decorators: [{
|
|
2753
2824
|
type: Component,
|
|
2754
2825
|
args: [{ selector: 'aeb-attach-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [Button, ButtonLeftIconDirective, AsyncPipe], host: {
|
|
2755
2826
|
class: 'aeb-attach-button'
|
|
2756
|
-
}, template: "<button aebButton [size]=\"'L'\" [variant]=\"'outline'\" (click)=\"onButtonClick()\">\n {{ attachButtonText() }} @if (attachButtonIcon()) {\n <img class=\"aeb-icon-left\" [src]=\"attachButtonIcon()\" alt=\"attach-icon\" />\n } @else {\n <svg\n class=\"aeb-icon-left\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 10.376L11.5445 19.2938C10.3861 20.3862 8.81499 21 7.1768 21C5.53861 21 3.96752 20.3862 2.80914 19.2938C1.65077 18.2013 1 16.7195 1 15.1745C1 13.6295 1.65077 12.1477 2.80914 11.0553L12.2647 2.1375C13.0369 1.40917 14.0843 1 15.1765 1C16.2686 1 17.316 1.40917 18.0882 2.1375C18.8605 2.86583 19.2943 3.85365 19.2943 4.88366C19.2943 5.91367 18.8605 6.9015 18.0882 7.62983L8.6224 16.5476C8.23627 16.9118 7.71257 17.1163 7.16651 17.1163C6.62045 17.1163 6.09675 16.9118 5.71063 16.5476C5.3245 16.1834 5.10758 15.6895 5.10758 15.1745C5.10758 14.6595 5.3245 14.1656 5.71063 13.8014L14.4459 5.57263\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n</button>\n<input\n #fileInput\n type=\"file\"\n [multiple]=\"multi()\"\n (change)=\"chooseFile($event)\"\n style=\"display: none\"\n/>\n<div class=\"aeb-attach-button__file-message\">\n @if (showErrorMessageText() | async; as errorText) {\n <div class=\"aeb-attach-button__file-message__error\">\n @if (showErrorMessage()) {\n <div>{{ errorText }}</div>\n }\n </div>\n } @if (filesAmount() === 0 && requirement() !== undefined) {\n <div class=\"aeb-attach-button__file-message__container\">\n <p [innerHTML]=\"requirement()
|
|
2827
|
+
}, template: "<button aebButton [size]=\"'L'\" [variant]=\"'outline'\" (click)=\"onButtonClick()\">\n {{ attachButtonText() }} @if (attachButtonIcon()) {\n <img class=\"aeb-icon-left\" [src]=\"attachButtonIcon()\" alt=\"attach-icon\" />\n } @else {\n <svg\n class=\"aeb-icon-left\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 10.376L11.5445 19.2938C10.3861 20.3862 8.81499 21 7.1768 21C5.53861 21 3.96752 20.3862 2.80914 19.2938C1.65077 18.2013 1 16.7195 1 15.1745C1 13.6295 1.65077 12.1477 2.80914 11.0553L12.2647 2.1375C13.0369 1.40917 14.0843 1 15.1765 1C16.2686 1 17.316 1.40917 18.0882 2.1375C18.8605 2.86583 19.2943 3.85365 19.2943 4.88366C19.2943 5.91367 18.8605 6.9015 18.0882 7.62983L8.6224 16.5476C8.23627 16.9118 7.71257 17.1163 7.16651 17.1163C6.62045 17.1163 6.09675 16.9118 5.71063 16.5476C5.3245 16.1834 5.10758 15.6895 5.10758 15.1745C5.10758 14.6595 5.3245 14.1656 5.71063 13.8014L14.4459 5.57263\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n</button>\n<input\n #fileInput\n type=\"file\"\n [multiple]=\"multi()\"\n (change)=\"chooseFile($event)\"\n style=\"display: none\"\n/>\n<div class=\"aeb-attach-button__file-message\">\n @if (showErrorMessageText() | async; as errorText) {\n <div class=\"aeb-attach-button__file-message__error\">\n @if (showErrorMessage()) {\n <div>{{ errorText }}</div>\n }\n </div>\n } @if (filesAmount() === 0 && requirement() !== undefined) {\n <div class=\"aeb-attach-button__file-message__container\">\n <p [innerHTML]=\"requirement()?.text || ''\"></p>\n </div>\n } @if (filesAmount() > 0) {\n <div class=\"aeb-attach-button__file-message__file-amount\">\n <div>\n {{ filesAmount() === 1 ? '\u0412\u044B\u0431\u0440\u0430\u043D' : '\u0412\u044B\u0431\u0440\u0430\u043D\u043E' }} {{ filesAmount() }} {{\n getCaseByNumber(['\u0444\u0430\u0439\u043B', '\u0444\u0430\u0439\u043B\u0430', '\u0444\u0430\u0439\u043B\u043E\u0432']) }}\n </div>\n <div class=\"aeb-attach-button__remove-icon\" (click)=\"clearFileList()\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5 10.7609L11.0268 4.73413\"\n stroke=\"#27303E\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M11.0268 10.7609L5 4.73413\"\n stroke=\"#27303E\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n }\n</div>\n", styles: [".aeb-attach-button{display:flex;align-items:center}.aeb-attach-button__file-message{display:flex;flex-direction:column;margin-left:20px;font-size:var(--font-size-xs);line-height:16px;gap:8px}@media screen and (max-width:599px){.aeb-attach-button__file-message{margin-top:16px;margin-left:0}}.aeb-attach-button__file-message__container p{margin:0}.aeb-attach-button__file-message__error{color:var(--color-red-500)}.aeb-attach-button__file-message__file-amount{display:flex}.aeb-attach-button__remove-icon{width:16px;height:16px;margin-left:20px;cursor:pointer}.aeb-attach-button__remove-icon:hover svg path{stroke:var(--color-blue-500)}@media screen and (max-width:599px){.aeb-attach-button{flex-direction:column;align-items:flex-start}}\n"] }]
|
|
2757
2828
|
}], propDecorators: { attachButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachButtonIcon", required: false }] }], filesAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesAmount", required: false }] }], requirement: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirement", required: false }] }], attachButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachButtonText", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], showErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorMessage", required: false }] }], showErrorMessageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorMessageText", required: false }] }], fileChoosen: [{ type: i0.Output, args: ["fileChoosen"] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], fileListCleared: [{ type: i0.Output, args: ["fileListCleared"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
2758
2829
|
|
|
2759
2830
|
class DefaultBody {
|
|
@@ -2804,8 +2875,9 @@ class DragAndDropDirective {
|
|
|
2804
2875
|
onDrop(event) {
|
|
2805
2876
|
event.preventDefault();
|
|
2806
2877
|
event.stopPropagation();
|
|
2807
|
-
const
|
|
2808
|
-
|
|
2878
|
+
const dataTransfer = event.dataTransfer;
|
|
2879
|
+
const files = dataTransfer?.files;
|
|
2880
|
+
if (files && files.length > 0) {
|
|
2809
2881
|
this.filesChoosen.emit(files);
|
|
2810
2882
|
}
|
|
2811
2883
|
this.filesInFocus.emit(false);
|
|
@@ -2841,17 +2913,18 @@ class FileAttach {
|
|
|
2841
2913
|
this.documentListText = input('', ...(ngDevMode ? [{ debugName: "documentListText" }] : []));
|
|
2842
2914
|
this.initialShowErrorMessage = input(true, ...(ngDevMode ? [{ debugName: "initialShowErrorMessage" }] : []));
|
|
2843
2915
|
this.attachButtonText = input('Выберите файл', ...(ngDevMode ? [{ debugName: "attachButtonText" }] : []));
|
|
2844
|
-
this.attachButtonIcon = input(
|
|
2916
|
+
this.attachButtonIcon = input(...(ngDevMode ? [undefined, { debugName: "attachButtonIcon" }] : []));
|
|
2845
2917
|
this.multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
|
|
2846
2918
|
this.layoutMod = input('default', ...(ngDevMode ? [{ debugName: "layoutMod" }] : []));
|
|
2847
2919
|
this.attachmentDescription = input([], ...(ngDevMode ? [{ debugName: "attachmentDescription" }] : []));
|
|
2848
|
-
this.requirement = input(
|
|
2920
|
+
this.requirement = input(...(ngDevMode ? [undefined, { debugName: "requirement" }] : []));
|
|
2849
2921
|
this.changeListEvent = output();
|
|
2850
2922
|
this.requirementViolatedError = output();
|
|
2851
2923
|
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2852
2924
|
this.files = [];
|
|
2853
2925
|
this.showErrorMessageText = new Subject();
|
|
2854
2926
|
this.showErrorMessage = true; // Internal state (can be modified)
|
|
2927
|
+
this.isFileInFocus = false;
|
|
2855
2928
|
if (this._ngControl) {
|
|
2856
2929
|
this._ngControl.valueAccessor = this;
|
|
2857
2930
|
}
|
|
@@ -2860,7 +2933,7 @@ class FileAttach {
|
|
|
2860
2933
|
}
|
|
2861
2934
|
ngOnInit() {
|
|
2862
2935
|
this._subscriptions.add(this.changeListEvent.subscribe(() => {
|
|
2863
|
-
this.showErrorMessageText.next(
|
|
2936
|
+
this.showErrorMessageText.next('');
|
|
2864
2937
|
}));
|
|
2865
2938
|
this._subscriptions.add(this.requirementViolatedError.subscribe((error) => {
|
|
2866
2939
|
this.showErrorMessageText.next(error.message);
|
|
@@ -2871,8 +2944,8 @@ class FileAttach {
|
|
|
2871
2944
|
.subscribe({
|
|
2872
2945
|
next: (status) => {
|
|
2873
2946
|
if (status === 'INVALID') {
|
|
2874
|
-
const
|
|
2875
|
-
|
|
2947
|
+
const control = this._ngControl?.control;
|
|
2948
|
+
const errors = control?.errors;
|
|
2876
2949
|
if (errors.fileTooLarge) {
|
|
2877
2950
|
this.showErrorMessageText.next('Размер файлов превышает максимально допустимый');
|
|
2878
2951
|
}
|
|
@@ -2933,7 +3006,7 @@ class FileAttach {
|
|
|
2933
3006
|
}
|
|
2934
3007
|
this.addFile(files);
|
|
2935
3008
|
}
|
|
2936
|
-
checkFileInFocus(
|
|
3009
|
+
checkFileInFocus(_isInFocus) {
|
|
2937
3010
|
this.onTouch();
|
|
2938
3011
|
}
|
|
2939
3012
|
addFile(files) {
|
|
@@ -2965,15 +3038,9 @@ class FileAttach {
|
|
|
2965
3038
|
this.onChange(this.files);
|
|
2966
3039
|
}
|
|
2967
3040
|
fileListToArray(fileList) {
|
|
2968
|
-
|
|
2969
|
-
// eslint-disable-next-line @typescript-eslint/prefer-for-of
|
|
2970
|
-
for (let i = 0; i < fileList.length; i++) {
|
|
2971
|
-
fileArray.push(fileList[i]);
|
|
2972
|
-
}
|
|
2973
|
-
return fileArray;
|
|
3041
|
+
return Array.from(fileList);
|
|
2974
3042
|
}
|
|
2975
|
-
|
|
2976
|
-
onChange(value) { }
|
|
3043
|
+
onChange(_value) { }
|
|
2977
3044
|
onTouch() { }
|
|
2978
3045
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileAttach, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2979
3046
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FileAttach, isStandalone: true, selector: "aeb-file-attach", inputs: { documentListText: { classPropertyName: "documentListText", publicName: "documentListText", isSignal: true, isRequired: false, transformFunction: null }, initialShowErrorMessage: { classPropertyName: "initialShowErrorMessage", publicName: "initialShowErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, attachButtonText: { classPropertyName: "attachButtonText", publicName: "attachButtonText", isSignal: true, isRequired: false, transformFunction: null }, attachButtonIcon: { classPropertyName: "attachButtonIcon", publicName: "attachButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, layoutMod: { classPropertyName: "layoutMod", publicName: "layoutMod", isSignal: true, isRequired: false, transformFunction: null }, attachmentDescription: { classPropertyName: "attachmentDescription", publicName: "attachmentDescription", isSignal: true, isRequired: false, transformFunction: null }, requirement: { classPropertyName: "requirement", publicName: "requirement", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeListEvent: "changeListEvent", requirementViolatedError: "requirementViolatedError" }, host: { listeners: { "filesChoosen": "dropFile($event)", "filesInFocus": "checkFileInFocus($event)" }, properties: { "class.aeb-attach--file-in-focus": "isFileInFocus", "class.aeb-attach--simple": "layoutMod() === \"simple\"" }, classAttribute: "aeb-attach" }, hostDirectives: [{ directive: DragAndDropDirective, outputs: ["filesChoosen", "filesChoosen", "filesInFocus", "filesInFocus"] }], ngImport: i0, template: "<ng-template #buttonTemplate>\n <aeb-attach-button\n [multi]=\"multi()\"\n [filesAmount]=\"files.length\"\n [attachButtonText]=\"attachButtonText()\"\n [attachButtonIcon]=\"attachButtonIcon()\"\n [showErrorMessage]=\"showErrorMessage\"\n [showErrorMessageText]=\"showErrorMessageText\"\n [requirement]=\"requirement()\"\n (buttonClick)=\"attachButtonClicked()\"\n (fileChoosen)=\"chooseFile($event)\"\n (fileListCleared)=\"clearFileList()\"\n />\n</ng-template>\n@if (layoutMod() === 'default') {\n<aeb-default-body\n [title]=\"title()\"\n [attachmentDescription]=\"attachmentDescription()\"\n [documentListText]=\"documentListText()\"\n>\n <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-default-body>\n} @if (layoutMod() === 'salaryPortal') {\n<aeb-salary-portal-body [title]=\"title()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n</aeb-salary-portal-body>\n} @if (layoutMod() === 'simple') {\n<ng-template [ngTemplateOutlet]=\"buttonTemplate\" />\n}\n", styles: [".aeb-attach{box-sizing:border-box;padding:calc(24px - var(--border-skinny));border:var(--border-skinny) dashed var(--color-mono-300);color:var(--color-mono-900);border-radius:var(--border-medium-rounded);display:flex;flex-direction:column}.aeb-attach--file-in-focus{border:var(--border-skinny) dashed var(--color-blue-500)}.aeb-attach--simple{box-sizing:border-box;width:100%;padding:0;color:var(--color-mono-900);border:var(--no-border)}\n"], dependencies: [{ kind: "component", type: AttachButton, selector: "aeb-attach-button", inputs: ["attachButtonIcon", "filesAmount", "requirement", "attachButtonText", "multi", "showErrorMessage", "showErrorMessageText"], outputs: ["fileChoosen", "buttonClick", "fileListCleared"] }, { kind: "component", type: DefaultBody, selector: "aeb-default-body", inputs: ["title", "attachmentDescription", "documentListText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SalaryPortalBody, selector: "aeb-salary-portal-body", inputs: ["title"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3009,7 +3076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3009
3076
|
|
|
3010
3077
|
class FilterTag {
|
|
3011
3078
|
constructor() {
|
|
3012
|
-
this.value = input(
|
|
3079
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
3013
3080
|
this.active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
3014
3081
|
this.tagHandler = output();
|
|
3015
3082
|
}
|
|
@@ -3017,11 +3084,11 @@ class FilterTag {
|
|
|
3017
3084
|
this.tagHandler.emit(tag);
|
|
3018
3085
|
}
|
|
3019
3086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FilterTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: FilterTag, isStandalone: true, selector: "aeb-filter-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagHandler: "tagHandler" }, ngImport: i0, template: "<div\n class=\"aeb-filter-tag\"\n [ngClass]=\"{\n 'aeb-filter-tag--active': active()\n }\"\n (click)=\"clickHandler(value())\"\n>\n <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: FilterTag, isStandalone: true, selector: "aeb-filter-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagHandler: "tagHandler" }, ngImport: i0, template: "<div\n class=\"aeb-filter-tag\"\n [ngClass]=\"{\n 'aeb-filter-tag--active': active()\n }\"\n (click)=\"clickHandler(value() || '')\"\n>\n <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3021
3088
|
}
|
|
3022
3089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FilterTag, decorators: [{
|
|
3023
3090
|
type: Component,
|
|
3024
|
-
args: [{ selector: 'aeb-filter-tag', encapsulation: ViewEncapsulation.None, imports: [NgClass], template: "<div\n class=\"aeb-filter-tag\"\n [ngClass]=\"{\n 'aeb-filter-tag--active': active()\n }\"\n (click)=\"clickHandler(value())\"\n>\n <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"] }]
|
|
3091
|
+
args: [{ selector: 'aeb-filter-tag', encapsulation: ViewEncapsulation.None, imports: [NgClass], template: "<div\n class=\"aeb-filter-tag\"\n [ngClass]=\"{\n 'aeb-filter-tag--active': active()\n }\"\n (click)=\"clickHandler(value() || '')\"\n>\n <ng-content />\n</div>\n", styles: [".aeb-filter-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-m);color:var(--color-mono-400);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-skinny) solid var(--color-mono-400);border-radius:8px}.aeb-filter-tag--active{color:var(--color-mono-0);background-color:var(--color-mono-900);border:var(--border-skinny) solid var(--color-mono-900)}\n"] }]
|
|
3025
3092
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], tagHandler: [{ type: i0.Output, args: ["tagHandler"] }] } });
|
|
3026
3093
|
|
|
3027
3094
|
class FilterTags {
|
|
@@ -3032,7 +3099,7 @@ class FilterTags {
|
|
|
3032
3099
|
// Internal mutable state
|
|
3033
3100
|
this._filterValue = [];
|
|
3034
3101
|
this.initialFilterValue = input([], ...(ngDevMode ? [{ debugName: "initialFilterValue" }] : []));
|
|
3035
|
-
this.tags = input(
|
|
3102
|
+
this.tags = input(...(ngDevMode ? [undefined, { debugName: "tags" }] : []));
|
|
3036
3103
|
this.tagChange = output();
|
|
3037
3104
|
// Initialize from signal input
|
|
3038
3105
|
this._filterValue = this.initialFilterValue();
|
|
@@ -3074,9 +3141,12 @@ class BaseContentProjectableFooter {
|
|
|
3074
3141
|
this.hasContent = true;
|
|
3075
3142
|
}
|
|
3076
3143
|
ngAfterViewInit() {
|
|
3077
|
-
const
|
|
3078
|
-
|
|
3079
|
-
|
|
3144
|
+
const content = this.content();
|
|
3145
|
+
if (content) {
|
|
3146
|
+
const contentParentElement = content.nativeElement;
|
|
3147
|
+
this.hasContent = !!contentParentElement.innerHTML;
|
|
3148
|
+
this.cdr.detectChanges();
|
|
3149
|
+
}
|
|
3080
3150
|
}
|
|
3081
3151
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseContentProjectableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3082
3152
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: BaseContentProjectableFooter, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true }); }
|
|
@@ -3133,7 +3203,7 @@ const DEFAULT_LINKS = [
|
|
|
3133
3203
|
class FooterBottom extends BaseContentProjectableFooter {
|
|
3134
3204
|
constructor() {
|
|
3135
3205
|
super(...arguments);
|
|
3136
|
-
this.links = input(
|
|
3206
|
+
this.links = input(...(ngDevMode ? [undefined, { debugName: "links" }] : []));
|
|
3137
3207
|
this.year = input(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "year" }] : []));
|
|
3138
3208
|
}
|
|
3139
3209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FooterBottom, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -3147,7 +3217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3147
3217
|
class FooterMenu extends BaseContentProjectableFooter {
|
|
3148
3218
|
constructor() {
|
|
3149
3219
|
super(...arguments);
|
|
3150
|
-
this.items = input(
|
|
3220
|
+
this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
|
|
3151
3221
|
}
|
|
3152
3222
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FooterMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3153
3223
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FooterMenu, isStandalone: true, selector: "aeb-footer-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (hasContent) {\n<div #content>\n <ng-content />\n</div>\n} @else {\n<div class=\"aeb-footer-menu\">\n <ul class=\"aeb-footer-menu__wrapper\">\n @for (item of items(); track item) {\n <li class=\"aeb-footer-menu__item\">\n <a [href]=\"item.link\"> {{ item.name }} </a>\n </li>\n }\n <div class=\"aeb-footer-menu__item--feedback\" style=\"cursor: pointer\">\n <a href=\"https://www.albank.ru/ru/feedback\">\u0421\u0432\u044F\u0437\u044C \u0441 \u0411\u0430\u043D\u043A\u043E\u043C</a>\n </div>\n </ul>\n</div>\n}\n", styles: [".aeb-footer-menu{position:relative;box-sizing:border-box;display:flex;width:100%;padding:24px 0;border-bottom:1px solid rgba(var(--color-mono-clear),10%)}@media screen and (max-width:992px){.aeb-footer-menu{flex-direction:column;align-items:flex-start}}.aeb-footer-menu a{color:var(--color-mono-0);text-decoration:none}.aeb-footer-menu__wrapper{box-sizing:border-box;display:flex;flex:0 0 100%;padding-left:0;margin:0;font-size:var(--font-size-m);line-height:26px}@media screen and (max-width:992px){.aeb-footer-menu__wrapper{display:flex;flex-direction:column;align-items:flex-start;width:271px}}.aeb-footer-menu__item{font-size:var(--font-size-m);color:var(--color-mono-0);text-decoration:none;list-style:none}.aeb-footer-menu__item:not(:last-child){margin-right:36px}.aeb-footer-menu__item--feedback{box-sizing:border-box;margin-left:auto}@media screen and (max-width:992px){.aeb-footer-menu__item--feedback{margin-left:0}}@media screen and (max-width:992px){.aeb-footer-menu__item{margin-right:0}.aeb-footer-menu__item:not(:last-child){margin-bottom:24px}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3256,7 +3326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3256
3326
|
|
|
3257
3327
|
class Heading {
|
|
3258
3328
|
constructor() {
|
|
3259
|
-
this.header = input(
|
|
3329
|
+
this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
|
|
3260
3330
|
}
|
|
3261
3331
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Heading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3262
3332
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: Heading, isStandalone: true, selector: "aeb-heading", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h1 class=\"aeb-heading\">{{ header() }}</h1>\n", styles: [".aeb-heading{margin:0;font-size:var(--font-size-xxxl);font-weight:unset;color:var(--color-mono-900)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3268,7 +3338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3268
3338
|
|
|
3269
3339
|
class ProductTitle {
|
|
3270
3340
|
constructor() {
|
|
3271
|
-
this.title = input(
|
|
3341
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
3272
3342
|
this.backHandler = output();
|
|
3273
3343
|
}
|
|
3274
3344
|
clickHandler() {
|
|
@@ -3407,7 +3477,7 @@ class Modal {
|
|
|
3407
3477
|
}
|
|
3408
3478
|
}
|
|
3409
3479
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Modal, isStandalone: true, selector: "aeb-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, controlsConfig: { classPropertyName: "controlsConfig", publicName: "controlsConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftBtnClick: "leftBtnClick", rightBtnClick: "rightBtnClick", closeBtnClick: "closeBtnClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.aeb-modal--open": "isOpen()" }, classAttribute: "aeb-modal" }, ngImport: i0, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n <div class=\"aeb-modal__header\">\n <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n @if (!controlsConfigTemplate().closeBtn.hidden) {\n <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.63074 9.63074L22.3692 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M22.3693 9.63074L9.63077 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n }\n </div>\n <ng-content />\n @if (!controlsConfigTemplate().leftBtn.hidden &&\n !controlsConfigTemplate().rightBtn.hidden) {\n <span class=\"aeb-modal__btn-group\">\n @if (!controlsConfigTemplate().leftBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().leftBtn.variant\"\n [isWarning]=\"controlsConfigTemplate().leftBtn.warning\"\n [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n (click)=\"onCancelClick()\"\n >\n {{ controlsConfigTemplate().leftBtn.text }}\n </button>\n } @if (!controlsConfigTemplate().rightBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().rightBtn.variant\"\n [isWarning]=\"controlsConfigTemplate().rightBtn.warning\"\n [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n (click)=\"onSubmitClick()\"\n >\n {{ controlsConfigTemplate().rightBtn.text }}\n </button>\n }\n </span>\n }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Modal, isStandalone: true, selector: "aeb-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, controlsConfig: { classPropertyName: "controlsConfig", publicName: "controlsConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftBtnClick: "leftBtnClick", rightBtnClick: "rightBtnClick", closeBtnClick: "closeBtnClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.aeb-modal--open": "isOpen()" }, classAttribute: "aeb-modal" }, ngImport: i0, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n <div class=\"aeb-modal__header\">\n <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n @if (!controlsConfigTemplate().closeBtn.hidden) {\n <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.63074 9.63074L22.3692 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M22.3693 9.63074L9.63077 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n }\n </div>\n <ng-content />\n @if (!controlsConfigTemplate().leftBtn.hidden &&\n !controlsConfigTemplate().rightBtn.hidden) {\n <span class=\"aeb-modal__btn-group\">\n @if (!controlsConfigTemplate().leftBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().leftBtn.variant || 'primary'\"\n [isWarning]=\"controlsConfigTemplate().leftBtn.warning || false\"\n [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n (click)=\"onCancelClick()\"\n >\n {{ controlsConfigTemplate().leftBtn.text }}\n </button>\n } @if (!controlsConfigTemplate().rightBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().rightBtn.variant || 'primary'\"\n [isWarning]=\"controlsConfigTemplate().rightBtn.warning || false\"\n [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n (click)=\"onSubmitClick()\"\n >\n {{ controlsConfigTemplate().rightBtn.text }}\n </button>\n }\n </span>\n }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: Button, selector: "button[aebButton], a[aebButton]", inputs: ["variant", "size", "isWarning", "fill"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3411
3481
|
}
|
|
3412
3482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Modal, decorators: [{
|
|
3413
3483
|
type: Component,
|
|
@@ -3415,7 +3485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3415
3485
|
class: 'aeb-modal',
|
|
3416
3486
|
'[class.aeb-modal--open]': 'isOpen()',
|
|
3417
3487
|
'(click)': 'onClick($event)'
|
|
3418
|
-
}, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n <div class=\"aeb-modal__header\">\n <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n @if (!controlsConfigTemplate().closeBtn.hidden) {\n <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.63074 9.63074L22.3692 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M22.3693 9.63074L9.63077 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n }\n </div>\n <ng-content />\n @if (!controlsConfigTemplate().leftBtn.hidden &&\n !controlsConfigTemplate().rightBtn.hidden) {\n <span class=\"aeb-modal__btn-group\">\n @if (!controlsConfigTemplate().leftBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().leftBtn.variant\"\n [isWarning]=\"controlsConfigTemplate().leftBtn.warning\"\n [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n (click)=\"onCancelClick()\"\n >\n {{ controlsConfigTemplate().leftBtn.text }}\n </button>\n } @if (!controlsConfigTemplate().rightBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().rightBtn.variant\"\n [isWarning]=\"controlsConfigTemplate().rightBtn.warning\"\n [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n (click)=\"onSubmitClick()\"\n >\n {{ controlsConfigTemplate().rightBtn.text }}\n </button>\n }\n </span>\n }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"] }]
|
|
3488
|
+
}, template: "<div class=\"aeb-modal__window\" [class]=\"'aeb-modal__window--' + size()\">\n <div class=\"aeb-modal__header\">\n <h2 class=\"aeb-modal__title\">{{ title() }}</h2>\n @if (!controlsConfigTemplate().closeBtn.hidden) {\n <button class=\"aeb-modal__close-btn\" (click)=\"onCloseClick()\">\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.63074 9.63074L22.3692 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M22.3693 9.63074L9.63077 22.3692\"\n stroke=\"#7D8591\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n }\n </div>\n <ng-content />\n @if (!controlsConfigTemplate().leftBtn.hidden &&\n !controlsConfigTemplate().rightBtn.hidden) {\n <span class=\"aeb-modal__btn-group\">\n @if (!controlsConfigTemplate().leftBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().leftBtn.variant || 'primary'\"\n [isWarning]=\"controlsConfigTemplate().leftBtn.warning || false\"\n [disabled]=\"controlsConfigTemplate().leftBtn.disabled\"\n (click)=\"onCancelClick()\"\n >\n {{ controlsConfigTemplate().leftBtn.text }}\n </button>\n } @if (!controlsConfigTemplate().rightBtn.hidden) {\n <button\n aebButton\n [size]=\"isMobileScreen ? 'M' : 'L'\"\n [fill]=\"isMobileScreen ? true : false || size() === 'S'\"\n [variant]=\"controlsConfigTemplate().rightBtn.variant || 'primary'\"\n [isWarning]=\"controlsConfigTemplate().rightBtn.warning || false\"\n [disabled]=\"controlsConfigTemplate().rightBtn.disabled\"\n (click)=\"onSubmitClick()\"\n >\n {{ controlsConfigTemplate().rightBtn.text }}\n </button>\n }\n </span>\n }\n</div>\n", styles: [".aeb-modal{position:fixed;top:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;padding:0;border:none;cursor:pointer;opacity:0;visibility:hidden;background:transparent;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.aeb-modal--open{opacity:1;visibility:visible;background-color:var(--c-bg-overlay)}.aeb-modal--open .aeb-modal__window{transform:scale(1) translateY(0);opacity:1}@media screen and (max-width:599px){.aeb-modal--open .aeb-modal__window{transform:translateY(0)}}.aeb-modal--open .aeb-modal__header,.aeb-modal--open .aeb-modal__btn-group{transform:translateY(0);opacity:1}.aeb-modal--open .aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(0);opacity:1}.aeb-modal__window{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:32px;margin:16px;background-color:var(--c-bg-default);border-radius:var(--border-fully-rounded);box-shadow:var(--light-theme-shadows-shadow-smooth-high);width:100%;cursor:default;transform:scale(.8) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window>:not(.aeb-modal__header,.aeb-modal__btn-group){transform:translateY(5px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .4s cubic-bezier(.4,0,.2,1) .15s}.aeb-modal__window--auto{width:auto}.aeb-modal__window--S{max-width:480px}.aeb-modal__window--M{max-width:720px}.aeb-modal__window--L{max-width:900px}@media screen and (max-width:599px){.aeb-modal__window{position:absolute;bottom:0;margin:0;border-radius:var(--border-rounded) var(--border-rounded) 0 0;padding:16px 16px 32px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.aeb-modal__window--S,.aeb-modal__window--M,.aeb-modal__window--L{max-width:100%}}.aeb-modal__header{display:flex;justify-content:space-between;transform:translateY(-10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .4s cubic-bezier(.4,0,.2,1) .1s}.aeb-modal__title{margin:0;color:var(--c-t-primary)}@media screen and (max-width:599px){.aeb-modal__title{font-weight:500;font-size:22px}}.aeb-modal__close-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;background:none;border:var(--no-border);box-shadow:var(--light-theme-shadows-shadow-smooth-high);transition:transform .2s cubic-bezier(.4,0,.2,1)}.aeb-modal__close-btn:hover{transform:scale(1.1)}.aeb-modal__close-btn:active{transform:scale(.95)}.aeb-modal__btn-group{display:flex;gap:16px;justify-content:flex-end;transform:translateY(10px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1) .2s,opacity .4s cubic-bezier(.4,0,.2,1) .2s}@media screen and (max-width:599px){.aeb-modal__btn-group{flex-direction:column}}\n"] }]
|
|
3419
3489
|
}], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], controlsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsConfig", required: false }] }], leftBtnClick: [{ type: i0.Output, args: ["leftBtnClick"] }], rightBtnClick: [{ type: i0.Output, args: ["rightBtnClick"] }], closeBtnClick: [{ type: i0.Output, args: ["closeBtnClick"] }] } });
|
|
3420
3490
|
|
|
3421
3491
|
class ModalModule {
|
|
@@ -3433,7 +3503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3433
3503
|
|
|
3434
3504
|
class NewsCard {
|
|
3435
3505
|
constructor() {
|
|
3436
|
-
this.date = input(
|
|
3506
|
+
this.date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
|
|
3437
3507
|
}
|
|
3438
3508
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NewsCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3439
3509
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NewsCard, isStandalone: true, selector: "aeb-news-card", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"aeb-news-card\">\n <div class=\"aeb-news-card__date\">{{ date() | date: 'd MMMM' }}</div>\n <div class=\"aeb-news-card__content\">\n <ng-content />\n </div>\n</div>\n", styles: [".aeb-news-card{box-sizing:border-box;max-width:320px;color:var(--color-mono-900)}.aeb-news-card__date{box-sizing:border-box;display:block;width:fit-content;padding:9px 10px;margin-bottom:16px;font-size:var(--font-size-xxs);border:var(--border-thin) solid var(--color-blue-50);border-radius:var(--border-rounded)}.aeb-news-card__content a{color:var(--color-blue-500);text-decoration:none}.aeb-news-card__content{max-width:320px;font-size:var(--font-size-s);text-decoration:none!important}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3485,7 +3555,9 @@ class Notification {
|
|
|
3485
3555
|
const lifeTime = this.lifeTime();
|
|
3486
3556
|
if (lifeTime !== undefined) {
|
|
3487
3557
|
this.state.set('open');
|
|
3488
|
-
|
|
3558
|
+
if (this.timeout) {
|
|
3559
|
+
clearTimeout(this.timeout);
|
|
3560
|
+
}
|
|
3489
3561
|
if (!this.isHovered()) {
|
|
3490
3562
|
this.waitUntilClose();
|
|
3491
3563
|
}
|
|
@@ -3514,7 +3586,9 @@ class Notification {
|
|
|
3514
3586
|
onOver() {
|
|
3515
3587
|
this.isHovered.set(true);
|
|
3516
3588
|
this.state.set('open');
|
|
3517
|
-
|
|
3589
|
+
if (this.timeout) {
|
|
3590
|
+
clearTimeout(this.timeout);
|
|
3591
|
+
}
|
|
3518
3592
|
}
|
|
3519
3593
|
onLeave() {
|
|
3520
3594
|
this.isHovered.set(false);
|
|
@@ -3591,7 +3665,7 @@ class Notifications {
|
|
|
3591
3665
|
this.notificationClose.emit(id);
|
|
3592
3666
|
}
|
|
3593
3667
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Notifications, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3594
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Notifications, isStandalone: true, selector: "aeb-notifications", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, notificationsPosition: { classPropertyName: "notificationsPosition", publicName: "notificationsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", notificationClose: "notificationClose" }, host: { properties: { "class.aeb-notifications--reversed": "notificationsPosition() === \"topLeft\" || notificationsPosition() === \"topRight\"", "class.aeb-notifications-left": "notificationsPosition() === \"topLeft\" || notificationsPosition() === \"bottomLeft\"", "class.aeb-notifications-right": "notificationsPosition() === \"topRight\" || notificationsPosition() === \"bottomRight\"", "class.aeb-notifications-top": "notificationsPosition() === \"topLeft\" || notificationsPosition() === \"topRight\"", "class.aeb-notifications-bottom": "notificationsPosition() === \"bottomLeft\" || notificationsPosition() === \"bottomRight\"", "@listAnimation": "notifications().length" }, classAttribute: "aeb-notifications" }, ngImport: i0, template: "@for (item of notifications(); track item.id) {\n<aeb-notification\n [id]=\"item.id\"\n [header]=\"item.header\"\n [message]=\"item.message\"\n [lifeTime]=\"item.lifeTime\"\n [type]=\"item.type\"\n [buttonText]=\"item.buttonText\"\n (buttonClick)=\"item.onButtonClick($event)\"\n (clickNotification)=\"handleItemClick($event)\"\n (closeNotification)=\"handleItemClose($event)\"\n/>\n}\n", styles: [".aeb-notifications{position:fixed;z-index:var(--z-notification);display:flex;flex-direction:column;align-items:flex-start;gap:12px}.aeb-notifications--reversed{flex-direction:column-reverse}.aeb-notifications-left{left:30px}.aeb-notifications-right{right:30px}.aeb-notifications-top{top:30px}.aeb-notifications-bottom{bottom:30px}\n"], dependencies: [{ kind: "component", type: Notification, selector: "aeb-notification", inputs: ["id", "header", "message", "type", "buttonText", "lifeTime"], outputs: ["buttonClick", "clickNotification", "closeNotification"] }], animations: [
|
|
3668
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Notifications, isStandalone: true, selector: "aeb-notifications", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, notificationsPosition: { classPropertyName: "notificationsPosition", publicName: "notificationsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", notificationClose: "notificationClose" }, host: { properties: { "class.aeb-notifications--reversed": "notificationsPosition() === \"topLeft\" || notificationsPosition() === \"topRight\"", "class.aeb-notifications-left": "notificationsPosition() === \"topLeft\" || notificationsPosition() === \"bottomLeft\"", "class.aeb-notifications-right": "notificationsPosition() === \"topRight\" || notificationsPosition() === \"bottomRight\"", "class.aeb-notifications-top": "notificationsPosition() === \"topLeft\" || notificationsPosition() === \"topRight\"", "class.aeb-notifications-bottom": "notificationsPosition() === \"bottomLeft\" || notificationsPosition() === \"bottomRight\"", "@listAnimation": "notifications().length" }, classAttribute: "aeb-notifications" }, ngImport: i0, template: "@for (item of notifications(); track item.id) {\n<aeb-notification\n [id]=\"item.id\"\n [header]=\"item.header\"\n [message]=\"item.message\"\n [lifeTime]=\"item.lifeTime\"\n [type]=\"item.type\"\n [buttonText]=\"item.buttonText\"\n (buttonClick)=\"item.onButtonClick?.($event)\"\n (clickNotification)=\"handleItemClick($event)\"\n (closeNotification)=\"handleItemClose($event)\"\n/>\n}\n", styles: [".aeb-notifications{position:fixed;z-index:var(--z-notification);display:flex;flex-direction:column;align-items:flex-start;gap:12px}.aeb-notifications--reversed{flex-direction:column-reverse}.aeb-notifications-left{left:30px}.aeb-notifications-right{right:30px}.aeb-notifications-top{top:30px}.aeb-notifications-bottom{bottom:30px}\n"], dependencies: [{ kind: "component", type: Notification, selector: "aeb-notification", inputs: ["id", "header", "message", "type", "buttonText", "lifeTime"], outputs: ["buttonClick", "clickNotification", "closeNotification"] }], animations: [
|
|
3595
3669
|
trigger('listAnimation', [
|
|
3596
3670
|
transition('* => *', [
|
|
3597
3671
|
query(':enter', [
|
|
@@ -3637,7 +3711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3637
3711
|
'[class.aeb-notifications-top]': 'notificationsPosition() === "topLeft" || notificationsPosition() === "topRight"',
|
|
3638
3712
|
'[class.aeb-notifications-bottom]': 'notificationsPosition() === "bottomLeft" || notificationsPosition() === "bottomRight"',
|
|
3639
3713
|
'[@listAnimation]': 'notifications().length'
|
|
3640
|
-
}, template: "@for (item of notifications(); track item.id) {\n<aeb-notification\n [id]=\"item.id\"\n [header]=\"item.header\"\n [message]=\"item.message\"\n [lifeTime]=\"item.lifeTime\"\n [type]=\"item.type\"\n [buttonText]=\"item.buttonText\"\n (buttonClick)=\"item.onButtonClick($event)\"\n (clickNotification)=\"handleItemClick($event)\"\n (closeNotification)=\"handleItemClose($event)\"\n/>\n}\n", styles: [".aeb-notifications{position:fixed;z-index:var(--z-notification);display:flex;flex-direction:column;align-items:flex-start;gap:12px}.aeb-notifications--reversed{flex-direction:column-reverse}.aeb-notifications-left{left:30px}.aeb-notifications-right{right:30px}.aeb-notifications-top{top:30px}.aeb-notifications-bottom{bottom:30px}\n"] }]
|
|
3714
|
+
}, template: "@for (item of notifications(); track item.id) {\n<aeb-notification\n [id]=\"item.id\"\n [header]=\"item.header\"\n [message]=\"item.message\"\n [lifeTime]=\"item.lifeTime\"\n [type]=\"item.type\"\n [buttonText]=\"item.buttonText\"\n (buttonClick)=\"item.onButtonClick?.($event)\"\n (clickNotification)=\"handleItemClick($event)\"\n (closeNotification)=\"handleItemClose($event)\"\n/>\n}\n", styles: [".aeb-notifications{position:fixed;z-index:var(--z-notification);display:flex;flex-direction:column;align-items:flex-start;gap:12px}.aeb-notifications--reversed{flex-direction:column-reverse}.aeb-notifications-left{left:30px}.aeb-notifications-right{right:30px}.aeb-notifications-top{top:30px}.aeb-notifications-bottom{bottom:30px}\n"] }]
|
|
3641
3715
|
}], propDecorators: { notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }], notificationsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsPosition", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], notificationClose: [{ type: i0.Output, args: ["notificationClose"] }] } });
|
|
3642
3716
|
|
|
3643
3717
|
class NotificationsModule {
|
|
@@ -3663,20 +3737,21 @@ class Select {
|
|
|
3663
3737
|
this._cdr = inject(ChangeDetectorRef);
|
|
3664
3738
|
this.initialDisabled = input(false, ...(ngDevMode ? [{ debugName: "initialDisabled" }] : []));
|
|
3665
3739
|
this.dropdownMenuRef = viewChild(DropdownMenu, ...(ngDevMode ? [{ debugName: "dropdownMenuRef" }] : []));
|
|
3666
|
-
this.label = input(
|
|
3740
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
3667
3741
|
this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
3668
3742
|
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
3669
3743
|
this.direction = input('bottom', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
3670
3744
|
this.optionSelect = output();
|
|
3671
3745
|
this.isOpen = false;
|
|
3672
3746
|
this.maxShownItems = 5;
|
|
3747
|
+
this.onChange = () => { };
|
|
3673
3748
|
this.onTouch = () => { };
|
|
3674
3749
|
this._disabled = this.initialDisabled();
|
|
3675
3750
|
}
|
|
3676
3751
|
get selectedOption() {
|
|
3677
3752
|
const options = this.options();
|
|
3678
3753
|
if (options) {
|
|
3679
|
-
return options.find((option) => option.value === this._value);
|
|
3754
|
+
return options.find((option) => option.value === this._value) || null;
|
|
3680
3755
|
}
|
|
3681
3756
|
return null;
|
|
3682
3757
|
}
|
|
@@ -3842,7 +3917,7 @@ class Pagination {
|
|
|
3842
3917
|
this.pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
3843
3918
|
this.pageSelect = output();
|
|
3844
3919
|
this.amountChange = output();
|
|
3845
|
-
this.activePage = signal(
|
|
3920
|
+
this.activePage = signal(this.currentPage(), ...(ngDevMode ? [{ debugName: "activePage" }] : []));
|
|
3846
3921
|
this.pageSizeControl = new FormControl(10);
|
|
3847
3922
|
this.head = computed(() => {
|
|
3848
3923
|
const total = this.totalPages();
|
|
@@ -3898,6 +3973,9 @@ class Pagination {
|
|
|
3898
3973
|
}, ...(ngDevMode ? [{ debugName: "tail" }] : []));
|
|
3899
3974
|
this.amountOptions = defaultAmountOptions;
|
|
3900
3975
|
this.pageSizeControl.setValue(this.pageSize());
|
|
3976
|
+
effect(() => {
|
|
3977
|
+
this.activePage.set(this.currentPage());
|
|
3978
|
+
});
|
|
3901
3979
|
}
|
|
3902
3980
|
headPageHandler(page) {
|
|
3903
3981
|
this.activePage.set(page);
|
|
@@ -3934,7 +4012,7 @@ class Pagination {
|
|
|
3934
4012
|
this.pageSelect.emit(this.activePage());
|
|
3935
4013
|
}
|
|
3936
4014
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3937
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Pagination, isStandalone: true, selector: "aeb-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, usePageSizeSelector: { classPropertyName: "usePageSizeSelector", publicName: "usePageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSelect: "pageSelect", amountChange: "amountChange" }, host: { classAttribute: "aeb-pagination" }, ngImport: i0, template: "<button\n (click)=\"prevPageHandler()\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--disabled': activePage() === 1\n }\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 16L10.0707 12.0707C10.0317 12.0317 10.0317 11.9683 10.0707 11.9293L14 8\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</button>\n\n@if (head()) {\n<button (click)=\"headPageHandler(
|
|
4015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Pagination, isStandalone: true, selector: "aeb-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, usePageSizeSelector: { classPropertyName: "usePageSizeSelector", publicName: "usePageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSelect: "pageSelect", amountChange: "amountChange" }, host: { classAttribute: "aeb-pagination" }, ngImport: i0, template: "<button\n (click)=\"prevPageHandler()\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--disabled': activePage() === 1\n }\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 16L10.0707 12.0707C10.0317 12.0317 10.0317 11.9683 10.0707 11.9293L14 8\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</button>\n\n@if (head(); as headValue) {\n<button (click)=\"headPageHandler(headValue)\" class=\"aeb-pagination__button\">\n {{ headValue }}\n</button>\n} @if (head(); as headValue) {\n<div class=\"aeb-pagination__breaker\">...</div>\n} @for (page of middle(); track page) {\n<button\n (click)=\"middlePageHandler(page)\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--active': activePage() === page\n }\"\n>\n {{ page }}\n</button>\n} @if (tail(); as tailValue) {\n<div class=\"aeb-pagination__breaker\">...</div>\n} @if (tail(); as tailValue) {\n<button\n (click)=\"tailPageHandler(tailValue)\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--active': activePage() === tailValue\n }\"\n>\n {{ tailValue }}\n</button>\n}\n\n<button\n (click)=\"nextPageHandler()\"\n class=\"aeb-pagination__button aeb-pagination__button--reversed\"\n [ngClass]=\"{\n 'aeb-pagination__button--disabled': activePage() === totalPages()\n }\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 16L10.0707 12.0707C10.0317 12.0317 10.0317 11.9683 10.0707 11.9293L14 8\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</button>\n\n@if (usePageSizeSelector()) {\n<div class=\"aeb-pagination__select-container\">\n <aeb-select\n class=\"aeb-pagination__select\"\n [direction]=\"'top'\"\n (optionSelect)=\"handleChangePageSize($event)\"\n [formControl]=\"pageSizeControl\"\n [options]=\"amountOptions\"\n [label]=\"'\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043F\u043E'\"\n >\n </aeb-select>\n</div>\n}\n", styles: [".aeb-pagination{gap:8px;display:flex;position:relative;align-items:center;justify-content:center;color:var(--c-t-primary-white)}@media screen and (max-width:900px){.aeb-pagination{gap:6px}}.aeb-pagination__button{padding:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;justify-content:center;background:transparent;color:var(--c-t-links);font-family:inherit;width:48px;height:48px;border-radius:12px;font-weight:400}.aeb-pagination__button:hover,.aeb-pagination__button:focus{background-color:var(--c-bg-surface)}.aeb-pagination__button--active{color:var(--c-t-primary-white);background-color:var(--c-btn-p-default)}.aeb-pagination__button--active:hover,.aeb-pagination__button--active:focus{background-color:var(--c-btn-p-default)}.aeb-pagination__button--disabled{opacity:.5;cursor:not-allowed}.aeb-pagination__button--reversed{transform:rotate(180deg)}@media screen and (max-width:900px){.aeb-pagination__button{width:24px;height:24px;font-size:12px;border-radius:8px}}.aeb-pagination__breaker{-webkit-user-select:none;user-select:none;text-align:center;color:var(--c-t-links);width:48px;height:48px;font-size:16px;display:flex;align-items:center;justify-content:center}@media screen and (max-width:900px){.aeb-pagination__breaker{font-size:12px;width:24px;height:24px}}.aeb-pagination__select-container{width:192px}@media screen and (max-width:900px){.aeb-pagination__select-container{display:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Select, selector: "aeb-select", inputs: ["initialDisabled", "label", "options", "hasError", "direction"], outputs: ["optionSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3938
4016
|
}
|
|
3939
4017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Pagination, decorators: [{
|
|
3940
4018
|
type: Component,
|
|
@@ -3946,7 +4024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3946
4024
|
ReactiveFormsModule
|
|
3947
4025
|
], host: {
|
|
3948
4026
|
class: 'aeb-pagination'
|
|
3949
|
-
}, template: "<button\n (click)=\"prevPageHandler()\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--disabled': activePage() === 1\n }\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 16L10.0707 12.0707C10.0317 12.0317 10.0317 11.9683 10.0707 11.9293L14 8\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</button>\n\n@if (head()) {\n<button (click)=\"headPageHandler(
|
|
4027
|
+
}, template: "<button\n (click)=\"prevPageHandler()\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--disabled': activePage() === 1\n }\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 16L10.0707 12.0707C10.0317 12.0317 10.0317 11.9683 10.0707 11.9293L14 8\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</button>\n\n@if (head(); as headValue) {\n<button (click)=\"headPageHandler(headValue)\" class=\"aeb-pagination__button\">\n {{ headValue }}\n</button>\n} @if (head(); as headValue) {\n<div class=\"aeb-pagination__breaker\">...</div>\n} @for (page of middle(); track page) {\n<button\n (click)=\"middlePageHandler(page)\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--active': activePage() === page\n }\"\n>\n {{ page }}\n</button>\n} @if (tail(); as tailValue) {\n<div class=\"aeb-pagination__breaker\">...</div>\n} @if (tail(); as tailValue) {\n<button\n (click)=\"tailPageHandler(tailValue)\"\n class=\"aeb-pagination__button\"\n [ngClass]=\"{\n 'aeb-pagination__button--active': activePage() === tailValue\n }\"\n>\n {{ tailValue }}\n</button>\n}\n\n<button\n (click)=\"nextPageHandler()\"\n class=\"aeb-pagination__button aeb-pagination__button--reversed\"\n [ngClass]=\"{\n 'aeb-pagination__button--disabled': activePage() === totalPages()\n }\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 16L10.0707 12.0707C10.0317 12.0317 10.0317 11.9683 10.0707 11.9293L14 8\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n</button>\n\n@if (usePageSizeSelector()) {\n<div class=\"aeb-pagination__select-container\">\n <aeb-select\n class=\"aeb-pagination__select\"\n [direction]=\"'top'\"\n (optionSelect)=\"handleChangePageSize($event)\"\n [formControl]=\"pageSizeControl\"\n [options]=\"amountOptions\"\n [label]=\"'\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043F\u043E'\"\n >\n </aeb-select>\n</div>\n}\n", styles: [".aeb-pagination{gap:8px;display:flex;position:relative;align-items:center;justify-content:center;color:var(--c-t-primary-white)}@media screen and (max-width:900px){.aeb-pagination{gap:6px}}.aeb-pagination__button{padding:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;justify-content:center;background:transparent;color:var(--c-t-links);font-family:inherit;width:48px;height:48px;border-radius:12px;font-weight:400}.aeb-pagination__button:hover,.aeb-pagination__button:focus{background-color:var(--c-bg-surface)}.aeb-pagination__button--active{color:var(--c-t-primary-white);background-color:var(--c-btn-p-default)}.aeb-pagination__button--active:hover,.aeb-pagination__button--active:focus{background-color:var(--c-btn-p-default)}.aeb-pagination__button--disabled{opacity:.5;cursor:not-allowed}.aeb-pagination__button--reversed{transform:rotate(180deg)}@media screen and (max-width:900px){.aeb-pagination__button{width:24px;height:24px;font-size:12px;border-radius:8px}}.aeb-pagination__breaker{-webkit-user-select:none;user-select:none;text-align:center;color:var(--c-t-links);width:48px;height:48px;font-size:16px;display:flex;align-items:center;justify-content:center}@media screen and (max-width:900px){.aeb-pagination__breaker{font-size:12px;width:24px;height:24px}}.aeb-pagination__select-container{width:192px}@media screen and (max-width:900px){.aeb-pagination__select-container{display:none}}\n"] }]
|
|
3950
4028
|
}], ctorParameters: () => [], propDecorators: { totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], usePageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "usePageSizeSelector", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSelect: [{ type: i0.Output, args: ["pageSelect"] }], amountChange: [{ type: i0.Output, args: ["amountChange"] }] } });
|
|
3951
4029
|
|
|
3952
4030
|
class PaginationModule {
|
|
@@ -3965,11 +4043,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3965
4043
|
class PopUp {
|
|
3966
4044
|
constructor() {
|
|
3967
4045
|
this.popUp = viewChild('popUp', ...(ngDevMode ? [{ debugName: "popUp" }] : []));
|
|
3968
|
-
this.header = input(
|
|
4046
|
+
this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
|
|
3969
4047
|
}
|
|
3970
4048
|
hidePopUp() {
|
|
3971
|
-
this.popUp()
|
|
3972
|
-
|
|
4049
|
+
const popUp = this.popUp();
|
|
4050
|
+
if (popUp) {
|
|
4051
|
+
popUp.nativeElement.style.opacity = '0';
|
|
4052
|
+
popUp.nativeElement.style.pointerEvents = 'none';
|
|
4053
|
+
}
|
|
3973
4054
|
}
|
|
3974
4055
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PopUp, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3975
4056
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: PopUp, isStandalone: true, selector: "aeb-pop-up", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popUp", first: true, predicate: ["popUp"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"aeb-pop-up\" #popUp>\n <div class=\"aeb-pop-up__header\">\n <div class=\"aeb-pop-up__heading\">{{ header() }}</div>\n <div class=\"aeb-pop-up__close-icon\" (click)=\"hidePopUp()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.63086 5.63074L18.3693 18.3692\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M18.3691 5.63074L5.63065 18.3692\"\n stroke=\"#2F88F0\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"aeb-pop-up__container\">\n <ng-content />\n </div>\n</div>\n", styles: [".aeb-pop-up{position:fixed;z-index:var(--z-popover);box-sizing:border-box;min-width:360px;padding:20px 16px;pointer-events:none;cursor:default;background-color:var(--color-mono-0);border-radius:var(--border-medium-rounded);box-shadow:0 3px 15px #00000040;opacity:var(--100-total);transition:opacity,.2s}.aeb-pop-up__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:15px;border-bottom:1px solid var(--color-mono-100)}.aeb-pop-up__heading{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.aeb-pop-up__close-icon{position:relative;top:1px;cursor:pointer}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -3983,7 +4064,7 @@ class PopUpDirective {
|
|
|
3983
4064
|
constructor() {
|
|
3984
4065
|
this._host = inject(ElementRef);
|
|
3985
4066
|
this.popUpContent = contentChild(PopUp, ...(ngDevMode ? [{ debugName: "popUpContent" }] : []));
|
|
3986
|
-
this.header = input(
|
|
4067
|
+
this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
|
|
3987
4068
|
this.position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
3988
4069
|
this.popUpConfig = {
|
|
3989
4070
|
right: (bounds, popUp) => {
|
|
@@ -4012,14 +4093,25 @@ class PopUpDirective {
|
|
|
4012
4093
|
if (event.target !== this._host.nativeElement) {
|
|
4013
4094
|
return;
|
|
4014
4095
|
}
|
|
4015
|
-
const
|
|
4016
|
-
|
|
4017
|
-
|
|
4096
|
+
const popUpContent = this.popUpContent();
|
|
4097
|
+
if (!popUpContent) {
|
|
4098
|
+
return;
|
|
4099
|
+
}
|
|
4100
|
+
const popUp = popUpContent.popUp();
|
|
4101
|
+
if (!popUp) {
|
|
4102
|
+
return;
|
|
4103
|
+
}
|
|
4104
|
+
const nativeElement = popUp.nativeElement;
|
|
4105
|
+
nativeElement.style.opacity = '1';
|
|
4106
|
+
nativeElement.style.pointerEvents = 'all';
|
|
4018
4107
|
const bounds = this._host.nativeElement.getBoundingClientRect();
|
|
4019
|
-
const [left, top] = this.popUpConfig[this.position()](bounds,
|
|
4020
|
-
|
|
4021
|
-
|
|
4022
|
-
|
|
4108
|
+
const [left, top] = this.popUpConfig[this.position()](bounds, {
|
|
4109
|
+
offsetHeight: nativeElement.offsetHeight,
|
|
4110
|
+
offsetWidth: nativeElement.offsetWidth
|
|
4111
|
+
});
|
|
4112
|
+
nativeElement.style.left = `${left}px`;
|
|
4113
|
+
nativeElement.style.top = `${top}px`;
|
|
4114
|
+
nativeElement.className = `aeb-pop-up aeb-pop-up--${this.position()}`;
|
|
4023
4115
|
}
|
|
4024
4116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PopUpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4025
4117
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.3", type: PopUpDirective, isStandalone: true, selector: "[aebPopUp]", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" } }, queries: [{ propertyName: "popUpContent", first: true, predicate: PopUp, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
@@ -4053,21 +4145,22 @@ class RadioButtons {
|
|
|
4053
4145
|
/**
|
|
4054
4146
|
* component header
|
|
4055
4147
|
*/
|
|
4056
|
-
this.header = input(
|
|
4148
|
+
this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
|
|
4057
4149
|
this.btnChange = output();
|
|
4058
4150
|
/**
|
|
4059
4151
|
* list of items to choose from
|
|
4060
4152
|
*/
|
|
4061
|
-
this.options = input(
|
|
4153
|
+
this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
|
|
4062
4154
|
/**
|
|
4063
4155
|
* error status
|
|
4064
4156
|
*/
|
|
4065
|
-
this.hasError = input(
|
|
4157
|
+
this.hasError = input(...(ngDevMode ? [undefined, { debugName: "hasError" }] : []));
|
|
4066
4158
|
this.horizontal = input(false, ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
|
|
4159
|
+
this.touched = false;
|
|
4067
4160
|
this.disabled = false;
|
|
4068
4161
|
}
|
|
4069
4162
|
get value() {
|
|
4070
|
-
return this._value;
|
|
4163
|
+
return this._value ?? 0;
|
|
4071
4164
|
}
|
|
4072
4165
|
set value(v) {
|
|
4073
4166
|
this._value = v;
|
|
@@ -4096,8 +4189,7 @@ class RadioButtons {
|
|
|
4096
4189
|
setDisabledState(disabled) {
|
|
4097
4190
|
this.disabled = disabled;
|
|
4098
4191
|
}
|
|
4099
|
-
|
|
4100
|
-
onChange(value) { }
|
|
4192
|
+
onChange(_value) { }
|
|
4101
4193
|
onTouch() { }
|
|
4102
4194
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioButtons, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4103
4195
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: RadioButtons, isStandalone: true, selector: "aeb-radio-buttons", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnChange: "btnChange" }, providers: [
|
|
@@ -4282,14 +4374,22 @@ class NumbersOnlyDirective {
|
|
|
4282
4374
|
}
|
|
4283
4375
|
onPaste(event) {
|
|
4284
4376
|
event.preventDefault();
|
|
4285
|
-
const
|
|
4377
|
+
const clipboardData = event.clipboardData;
|
|
4378
|
+
if (!clipboardData) {
|
|
4379
|
+
return;
|
|
4380
|
+
}
|
|
4381
|
+
const pastedInput = clipboardData
|
|
4286
4382
|
.getData('text/plain')
|
|
4287
4383
|
.replace(/\D/g, ''); // get a digit-only string
|
|
4288
4384
|
document.execCommand('insertText', false, pastedInput);
|
|
4289
4385
|
}
|
|
4290
4386
|
onDrop(event) {
|
|
4291
4387
|
event.preventDefault();
|
|
4292
|
-
const
|
|
4388
|
+
const dataTransfer = event.dataTransfer;
|
|
4389
|
+
if (!dataTransfer) {
|
|
4390
|
+
return;
|
|
4391
|
+
}
|
|
4392
|
+
const textData = dataTransfer.getData('text').replace(/\D/g, '');
|
|
4293
4393
|
document.execCommand('insertText', false, textData);
|
|
4294
4394
|
}
|
|
4295
4395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NumbersOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -4310,7 +4410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
4310
4410
|
class ReplacePipe {
|
|
4311
4411
|
transform(value, strToReplace, replacementStr) {
|
|
4312
4412
|
if (!value || !strToReplace || !replacementStr) {
|
|
4313
|
-
return value;
|
|
4413
|
+
return value || '';
|
|
4314
4414
|
}
|
|
4315
4415
|
return value.replace(new RegExp(strToReplace, 'g'), replacementStr);
|
|
4316
4416
|
}
|
|
@@ -4325,21 +4425,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
4325
4425
|
class Slider {
|
|
4326
4426
|
constructor() {
|
|
4327
4427
|
this._renderer = inject(Renderer2);
|
|
4328
|
-
this.label = input(
|
|
4329
|
-
this.prefix = input(
|
|
4330
|
-
this.intialValue = input(
|
|
4331
|
-
this.min = input(
|
|
4332
|
-
this.max = input(
|
|
4333
|
-
this.step = input(
|
|
4428
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
4429
|
+
this.prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
|
|
4430
|
+
this.intialValue = input(...(ngDevMode ? [undefined, { debugName: "intialValue" }] : []));
|
|
4431
|
+
this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
4432
|
+
this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
4433
|
+
this.step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : []));
|
|
4334
4434
|
this.mode = input('standard', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
4335
|
-
this.initialValue = input(
|
|
4336
|
-
this.initialDisplayValue = input(
|
|
4435
|
+
this.initialValue = input(...(ngDevMode ? [undefined, { debugName: "initialValue" }] : []));
|
|
4436
|
+
this.initialDisplayValue = input(...(ngDevMode ? [undefined, { debugName: "initialDisplayValue" }] : []));
|
|
4437
|
+
// Internal mutable state for ControlValueAccessor
|
|
4438
|
+
this.value = 0;
|
|
4439
|
+
this.displayValue = '';
|
|
4337
4440
|
this.slider = viewChild('slider', ...(ngDevMode ? [{ debugName: "slider" }] : []));
|
|
4338
4441
|
/**
|
|
4339
4442
|
* separator for currency value
|
|
4340
4443
|
*/
|
|
4341
4444
|
this.valueSeparator = input(' ', ...(ngDevMode ? [{ debugName: "valueSeparator" }] : []));
|
|
4342
4445
|
this.isPressed = false;
|
|
4446
|
+
this.onChange = () => { };
|
|
4343
4447
|
this.onTouch = () => { };
|
|
4344
4448
|
this.handleStartDragging = (event) => {
|
|
4345
4449
|
event.preventDefault();
|
|
@@ -4425,6 +4529,9 @@ class Slider {
|
|
|
4425
4529
|
}
|
|
4426
4530
|
ngAfterViewInit() {
|
|
4427
4531
|
const slider = this.slider();
|
|
4532
|
+
if (!slider) {
|
|
4533
|
+
return;
|
|
4534
|
+
}
|
|
4428
4535
|
this._renderer.listen(slider.nativeElement, 'touchstart', (event) => {
|
|
4429
4536
|
if (event.cancelable) {
|
|
4430
4537
|
event.preventDefault();
|
|
@@ -4445,8 +4552,9 @@ class Slider {
|
|
|
4445
4552
|
}
|
|
4446
4553
|
changeValueByInput(value) {
|
|
4447
4554
|
const parsedValue = parseInt(value, 10);
|
|
4448
|
-
|
|
4449
|
-
|
|
4555
|
+
const step = this.step();
|
|
4556
|
+
if (step && parsedValue % step !== 0) {
|
|
4557
|
+
this.value = Math.round(parsedValue / step) * step;
|
|
4450
4558
|
}
|
|
4451
4559
|
else {
|
|
4452
4560
|
this.value = parsedValue;
|
|
@@ -4478,8 +4586,17 @@ class Slider {
|
|
|
4478
4586
|
}
|
|
4479
4587
|
handleChangeValue(positionX) {
|
|
4480
4588
|
this.isPressed = true;
|
|
4481
|
-
const
|
|
4482
|
-
|
|
4589
|
+
const slider = this.slider();
|
|
4590
|
+
if (!slider) {
|
|
4591
|
+
return;
|
|
4592
|
+
}
|
|
4593
|
+
const sliderRect = slider.nativeElement.getBoundingClientRect();
|
|
4594
|
+
const offsetSlider = sliderRect.left;
|
|
4595
|
+
const widthSlider = sliderRect.width;
|
|
4596
|
+
const step = this.step();
|
|
4597
|
+
if (widthSlider === undefined) {
|
|
4598
|
+
return;
|
|
4599
|
+
}
|
|
4483
4600
|
let left = positionX - offsetSlider;
|
|
4484
4601
|
if (left < 0) {
|
|
4485
4602
|
left = 0;
|
|
@@ -4487,8 +4604,9 @@ class Slider {
|
|
|
4487
4604
|
if (left > widthSlider) {
|
|
4488
4605
|
left = widthSlider;
|
|
4489
4606
|
}
|
|
4490
|
-
const deltaX = (left / widthSlider) * (this.max() - this.min());
|
|
4491
|
-
|
|
4607
|
+
const deltaX = (left / widthSlider) * ((this.max() || 0) - (this.min() || 0));
|
|
4608
|
+
const stepValue = step || 1;
|
|
4609
|
+
this.value = Math.round(deltaX / stepValue) * stepValue + (this.min() || 0);
|
|
4492
4610
|
this.updateDisplayValue();
|
|
4493
4611
|
if (typeof this.onChange === 'function') {
|
|
4494
4612
|
this.onChange(this.value);
|
|
@@ -4611,7 +4729,7 @@ class StepperStep {
|
|
|
4611
4729
|
this._isCompleted = false;
|
|
4612
4730
|
this.initialIsActive = input(false, ...(ngDevMode ? [{ debugName: "initialIsActive" }] : []));
|
|
4613
4731
|
this.initialIsCompleted = input(false, ...(ngDevMode ? [{ debugName: "initialIsCompleted" }] : []));
|
|
4614
|
-
this.title = input(
|
|
4732
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
4615
4733
|
this.isValid = input(false, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
|
|
4616
4734
|
this.showPrev = input(false, ...(ngDevMode ? [{ debugName: "showPrev" }] : []));
|
|
4617
4735
|
this.showNext = input(false, ...(ngDevMode ? [{ debugName: "showNext" }] : []));
|
|
@@ -4644,7 +4762,8 @@ class Stepper {
|
|
|
4644
4762
|
});
|
|
4645
4763
|
}
|
|
4646
4764
|
get activeStepIndex() {
|
|
4647
|
-
|
|
4765
|
+
const active = this.activeStep;
|
|
4766
|
+
return active ? this.steps.indexOf(active) : -1;
|
|
4648
4767
|
}
|
|
4649
4768
|
get completedSteps() {
|
|
4650
4769
|
return this.steps.filter((step) => step.isCompleted);
|
|
@@ -4659,8 +4778,11 @@ class Stepper {
|
|
|
4659
4778
|
return this.steps.find((step) => step.isActive);
|
|
4660
4779
|
}
|
|
4661
4780
|
set activeStep(step) {
|
|
4662
|
-
|
|
4663
|
-
|
|
4781
|
+
const currentActive = this.activeStep;
|
|
4782
|
+
if (step !== currentActive) {
|
|
4783
|
+
if (currentActive) {
|
|
4784
|
+
currentActive.isActive = false;
|
|
4785
|
+
}
|
|
4664
4786
|
step.isActive = true;
|
|
4665
4787
|
this.stepChanged.emit(step);
|
|
4666
4788
|
}
|
|
@@ -4673,32 +4795,49 @@ class Stepper {
|
|
|
4673
4795
|
return;
|
|
4674
4796
|
}
|
|
4675
4797
|
const nextStep = this.steps[this.activeStepIndex + 1];
|
|
4676
|
-
this.activeStep
|
|
4798
|
+
const currentActive = this.activeStep;
|
|
4799
|
+
if (currentActive) {
|
|
4800
|
+
currentActive.nextClicked.emit();
|
|
4801
|
+
}
|
|
4677
4802
|
this.activeStep = nextStep;
|
|
4678
4803
|
}
|
|
4679
4804
|
goToPrevStep() {
|
|
4680
4805
|
if (!this.hasPrevStep) {
|
|
4681
4806
|
return;
|
|
4682
4807
|
}
|
|
4683
|
-
|
|
4684
|
-
|
|
4808
|
+
const currentActive = this.activeStep;
|
|
4809
|
+
if (!this.hasNextStep && currentActive?.isCompleted) {
|
|
4810
|
+
if (currentActive) {
|
|
4811
|
+
currentActive.isCompleted = false;
|
|
4812
|
+
}
|
|
4685
4813
|
return;
|
|
4686
4814
|
}
|
|
4687
4815
|
const nextStep = this.steps[this.activeStepIndex - 1];
|
|
4688
|
-
nextStep
|
|
4689
|
-
|
|
4690
|
-
|
|
4816
|
+
if (nextStep) {
|
|
4817
|
+
nextStep.isCompleted = false;
|
|
4818
|
+
}
|
|
4819
|
+
if (currentActive) {
|
|
4820
|
+
currentActive.prevClicked.emit();
|
|
4821
|
+
}
|
|
4822
|
+
if (nextStep) {
|
|
4823
|
+
this.activeStep = nextStep;
|
|
4824
|
+
}
|
|
4691
4825
|
}
|
|
4692
4826
|
goToFirstStep() {
|
|
4693
4827
|
if (!this.hasPrevStep) {
|
|
4694
4828
|
return;
|
|
4695
4829
|
}
|
|
4696
4830
|
const nextStep = this.steps[0];
|
|
4697
|
-
|
|
4831
|
+
if (nextStep) {
|
|
4832
|
+
this.activeStep = nextStep;
|
|
4833
|
+
}
|
|
4698
4834
|
}
|
|
4699
4835
|
onCompleteStep() {
|
|
4700
|
-
this.activeStep
|
|
4701
|
-
|
|
4836
|
+
const currentActive = this.activeStep;
|
|
4837
|
+
if (currentActive) {
|
|
4838
|
+
currentActive.completeClicked.emit();
|
|
4839
|
+
currentActive.isCompleted = true;
|
|
4840
|
+
}
|
|
4702
4841
|
this.goToNextStep();
|
|
4703
4842
|
}
|
|
4704
4843
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4743,8 +4882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
4743
4882
|
|
|
4744
4883
|
class Table {
|
|
4745
4884
|
constructor() {
|
|
4746
|
-
this.tableConfig = input(
|
|
4747
|
-
this.tableContent = input(
|
|
4885
|
+
this.tableConfig = input(...(ngDevMode ? [undefined, { debugName: "tableConfig" }] : []));
|
|
4886
|
+
this.tableContent = input(...(ngDevMode ? [undefined, { debugName: "tableContent" }] : []));
|
|
4748
4887
|
this.action = output();
|
|
4749
4888
|
}
|
|
4750
4889
|
onRowActionClicked(actionType, id) {
|
|
@@ -4755,11 +4894,11 @@ class Table {
|
|
|
4755
4894
|
this.action.emit(userAction);
|
|
4756
4895
|
}
|
|
4757
4896
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4758
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Table, isStandalone: true, selector: "aeb-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, tableContent: { classPropertyName: "tableContent", publicName: "tableContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<table class=\"table\">\n <thead>\n <tr>\n @for (columnHead of
|
|
4897
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Table, isStandalone: true, selector: "aeb-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, tableContent: { classPropertyName: "tableContent", publicName: "tableContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "@if (tableConfig(); as config) {\n<table class=\"table\">\n <thead>\n <tr>\n @for (columnHead of config.columns; track columnHead.dataField ||\n columnHead.title) {\n <th align=\"{{ columnHead.align || 'left' }}\" class=\"table-title\">\n {{ columnHead.title }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (columnData of tableContent(); track columnData.id) {\n <tr>\n @for (columnHead of config.columns; track columnHead.dataField ||\n columnHead.title) {\n <td align=\"{{ columnHead.align || 'left' }}\">\n @switch (columnHead.dataField) { @case ('ROW_ACTION') {\n <div class=\"table-action\">\n @for (action of config.rowActions; track action.actionToPerform ||\n action.logoImageUrl) {\n <img\n src=\"{{ action.logoImageUrl }}\"\n (click)=\"\n onRowActionClicked(action.actionToPerform, columnData.id)\n \"\n />\n }\n </div>\n } @case ('STATUS') {\n <div>\n @for (status of config.status; track status.label || $index; let i =\n $index) { @if ($any(columnData)[columnHead.dataProperty] === i) {\n <div\n (click)=\"\n onRowActionClicked(\n columnHead.action || 'SHOW',\n columnData.id\n )\n \"\n class=\"table-status\"\n [style.color]=\"status.color\"\n >\n <img src=\"{{ status.iconUrl }}\" />\n <span>{{ status.label }}</span>\n </div>\n } }\n </div>\n } @default {\n <div\n (click)=\"\n onRowActionClicked(columnHead.action || 'SHOW', columnData.id)\n \"\n [innerHTML]=\"\n $any(columnData)[columnHead.dataProperty]\n | formatTable\n : columnHead.format?.type ?? ''\n : columnHead.format?.placeholder ?? ''\n : columnHead.format?.local\n \"\n ></div>\n } }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n}\n", styles: [".table{width:100%}.table-title{padding:16px 0;font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:16px;color:var(--primary-gray)}.table tr td{padding:16px 0;font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--primary-dark);cursor:pointer;border-top:1px solid var(--color-mono-50)}.table tr:last-child td{border-bottom:1px solid var(--color-mono-50)}.table-price{font-size:var(--font-size-s);font-weight:700;line-height:20px}.table-status{display:inline-flex}.table-status>span{margin-left:1rem}.table .table-action{display:flex;justify-content:flex-end}.table .table-action>div{padding:5px}\n"], dependencies: [{ kind: "pipe", type: FormatTablePipe, name: "formatTable" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4759
4898
|
}
|
|
4760
4899
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Table, decorators: [{
|
|
4761
4900
|
type: Component,
|
|
4762
|
-
args: [{ selector: 'aeb-table', encapsulation: ViewEncapsulation.None, imports: [FormatTablePipe], template: "<table class=\"table\">\n <thead>\n <tr>\n @for (columnHead of
|
|
4901
|
+
args: [{ selector: 'aeb-table', encapsulation: ViewEncapsulation.None, imports: [FormatTablePipe], template: "@if (tableConfig(); as config) {\n<table class=\"table\">\n <thead>\n <tr>\n @for (columnHead of config.columns; track columnHead.dataField ||\n columnHead.title) {\n <th align=\"{{ columnHead.align || 'left' }}\" class=\"table-title\">\n {{ columnHead.title }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (columnData of tableContent(); track columnData.id) {\n <tr>\n @for (columnHead of config.columns; track columnHead.dataField ||\n columnHead.title) {\n <td align=\"{{ columnHead.align || 'left' }}\">\n @switch (columnHead.dataField) { @case ('ROW_ACTION') {\n <div class=\"table-action\">\n @for (action of config.rowActions; track action.actionToPerform ||\n action.logoImageUrl) {\n <img\n src=\"{{ action.logoImageUrl }}\"\n (click)=\"\n onRowActionClicked(action.actionToPerform, columnData.id)\n \"\n />\n }\n </div>\n } @case ('STATUS') {\n <div>\n @for (status of config.status; track status.label || $index; let i =\n $index) { @if ($any(columnData)[columnHead.dataProperty] === i) {\n <div\n (click)=\"\n onRowActionClicked(\n columnHead.action || 'SHOW',\n columnData.id\n )\n \"\n class=\"table-status\"\n [style.color]=\"status.color\"\n >\n <img src=\"{{ status.iconUrl }}\" />\n <span>{{ status.label }}</span>\n </div>\n } }\n </div>\n } @default {\n <div\n (click)=\"\n onRowActionClicked(columnHead.action || 'SHOW', columnData.id)\n \"\n [innerHTML]=\"\n $any(columnData)[columnHead.dataProperty]\n | formatTable\n : columnHead.format?.type ?? ''\n : columnHead.format?.placeholder ?? ''\n : columnHead.format?.local\n \"\n ></div>\n } }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n}\n", styles: [".table{width:100%}.table-title{padding:16px 0;font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:16px;color:var(--primary-gray)}.table tr td{padding:16px 0;font-size:var(--font-size-s);font-style:normal;font-weight:var(--font-weight-regular);line-height:20px;color:var(--primary-dark);cursor:pointer;border-top:1px solid var(--color-mono-50)}.table tr:last-child td{border-bottom:1px solid var(--color-mono-50)}.table-price{font-size:var(--font-size-s);font-weight:700;line-height:20px}.table-status{display:inline-flex}.table-status>span{margin-left:1rem}.table .table-action{display:flex;justify-content:flex-end}.table .table-action>div{padding:5px}\n"] }]
|
|
4763
4902
|
}], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: false }] }], tableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableContent", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
|
|
4764
4903
|
|
|
4765
4904
|
class TableModule {
|
|
@@ -4807,13 +4946,21 @@ class Tabs {
|
|
|
4807
4946
|
const targetTab = e.target;
|
|
4808
4947
|
this.moveThumb(targetTab);
|
|
4809
4948
|
this.currentTab = tab;
|
|
4810
|
-
this.
|
|
4949
|
+
const name = this.currentTab.name();
|
|
4950
|
+
if (name !== undefined) {
|
|
4951
|
+
this.tabChange.emit(name);
|
|
4952
|
+
}
|
|
4811
4953
|
}
|
|
4812
4954
|
moveThumb(tab) {
|
|
4813
4955
|
const tabLeft = tab.getBoundingClientRect().left;
|
|
4814
|
-
const
|
|
4815
|
-
this.thumb()
|
|
4816
|
-
|
|
4956
|
+
const container = this.container();
|
|
4957
|
+
const thumb = this.thumb();
|
|
4958
|
+
if (!container || !thumb) {
|
|
4959
|
+
return;
|
|
4960
|
+
}
|
|
4961
|
+
const containerLeft = container.nativeElement.getBoundingClientRect().left;
|
|
4962
|
+
thumb.nativeElement.style.width = `${tab.offsetWidth}px`;
|
|
4963
|
+
thumb.nativeElement.style.left = `${tabLeft - containerLeft}px`;
|
|
4817
4964
|
}
|
|
4818
4965
|
ngAfterViewInit() {
|
|
4819
4966
|
setTimeout(() => {
|
|
@@ -5151,8 +5298,8 @@ class Switch {
|
|
|
5151
5298
|
this._injector = inject(Injector);
|
|
5152
5299
|
this.switchInput = viewChild.required('switchInput');
|
|
5153
5300
|
this.changed = output();
|
|
5154
|
-
this.id = input(
|
|
5155
|
-
this.name = input(
|
|
5301
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
5302
|
+
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
5156
5303
|
this.warning = input(false, ...(ngDevMode ? [{ debugName: "warning" }] : []));
|
|
5157
5304
|
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
5158
5305
|
this.pressed = false;
|
|
@@ -5197,7 +5344,7 @@ class Switch {
|
|
|
5197
5344
|
return this.warning() || this._ngControl?.status === 'INVALID';
|
|
5198
5345
|
}
|
|
5199
5346
|
ngOnInit() {
|
|
5200
|
-
this._ngControl = this._injector.get(NgControl,
|
|
5347
|
+
this._ngControl = this._injector.get(NgControl, undefined);
|
|
5201
5348
|
if (this._ngControl) {
|
|
5202
5349
|
this._ngControl.valueAccessor = this;
|
|
5203
5350
|
this._ngControl.statusChanges?.subscribe(() => this._cdr.markForCheck());
|
|
@@ -5227,7 +5374,7 @@ class Switch {
|
|
|
5227
5374
|
useExisting: forwardRef(() => Switch),
|
|
5228
5375
|
multi: true
|
|
5229
5376
|
}
|
|
5230
|
-
], viewQueries: [{ propertyName: "switchInput", first: true, predicate: ["switchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"switch-wrapper\">\n <label\n class=\"switch\"\n [class.switch--checked]=\"checked\"\n [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n [class.switch--disabled]=\"disabled\"\n [class.switch--pressed]=\"pressed\"\n tabindex=\"0\"\n >\n <input\n #switchInput\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n class=\"visually-hidden\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n />\n\n <span class=\"switch-slider\"></span>\n </label>\n @if (label()) {\n <span class=\"switch-label\">{{ label() }}</span>\n }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
|
|
5377
|
+
], viewQueries: [{ propertyName: "switchInput", first: true, predicate: ["switchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"switch-wrapper\">\n <label\n class=\"switch\"\n [class.switch--checked]=\"checked\"\n [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n [class.switch--disabled]=\"disabled\"\n [class.switch--pressed]=\"pressed\"\n tabindex=\"0\"\n >\n <input\n #switchInput\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n class=\"visually-hidden\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n />\n\n <span class=\"switch-slider\"></span>\n </label>\n @if (label()) {\n <span class=\"switch-label\">{{ label() }}</span>\n }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;outline:none}.switch .switch-slider{position:absolute;inset:0;background-color:var(--color-mono-100);border-radius:12px;transition:background-color .3s,filter .3s}.switch .switch-slider:before{content:\"\";position:absolute;width:18px;height:18px;top:3px;left:3px;background-color:var(--color-mono-0);border-radius:50%;transition:transform .3s}.switch--checked .switch-slider{background-color:var(--color-blue-500)}.switch--checked .switch-slider:before{transform:translate(16px)}.switch--warning .switch-slider{background-color:var(--color-red-100)}.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-500)}.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch--pressed .switch-slider{background-color:var(--color-mono-200)}.switch--pressed.switch--warning .switch-slider{background-color:var(--color-red-200)}.switch--pressed.switch--checked .switch-slider{background-color:var(--color-blue-600);filter:none}.switch--pressed.switch--checked .switch-slider:before{transform:translate(16px)}.switch--pressed.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-600);filter:none}.switch--pressed.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch-label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CodeInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5231
5378
|
}
|
|
5232
5379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Switch, decorators: [{
|
|
5233
5380
|
type: Component,
|
|
@@ -5247,7 +5394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5247
5394
|
'(mousedown)': 'onPressStart()',
|
|
5248
5395
|
'(mouseup)': 'onPressEndMouseUp()',
|
|
5249
5396
|
'(mouseout)': 'onPressEndMouseOut()'
|
|
5250
|
-
}, template: "<div class=\"switch-wrapper\">\n <label\n class=\"switch\"\n [class.switch--checked]=\"checked\"\n [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n [class.switch--disabled]=\"disabled\"\n [class.switch--pressed]=\"pressed\"\n tabindex=\"0\"\n >\n <input\n #switchInput\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n class=\"visually-hidden\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n />\n\n <span class=\"switch-slider\"></span>\n </label>\n @if (label()) {\n <span class=\"switch-label\">{{ label() }}</span>\n }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
|
|
5397
|
+
}, template: "<div class=\"switch-wrapper\">\n <label\n class=\"switch\"\n [class.switch--checked]=\"checked\"\n [class.switch--warning]=\"warning() || ngControl?.status === 'INVALID'\"\n [class.switch--disabled]=\"disabled\"\n [class.switch--pressed]=\"pressed\"\n tabindex=\"0\"\n >\n <input\n #switchInput\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n class=\"visually-hidden\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n />\n\n <span class=\"switch-slider\"></span>\n </label>\n @if (label()) {\n <span class=\"switch-label\">{{ label() }}</span>\n }\n</div>\n", styles: [".switch-wrapper{display:flex;align-items:center;gap:12px}.switch{outline:none;position:relative;display:inline-block;width:40px;height:24px;cursor:pointer}.switch:hover .switch-slider{filter:brightness(110%)}.switch--disabled{cursor:not-allowed}.switch--disabled:hover .switch-slider{filter:none!important}.switch--disabled .switch-slider{opacity:.5}.switch .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;outline:none}.switch .switch-slider{position:absolute;inset:0;background-color:var(--color-mono-100);border-radius:12px;transition:background-color .3s,filter .3s}.switch .switch-slider:before{content:\"\";position:absolute;width:18px;height:18px;top:3px;left:3px;background-color:var(--color-mono-0);border-radius:50%;transition:transform .3s}.switch--checked .switch-slider{background-color:var(--color-blue-500)}.switch--checked .switch-slider:before{transform:translate(16px)}.switch--warning .switch-slider{background-color:var(--color-red-100)}.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-500)}.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch--pressed .switch-slider{background-color:var(--color-mono-200)}.switch--pressed.switch--warning .switch-slider{background-color:var(--color-red-200)}.switch--pressed.switch--checked .switch-slider{background-color:var(--color-blue-600);filter:none}.switch--pressed.switch--checked .switch-slider:before{transform:translate(16px)}.switch--pressed.switch--checked.switch--warning .switch-slider{background-color:var(--color-red-600);filter:none}.switch--pressed.switch--checked.switch--warning .switch-slider:before{transform:translate(16px)}.switch-label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"] }]
|
|
5251
5398
|
}], propDecorators: { switchInput: [{ type: i0.ViewChild, args: ['switchInput', { isSignal: true }] }], changed: [{ type: i0.Output, args: ["changed"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
5252
5399
|
|
|
5253
5400
|
class SwitchModule {
|