zek 19.0.1 → 19.0.2

package/fesm2022/zek.mjs

@@ -4225,6 +4225,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }] });
 
+const ZEK_DROPDOWN_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ZekDropdown),
+    multi: true,
+};
+class ZekDropdown extends CoreUiComponent {
+    constructor(renderer, elementRef) {
+        super(renderer, elementRef);
+    }
+    _uniqueId = `zek-dropdown-${this.uniqueId}`;
+    /** The unique ID for the radio button. */
+    id = this._uniqueId;
+    get inputId() {
+        return `${this.id || this._uniqueId}-input`;
+    }
+    _multiple = false;
+    get multiple() {
+        return this._multiple;
+    }
+    set multiple(value) {
+        this._multiple = Convert.toBooleanProperty(value);
+    }
+    valueField;
+    textField;
+    checkedTextField;
+    css = 'primary';
+    searchText = '';
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (value)
+            this._label = value;
+        else
+            this._label = '';
+    }
+    _label = '';
+    _data = [];
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        if (this._data !== value) {
+            this._data = value ? value : [];
+            this._onDataChanged();
+        }
+    }
+    _onDataChanged() {
+        this._normalizeData();
+        this._filterData();
+    }
+    normalizedItems = [];
+    filteredItems = [];
+    selectedItems = [];
+    selectedItemsText = '';
+    onTextChange() {
+        this._filterData();
+    }
+    _filterData() {
+        if (this.searchText) {
+            const normalized = StringHelper.trimStart(this.searchText.toUpperCase(), ' ');
+            this.filteredItems = this.normalizedItems.filter(item => item.normalized.indexOf(normalized) !== -1);
+        }
+        else {
+            this.filteredItems = this.normalizedItems;
+        }
+    }
+    _normalizeData() {
+        this.normalizedItems = [];
+        if (this.valueField && this.textField) {
+            for (const item of this._data) {
+                this.normalizedItems.push({
+                    key: item[this.valueField],
+                    value: item[this.textField],
+                    normalized: (item[this.textField] || '').toUpperCase(),
+                    checked: this.selectedItems.includes(item),
+                    item: item
+                });
+            }
+        }
+        else {
+            for (const item of this._data) {
+                this.normalizedItems.push({ key: item, value: item, checked: this.selectedItems.includes(item), item });
+            }
+        }
+    }
+    checkAll(checked, ngModelChange = true) {
+        if (this.disabled || this.readonly)
+            return;
+        for (const item of this.normalizedItems) {
+            item.checked = checked;
+        }
+        this.selectedItems = [];
+        if (checked) {
+            if (this.multiple) {
+                const tmp = [];
+                for (const normalized of this.normalizedItems) {
+                    this.selectedItems.push(normalized.item);
+                    tmp.push(normalized.key);
+                }
+                if (ngModelChange)
+                    this.setNgModel(tmp);
+            }
+        }
+        else if (ngModelChange)
+            this.setNgModel(null);
+    }
+    toggleChecked(normalized) {
+        if (!normalized || this.disabled || this.readonly)
+            return;
+        const checked = normalized.checked || false;
+        if (!this.multiple) {
+            for (const item of this.normalizedItems) {
+                item.checked = false;
+            }
+        }
+        //on check item
+        if (!checked) {
+            normalized.checked = true;
+            if (this.multiple) {
+                if (!this.selectedItems.includes(normalized.item)) {
+                    this.selectedItems.push(normalized.item);
+                }
+                //todo optimize
+                const tmp = [];
+                for (const item of this.normalizedItems) {
+                    if (item.checked) {
+                        tmp.push(item.key);
+                    }
+                }
+                this.setNgModel(tmp);
+            }
+            else {
+                this.selectedItems = [normalized.item];
+                this.setNgModel(normalized.key);
+            }
+        }
+        else {
+            //on uncheck
+            normalized.checked = false;
+            if (this.multiple) {
+                const index = this.selectedItems.indexOf(normalized.item);
+                if (index !== -1) {
+                    this.selectedItems.splice(index, 1);
+                }
+                //todo optimize
+                const tmp = [];
+                for (const item of this.normalizedItems) {
+                    if (item.checked) {
+                        tmp.push(item.key);
+                    }
+                }
+                this.setNgModel(tmp);
+            }
+            else {
+                this.selectedItems = [];
+                this.setNgModel(null);
+            }
+        }
+        this._initText();
+    }
+    _initText() {
+        const field = this.checkedTextField || this.textField || '';
+        if (field) {
+            this.selectedItemsText = this.selectedItems.map(x => x[field]).join(', ');
+        }
+        else {
+            this.selectedItemsText = this.selectedItems.join(', ');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ZekDropdown, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ZekDropdown, isStandalone: true, selector: "zek-dropdown,[zek-dropdown]", inputs: { id: "id", multiple: "multiple", valueField: "valueField", textField: "textField", checkedTextField: "checkedTextField", css: "css", label: "label", data: "data" }, host: { properties: { "attr.id": "id" } }, providers: [ZEK_DROPDOWN_CONTROL_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<div class=\"btn-group\" id=\"dropdown-{{id}}\">\r\n    <button class=\"btn btn-{{css}} dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" aria-expanded=\"false\">\r\n        <!--  <ng-container *ngIf=\"!_text\">{{placeholder}}</ng-container> {{_text}} -->\r\n        {{label}}\r\n    </button>\r\n    <ul class=\"dropdown-menu dropdown-menu-scrollable\">\r\n        <li class=\"px-2 py-1\">\r\n            <input type=\"text\" class=\"form-control\"\r\n                [id]=\"inputId\"\r\n                [name]=\"inputId\"\r\n                [(ngModel)]=\"searchText\"\r\n                (ngModelChange)=\"onTextChange()\">\r\n        </li>\r\n        <ng-container *ngIf=\"normalizedItems\">\r\n            <li>\r\n                <a class=\"dropdown-item\" href=\"javascript:void(0)\" *ngFor=\"let item of filteredItems\" (click)=\"toggleChecked(item)\">\r\n                    <span *ngIf=\"item.checked\"><i class=\"fa-regular fa-square-check\"></i></span>\r\n                    <span *ngIf=\"!item.checked\"><i class=\"fa-regular fa-square\"></i></span>\r\n                    {{item.value}}\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ZekDropdown, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'zek-dropdown,[zek-dropdown]', providers: [ZEK_DROPDOWN_CONTROL_VALUE_ACCESSOR], host: {
+                        '[attr.id]': 'id',
+                    }, imports: [
+                        CommonModule,
+                        FormsModule
+                    ], template: "<div class=\"btn-group\" id=\"dropdown-{{id}}\">\r\n    <button class=\"btn btn-{{css}} dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" aria-expanded=\"false\">\r\n        <!--  <ng-container *ngIf=\"!_text\">{{placeholder}}</ng-container> {{_text}} -->\r\n        {{label}}\r\n    </button>\r\n    <ul class=\"dropdown-menu dropdown-menu-scrollable\">\r\n        <li class=\"px-2 py-1\">\r\n            <input type=\"text\" class=\"form-control\"\r\n                [id]=\"inputId\"\r\n                [name]=\"inputId\"\r\n                [(ngModel)]=\"searchText\"\r\n                (ngModelChange)=\"onTextChange()\">\r\n        </li>\r\n        <ng-container *ngIf=\"normalizedItems\">\r\n            <li>\r\n                <a class=\"dropdown-item\" href=\"javascript:void(0)\" *ngFor=\"let item of filteredItems\" (click)=\"toggleChecked(item)\">\r\n                    <span *ngIf=\"item.checked\"><i class=\"fa-regular fa-square-check\"></i></span>\r\n                    <span *ngIf=\"!item.checked\"><i class=\"fa-regular fa-square\"></i></span>\r\n                    {{item.value}}\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { id: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], checkedTextField: [{
+                type: Input
+            }], css: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
 class ZekEditToolbar {
     _showSave = true;
     get showSave() {
@@ -7532,5 +7731,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, AgePipe, Alert, AlertService, ArrayHelper, AuthService, Base64Helper, BaseAlert, BaseComponent, BaseService, BitwiseHelper, BootstrapHelper, CacheHelper, Color, ComponentType, Convert, CoreComponent, CoreUiComponent, CrudService, CssHelper, CustomHttpParamEncoder, DATE_FORMAT, DateHelper, DateValueAccessor, DatepickerModule, EditBase, EditBaseComponent, EditComponent, EditFormComponent, ErrorHelper, ExcelHelper, FileHelper, FileService, FilterBase, FilterHelper, GOOGLE_CLIENT_ID, Gender, HtmlHelper, HttpErrorHandler, IntervalHelper, JwtHelper, KeyPair, KeyPairChecked, KeyPairEx, KeyPairRequired, LANGUAGE, ListBase, ListBaseComponent, MATCH_VALIDATOR, MatchValidator, MathHelper, Month, ObjectHelper, OverlapHelper, PagedList, Pager, PagerHelper, PeriodRelation, PrintType, RANGE_VALIDATOR, RECAPTCHA_SITE_KEY, RandomHelper, RangeValidator, ReCaptchaService, RecaptchaModule, StorageHelper, StringHelper, TimeHelper, TimeModule, TimePipe, TimerService, TmpHelper, Toast, Tree, UrlHelper, ValidEventArgs, ValidationHelper, Validators, ValidatorsModule, WebApiClient, WebApiModule, ZekAlert, ZekApproveModal, ZekAutoComplete, ZekButtonBrowse, ZekButtonBrowseModalBase, ZekButtonBrowseModalToolbar, ZekButtonBrowseModule, ZekCallbackPipe, ZekCard, ZekCountdown, ZekDateAgoPipe, ZekDelayedInputDirective, ZekDeleteModal, ZekDisapproveModal, ZekEditToolbar, ZekFieldValidator, ZekFileInput, ZekFileSizePipe, ZekFileViewer, ZekFilterModal, ZekGoogleLoginButton, ZekGoogleLoginModule, ZekGridToolbar, ZekGridToolbarBar, ZekListToolbar, ZekLoading, ZekLoadingModule, ZekLocalToUtcModule, ZekLocalToUtcPipe, ZekModal, ZekModalModule, ZekNumericDirective, ZekPageTitle, ZekPager, ZekPassword, ZekProgress, ZekRadio, ZekReadOnlyDirective, ZekRestoreModal, ZekSafePipe, ZekSelect2, ZekSelect2Multiple, ZekSelectMultiple, ZekSort, ZekSortButtonGroup, ZekSubmitModal, ZekSumModal, ZekTag, ZekToast, ZekTooltip, ZekUtcToLocalModule, ZekUtcToLocalPipe, ZekValidation, ZekWizard, ZekWizard2, firstBy, handler, matchValidator, nullValidator, rangeValidator, zekAuthGuard };
+export { API_BASE_URL, AgePipe, Alert, AlertService, ArrayHelper, AuthService, Base64Helper, BaseAlert, BaseComponent, BaseService, BitwiseHelper, BootstrapHelper, CacheHelper, Color, ComponentType, Convert, CoreComponent, CoreUiComponent, CrudService, CssHelper, CustomHttpParamEncoder, DATE_FORMAT, DateHelper, DateValueAccessor, DatepickerModule, EditBase, EditBaseComponent, EditComponent, EditFormComponent, ErrorHelper, ExcelHelper, FileHelper, FileService, FilterBase, FilterHelper, GOOGLE_CLIENT_ID, Gender, HtmlHelper, HttpErrorHandler, IntervalHelper, JwtHelper, KeyPair, KeyPairChecked, KeyPairEx, KeyPairRequired, LANGUAGE, ListBase, ListBaseComponent, MATCH_VALIDATOR, MatchValidator, MathHelper, Month, ObjectHelper, OverlapHelper, PagedList, Pager, PagerHelper, PeriodRelation, PrintType, RANGE_VALIDATOR, RECAPTCHA_SITE_KEY, RandomHelper, RangeValidator, ReCaptchaService, RecaptchaModule, StorageHelper, StringHelper, TimeHelper, TimeModule, TimePipe, TimerService, TmpHelper, Toast, Tree, UrlHelper, ValidEventArgs, ValidationHelper, Validators, ValidatorsModule, WebApiClient, WebApiModule, ZekAlert, ZekApproveModal, ZekAutoComplete, ZekButtonBrowse, ZekButtonBrowseModalBase, ZekButtonBrowseModalToolbar, ZekButtonBrowseModule, ZekCallbackPipe, ZekCard, ZekCountdown, ZekDateAgoPipe, ZekDelayedInputDirective, ZekDeleteModal, ZekDisapproveModal, ZekDropdown, ZekEditToolbar, ZekFieldValidator, ZekFileInput, ZekFileSizePipe, ZekFileViewer, ZekFilterModal, ZekGoogleLoginButton, ZekGoogleLoginModule, ZekGridToolbar, ZekGridToolbarBar, ZekListToolbar, ZekLoading, ZekLoadingModule, ZekLocalToUtcModule, ZekLocalToUtcPipe, ZekModal, ZekModalModule, ZekNumericDirective, ZekPageTitle, ZekPager, ZekPassword, ZekProgress, ZekRadio, ZekReadOnlyDirective, ZekRestoreModal, ZekSafePipe, ZekSelect2, ZekSelect2Multiple, ZekSelectMultiple, ZekSort, ZekSortButtonGroup, ZekSubmitModal, ZekSumModal, ZekTag, ZekToast, ZekTooltip, ZekUtcToLocalModule, ZekUtcToLocalPipe, ZekValidation, ZekWizard, ZekWizard2, firstBy, handler, matchValidator, nullValidator, rangeValidator, zekAuthGuard };
 //# sourceMappingURL=zek.mjs.map