smt-select 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Samet Acar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# SmtSelect 🚀
+
+A high-performance, lightweight, and customizable **Angular Select Component** with built-in Virtual Scroll and Search capabilities.
+
+## ✨ Features
+
+- **🔍 Searchable**: Quickly filter through thousands of options.
+- **⚡ Virtual Scroll**: Built-in support for high-performance rendering of large datasets.
+- **✅ Multi-Select**: Support for multiple selection out of the box.
+- **🎨 Custom Styling**: Fully customizable via SCSS tokens.
+- **📱 Responsive**: Works seamlessly across mobile and desktop.
+- **🛡️ Type Safe**: Developed with strict TypeScript.
+
+---
+
+## 🚀 Installation
+
+Install the package via npm:
+
+```bash
+npm install smt-select
+```
+
+---
+
+## 📦 Usage
+
+### 1. Component Logic (app.component.ts)
+```typescript
+import { SmtSelectComponent, SmtSelectOption, SmtSelectConfig } from 'smt-select';
+
+@Component({
+  standalone: true,
+  imports: [SmtSelectComponent],
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  myOptions: SmtSelectOption[] = [
+    { value: 1, label: 'Option 1' },
+    { value: 2, label: 'Option 2' },
+    { value: 3, label: 'Option 3' }
+  ];
+  
+  selectConfig: SmtSelectConfig = {
+    placeholder: 'Choose an item...',
+    virtualScroll: true,
+    isMultiSelect: false
+  };
+
+  onSelection(value: any) {
+    console.log('Selected value:', value);
+  }
+}
+```
+
+### 2. Template (app.component.html)
+```html
+<smt-select 
+  [options]="myOptions" 
+  [config]="selectConfig"
+  [(selectedValue)]="currentValue"
+  (selectionChange)="onSelection($event)">
+</smt-select>
+```
+
+---
+
+## ⚙️ API Reference
+
+### Inputs
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `options` | `SmtSelectOption[]` | `[]` | Array of options to display. |
+| `config` | `SmtSelectConfig` | `{}` | Configuration object for the component. |
+| `selectedValue` | `any \| any[]` | `null` | The currently selected value(s). Supports two-way binding. |
+| `errorMessage` | `string \| null` | `undefined` | Error message to display below the component. |
+| `isInvalid` | `boolean` | `false` | Manually trigger error state if `errorMessage` is not provided. |
+| `visibility` | `SmtVisibilityType` | `ENABLED` | Controls accessibility (`ENABLED`, `READONLY`, `HIDDEN`). |
+
+### Outputs
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `selectionChange` | `any \| any[]` | Fired when the selected value changes. |
+| `pocketOpen` | `boolean` | Fired when the dropdown is opened or closed. |
+
+### Configuration (`SmtSelectConfig`)
+| Property | Type | Description |
+|----------|------|-------------|
+| `fieldID` | `string \| number` | Unique ID for the wrapper element. |
+| `placeholder` | `string` | Text to show when no value is selected. |
+| `virtualScroll` | `boolean` | Enable/Disable CDK Virtual Scroll for large datasets. |
+| `isMultiSelect` | `boolean` | Enable multiple item selection. |
+
+---
+
+## 📄 License
+
+MIT © [Samet Acar](LICENSE)

package/fesm2022/smt-select.mjs

@@ -0,0 +1,229 @@
+import * as i0 from '@angular/core';
+import { Pipe, EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { timer, take } from 'rxjs';
+
+var SmtVisibilityType;
+(function (SmtVisibilityType) {
+    SmtVisibilityType["HIDDEN"] = "HIDDEN";
+    SmtVisibilityType["READONLY"] = "READONLY";
+    SmtVisibilityType["ENABLED"] = "ENABLED";
+})(SmtVisibilityType || (SmtVisibilityType = {}));
+
+class SmtSelectSearchFilterPipe {
+    transform(options, searchText) {
+        if (!options)
+            return [];
+        if (!searchText)
+            return options;
+        searchText = searchText.toLowerCase();
+        return options.filter(option => {
+            return option.label.toLowerCase().includes(searchText) ||
+                (typeof option.value === 'string' && option.value.toLowerCase().includes(searchText));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SmtSelectSearchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: SmtSelectSearchFilterPipe, isStandalone: true, name: "smtSelectSearchFilter" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SmtSelectSearchFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'smtSelectSearchFilter',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class SmtSelectComponent {
+    el;
+    renderer;
+    options = [];
+    config = {};
+    selectedValue = null;
+    errorMessage;
+    isInvalid = false;
+    visibility = SmtVisibilityType.ENABLED;
+    selectionChange = new EventEmitter();
+    pocketOpen = new EventEmitter();
+    pocketElement;
+    inputElement;
+    isPocketOpen = false;
+    isOpenReverse = false;
+    searchText = '';
+    clickListener = null;
+    VisibilityType = SmtVisibilityType;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnDestroy() {
+        this.removeOutsideClickListener();
+    }
+    get hasSelection() {
+        if (this.config.isMultiSelect) {
+            return Array.isArray(this.selectedValue) && this.selectedValue.length > 0;
+        }
+        return this.selectedValue !== null && this.selectedValue !== undefined && this.selectedValue !== '';
+    }
+    displayText() {
+        if (!this.hasSelection)
+            return this.config.placeholder || 'Select...';
+        if (this.config.isMultiSelect) {
+            const selectedOptions = this.options.filter(opt => this.selectedValue.includes(opt.value));
+            return selectedOptions.map(opt => opt.label).join(', ');
+        }
+        const selectedOption = this.options.find(opt => opt.value === this.selectedValue);
+        return selectedOption ? selectedOption.label : this.selectedValue;
+    }
+    togglePocket() {
+        if (this.visibility === SmtVisibilityType.READONLY) {
+            return;
+        }
+        if (this.isPocketOpen) {
+            this.closePocket();
+        }
+        else {
+            this.openPocket();
+        }
+    }
+    openPocket() {
+        this.calculateDirection();
+        this.isPocketOpen = true;
+        this.pocketOpen.emit(true);
+        this.searchText = '';
+        this.focusInput();
+        this.addOutsideClickListener();
+    }
+    closePocket() {
+        if (!this.isPocketOpen)
+            return;
+        this.isPocketOpen = false;
+        this.pocketOpen.emit(false);
+        this.removeOutsideClickListener();
+    }
+    addOutsideClickListener() {
+        if (this.clickListener)
+            return;
+        // Only clicks outside can reach the document, so we can close directly
+        this.clickListener = this.renderer.listen('document', 'mousedown', () => {
+            this.closePocket();
+        });
+    }
+    removeOutsideClickListener() {
+        if (this.clickListener) {
+            this.clickListener();
+            this.clickListener = null;
+        }
+    }
+    calculateDirection() {
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        const pocketHeight = 200; // max-height 
+        if (windowHeight - rect.bottom < pocketHeight && rect.top > pocketHeight) {
+            this.isOpenReverse = true;
+        }
+        else {
+            this.isOpenReverse = false;
+        }
+    }
+    focusInput() {
+        timer(100).pipe(take(1)).subscribe(() => {
+            this.inputElement?.nativeElement.focus();
+        });
+    }
+    onBlur() {
+        // Keyboard exit scenarios delay
+        timer(200).pipe(take(1)).subscribe(() => {
+            if (this.isPocketOpen) {
+                this.closePocket();
+            }
+        });
+    }
+    isSelected(option) {
+        if (this.config.isMultiSelect) {
+            return Array.isArray(this.selectedValue) && this.selectedValue.includes(option.value);
+        }
+        return this.selectedValue === option.value;
+    }
+    onEnterPressed() {
+        if (!this.searchText)
+            return;
+        const filtered = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()) ||
+            (typeof option.value === 'string' && option.value.toLowerCase().includes(this.searchText.toLowerCase())));
+        if (filtered.length > 0) {
+            this.selectOption(filtered[0]);
+            this.closePocket();
+            if (this.config.isMultiSelect) {
+                this.searchText = '';
+            }
+        }
+    }
+    selectOption(option, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.config.isMultiSelect) {
+            if (!Array.isArray(this.selectedValue)) {
+                this.selectedValue = [];
+            }
+            const index = this.selectedValue.indexOf(option.value);
+            if (index > -1) {
+                this.selectedValue.splice(index, 1);
+            }
+            else {
+                this.selectedValue.push(option.value);
+            }
+            // View update for spread or slice 
+            this.selectedValue = [...this.selectedValue];
+        }
+        else {
+            this.selectedValue = option.value;
+        }
+        this.closePocket();
+        this.selectionChange.emit(this.selectedValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SmtSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SmtSelectComponent, isStandalone: true, selector: "smt-select", inputs: { options: "options", config: "config", selectedValue: "selectedValue", errorMessage: "errorMessage", isInvalid: "isInvalid", visibility: "visibility" }, outputs: { selectionChange: "selectionChange", pocketOpen: "pocketOpen" }, viewQueries: [{ propertyName: "pocketElement", first: true, predicate: ["pocket"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"visibility !== VisibilityType.HIDDEN\" class=\"smt-select-wrapper\" [id]=\"config.fieldID || ''\"\r\n  (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n  <div class=\"smt-select-control\" (click)=\"togglePocket()\" [class.disabled]=\"visibility === VisibilityType.READONLY\"\r\n    [class.error]=\"errorMessage ? true : (errorMessage === undefined ? isInvalid : false)\">\r\n\r\n    <!-- Search Input -->\r\n    <input #input *ngIf=\"isPocketOpen\" [(ngModel)]=\"searchText\" (click)=\"$event.stopPropagation()\"\r\n      (keydown.enter)=\"onEnterPressed()\" (blur)=\"onBlur()\" class=\"smt-select-input\"\r\n      [placeholder]=\"config.placeholder || 'Select...'\">\r\n\r\n    <!-- Selected Value Display -->\r\n    <ng-container *ngIf=\"!isPocketOpen\">\r\n      <span class=\"select-value\" [class.placeholder]=\"!hasSelection\">\r\n        {{ displayText() }}\r\n      </span>\r\n    </ng-container>\r\n\r\n    <div class=\"arrow-icon\" [class.up]=\"isPocketOpen\"></div>\r\n  </div>\r\n\r\n  <!-- Dropdown (Pocket) -->\r\n  <div #pocket *ngIf=\"isPocketOpen\" class=\"smt-select-pocket\" [class.open-reverse]=\"isOpenReverse\">\r\n\r\n    <!-- Standard List -->\r\n    <ul *ngIf=\"!config.virtualScroll\">\r\n      <li *ngFor=\"let option of options | smtSelectSearchFilter: searchText\" (click)=\"selectOption(option, $event)\"\r\n        class=\"smt-select-option\" [class.active]=\"isSelected(option)\">\r\n\r\n        <div *ngIf=\"config.isMultiSelect\" class=\"checkbox-container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n\r\n        <span>{{ option.label }}</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Virtual Scroll -->\r\n    <cdk-virtual-scroll-viewport *ngIf=\"config.virtualScroll\" itemSize=\"34\" class=\"virtual-scroll-viewport\">\r\n      <div *cdkVirtualFor=\"let option of options | smtSelectSearchFilter: searchText\" class=\"smt-select-option\"\r\n        (click)=\"selectOption(option, $event)\" [class.active]=\"isSelected(option)\">\r\n\r\n        <div *ngIf=\"config.isMultiSelect\" class=\"checkbox-container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n\r\n        <span>{{ option.label }}</span>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n</div>", styles: [".smt-select-wrapper{position:relative;width:100%;font-family:Arial,sans-serif;box-sizing:border-box}.smt-select-wrapper *{box-sizing:border-box}.smt-select-control{display:flex;align-items:center;min-height:34px;border:1px solid #ccc;padding:4px 8px;background:#fff;cursor:pointer;position:relative}.smt-select-control.disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.smt-select-control.error{border-color:#d9534f}.smt-select-control.error:focus-within{box-shadow:0 0 0 2px #d9534f33}.smt-select-control .select-value{font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smt-select-control .select-value.placeholder{color:#999;font-style:italic}.smt-select-control .smt-select-input{border:none;outline:none;width:100%;font-size:13px;padding:0;background:transparent}.smt-select-control .smt-select-input::placeholder{color:#999;font-style:italic}.smt-select-control .arrow-icon{margin-left:auto;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #666;transition:transform .2s}.smt-select-control .arrow-icon.up{transform:rotate(180deg)}.smt-select-pocket{position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #ccc;border-top:none;z-index:1000;max-height:200px;box-shadow:0 4px 6px #0000001a}.smt-select-pocket:has(ul){overflow-y:auto}.smt-select-pocket.open-reverse{top:auto;bottom:100%;border-top:1px solid #ccc;border-bottom:none}.smt-select-pocket .smt-select-option{padding:8px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center}.smt-select-pocket .smt-select-option:hover{background-color:#f0faff}.smt-select-pocket .smt-select-option.active{background-color:#005f87;color:#fff}.smt-select-pocket .smt-select-option .checkbox-container{margin-right:8px;display:flex;align-items:center}.smt-select-pocket ul{list-style:none;padding:0;margin:0}.virtual-scroll-viewport{height:200px;width:100%;outline:none}.error-message{color:#d9534f;font-size:11px;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: SmtSelectSearchFilterPipe, name: "smtSelectSearchFilter" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SmtSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smt-select', standalone: true, imports: [CommonModule, FormsModule, ScrollingModule, SmtSelectSearchFilterPipe], template: "<div *ngIf=\"visibility !== VisibilityType.HIDDEN\" class=\"smt-select-wrapper\" [id]=\"config.fieldID || ''\"\r\n  (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n  <div class=\"smt-select-control\" (click)=\"togglePocket()\" [class.disabled]=\"visibility === VisibilityType.READONLY\"\r\n    [class.error]=\"errorMessage ? true : (errorMessage === undefined ? isInvalid : false)\">\r\n\r\n    <!-- Search Input -->\r\n    <input #input *ngIf=\"isPocketOpen\" [(ngModel)]=\"searchText\" (click)=\"$event.stopPropagation()\"\r\n      (keydown.enter)=\"onEnterPressed()\" (blur)=\"onBlur()\" class=\"smt-select-input\"\r\n      [placeholder]=\"config.placeholder || 'Select...'\">\r\n\r\n    <!-- Selected Value Display -->\r\n    <ng-container *ngIf=\"!isPocketOpen\">\r\n      <span class=\"select-value\" [class.placeholder]=\"!hasSelection\">\r\n        {{ displayText() }}\r\n      </span>\r\n    </ng-container>\r\n\r\n    <div class=\"arrow-icon\" [class.up]=\"isPocketOpen\"></div>\r\n  </div>\r\n\r\n  <!-- Dropdown (Pocket) -->\r\n  <div #pocket *ngIf=\"isPocketOpen\" class=\"smt-select-pocket\" [class.open-reverse]=\"isOpenReverse\">\r\n\r\n    <!-- Standard List -->\r\n    <ul *ngIf=\"!config.virtualScroll\">\r\n      <li *ngFor=\"let option of options | smtSelectSearchFilter: searchText\" (click)=\"selectOption(option, $event)\"\r\n        class=\"smt-select-option\" [class.active]=\"isSelected(option)\">\r\n\r\n        <div *ngIf=\"config.isMultiSelect\" class=\"checkbox-container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n\r\n        <span>{{ option.label }}</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Virtual Scroll -->\r\n    <cdk-virtual-scroll-viewport *ngIf=\"config.virtualScroll\" itemSize=\"34\" class=\"virtual-scroll-viewport\">\r\n      <div *cdkVirtualFor=\"let option of options | smtSelectSearchFilter: searchText\" class=\"smt-select-option\"\r\n        (click)=\"selectOption(option, $event)\" [class.active]=\"isSelected(option)\">\r\n\r\n        <div *ngIf=\"config.isMultiSelect\" class=\"checkbox-container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n\r\n        <span>{{ option.label }}</span>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n</div>", styles: [".smt-select-wrapper{position:relative;width:100%;font-family:Arial,sans-serif;box-sizing:border-box}.smt-select-wrapper *{box-sizing:border-box}.smt-select-control{display:flex;align-items:center;min-height:34px;border:1px solid #ccc;padding:4px 8px;background:#fff;cursor:pointer;position:relative}.smt-select-control.disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.smt-select-control.error{border-color:#d9534f}.smt-select-control.error:focus-within{box-shadow:0 0 0 2px #d9534f33}.smt-select-control .select-value{font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smt-select-control .select-value.placeholder{color:#999;font-style:italic}.smt-select-control .smt-select-input{border:none;outline:none;width:100%;font-size:13px;padding:0;background:transparent}.smt-select-control .smt-select-input::placeholder{color:#999;font-style:italic}.smt-select-control .arrow-icon{margin-left:auto;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #666;transition:transform .2s}.smt-select-control .arrow-icon.up{transform:rotate(180deg)}.smt-select-pocket{position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #ccc;border-top:none;z-index:1000;max-height:200px;box-shadow:0 4px 6px #0000001a}.smt-select-pocket:has(ul){overflow-y:auto}.smt-select-pocket.open-reverse{top:auto;bottom:100%;border-top:1px solid #ccc;border-bottom:none}.smt-select-pocket .smt-select-option{padding:8px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center}.smt-select-pocket .smt-select-option:hover{background-color:#f0faff}.smt-select-pocket .smt-select-option.active{background-color:#005f87;color:#fff}.smt-select-pocket .smt-select-option .checkbox-container{margin-right:8px;display:flex;align-items:center}.smt-select-pocket ul{list-style:none;padding:0;margin:0}.virtual-scroll-viewport{height:200px;width:100%;outline:none}.error-message{color:#d9534f;font-size:11px;margin-top:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { options: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], isInvalid: [{
+                type: Input
+            }], visibility: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], pocketOpen: [{
+                type: Output
+            }], pocketElement: [{
+                type: ViewChild,
+                args: ['pocket']
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+/*
+ * Public API Surface of smt-select
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SmtSelectComponent, SmtVisibilityType };
+//# sourceMappingURL=smt-select.mjs.map

package/fesm2022/smt-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"smt-select.mjs","sources":["../../../projects/smt-select/src/lib/models/index.ts","../../../projects/smt-select/src/lib/pipes/smt-select-search-filter.pipe.ts","../../../projects/smt-select/src/lib/components/smt-select/smt-select.component.ts","../../../projects/smt-select/src/lib/components/smt-select/smt-select.component.html","../../../projects/smt-select/src/public-api.ts","../../../projects/smt-select/src/smt-select.ts"],"sourcesContent":["export interface SmtSelectOption {\r\n  value: any;\r\n  label: string;\r\n  [key: string]: any;\r\n}\r\n\r\nexport enum SmtVisibilityType {\r\n  HIDDEN = 'HIDDEN',\r\n  READONLY = 'READONLY',\r\n  ENABLED = 'ENABLED'\r\n}\r\n\r\nexport interface SmtSelectConfig {\r\n  fieldID?: string | number;\r\n  placeholder?: string;\r\n  virtualScroll?: boolean;\r\n  isMultiSelect?: boolean;\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { SmtSelectOption } from '../models';\r\n\r\n@Pipe({\r\n    name: 'smtSelectSearchFilter',\r\n    standalone: true,\r\n    pure: true\r\n})\r\nexport class SmtSelectSearchFilterPipe implements PipeTransform {\r\n    transform(options: SmtSelectOption[], searchText: string): SmtSelectOption[] {\r\n        if (!options) return [];\r\n        if (!searchText) return options;\r\n\r\n        searchText = searchText.toLowerCase();\r\n\r\n        return options.filter(option => {\r\n            return option.label.toLowerCase().includes(searchText) ||\r\n                (typeof option.value === 'string' && option.value.toLowerCase().includes(searchText));\r\n        });\r\n    }\r\n}\r\n","import {\r\n    Component, Input, Output, EventEmitter,\r\n    ElementRef, Renderer2, ViewChild, OnDestroy\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { ScrollingModule } from '@angular/cdk/scrolling';\r\nimport {\r\n    SmtSelectOption, SmtSelectConfig,\r\n    SmtVisibilityType\r\n} from '../../models';\r\nimport { SmtSelectSearchFilterPipe } from '../../pipes/smt-select-search-filter.pipe';\r\nimport { timer, take } from 'rxjs';\r\n\r\n@Component({\r\n    selector: 'smt-select',\r\n    standalone: true,\r\n    imports: [CommonModule, FormsModule, ScrollingModule, SmtSelectSearchFilterPipe],\r\n    templateUrl: './smt-select.component.html',\r\n    styleUrls: ['./smt-select.component.scss']\r\n})\r\nexport class SmtSelectComponent implements OnDestroy {\r\n    @Input() options: SmtSelectOption[] = [];\r\n    @Input() config: SmtSelectConfig = {};\r\n    @Input() selectedValue: any | any[] = null;\r\n    @Input() errorMessage?: string | null;\r\n    @Input() isInvalid = false;\r\n    @Input() visibility: SmtVisibilityType = SmtVisibilityType.ENABLED;\r\n\r\n    @Output() selectionChange = new EventEmitter<any | any[]>();\r\n    @Output() pocketOpen = new EventEmitter<boolean>();\r\n\r\n    @ViewChild('pocket') pocketElement!: ElementRef;\r\n    @ViewChild('input') inputElement!: ElementRef;\r\n\r\n    isPocketOpen = false;\r\n    isOpenReverse = false;\r\n    searchText = '';\r\n\r\n    private clickListener: (() => void) | null = null;\r\n    public VisibilityType = SmtVisibilityType;\r\n\r\n    constructor(private el: ElementRef, private renderer: Renderer2) { }\r\n\r\n    ngOnDestroy(): void {\r\n        this.removeOutsideClickListener();\r\n    }\r\n\r\n    get hasSelection(): boolean {\r\n        if (this.config.isMultiSelect) {\r\n            return Array.isArray(this.selectedValue) && this.selectedValue.length > 0;\r\n        }\r\n        return this.selectedValue !== null && this.selectedValue !== undefined && this.selectedValue !== '';\r\n    }\r\n\r\n    displayText(): string {\r\n        if (!this.hasSelection) return this.config.placeholder || 'Select...';\r\n\r\n        if (this.config.isMultiSelect) {\r\n            const selectedOptions = this.options.filter(opt =>\r\n                (this.selectedValue as any[]).includes(opt.value)\r\n            );\r\n            return selectedOptions.map(opt => opt.label).join(', ');\r\n        }\r\n\r\n        const selectedOption = this.options.find(opt => opt.value === this.selectedValue);\r\n        return selectedOption ? selectedOption.label : (this.selectedValue as string);\r\n    }\r\n\r\n    togglePocket(): void {\r\n        if (this.visibility === SmtVisibilityType.READONLY) {\r\n            return;\r\n        }\r\n\r\n        if (this.isPocketOpen) {\r\n            this.closePocket();\r\n        } else {\r\n            this.openPocket();\r\n        }\r\n    }\r\n\r\n    private openPocket(): void {\r\n        this.calculateDirection();\r\n        this.isPocketOpen = true;\r\n        this.pocketOpen.emit(true);\r\n        this.searchText = '';\r\n        this.focusInput();\r\n        this.addOutsideClickListener();\r\n    }\r\n\r\n    private closePocket(): void {\r\n        if (!this.isPocketOpen) return;\r\n        this.isPocketOpen = false;\r\n        this.pocketOpen.emit(false);\r\n        this.removeOutsideClickListener();\r\n    }\r\n\r\n    private addOutsideClickListener(): void {\r\n        if (this.clickListener) return;\r\n\r\n        // Only clicks outside can reach the document, so we can close directly\r\n        this.clickListener = this.renderer.listen('document', 'mousedown', () => {\r\n            this.closePocket();\r\n        });\r\n    }\r\n\r\n    private removeOutsideClickListener(): void {\r\n        if (this.clickListener) {\r\n            this.clickListener();\r\n            this.clickListener = null;\r\n        }\r\n    }\r\n\r\n    private calculateDirection(): void {\r\n        const rect = this.el.nativeElement.getBoundingClientRect();\r\n        const windowHeight = window.innerHeight;\r\n        const pocketHeight = 200; // max-height \r\n\r\n        if (windowHeight - rect.bottom < pocketHeight && rect.top > pocketHeight) {\r\n            this.isOpenReverse = true;\r\n        } else {\r\n            this.isOpenReverse = false;\r\n        }\r\n    }\r\n\r\n    private focusInput(): void {\r\n        timer(100).pipe(take(1)).subscribe(() => {\r\n            this.inputElement?.nativeElement.focus();\r\n        });\r\n    }\r\n\r\n    onBlur(): void {\r\n        // Keyboard exit scenarios delay\r\n        timer(200).pipe(take(1)).subscribe(() => {\r\n            if (this.isPocketOpen) {\r\n                this.closePocket();\r\n            }\r\n        });\r\n    }\r\n\r\n    isSelected(option: SmtSelectOption): boolean {\r\n        if (this.config.isMultiSelect) {\r\n            return Array.isArray(this.selectedValue) && this.selectedValue.includes(option.value);\r\n        }\r\n        return this.selectedValue === option.value;\r\n    }\r\n\r\n    onEnterPressed(): void {\r\n        if (!this.searchText) return;\r\n\r\n        const filtered = this.options.filter(option =>\r\n            option.label.toLowerCase().includes(this.searchText.toLowerCase()) ||\r\n            (typeof option.value === 'string' && option.value.toLowerCase().includes(this.searchText.toLowerCase()))\r\n        );\r\n\r\n        if (filtered.length > 0) {\r\n            this.selectOption(filtered[0]);\r\n            this.closePocket();\r\n            if (this.config.isMultiSelect) {\r\n                this.searchText = '';\r\n            }\r\n        }\r\n    }\r\n\r\n    selectOption(option: SmtSelectOption, event?: MouseEvent): void {\r\n        if (event) {\r\n            event.stopPropagation();\r\n        }\r\n\r\n        if (this.config.isMultiSelect) {\r\n            if (!Array.isArray(this.selectedValue)) {\r\n                this.selectedValue = [];\r\n            }\r\n\r\n            const index = this.selectedValue.indexOf(option.value);\r\n            if (index > -1) {\r\n                this.selectedValue.splice(index, 1);\r\n            } else {\r\n                this.selectedValue.push(option.value);\r\n            }\r\n\r\n            // View update for spread or slice \r\n            this.selectedValue = [...this.selectedValue];\r\n        } else {\r\n            this.selectedValue = option.value;\r\n        }\r\n\r\n        this.closePocket();\r\n        this.selectionChange.emit(this.selectedValue);\r\n    }\r\n}\r\n","<div *ngIf=\"visibility !== VisibilityType.HIDDEN\" class=\"smt-select-wrapper\" [id]=\"config.fieldID || ''\"\r\n  (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n  <div class=\"smt-select-control\" (click)=\"togglePocket()\" [class.disabled]=\"visibility === VisibilityType.READONLY\"\r\n    [class.error]=\"errorMessage ? true : (errorMessage === undefined ? isInvalid : false)\">\r\n\r\n    <!-- Search Input -->\r\n    <input #input *ngIf=\"isPocketOpen\" [(ngModel)]=\"searchText\" (click)=\"$event.stopPropagation()\"\r\n      (keydown.enter)=\"onEnterPressed()\" (blur)=\"onBlur()\" class=\"smt-select-input\"\r\n      [placeholder]=\"config.placeholder || 'Select...'\">\r\n\r\n    <!-- Selected Value Display -->\r\n    <ng-container *ngIf=\"!isPocketOpen\">\r\n      <span class=\"select-value\" [class.placeholder]=\"!hasSelection\">\r\n        {{ displayText() }}\r\n      </span>\r\n    </ng-container>\r\n\r\n    <div class=\"arrow-icon\" [class.up]=\"isPocketOpen\"></div>\r\n  </div>\r\n\r\n  <!-- Dropdown (Pocket) -->\r\n  <div #pocket *ngIf=\"isPocketOpen\" class=\"smt-select-pocket\" [class.open-reverse]=\"isOpenReverse\">\r\n\r\n    <!-- Standard List -->\r\n    <ul *ngIf=\"!config.virtualScroll\">\r\n      <li *ngFor=\"let option of options | smtSelectSearchFilter: searchText\" (click)=\"selectOption(option, $event)\"\r\n        class=\"smt-select-option\" [class.active]=\"isSelected(option)\">\r\n\r\n        <div *ngIf=\"config.isMultiSelect\" class=\"checkbox-container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n\r\n        <span>{{ option.label }}</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Virtual Scroll -->\r\n    <cdk-virtual-scroll-viewport *ngIf=\"config.virtualScroll\" itemSize=\"34\" class=\"virtual-scroll-viewport\">\r\n      <div *cdkVirtualFor=\"let option of options | smtSelectSearchFilter: searchText\" class=\"smt-select-option\"\r\n        (click)=\"selectOption(option, $event)\" [class.active]=\"isSelected(option)\">\r\n\r\n        <div *ngIf=\"config.isMultiSelect\" class=\"checkbox-container\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n\r\n        <span>{{ option.label }}</span>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n</div>","/*\r\n * Public API Surface of smt-select\r\n */\r\n\r\nexport * from './lib/models';\r\nexport * from './lib/components/smt-select/smt-select.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "smt-select",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Samet Acar",
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "keywords": [
+    "angular-dropdown-select",
+    "Angular Dropdown Select",
+    "Angular Selectbox",
+    "Angular Select",
+    "angular select",
+    "Angular Dropdown",
+    "Dropdown Select",
+    "Virtual Scroll",
+    "Virtual Scroll Select",
+    "Dropdown",
+    "angular",
+    "ng",
+    "Angular",
+    "dropdown",
+    "select",
+    "multi-select",
+    "javascript",
+    "typescript"
+  ],
+  "sideEffects": false,
+  "module": "fesm2022/smt-select.mjs",
+  "typings": "types/smt-select.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/smt-select.d.ts",
+      "default": "./fesm2022/smt-select.mjs"
+    }
+  }
+}

package/types/smt-select.d.ts

@@ -0,0 +1,59 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, EventEmitter, ElementRef, Renderer2 } from '@angular/core';
+
+interface SmtSelectOption {
+    value: any;
+    label: string;
+    [key: string]: any;
+}
+declare enum SmtVisibilityType {
+    HIDDEN = "HIDDEN",
+    READONLY = "READONLY",
+    ENABLED = "ENABLED"
+}
+interface SmtSelectConfig {
+    fieldID?: string | number;
+    placeholder?: string;
+    virtualScroll?: boolean;
+    isMultiSelect?: boolean;
+}
+
+declare class SmtSelectComponent implements OnDestroy {
+    private el;
+    private renderer;
+    options: SmtSelectOption[];
+    config: SmtSelectConfig;
+    selectedValue: any | any[];
+    errorMessage?: string | null;
+    isInvalid: boolean;
+    visibility: SmtVisibilityType;
+    selectionChange: EventEmitter<any>;
+    pocketOpen: EventEmitter<boolean>;
+    pocketElement: ElementRef;
+    inputElement: ElementRef;
+    isPocketOpen: boolean;
+    isOpenReverse: boolean;
+    searchText: string;
+    private clickListener;
+    VisibilityType: typeof SmtVisibilityType;
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnDestroy(): void;
+    get hasSelection(): boolean;
+    displayText(): string;
+    togglePocket(): void;
+    private openPocket;
+    private closePocket;
+    private addOutsideClickListener;
+    private removeOutsideClickListener;
+    private calculateDirection;
+    private focusInput;
+    onBlur(): void;
+    isSelected(option: SmtSelectOption): boolean;
+    onEnterPressed(): void;
+    selectOption(option: SmtSelectOption, event?: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmtSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmtSelectComponent, "smt-select", never, { "options": { "alias": "options"; "required": false; }; "config": { "alias": "config"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "isInvalid": { "alias": "isInvalid"; "required": false; }; "visibility": { "alias": "visibility"; "required": false; }; }, { "selectionChange": "selectionChange"; "pocketOpen": "pocketOpen"; }, never, never, true, never>;
+}
+
+export { SmtSelectComponent, SmtVisibilityType };
+export type { SmtSelectConfig, SmtSelectOption };