@corp-products/ui-components 3.5.0 → 3.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, Renderer2, HostListener, ViewChild, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector } from '@angular/core';
|
|
2
|
+
import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, Renderer2, ChangeDetectorRef, signal, effect, HostListener, ViewChild, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector } from '@angular/core';
|
|
3
3
|
import * as i1 from 'primeng/button';
|
|
4
4
|
import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -713,6 +713,7 @@ class SelectComponent extends BaseInputComponent {
|
|
|
713
713
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
714
714
|
change = new EventEmitter();
|
|
715
715
|
defaultColor = '#DFE0E6';
|
|
716
|
+
allSelectd = false;
|
|
716
717
|
constructor() {
|
|
717
718
|
super();
|
|
718
719
|
}
|
|
@@ -721,19 +722,19 @@ class SelectComponent extends BaseInputComponent {
|
|
|
721
722
|
this.control.setValue([]);
|
|
722
723
|
return;
|
|
723
724
|
}
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
this.
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
725
|
+
const values = this.optionValue
|
|
726
|
+
? this.options.map((o) => o[this.optionValue])
|
|
727
|
+
: this.options;
|
|
728
|
+
this.control.setValue([...values]);
|
|
729
|
+
}
|
|
730
|
+
onMultiSelectClear() {
|
|
731
|
+
this.allSelectd = false;
|
|
731
732
|
}
|
|
732
733
|
onChange(e) {
|
|
733
734
|
this.change.emit(e);
|
|
734
735
|
}
|
|
735
736
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
736
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", emptyMessage: "emptyMessage", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectAllLabel: "selectAllLabel", dataKey: "dataKey", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [showToggleAll]=\"false\"\r\n [placeholder]=\"placeholder\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (selectAllLabel) {\r\n <ng-template #filter>\r\n <p-checkbox\r\n binary=\"true\"\r\n (onChange)=\"toggleAll($event)\"\r\n inputId=\"toggleAll\">\r\n </p-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </ng-template>\r\n }\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [dataKey]=\"dataKey\"\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", emptyMessage: "emptyMessage", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectAllLabel: "selectAllLabel", dataKey: "dataKey", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [showToggleAll]=\"false\"\r\n [placeholder]=\"placeholder\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"onMultiSelectClear()\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (selectAllLabel) {\r\n <ng-template #filter>\r\n <p-checkbox\r\n binary=\"true\"\r\n [(ngModel)]=\"allSelectd\"\r\n (onChange)=\"toggleAll($event)\"\r\n inputId=\"toggleAll\">\r\n </p-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </ng-template>\r\n }\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [dataKey]=\"dataKey\"\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
737
738
|
}
|
|
738
739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, decorators: [{
|
|
739
740
|
type: Component,
|
|
@@ -748,8 +749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
748
749
|
MultiSelectModule,
|
|
749
750
|
FloatLabelModule,
|
|
750
751
|
TranslatePipe,
|
|
751
|
-
CheckboxModule
|
|
752
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [showToggleAll]=\"false\"\r\n [placeholder]=\"placeholder\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (selectAllLabel) {\r\n <ng-template #filter>\r\n <p-checkbox\r\n binary=\"true\"\r\n (onChange)=\"toggleAll($event)\"\r\n inputId=\"toggleAll\">\r\n </p-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </ng-template>\r\n }\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [dataKey]=\"dataKey\"\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"] }]
|
|
752
|
+
CheckboxModule,
|
|
753
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [showToggleAll]=\"false\"\r\n [placeholder]=\"placeholder\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"onMultiSelectClear()\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (selectAllLabel) {\r\n <ng-template #filter>\r\n <p-checkbox\r\n binary=\"true\"\r\n [(ngModel)]=\"allSelectd\"\r\n (onChange)=\"toggleAll($event)\"\r\n inputId=\"toggleAll\">\r\n </p-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </ng-template>\r\n }\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [dataKey]=\"dataKey\"\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"] }]
|
|
753
754
|
}], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
|
|
754
755
|
type: Input
|
|
755
756
|
}], optionTemplate: [{
|
|
@@ -1152,25 +1153,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1152
1153
|
}] });
|
|
1153
1154
|
|
|
1154
1155
|
class GregorianCalendarComponent {
|
|
1155
|
-
i18n;
|
|
1156
|
-
cdr;
|
|
1157
1156
|
model;
|
|
1158
1157
|
dateSelected = new EventEmitter();
|
|
1159
1158
|
renderer = inject(Renderer2);
|
|
1160
1159
|
language = 'en';
|
|
1161
1160
|
startDate;
|
|
1162
1161
|
calendar = new NgbCalendarGregorian();
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
}
|
|
1162
|
+
i18n = inject(NgbDatepickerI18n);
|
|
1163
|
+
cdr = inject(ChangeDetectorRef);
|
|
1164
|
+
calendarKey = 0;
|
|
1167
1165
|
ngOnChanges(changes) {
|
|
1168
1166
|
if (changes['model'] && changes['model'].currentValue) {
|
|
1169
1167
|
this.startDate = { ...changes['model'].currentValue };
|
|
1170
1168
|
}
|
|
1171
1169
|
if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
|
|
1172
1170
|
this.i18n.setLanguage(this.language);
|
|
1173
|
-
this.
|
|
1171
|
+
this.calendarKey++; // Increment to force recreation
|
|
1174
1172
|
}
|
|
1175
1173
|
}
|
|
1176
1174
|
ngAfterViewInit() {
|
|
@@ -1190,19 +1188,19 @@ class GregorianCalendarComponent {
|
|
|
1190
1188
|
date.day === today.day;
|
|
1191
1189
|
}
|
|
1192
1190
|
isDisabled = () => false;
|
|
1193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [
|
|
1194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1191
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1192
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
|
|
1195
1193
|
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1196
1194
|
{ provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
|
|
1197
|
-
], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp
|
|
1195
|
+
], usesOnChanges: true, ngImport: i0, template: "@for(item of [calendarKey]; track item) {\r\n <ngb-datepicker #dp\r\n [class.rtl]=\"language === 'ar'\"\r\n [class.ltr]=\"language === 'en'\"\r\n [ngModel]=\"model\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\"\r\n [markDisabled]=\"isDisabled\">\r\n </ngb-datepicker>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\"\r\n [class.today]=\"isToday(date)\"\r\n [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n </ng-template>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1198
1196
|
}
|
|
1199
1197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, decorators: [{
|
|
1200
1198
|
type: Component,
|
|
1201
1199
|
args: [{ selector: "app-gregorian-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
|
|
1202
1200
|
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1203
1201
|
{ provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
|
|
1204
|
-
], encapsulation: ViewEncapsulation.None, template: "<ngb-datepicker #dp
|
|
1205
|
-
}],
|
|
1202
|
+
], encapsulation: ViewEncapsulation.None, template: "@for(item of [calendarKey]; track item) {\r\n <ngb-datepicker #dp\r\n [class.rtl]=\"language === 'ar'\"\r\n [class.ltr]=\"language === 'en'\"\r\n [ngModel]=\"model\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\"\r\n [markDisabled]=\"isDisabled\">\r\n </ngb-datepicker>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\"\r\n [class.today]=\"isToday(date)\"\r\n [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n </ng-template>\r\n}\r\n" }]
|
|
1203
|
+
}], propDecorators: { model: [{
|
|
1206
1204
|
type: Input
|
|
1207
1205
|
}], dateSelected: [{
|
|
1208
1206
|
type: Output
|
|
@@ -1319,15 +1317,23 @@ class DualCalendarComponent {
|
|
|
1319
1317
|
selectedDate = '';
|
|
1320
1318
|
control = new FormControl({ value: null, disabled: false }, []);
|
|
1321
1319
|
label = '';
|
|
1320
|
+
name = '';
|
|
1322
1321
|
withTime = true;
|
|
1323
1322
|
mode = 'gregorian';
|
|
1324
1323
|
gregorianModel;
|
|
1325
1324
|
hijriModel;
|
|
1326
|
-
currentLang = 'ar';
|
|
1325
|
+
currentLang = signal('ar', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
|
|
1327
1326
|
gregorianUTC = new EventEmitter();
|
|
1327
|
+
gregorianUTCValue = '';
|
|
1328
1328
|
isCalendarOpen = false;
|
|
1329
1329
|
calendarContainer;
|
|
1330
1330
|
hijriCal = new NgbCalendarIslamicUmalqura();
|
|
1331
|
+
constructor() {
|
|
1332
|
+
effect(() => {
|
|
1333
|
+
this.currentLang(); // 👈 track signal
|
|
1334
|
+
this.setDate(this.gregorianUTCValue);
|
|
1335
|
+
});
|
|
1336
|
+
}
|
|
1331
1337
|
ngOnInit() {
|
|
1332
1338
|
this.setDate(this.control?.value);
|
|
1333
1339
|
}
|
|
@@ -1363,7 +1369,8 @@ class DualCalendarComponent {
|
|
|
1363
1369
|
// fromGregorian expects NgbDate or JS Date (depending on version)
|
|
1364
1370
|
const hijri = this.hijriCal.fromGregorian(jsDate);
|
|
1365
1371
|
const isoUTC = jsDate.toISOString();
|
|
1366
|
-
this.
|
|
1372
|
+
this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
|
|
1373
|
+
this.gregorianUTC.emit(this.gregorianUTCValue);
|
|
1367
1374
|
this.hijriModel = {
|
|
1368
1375
|
year: hijri.year,
|
|
1369
1376
|
month: hijri.month,
|
|
@@ -1383,7 +1390,8 @@ class DualCalendarComponent {
|
|
|
1383
1390
|
day: greg.getDate()
|
|
1384
1391
|
};
|
|
1385
1392
|
const jsDate = new Date(this.gregorianModel.year, this.gregorianModel.month - 1, this.gregorianModel.day);
|
|
1386
|
-
this.
|
|
1393
|
+
this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
|
|
1394
|
+
this.gregorianUTC.emit(this.gregorianUTCValue);
|
|
1387
1395
|
this.selectedDate = this.formatHijri(ngbDate);
|
|
1388
1396
|
this.isCalendarOpen = false;
|
|
1389
1397
|
}
|
|
@@ -1392,18 +1400,18 @@ class DualCalendarComponent {
|
|
|
1392
1400
|
}
|
|
1393
1401
|
formatHijri(h) {
|
|
1394
1402
|
const hijriDay = h.day;
|
|
1395
|
-
const hijriMonth = getHijriMonthName(this.currentLang, h.month);
|
|
1403
|
+
const hijriMonth = getHijriMonthName(this.currentLang(), h.month);
|
|
1396
1404
|
const hijriYear = h.year;
|
|
1397
1405
|
const greg = this.hijriCal.toGregorian(h);
|
|
1398
1406
|
const gregorianDay = greg.getDate();
|
|
1399
|
-
const gregorianMonth = getGregorianMonthName(this.currentLang, greg.getMonth() + 1);
|
|
1407
|
+
const gregorianMonth = getGregorianMonthName(this.currentLang(), greg.getMonth() + 1);
|
|
1400
1408
|
const gregorianYear = greg.getFullYear();
|
|
1401
1409
|
return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
|
|
1402
1410
|
}
|
|
1403
1411
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", withTime: "withTime", currentLang: "currentLang" }, outputs: { gregorianUTC: "gregorianUTC" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", currentLang: "currentLang" }, outputs: { gregorianUTC: "gregorianUTC" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1405
1413
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
1406
|
-
], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n
|
|
1414
|
+
], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
1407
1415
|
trigger('slideDown', [
|
|
1408
1416
|
state('closed', style({
|
|
1409
1417
|
height: '0px',
|
|
@@ -1452,11 +1460,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1452
1460
|
GregorianCalendarComponent
|
|
1453
1461
|
], providers: [
|
|
1454
1462
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
1455
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n
|
|
1456
|
-
}], propDecorators: { control: [{
|
|
1463
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
|
|
1464
|
+
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
1457
1465
|
type: Input
|
|
1458
1466
|
}], label: [{
|
|
1459
1467
|
type: Input
|
|
1468
|
+
}], name: [{
|
|
1469
|
+
type: Input
|
|
1460
1470
|
}], withTime: [{
|
|
1461
1471
|
type: Input
|
|
1462
1472
|
}], currentLang: [{
|
|
@@ -1490,7 +1500,7 @@ class DynamicFormComponent {
|
|
|
1490
1500
|
this.inputsNames = Object.keys(this.inputsMap || {});
|
|
1491
1501
|
}
|
|
1492
1502
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1493
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <span class=\"text-xs text-gray-700\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n </span>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "withTime", "currentLang"], outputs: ["gregorianUTC"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
1503
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <span class=\"text-xs text-gray-700\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n </span>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "name", "withTime", "currentLang"], outputs: ["gregorianUTC"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
1494
1504
|
}
|
|
1495
1505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
1496
1506
|
type: Component,
|