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:

@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.