my-km-components 0.0.1

package/README.md

@@ -0,0 +1,117 @@
+# My KM Components Library
+
+A library of reusable UI components for Angular applications.
+
+## Setup
+
+**Tip:** In your `styles.scss` (or `styles.css`), make sure to include the `ng-select` theme:
+
+```scss
+@use '@ng-select/ng-select/themes/default.theme.css' as ng-select-theme;
+```
+
+## Component Usage
+
+### `<km-select>`
+
+A wrapper around `ng-select` providing integration with signal-based form controls.
+
+**Inputs / Models:**
+
+- `value` (`ModelSignal<string | number | null>`)
+- `items` (`required`): Array of options to select from.
+- `bindLabel` (default: `'label'`): Object property to use for label.
+- `bindValue` (default: `'value'`): Object property to use for value.
+- `multiple` (default: `true`): Allows multiple selection.
+- `searchable` (default: `true`): Enables searching within the dropdown.
+- `clearable` (default: `true`): Enables clearing the value.
+- `placeholder` (default: `'Select...'`)
+- `label` (default: `'Label'`)
+- `limit` (default: `3`): Max visible tags.
+- `invalid`, `touched`, `disabled`, `readonly`, `errors`: Control state and validation flags.
+
+### `<km-input>`
+
+A standard input component with label and tooltip support.
+
+**Inputs / Models:**
+
+- `value` (`ModelSignal<string | null>`)
+- `inputType` (default: `'text'`): HTML input type.
+- `placeholder` (default: `'Εισάγετε μια τιμή'`)
+- `label` (default: `'Label'`)
+- `showLabel` (default: `true`): Whether to display the label.
+- `formControlSize` (default: `'sm'`): Sizing class suffix for `ng-bootstrap`.
+- `invalid`, `touched`, `disabled`, `required`, `errors`: Control state flags.
+
+### `<km-color-combo>`
+
+A color picker and input combo that automatically adjusts text contrast based on the background color.
+
+**Inputs / Models:**
+
+- `value` (`ModelSignal<string | null>`)
+- `label` (default: `'Label'`)
+- `showLabel` (default: `true`): Whether to display the label.
+- `invalid`, `touched`, `disabled`, `required`, `errors`: Control state flags.
+
+### `<km-input-group>`
+
+An input group component with an optional action button and icons.
+
+**Inputs / Models:**
+
+- `value` (`ModelSignal<number | null>`)
+- `type` (default: `'text'`): Input type.
+- `placeholder` (default: `'Εισάγετε τιμή'`)
+- `label` (default: `'Label'`)
+- `addonText`: Text for the input group addon label.
+- `icon`: Icon class for the action button.
+- `buttonClass`: Class name for the action button styling.
+- `invalid`, `required`, `touched`, `disabled`, `readOnly`, `errors`: Control state flags.
+
+**Outputs:**
+
+- `actionClicked`: Emitted when the action button is clicked.
+
+### `<km-modal>`
+
+A customizable modal layout wrapper component with standard actions (Save, Cancel, Close, Reset).
+
+**Inputs:**
+
+- `title` (default: `'Τίτλος παραθύρου'`)
+- `showSave` (default: `true`): Shows the Save button.
+- `showReset` (default: `false`): Shows the Reset button.
+- `showClose` (default: `'Κλείσιμο'`): Acts as standard close label toggle.
+- `saveLabel` (default: `'Αποθήκευση'`)
+- `cancelLabel` (default: `'Ακύρωση'`)
+- `closeLabel` (default: `'Κλείσιμο'`)
+- `resetLabel` (default: `'Επαναφορά'`)
+- `saveDisabled` (default: `false`): Disables the Save button when true.
+
+**Outputs:**
+
+- `save`: Emitted on Save button click.
+- `cancel`: Emitted on Cancel button click.
+- `reset`: Emitted on Reset button click.
+- `closeClicked`: Emitted on Close button click.
+
+### `<km-generic-card>`
+
+A card component that is collapsible, supports custom action buttons, and can emit events back.
+
+**Inputs / Signals:**
+
+- `panelTitle`: The title text of the panel.
+- `subtitle`: The subtitle text.
+- `visible` (default: `true`): Initial visibility flag.
+- `isCollapsed` (`Signal<boolean>`): Signal controlling the collapse state.
+- `isVisible` (`Signal<boolean>`): Signal controlling the modal visibility state.
+- `showBackButton` (default: `false`): Shows a back button if true.
+- `buttons`: Card buttons model implementing `KmGenericCardInterface`.
+
+**Outputs:**
+
+- `clicked`: Emitted on the main action button click.
+- `backClicked`: Emitted on the back button click.

package/assets/sass/_corner-focus.scss

@@ -0,0 +1,50 @@
+$corner-color: var(--bs-primary, #0d6efd) !default;
+$corner-size: 10px !default;
+$corner-border: 2px solid $corner-color !default;
+
+@mixin corner-focus-indicators {
+	position: relative;
+
+	.corner {
+		position: absolute;
+		width: $corner-size;
+		height: $corner-size;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		pointer-events: none;
+		z-index: 1;
+
+		&.top-left {
+			top: 0;
+			left: 0;
+			border-top: $corner-border;
+			border-left: $corner-border;
+		}
+
+		&.top-right {
+			top: 0;
+			right: 0;
+			border-top: $corner-border;
+			border-right: $corner-border;
+		}
+
+		&.bottom-left {
+			bottom: 0;
+			left: 0;
+			border-bottom: $corner-border;
+			border-left: $corner-border;
+		}
+
+		&.bottom-right {
+			bottom: 0;
+			right: 0;
+			border-bottom: $corner-border;
+			border-right: $corner-border;
+		}
+	}
+
+	input:focus~.corner,
+	textarea:focus~.corner {
+		opacity: 1;
+	}
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/my-km-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "my-km-components",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@ng-select/ng-select": "^21.7.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/viverosimo/km-components.git"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@ng-select/ng-select": "^21.7.0"
+  },
+  "sideEffects": false
+}

package/services/km.service.ts

@@ -0,0 +1,14 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable()
+export class KmService {
+  private loading = signal<boolean>(false);
+
+  getLoading(): boolean {
+    return this.loading();
+  }
+
+  setLoading(value: boolean): void {
+    this.loading.set(value);
+  }
+}

package/src/directives/km-block.directive.ts

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, effect, inject, input, Renderer2 } from '@angular/core'
+
+@Directive({
+    selector: '[KmBlockUI]',
+})
+export class KmBlockDirective {
+    KmBlockUI = input<boolean>(false)
+    private el = inject(ElementRef)
+    private renderer = inject(Renderer2)
+
+    constructor() {
+        this.renderer.setStyle(this.el.nativeElement, 'position', 'relative')
+        effect(() => {
+            this.KmBlockUI() ? this.block() : this.unblock()
+        })
+    }
+
+    private block() {
+        this.renderer.addClass(this.el.nativeElement, 'block-loading')
+
+        // Create the overlay div
+        const overlay = this.renderer.createElement('div')
+        this.renderer.addClass(overlay, 'block-overlay')
+        this.renderer.setAttribute(overlay, 'id', 'block-overlay-node')
+
+        // Optional: Add a spinner icon or text
+        overlay.innerHTML = '<div class="spinner"></div>'
+
+        this.renderer.appendChild(this.el.nativeElement, overlay)
+    }
+
+    private unblock() {
+        this.renderer.removeClass(this.el.nativeElement, 'block-loading')
+        const overlay = this.el.nativeElement.querySelector('#block-overlay-node')
+        if (overlay) {
+            this.renderer.removeChild(this.el.nativeElement, overlay)
+        }
+    }
+}

package/src/directives/km-block.style.scss

@@ -0,0 +1,41 @@
+/* The container gets a slight blur/grayscale effect */
+.block-loading {
+	pointer-events: none;
+	/* Prevents clicks on buttons/inputs inside */
+	user-select: none;
+}
+
+.block-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(255, 255, 255, 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	border-radius: inherit;
+	/* Matches the parent's corners */
+}
+
+/* A simple CSS spinner */
+.spinner {
+	width: 30px;
+	height: 30px;
+	border: 4px solid #f3f3f3;
+	border-top: 4px solid #3498db;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/src/lib/km-color-combo/km-color-combo.component.html

@@ -0,0 +1,28 @@
+<div class="mb-2">
+  @if (showLabel()) {
+    <label class="form-label fw-700"
+      >{{ label() }}
+      @if (required()) {
+        <span class="text-danger" ngbTooltip="Είναι υποχρεωτικό" triggers="hover">*</span>
+      }
+    </label>
+  }
+
+  <div class="input-group input-group-sm">
+    <input
+      type="color"
+      class="form-control form-control-color"
+      (input)="change($event)"
+      [value]="value()"
+      title="Επιλέξτε χρώμα"
+      (blur)="touched.set(true)"
+    />
+    <span
+      class="input-group-text font-monospace"
+      [style.backgroundColor]="value()"
+      [style.color]="getTextColor(value() ?? '')"
+    >
+      {{ value() }}
+    </span>
+  </div>
+</div>

package/src/lib/km-color-combo/km-color-combo.component.ts

@@ -0,0 +1,52 @@
+import { Component, computed, input, model } from '@angular/core'
+import { FormValueControl, ValidationError } from '@angular/forms/signals'
+
+@Component({
+    selector: 'km-color-combo',
+    imports: [],
+    templateUrl: './km-color-combo.component.html',
+    styleUrl: './km-color-combo.component.scss',
+})
+export class KmColorComboComponent implements FormValueControl<string | null> {
+    readonly value = model<string | null>(null)
+
+    readonly invalid = input<boolean>(false)
+    readonly touched = model<boolean>(false)
+    readonly disabled = input<boolean>(false)
+    readonly required = input<boolean>(false)
+    readonly errors = input<readonly ValidationError[]>([])
+
+    showLabel = input<boolean>(true)
+    label = input<string>('Label')
+
+    getTextColor(hexColor: string): string {
+        if (!hexColor) return '#000000' // Default to black if no color
+
+        // Remove the '#' if it exists
+        const hex = hexColor.replace('#', '')
+
+        // Convert 3-char hex to 6-char if needed (e.g., #abc to #aabbcc)
+        const fullHex =
+            hex.length === 3
+                ? hex
+                      .split('')
+                      .map((c) => c + c)
+                      .join('')
+                : hex
+
+        // Parse the RGB values
+        const r = parseInt(fullHex.substring(0, 2), 16)
+        const g = parseInt(fullHex.substring(2, 4), 16)
+        const b = parseInt(fullHex.substring(4, 6), 16)
+
+        // Calculate YIQ contrast (Standard formula for human eye brightness perception)
+        const yiq = (r * 299 + g * 587 + b * 114) / 1000
+
+        // If the background is light (yiq >= 128), return black text. Otherwise, white text.
+        return yiq >= 128 ? '#000000' : '#ffffff'
+    }
+
+    change(event: any) {
+        this.value.set(event.target.value)
+    }
+}

package/src/lib/km-generic-card/km-generic-card.html

@@ -0,0 +1,49 @@
+<div class="panel" [KmBlockUI]="service.getLoading()">
+  <div class="panel-hdr">
+    <h2>
+      {{ panelTitle() }}
+      <span class="fw-300"
+        ><i>{{ subtitle() }}</i></span
+      >
+    </h2>
+    <div class="panel-toolbar">
+      @for (button of buttons()?.buttons; track $index) {
+        <button
+          (click)="button.clicked()"
+          [disabled]="button.disabled"
+          [ngbTooltip]="button.tooltip"
+          triggers="hover"
+          class="btn {{
+            button.color
+          }} btn-sm btn-icon rounded-circle waves-effect waves-themed gap-5"
+        >
+          <i [class]="button.icon"></i>
+        </button>
+      }
+      @if (showBackButton()) {
+        <button
+          (click)="backClicked.emit()"
+          ngbTooltip="Επιστροφή"
+          triggers="hover"
+          class="btn btn-dark btn-sm btn-icon rounded-circle waves-effect waves-themed"
+        >
+          <i class="fa-light fa-arrow-left"></i>
+        </button>
+      }
+
+      <button
+        (click)="toggleCollapse()"
+        ngbTooltip="{{ isCollapsed() ? 'Ανοιγμα' : 'Κλεισιμο' }}"
+        class="btn btn-outline-dark btn-sm btn-icon rounded-circle waves-effect waves-themed"
+      >
+        <i [class]="isCollapsed() ? 'fa-light fa-plus' : 'fa-light fa-minus'"></i>
+      </button>
+    </div>
+  </div>
+
+  <div class="panel-container" [class.show]="!isCollapsed()" [hidden]="isCollapsed()">
+    <div class="panel-content">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/src/lib/km-generic-card/km-generic-card.interface.ts

@@ -0,0 +1,16 @@
+export interface KmGenericCardInterface {
+    title: string
+    subtitle: string
+    isCollapsed: boolean
+    isVisible: boolean
+    buttons: KmGenericCardButtonInterface[]
+}
+
+export interface KmGenericCardButtonInterface {
+    label: string
+    tooltip: string
+    icon: string
+    color: string
+    clicked: () => void
+    disabled?: boolean
+}

package/src/lib/km-generic-card/km-generic-card.scss

@@ -0,0 +1,15 @@
+:host {
+    .panel-toolbar {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        padding: 0;
+        align-items: center; /* Centers items vertically in the container */
+        justify-content: start; /* Optional: centers the group horizontally in the cell */
+        margin-right: 15px;
+    }
+    .panel-content {
+        overflow-x: scroll;
+        max-height: calc(100vh - 200px);
+    }
+}

package/src/lib/km-generic-card/km-generic-card.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, inject, input, output, signal } from '@angular/core';
+import { KmGenericCardButtonInterface, KmGenericCardInterface } from './km-generic-card.interface';
+import { CommonModule } from '@angular/common';
+import { KmService } from '../../../services/km.service';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { KmBlockDirective } from '../../directives/km-block.directive';
+
+@Component({
+  selector: 'km-generic-card',
+  imports: [CommonModule, KmBlockDirective, NgbTooltip],
+  templateUrl: './km-generic-card.html',
+  styleUrl: './km-generic-card.scss',
+  providers: [KmService],
+})
+export class KmGenericCard {
+  panelTitle = input<string>('');
+  subtitle = input<string>('');
+  visible = input<boolean>(true);
+  isCollapsed = signal<boolean>(false);
+  isVisible = signal<boolean>(this.visible());
+  showBackButton = input<boolean>(false);
+  buttons = input<KmGenericCardInterface>();
+  formValid = input<boolean | undefined>(undefined);
+  backClicked = output<void>();
+  service = inject(KmService);
+
+  clicked = output<void>();
+
+  toggleCollapse() {
+    this.isCollapsed.set(!this.isCollapsed());
+  }
+  closePanel() {
+    this.isVisible.set(false);
+  }
+
+  onButtonClicked() {
+    this.clicked.emit();
+  }
+
+  onBackClicked() {
+    this.backClicked.emit();
+  }
+}

package/src/lib/km-input/km-input.component.html

@@ -0,0 +1,30 @@
+<div class="mb-2">
+    @if (showLabel()) {
+        <label class="form-label fw-700"
+            >{{ label() }}
+            @if (required()) {
+                <span class="text-danger" ngbTooltip="Είναι υποχρεωτικό" triggers="hover">*</span>
+            }
+        </label>
+    }
+    <div class="input-wrapper">
+        <input
+            class="form-control form-control-{{ formControlSize() }}"
+            [type]="inputType()"
+            [placeholder]="placeholder()"
+            (input)="change($event)"
+            [value]="value()"
+            [class.is-invalid]="invalid() && touched()"
+            (blur)="touched.set(true)"
+        />
+        <span class="corner top-left"></span>
+        <span class="corner top-right"></span>
+        <span class="corner bottom-left"></span>
+        <span class="corner bottom-right"></span>
+    </div>
+    @if (invalid() && touched() && errors().length > 0) {
+        @for (error of errors(); track error.kind) {
+            <small class="invalid-feedback">{{ error.message }}</small>
+        }
+    }
+</div>

package/src/lib/km-input/km-input.component.scss

@@ -0,0 +1,5 @@
+@use '../../../assets/sass/corner-focus' as *;
+
+.input-wrapper {
+	@include corner-focus-indicators;
+}

package/src/lib/km-input/km-input.component.ts

@@ -0,0 +1,30 @@
+import { Component, inject, input, InputSignal, InputSignalWithTransform, model, output } from '@angular/core'
+import { FormValueControl, ValidationError } from '@angular/forms/signals'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+    selector: 'km-input',
+    imports: [NgbTooltip],
+    templateUrl: './km-input.component.html',
+    styleUrl: './km-input.component.scss',
+})
+export class KmInputComponent implements FormValueControl<string | null> {
+    readonly value = model<string | null>(null)
+
+    readonly invalid = input<boolean>(false)
+    readonly touched = model<boolean>(false)
+    readonly disabled = input<boolean>(false)
+    readonly required = input<boolean>(false)
+    readonly errors = input<readonly ValidationError[]>([])
+
+    inputType = input<string>('text')
+    placeholder = input<string>('Εισάγετε μια τιμή')
+    label = input<string>('Label')
+    showLabel = input<boolean>(true)
+
+    formControlSize = input<string>('sm')
+
+    change(event: any) {
+        this.value.set(event.target.value)
+    }
+}

package/src/lib/km-input-group/km-input-group.component.html

@@ -0,0 +1,24 @@
+<div class="mb-2">
+    <label class="form-label fw-700">
+        {{ label() }}
+        @if (required()) {
+            <span class="text-danger">*</span>
+        }
+    </label>
+    <div class="input-group">
+        <input
+            [type]="type()"
+            [placeholder]="placeholder()"
+            (change)="change($event)"
+            [value]="value()"
+            [class.is-invalid]="invalid() && touched()"
+            (blur)="touched.set(true)"
+            [disabled]="disabled()"
+            class="form-control form-control-sm"
+            [readOnly]="readOnly()"
+        />
+        <button type="button" [class]="buttonClass()" (click)="onActionClicked()">
+            <i [class]="icon()"></i>
+        </button>
+    </div>
+</div>

package/src/lib/km-input-group/km-input-group.component.ts

@@ -0,0 +1,44 @@
+import { Component, input, InputSignal, InputSignalWithTransform, model, output } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { KmInputComponent } from "../km-input/km-input.component";
+
+@Component({
+  selector: 'km-input-group',
+  imports: [],
+  templateUrl: './km-input-group.component.html',
+  styleUrl: './km-input-group.component.scss',
+})
+export class KmInputGroupComponent implements FormValueControl<number | null> {
+
+  readonly value = model<number | null>(null);
+
+  readonly invalid = input<boolean>(false);
+  readonly required = input<boolean>(false);
+  readonly touched = model<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly errors = input<readonly any[]>([]);
+  readonly readOnly = input<boolean>(false, { alias: 'readonly' });
+  actionClicked = output<void>();
+
+  placeholder = input<string>('Εισάγετε τιμή');
+  label = input<string>('Label');
+  addonText = input<string>('');
+  type = input<string>('text');
+  icon = input<string>('');
+  buttonClass = input<string>('');
+
+
+  onActionClicked() {
+    this.actionClicked.emit();
+  }
+
+
+  change(event: any) {
+    if (this.disabled()) return;
+    if (this.readOnly()) return;
+    this.touched.set(true);
+    this.value.set(event.target.value);
+  }
+
+
+}

package/src/lib/km-modal/km-modal.html

@@ -0,0 +1,38 @@
+<div class="compact-modal">
+    <div class="modal-header d-flex align-items-center bg-light border-bottom-1">
+        <h6 class="modal-title text-truncate me-3">{{ title() }}</h6>
+
+        <div class="ms-auto d-flex gap-1">
+            <ng-content select="[header-actions]"></ng-content>
+
+            <button type="button" class="btn-close ms-2" (click)="cancelClicked()" aria-label="Close"></button>
+        </div>
+    </div>
+
+    <div class="modal-body">
+        <ng-content></ng-content>
+    </div>
+
+    <div class="modal-footer border-top-0">
+        @if(showReset()){
+        <button type="button" class="btn btn-sm-custom btn-link text-muted me-auto px-0" (click)="reset.emit()">
+            {{ resetLabel() }}
+        </button>
+        }
+
+        <button type="button" class="btn btn-sm-custom btn-secondary px-3" (click)="cancelClicked()">
+            {{ cancelLabel() }}
+        </button>
+
+        @if(showSave()){
+        <button
+            type="button"
+            class="btn btn-sm-custom btn-primary px-4"
+            [disabled]="saveDisabled()"
+            (click)="save.emit()"
+        >
+            {{ saveLabel() }}
+        </button>
+        }
+    </div>
+</div>

package/src/lib/km-modal/km-modal.scss

@@ -0,0 +1,26 @@
+/* Target the modal specifically to save space */
+.compact-modal {
+    .modal-header {
+        padding: 0.3rem 1rem; // Half of default bootstrap padding
+        min-height: 32px;
+    }
+
+    .modal-body {
+        padding: 0.75rem 1rem; // Reduces vertical scrolling
+    }
+
+    .modal-footer {
+        padding: 0.4rem 1rem; // Slim footer
+        background-color: #f8f9fa; // Subtle distinction
+    }
+
+    .modal-title {
+        font-size: 1rem; // Smaller heading
+        font-weight: 600;
+    }
+
+    .btn-sm-custom {
+        padding: 0.2rem 0.5rem;
+        font-size: 0.85rem;
+    }
+}

package/src/lib/km-modal/km-modal.ts

@@ -0,0 +1,40 @@
+import { Component, input, output, outputBinding } from '@angular/core'
+
+@Component({
+    selector: 'km-modal',
+    imports: [],
+    templateUrl: './km-modal.html',
+    styleUrl: './km-modal.scss',
+})
+export class KmModal {
+    title = input('Τίτλος παραθύρου')
+    saveLabel = input('Αποθήκευση')
+    cancelLabel = input('Ακύρωση')
+    closeLabel = input('Κλείσιμο')
+    resetLabel = input('Επαναφορά')
+    showSave = input<boolean>(true)
+    showReset = input<boolean>(false)
+    showClose = input('Κλείσιμο')
+    saveDisabled = input<boolean>(false)
+
+    save = output()
+    cancel = output()
+    closeClicked = output()
+    reset = output()
+
+    saveClicked() {
+        this.save.emit()
+    }
+
+    cancelClicked() {
+        this.cancel.emit()
+    }
+
+    resetClicked() {
+        this.reset.emit()
+    }
+
+    close() {
+        this.closeClicked.emit()
+    }
+}

package/src/lib/km-select/km-select.component.html

@@ -0,0 +1,40 @@
+<label class="form-label fw-700">{{ label() }}</label>
+<ng-select
+    [ngModel]="value()"
+    [class]="class()"
+    [class.is-invalid]="invalid() && touched()"
+    [items]="items()"
+    [multiple]="multiple()"
+    [bindLabel]="bindLabel()"
+    appendTo="body"
+    [bindValue]="bindValue()"
+    [placeholder]="placeholder()"
+    [searchable]="searchable()"
+    [clearable]="clearable()"
+    [disabled]="disabled()"
+    (change)="change($event)"
+    (clear)="value.set(null)"
+    [readonly]="readOnly()"
+    [closeOnSelect]="!multiple()"
+>
+    @if (multiple()) {
+        <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
+            @for (item of items | slice: 0 : 2; track item) {
+                <div class="ng-value">
+                    <span class="ng-value-label">{{ $any(item)[bindLabel()].value }}</span>
+                    <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
+                </div>
+            }
+            @if (items.length > 2) {
+                <div class="ng-value">
+                    <span class="ng-value-label">{{ items.length - 2 }} more...</span>
+                </div>
+            }
+        </ng-template>
+    }
+</ng-select>
+@if (invalid() && touched() && errors().length > 0) {
+    @for (error of errors(); track error.kind) {
+        <small class="invalid-feedback">{{ error.message }}</small>
+    }
+}

package/src/lib/km-select/km-select.component.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input, model, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormValueControl, ValidationError } from '@angular/forms/signals';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+@Component({
+  selector: 'km-select',
+  imports: [FormsModule, NgSelectModule, CommonModule],
+  templateUrl: './km-select.component.html',
+  styleUrl: './km-select.component.scss',
+})
+export class KmSelectComponent implements FormValueControl<string | number | null> {
+  value = model<string | number | null>(null);
+  readonly invalid = input<boolean>(false);
+  readonly touched = model<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly readOnly = input<boolean>(false, { alias: 'readonly' });
+  readonly errors = input<readonly ValidationError[]>([]);
+
+  items = input.required<any[]>();
+  multiple = input<boolean>(true);
+  bindLabel = input<string>('label');
+  bindValue = input<string>('value');
+  placeholder = input<string>('Select...');
+  class = input<string>('custom');
+  limit = input<number>(3);
+  label = input<string>('Label');
+
+  searchable = input<boolean>(true);
+  clearable = input<boolean>(true);
+
+  displayArray = computed(() => {
+    const val = this.value();
+    if (!val) return [];
+    return Array.isArray(val) ? val : [val];
+  });
+
+  change = (event: any) => {
+    this.touched.set(true);
+    this.value.set(event[this.bindValue()]);
+  };
+
+  clear = () => {
+    +this.value.set(null);
+  };
+
+  remainingCount = computed(() => Math.max(0, this.displayArray().length - this.limit()));
+}

package/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of my-km-components
+ */
+
+export * from './lib/km-select/km-select.component';
+export * from './lib/km-input/km-input.component';
+export * from './lib/km-color-combo/km-color-combo.component';
+export * from './lib/km-input-group/km-input-group.component';
+export * from './lib/km-modal/km-modal';
+export * from './lib/km-generic-card/km-generic-card';

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}