@openkit-labs/ngx-kit-ui 0.0.38 → 0.0.40

package/fesm2022/openkit-labs-ngx-kit-ui.mjs

@@ -2409,6 +2409,296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+class KitInputMultiSelectComponent extends KitBaseInputComponent {
+    screenService;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Options dataset for the select component
+     * Can be an array of objects or simple values
+     */
+    options = [];
+    /**
+     * The field name to use for matching items (default: 'id' or '_id')
+     */
+    matchField = 'id';
+    /**
+     * The field name to use as display text for each option (default: 'name')
+     */
+    displayField = 'name';
+    /**
+     * Custom title text for the dialog/bottom sheet (default: 'Select an option')
+     */
+    dialogTitle = 'Select an option';
+    /**
+     * Whether to show a search box at the top of the options list
+     */
+    showSearchBox = false;
+    searchField = null;
+    searchBoxPlaceholder = 'Search options...';
+    /**
+     * Template references for custom rendering of options
+     */
+    activeTemplate;
+    inactiveTemplate;
+    emptyTemplate;
+    /**
+     * Control states for dialogs and bottom sheets
+     */
+    isBottomSheetOpen = false;
+    isDialogOpen = false;
+    /**
+     * Track if the UI is on a small screen
+     */
+    isSmallScreen = false;
+    /**
+     * Search functionality
+     */
+    searchTerm = '';
+    filteredOptions = [];
+    /**
+     * Keep track of our subscriptions
+     */
+    screenSubscription = null;
+    constructor(screenService, ngControl = null) {
+        super(ngControl);
+        this.screenService = screenService;
+        // Subscribe to screen size changes
+        effect(() => {
+            const isSmall = this.screenService.isSmall();
+            this.isSmallScreen = isSmall;
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // Initialize filtered options
+        this.filteredOptions = [...this.options];
+    }
+    ngOnChanges(changes) {
+        if (changes['options'] && this.options) {
+            this.filteredOptions = [...this.options];
+            // Reapply search filter if there's an active search
+            if (this.searchTerm) {
+                this.filterOptions();
+            }
+        }
+    }
+    ngOnDestroy() {
+        // Clean up subscription
+        if (this.screenSubscription) {
+            this.screenSubscription.unsubscribe();
+            this.screenSubscription = null;
+        }
+    }
+    /**
+     * Return the component prefix for ID generation
+     */
+    getComponentPrefix() {
+        return 'input-multi-select';
+    }
+    /**
+     * Opens the appropriate selection UI based on screen size
+     */
+    openSelect() {
+        // Reset search when opening
+        this.searchTerm = '';
+        this.filteredOptions = [...this.options];
+        if (this.isSmallScreen) {
+            this.isBottomSheetOpen = true;
+            this.isDialogOpen = false;
+        }
+        else {
+            this.isDialogOpen = true;
+            this.isBottomSheetOpen = false;
+        }
+    }
+    /**
+     * Handle keyboard events for accessibility
+     */
+    onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openSelect();
+        }
+    }
+    /**
+     * Closes all selection UIs
+     */
+    closeSelect() {
+        setTimeout(() => {
+            this.isBottomSheetOpen = false;
+            this.isDialogOpen = false;
+            // Reset search when closing
+            this.searchTerm = '';
+            this.filteredOptions = [...this.options];
+        }, 250);
+    }
+    /**
+     * Handle search input changes
+     */
+    onSearchChange(searchTerm) {
+        this.searchTerm = searchTerm;
+        this.filterOptions();
+    }
+    /**
+     * Filter options based on search term
+     */
+    filterOptions() {
+        if (!this.searchTerm.trim()) {
+            this.filteredOptions = [...this.options];
+            return;
+        }
+        const searchLower = this.searchTerm.toLowerCase().trim();
+        this.filteredOptions = this.options.filter(option => {
+            const searchValue = this.getSearchValue(option).toLowerCase();
+            return searchValue.includes(searchLower);
+        });
+    }
+    /**
+     * Get the search value for the option
+     * Uses searchField if defined, otherwise falls back to displayField
+     */
+    getSearchValue(option) {
+        if (this.isPrimitive(option)) {
+            return String(option);
+        }
+        const objWithKey = option;
+        const fieldToSearch = this.searchField || this.displayField;
+        return String(objWithKey[fieldToSearch] || 'Unknown Option');
+    }
+    /**
+     * Handle option selection
+     * This will be used inside the dialog/bottom sheet
+     */
+    onOptionSelect(option) {
+        const currentValue = this.value || [];
+        const isSelected = this.isSelected(option);
+        let newValue;
+        if (isSelected) {
+            // Remove the option from the selection
+            newValue = currentValue.filter(item => !this.isSameOption(item, option));
+        }
+        else {
+            // Add the option to the selection
+            newValue = [...currentValue, option];
+        }
+        // Update the value using the base class method for proper form integration
+        this.onValueChange(newValue);
+    }
+    /**
+     * Check if two options are the same
+     */
+    isSameOption(option1, option2) {
+        if (this.isPrimitive(option1) && this.isPrimitive(option2)) {
+            return String(option1) === String(option2);
+        }
+        const obj1 = option1;
+        const obj2 = option2;
+        const idField = obj1[this.matchField] !== undefined ? this.matchField : '_id';
+        return obj1 && obj2 &&
+            obj1[idField] !== undefined &&
+            obj2[idField] !== undefined &&
+            String(obj1[idField]) === String(obj2[idField]);
+    }
+    /**
+     * Get the display value for the option
+     */
+    getDisplayValue() {
+        if (!this.value || this.value.length === 0) {
+            return '';
+        }
+        if (this.value.length === 1) {
+            return this.getOptionDisplay(this.value[0]);
+        }
+        return `${this.value.length} items selected`;
+    }
+    /**
+     * Get the display value for a single option
+     */
+    getOptionDisplay(option) {
+        if (this.isPrimitive(option)) {
+            return String(option);
+        }
+        const objWithKey = option;
+        return String(objWithKey[this.displayField] || 'Unknown Option');
+    }
+    /**
+     * Check if the current value matches the option
+     */
+    isSelected(option) {
+        if (!this.value || this.value.length === 0) {
+            return false;
+        }
+        return this.value.some(item => this.isSameOption(item, option));
+    }
+    /**
+     * Check if a value is a primitive type
+     */
+    isPrimitive(value) {
+        return (typeof value === 'string' ||
+            typeof value === 'number' ||
+            typeof value === 'boolean');
+    }
+    getDefaultValue() {
+        return [];
+    }
+    hasCustomActiveTemplate() {
+        return !!this.activeTemplate;
+    }
+    hasCustomInactiveTemplate() {
+        return !!this.inactiveTemplate;
+    }
+    hasCustomEmptyTemplate() {
+        return !!this.emptyTemplate;
+    }
+    /**
+     * Get the context for template rendering
+     */
+    getOptionContext(option) {
+        return {
+            option,
+            isSelected: this.isSelected(option)
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitInputMultiSelectComponent, deps: [{ token: KitScreenService }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitInputMultiSelectComponent, isStandalone: true, selector: "kit-input-multi-select", inputs: { required: "required", options: "options", matchField: "matchField", displayField: "displayField", dialogTitle: "dialogTitle", showSearchBox: "showSearchBox", searchField: "searchField", searchBoxPlaceholder: "searchBoxPlaceholder" }, queries: [{ propertyName: "activeTemplate", first: true, predicate: KitSelectItemActiveDirective, descendants: true, read: TemplateRef }, { propertyName: "inactiveTemplate", first: true, predicate: KitSelectItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: KitSelectEmptyDirective, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ getDisplayValue() || (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div class=\"kit-dialog-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div class=\"kit-bottom-sheet-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-dialog-header,.kit-bottom-sheet-header{display:flex;justify-content:space-between;align-items:center}.kit-dialog-close,.kit-bottom-sheet-close{background:none;border:none;cursor:pointer;padding:8px}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-checkbox{width:20px;height:20px;border:2px solid var(--kit-input-border-color, #adb5bd);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background-color .2s,border-color .2s}.kit-checkbox-check{display:none;color:#fff}.kit-select-item.selected .kit-checkbox{background-color:var(--kit-color-primary, #0066cc);border-color:var(--kit-color-primary, #0066cc)}.kit-select-item.selected .kit-checkbox-check{display:block}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "component", type: KitInputFieldTitleComponent, selector: "kit-input-field-title", inputs: ["for", "required", "disabled"] }, { kind: "component", type: KitTextCaptionComponent, selector: "kit-text-caption", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "ngmodule", type: KitOverlaysModule }, { kind: "component", type: KitBottomSheetComponent, selector: "kit-bottom-sheet", inputs: ["isOpen", "closeOnBackdropClick", "padding", "maxHeight"], outputs: ["isOpenChange"] }, { kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["isOpen", "fullscreen", "closeOnBackdropClick", "padding"], outputs: ["isOpenChange"] }, { kind: "component", type: KitTextLabelComponent, selector: "kit-text-label", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "component", type: KitInputTextComponent, selector: "kit-input-text", inputs: ["required"], outputs: ["paste"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitInputMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-input-multi-select', standalone: true, imports: [KitInputFieldTitleComponent, KitTextCaptionComponent, KitOverlaysModule, KitTextLabelComponent, KitInputTextComponent], template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ getDisplayValue() || (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div class=\"kit-dialog-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div class=\"kit-bottom-sheet-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-dialog-header,.kit-bottom-sheet-header{display:flex;justify-content:space-between;align-items:center}.kit-dialog-close,.kit-bottom-sheet-close{background:none;border:none;cursor:pointer;padding:8px}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-checkbox{width:20px;height:20px;border:2px solid var(--kit-input-border-color, #adb5bd);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background-color .2s,border-color .2s}.kit-checkbox-check{display:none;color:#fff}.kit-select-item.selected .kit-checkbox{background-color:var(--kit-color-primary, #0066cc);border-color:var(--kit-color-primary, #0066cc)}.kit-select-item.selected .kit-checkbox-check{display:block}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"] }]
+        }], ctorParameters: () => [{ type: KitScreenService }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { required: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], matchField: [{
+                type: Input
+            }], displayField: [{
+                type: Input
+            }], dialogTitle: [{
+                type: Input
+            }], showSearchBox: [{
+                type: Input
+            }], searchField: [{
+                type: Input
+            }], searchBoxPlaceholder: [{
+                type: Input
+            }], activeTemplate: [{
+                type: ContentChild,
+                args: [KitSelectItemActiveDirective, { read: TemplateRef }]
+            }], inactiveTemplate: [{
+                type: ContentChild,
+                args: [KitSelectItemDirective, { read: TemplateRef }]
+            }], emptyTemplate: [{
+                type: ContentChild,
+                args: [KitSelectEmptyDirective, { read: TemplateRef }]
+            }] } });
+
 class KitInputTextareaComponent extends KitBaseInputComponent {
     /**
      * Whether the field is required
@@ -2526,6 +2816,7 @@ class KitInputModule {
             KitInputOtpComponent,
             KitInputPhoneComponent,
             KitInputSelectComponent,
+            KitInputMultiSelectComponent,
             KitSelectItemDirective,
             KitSelectItemActiveDirective,
             KitInputTimeComponent,
@@ -2537,6 +2828,7 @@ class KitInputModule {
             KitInputOtpComponent,
             KitInputPhoneComponent,
             KitInputSelectComponent,
+            KitInputMultiSelectComponent,
             KitSelectItemDirective,
             KitSelectItemActiveDirective,
             KitInputTimeComponent,
@@ -2559,6 +2851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         KitInputOtpComponent,
                         KitInputPhoneComponent,
                         KitInputSelectComponent,
+                        KitInputMultiSelectComponent,
                         KitSelectItemDirective,
                         KitSelectItemActiveDirective,
                         KitInputTimeComponent,
@@ -2573,6 +2866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         KitInputOtpComponent,
                         KitInputPhoneComponent,
                         KitInputSelectComponent,
+                        KitInputMultiSelectComponent,
                         KitSelectItemDirective,
                         KitSelectItemActiveDirective,
                         KitInputTimeComponent,
@@ -5639,5 +5933,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KitAppRootComponent, KitAvatarComponent, KitBadgeComponent, KitBaseInputComponent, KitBottomBarComponent, KitBottomSheetComponent, KitButtonComponent, KitButtonGroupComponent, KitButtonGroupItemActiveDirective, KitButtonGroupItemComponent, KitButtonGroupItemIdleDirective, KitButtonModule, KitCardComponent, KitCarouselComponent, KitCenterComponent, KitColumnComponent, KitConstrainedBoxComponent, KitContainerComponent, KitCopyToClipboardDirective, KitDataModule, KitDialogComponent, KitDirectivesModule, KitDividerComponent, KitExpandedComponent, KitFileSizePipe, KitFloatingActionButtonComponent, KitGestureDetectorComponent, KitGridComponent, KitImageComponent, KitImageErrorDirective, KitImageLoadingDirective, KitInputDateComponent, KitInputEmailComponent, KitInputFieldTitleComponent, KitInputModule, KitInputNumberComponent, KitInputOtpComponent, KitInputPasswordComponent, KitInputPhoneComponent, KitInputSelectComponent, KitInputTextComponent, KitInputTextareaComponent, KitInputTimeComponent, KitInteractorsModule, KitKMBPipe, KitLayoutModule, KitMediaModule, KitNavigationModule, KitNavigationService, KitOverlaysModule, KitPaddingComponent, KitPageComponent, KitPanelModule, KitPipesModule, KitPositionedComponent, KitPressAndHoldDirective, KitProgressBarComponent, KitRadioButtonComponent, KitRoundButtonComponent, KitRouterOutletComponent, KitRowComponent, KitScreenService, KitSelectItemActiveDirective, KitSelectItemDirective, KitSideMenuComponent, KitSideMenuService, KitSizedBoxComponent, KitSpacerComponent, KitStickyContainerComponent, KitTabContentComponent, KitTabViewComponent, KitTextBodyComponent, KitTextButtonComponent, KitTextCaptionComponent, KitTextDisplayComponent, KitTextHeadingComponent, KitTextLabelComponent, KitTextLinkComponent, KitTextModule, KitTextSubheadingComponent, KitThemeService, KitTimeAgoPipe, KitTopBarComponent, SimpleTableComponent, StackComponent };
+export { KitAppRootComponent, KitAvatarComponent, KitBadgeComponent, KitBaseInputComponent, KitBottomBarComponent, KitBottomSheetComponent, KitButtonComponent, KitButtonGroupComponent, KitButtonGroupItemActiveDirective, KitButtonGroupItemComponent, KitButtonGroupItemIdleDirective, KitButtonModule, KitCardComponent, KitCarouselComponent, KitCenterComponent, KitColumnComponent, KitConstrainedBoxComponent, KitContainerComponent, KitCopyToClipboardDirective, KitDataModule, KitDialogComponent, KitDirectivesModule, KitDividerComponent, KitExpandedComponent, KitFileSizePipe, KitFloatingActionButtonComponent, KitGestureDetectorComponent, KitGridComponent, KitImageComponent, KitImageErrorDirective, KitImageLoadingDirective, KitInputDateComponent, KitInputEmailComponent, KitInputFieldTitleComponent, KitInputModule, KitInputMultiSelectComponent, KitInputNumberComponent, KitInputOtpComponent, KitInputPasswordComponent, KitInputPhoneComponent, KitInputSelectComponent, KitInputTextComponent, KitInputTextareaComponent, KitInputTimeComponent, KitInteractorsModule, KitKMBPipe, KitLayoutModule, KitMediaModule, KitNavigationModule, KitNavigationService, KitOverlaysModule, KitPaddingComponent, KitPageComponent, KitPanelModule, KitPipesModule, KitPositionedComponent, KitPressAndHoldDirective, KitProgressBarComponent, KitRadioButtonComponent, KitRoundButtonComponent, KitRouterOutletComponent, KitRowComponent, KitScreenService, KitSelectItemActiveDirective, KitSelectItemDirective, KitSideMenuComponent, KitSideMenuService, KitSizedBoxComponent, KitSpacerComponent, KitStickyContainerComponent, KitTabContentComponent, KitTabViewComponent, KitTextBodyComponent, KitTextButtonComponent, KitTextCaptionComponent, KitTextDisplayComponent, KitTextHeadingComponent, KitTextLabelComponent, KitTextLinkComponent, KitTextModule, KitTextSubheadingComponent, KitThemeService, KitTimeAgoPipe, KitTopBarComponent, SimpleTableComponent, StackComponent };
 //# sourceMappingURL=openkit-labs-ngx-kit-ui.mjs.map