my-km-components
v0.0.19
Published
A collection of Angular components for my projects.
Readme
My KM Components Library
A library of reusable UI components for Angular applications.
Installation
Install the library and all required peer dependencies:
npm install my-km-components @ng-select/ng-select @ng-bootstrap/ng-bootstrap @tinymce/tinymce-angularNote: These are peer dependencies — they must be installed explicitly in your app. The library will not work without them.
Setup
The km-select component uses @ng-select/ng-select under the hood, which requires its CSS to be loaded globally (the dropdown is appended to <body> so component-scoped styles won't reach it).
Add one of the following to your root styles.scss:
Option A — import from this library's bundled asset (recommended):
@import 'my-km-components/assets/sass/styles';Option B — import directly from @ng-select/ng-select (requires it installed):
@import '@ng-select/ng-select/themes/default.theme';Or if you use a plain CSS styles.css, add it in your angular.json under styles:
"styles": [
"node_modules/@ng-select/ng-select/themes/default.theme.css"
]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 forng-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 implementingKmGenericCardInterface.
Outputs:
clicked: Emitted on the main action button click.backClicked: Emitted on the back button click.