@natec/mef-dev-ui-kit 16.2.5 → 16.3.49

package/lib/markup-kit/utils/datepicker/datepicker/datepicker.component.d.ts

@@ -2,77 +2,87 @@ import { ElementRef, OnChanges, OnInit, EventEmitter } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
-  * Datepicker Component for selecting dates.
-  *
-  * This component allows users to pick a date from a calendar interface.
-  * It supports various configuration options such as language, date format, and date range.
-  *
-  * @example
-  * <mefdev-datepicker
-  *   [lang]="'uk'"
-  *   [dateFormat]="'dd/MM/yyyy'"
-  *   [range]="{startYear: 1900, toYear: 300}"
-  *   [disabled]="false"
-  *   (dateChanged)="onDateChanged($event)"
-  *   [topOffset]="'20'"
-  *   [leftOffset]="'10'">
-  * </mefdev-datepicker>
-  *
-  * <example-url>https://mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
-*/
+ * Datepicker Component for selecting dates.
+ *
+ * This component allows users to pick a date from a calendar interface.
+ * It supports various configuration options such as language, date format, and date range.
+ *
+ * @example
+ * <mefdev-datepicker
+ *   [labelContentText]="'Select your date'"
+ *   [lang]="'uk'"
+ *   [dateFormat]="'dd/MM/yyyy'"
+ *   [range]="{startYear: 1900, toYear: 300}"
+ *   [disabled]="false"
+ *   (dateChanged)="onDateChanged($event)"
+ *   [topOffset]="'20'"
+ *   [leftOffset]="'10'">
+ * </mefdev-datepicker>
+ *
+ * <example-url>https://mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
+ */
 export declare class DatepickerComponent implements OnChanges, OnInit {
     private datePipe;
     private elementRef;
+    /**
+     * A flag that checks whether a valid date has been entered and whether the entered date exists.
+     * If the two previous conditions are not true, the datepicker will be highlighted in red
+     */
+    isUserDateValid: boolean;
     /**
      * Flag to determine if the calendar is open or closed.
      * Default value: false (closed).
-    */
+     */
     isCalendarOpen: boolean;
-    /**
-     * Flag to determine if the component is in editing mode.
-     * Default value: false (not in editing mode).
-    */
-    isEditing: boolean;
     /**
      * The currently selected date.
      * Default value: Today's date.
-    */
+     */
     selectedDate: Date;
     /**
-    * The formatted date for display in the input.
-    * Default value: Formatted representation of the selected date.
-   */
+     * The formatted date for display in the input.
+     * Default value: Formatted representation of the selected date.
+     */
     formattedDate: any;
     /**
-    * Track the edited date separately when in editing mode.
-    * Default value: An empty string.
-   */
+     * Track the edited date separately when in editing mode.
+     * Default value: An empty string.
+     */
     editedDate: string;
     /**
      * Flag to determine if the month dropdown is open or closed.
      * Default value: true (open).
-    */
+     */
     isMonthDropdownOpen: boolean;
     /**
      * Flag to determine if the year dropdown is open or closed.
      * Default value: true (open).
-    */
+     */
     isYearDropdownOpen: boolean;
     /**
      * The selected month (0-11).
      * Default value: The month of the selected date.
-    */
+     */
     selectedDateMonth: number;
     /**
      * The selected year.
      * Default value: The year of the selected date.
-    */
+     */
     selectedDateYear: number;
     /**
-    * An array of years for the year dropdown.
-    * Default value: An array of years within the specified range.
-   */
+     * An array of years for the year dropdown.
+     * Default value: An array of years within the specified range.
+     */
     years: number[];
+    /**
+     * Label text for the datepicker.
+     * Default value: 'en' (English).
+     * @example
+     * <mefdev-datepicker
+     *   [labelContentText] = "'Chose your date'">
+     * </mefdev-datepicker>
+     */
+    labelContentText: string;
     /**
      * The language/locale for the datepicker.
      * Default value: 'en' (English).
@@ -80,7 +90,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   [lang] = "'uk'">
      * </mefdev-datepicker>
-    */
+     */
     lang: string;
     /**
      * The date format for displaying the selected date.
@@ -89,7 +99,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   [dateFormat]="'dd/MM/yyyy'">
      * </mefdev-datepicker>
-    */
+     */
     dateFormat: string;
     /**
      * The range of years available in the year dropdown.
@@ -98,7 +108,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   [range]="{startYear: 1900, toYear: 300}">
      * </mefdev-datepicker>
-    */
+     */
     yearsRange: {
         startYear: number;
         toYear: number;
@@ -110,7 +120,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   [disabled]="false">
      * </mefdev-datepicker>
-    */
+     */
     disabled: boolean;
     /**
      * The top offset for positioning the datepicker.
@@ -119,7 +129,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   [topOffset]="'20'">
      * </mefdev-datepicker>
-    */
+     */
     topOffset: string;
     /**
      * The left offset for positioning the datepicker.
@@ -128,7 +138,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   [leftOffset]="'10'">
      * </mefdev-datepicker>
-    */
+     */
     leftOffset: string;
     /**
      * Event emitted when the selected date in the datepicker changes.
@@ -137,19 +147,19 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * <mefdev-datepicker
      *   (dateChanged)="onDateChanged($event)">
      * </mefdev-datepicker>
-    */
+     */
     dateChanged: EventEmitter<Date>;
     /**
      * Regular expression to validate user input for date in the format "dd/MM/yyyy".
      * - The day (dd) should be between 01 and 31.
      * - The month (MM) should be between 01 and 12.
      * - The year (yyyy) should be a 4-digit number.
-    */
+     */
     private dateRegExp;
     /**
      * The string entered by the user for date input.
      * This variable stores the user's input as they type in the date field.
-    */
+     */
     userInput: string;
     /**
      * Host listener for document click events to handle calendar interaction.
@@ -157,36 +167,35 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * - If the click occurred within the calendar, no action is taken.
      * - If the click occurred within the input element and the component is not in editing mode,
      *   it opens the calendar.
-     * - If the click occurred outside the calendar and input, it closes the calendar.
      * @param event The MouseEvent object representing the click event.
-    */
+     */
     onClick(event: MouseEvent): void;
     /**
      * Constructor for the DatepickerComponent class.
      * @param datePipe A service for formatting and parsing dates.
      * @param elementRef A reference to the element on which this component is attached.
      * It is used to access DOM elements.
-    */
+     */
     constructor(datePipe: DatePipe, elementRef: ElementRef);
     /**
      * Lifecycle hook called after the component is initialized.
      * It initializes the years for the year select dropdown.
-    */
+     */
     ngOnInit(): void;
     /**
      * Lifecycle hook called whenever the input properties of the component change.
      * It updates the input value.
-    */
+     */
     ngOnChanges(): void;
     /**
      * An array of month names based on the selected language.
      * It provides localized month names for display in the datepicker.
-    */
+     */
     private get months();
     /**
      * An array of weekday names based on the selected language.
      * It provides localized weekday names for display in the datepicker.
-    */
+     */
     private get weekdays();
     /**
      * Initialize the list of years to be displayed in the year dropdown.
@@ -197,12 +206,11 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // After calling initializeYears(), 'years' might contain [1900, 1901, ..., 300]
      * this.initializeYears();
      * ```
-    */
+     */
     private initializeYears;
     /**
      * Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.
-     * This method sets the 'isEditing' flag to true and stores the current formatted date for editing.
-    */
+     */
     toggleEdit(): void;
     /**
      * Get a list of month names in the specified language and format.
@@ -213,7 +221,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Get a list of month names in the default language and long format
      * const months = this.getMonthList(this.lang);
      * ```
-    */
+     */
     private getMonthList;
     /**
      * Get a list of weekday names in the specified language and format.
@@ -224,17 +232,8 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Get a list of weekday names in the default language and short format
      * const weekdays = this.getWeekdayList();
      * ```
-    */
+     */
     private getWeekdayList;
-    /**
-     * Toggle the visibility of the calendar component. When called, this method changes the 'isCalendarOpen' flag
-     * to show or hide the calendar interface.
-     * ```
-     * // Toggle the visibility of the calendar
-     * this.toggleCalendar();
-     * ```
-    */
-    private toggleCalendar;
     /**
      * Save the edited date input by the user, provided it matches the specified date format.
      * This method checks if the entered date is in a valid format, disables the editing mode, and applies
@@ -243,19 +242,19 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Save the edited date and update the selected date
      * this.saveEditedDate();
      * ```
-    */
+     */
     private saveEditedDate;
     /**
-      * Handle user input in the editable input field for date editing. This method captures the input value
-      * and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates
-      * 'selectedDateMonth' and 'selectedDateYear' accordingly.
-      * @param event - The input event containing the user's input.
-      * ```
-      * // Handle user input in the editable input field
-      * this.onDateInput(event);
-      * ```
-    */
-    private onDateInput;
+     * Handle user input in the editable input field for date editing. This method captures the input value
+     * and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates
+     * 'selectedDateMonth' and 'selectedDateYear' accordingly.
+     * @param event - The input event containing the user's input.
+     * ```
+     * // Handle user input in the editable input field
+     * this.onDateInput(event);
+     * ```
+     */
+    onDateInput(event: any): void;
     /**
      * Toggle the visibility of the month dropdown in the calendar interface.
      * This method is used to open or close the dropdown for selecting months.
@@ -264,17 +263,17 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Toggle the visibility of the month dropdown
      * this.toggleMonthDropdown(event);
      * ```
-    */
+     */
     private toggleMonthDropdown;
     /**
-      * Toggle the visibility of the year dropdown in the calendar interface.
-      * This method is used to open or close the dropdown for selecting years.
-      * @param event - The event triggering the toggle action (e.g., a click event).
-      * ```
-      * // Toggle the visibility of the year dropdown
-      * this.toggleYearDropdown(event);
-      * ```
-    */
+     * Toggle the visibility of the year dropdown in the calendar interface.
+     * This method is used to open or close the dropdown for selecting years.
+     * @param event - The event triggering the toggle action (e.g., a click event).
+     * ```
+     * // Toggle the visibility of the year dropdown
+     * this.toggleYearDropdown(event);
+     * ```
+     */
     private toggleYearDropdown;
     /**
      * Handle the change of the selected month in the calendar interface.
@@ -284,7 +283,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Handle the change of the selected month
      * this.onMonthChange();
      * ```
-    */
+     */
     private onMonthChange;
     /**
      * Handle the change of the selected year in the calendar interface.
@@ -294,14 +293,14 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Handle the change of the selected year
      * this.onYearChange();
      * ```
-    */
+     */
     private onYearChange;
     /**
      * Select a date in the calendar interface and perform necessary updates.
      * This method sets the selected date, formats it, closes the calendar, and emits a dateChanged event.
      * It also updates the selected month and year dropdown values.
      * @param date - The date to be selected in the calendar.
-    */
+     */
     selectDate(date: Date): void;
     /**
      * Format the selected date based on the chosen date format and language.
@@ -310,7 +309,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Format the selected date
      * this.formatDate();
      * ```
-    */
+     */
     private formatDate;
     /**
      * Format the selected date based on the chosen date format, language, and locale.
@@ -320,7 +319,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Format the selected date with language
      * const formatted = this.formatSelectedDate();
      * ```
-    */
+     */
     private formatSelectedDate;
     /**
      * Update the input value displayed in the calendar interface.
@@ -330,7 +329,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Update the input value
      * this.updateInputValue();
      * ```
-    */
+     */
     private updateInputValue;
     /**
      * Get an array of arrays representing the days of the current month.
@@ -340,7 +339,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Get an array of arrays representing the days of the current month
      * const calendar = this.calendarDays;
      * ```
-    */
+     */
     private get calendarDays();
     /**
      * Get the date of the previous month to display in empty cells of the current month.
@@ -352,7 +351,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Get the previous month's date to display in empty cells
      * const previousMonthDate = this.getPreviousMonthDate(new Date(2023, 8, 1));
      * ```
-    */
+     */
     private getPreviousMonthDate;
     /**
      * Navigate to the previous month in the calendar interface.
@@ -361,7 +360,7 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Navigate to the previous month
      * this.getPreviousMonth();
      * ```
-    */
+     */
     private getPreviousMonth;
     /**
      * Navigate to the next month in the calendar interface.
@@ -370,21 +369,21 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Navigate to the next month
      * this.getNextMonth();
      * ```
-    */
+     */
     private getNextMonth;
     /**
      * Get the number of days in a given month of a specific year.
      * @param year - The year for which you want to determine the number of days.
      * @param month - The month (0-based index) for which you want to determine the number of days.
      * @returns The number of days in the specified month of the given year.
-    */
+     */
     private daysInMonth;
     /**
      * Calculate the structure of days in a month for the calendar display.
      * This method generates a matrix of day data objects representing the days in the calendar.
      * Each day data object contains the date and whether it belongs to the current month.
      * @returns A matrix of day data objects for the calendar display.
-    */
+     */
     private calculateFirstDayOfCalendar;
     /**
      * Check if a given date is the currently selected date in the calendar.
@@ -394,17 +393,18 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Check if a date is selected
      * const isSelected = this.isDateSelected(someDate);
      * ```
-    */
+     */
     private isDateSelected;
     /**
      * Check if a date string is valid based on the specified date format.
+     * It also checks whether the specified number, month is correct and whether the specified one exists among calendar years
      * @param inputDate - The date string to validate.
      * @returns `true` if the input date string is valid, otherwise `false`.
      * ```
      * // Check if a date string is valid
      * const isValidDate = this.isDateValid('05/25/2023');
      * ```
-    */
+     */
     private isDateValid;
     /**
      * Check if a given date is today's date.
@@ -414,8 +414,8 @@ export declare class DatepickerComponent implements OnChanges, OnInit {
      * // Check if a date is today's date
      * const isToday = this.isDateToday(someDate);
      * ```
-    */
+     */
     private isDateToday;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "mefdev-datepicker", never, { "lang": { "alias": "lang"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "yearsRange": { "alias": "range"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "topOffset": { "alias": "topOffset"; "required": false; }; "leftOffset": { "alias": "leftOffset"; "required": false; }; }, { "dateChanged": "dateChanged"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "mefdev-datepicker", never, { "labelContentText": { "alias": "labelContentText"; "required": false; }; "lang": { "alias": "lang"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "yearsRange": { "alias": "range"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "topOffset": { "alias": "topOffset"; "required": false; }; "leftOffset": { "alias": "leftOffset"; "required": false; }; }, { "dateChanged": "dateChanged"; }, never, never, false, never>;
 }

package/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.d.ts

@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
 * </mefdev-filtered-field-container>
 * ```
 * Example of usage:
-* <example-url>https://mef.dev/ui_kit_demo/view/utils/filtered-field</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/utils/filtered_field</example-url>
 */
 export declare class FilteredFieldContainerComponent implements OnInit {
     private service;

package/lib/markup-kit/utils/help-block/help-block.component.d.ts

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 *    <ng-content></ng-content>
 * </mefdev-help-block>
 *```
-* <example-url>https://mef.dev/ui_kit_demo/view/utils/help-block</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/utils/help_block</example-url>
 */
 export declare class HelpBlockComponent implements OnInit {
     /**

package/lib/pg-components/card/card.components.d.ts

@@ -6,12 +6,12 @@ import * as i0 from "@angular/core";
  *
  * Example usage:
  * ```
- * <pgcard [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
+ * <mefdev-inner-card [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
  *   Card content goes here...
- * </pgcard>
+ * </mefdev-inner-card>
  * ```
  */
-export declare class pgCard {
+export declare class MefdevInnerCard {
     /**
      * Indicates whether the card is collapsed or not.
      * Default: false
@@ -236,6 +236,6 @@ export declare class pgCard {
      * Closes the card.
     */
     close(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<pgCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<pgCard, "pgcard", never, { "Title": { "alias": "Title"; "required": false; }; "Type": { "alias": "Type"; "required": false; }; "MinimalHeader": { "alias": "MinimalHeader"; "required": false; }; "ProgressType": { "alias": "ProgressType"; "required": false; }; "ProgressColor": { "alias": "ProgressColor"; "required": false; }; "Refresh": { "alias": "Refresh"; "required": false; }; "RefreshColor": { "alias": "RefreshColor"; "required": false; }; "Maximize": { "alias": "Maximize"; "required": false; }; "Close": { "alias": "Close"; "required": false; }; "Toggle": { "alias": "Toggle"; "required": false; }; "HeaderClass": { "alias": "HeaderClass"; "required": false; }; "BodyClass": { "alias": "BodyClass"; "required": false; }; "AdditionalClasses": { "alias": "AdditionalClasses"; "required": false; }; "Controls": { "alias": "Controls"; "required": false; }; "ShowMessage": { "alias": "ShowMessage"; "required": false; }; "Message": { "alias": "Message"; "required": false; }; "Loading": { "alias": "Loading"; "required": false; }; "TimeOut": { "alias": "TimeOut"; "required": false; }; "CardBorderStyle": { "alias": "CardBorderStyle"; "required": false; }; }, { "onRefresh": "onRefresh"; }, ["CardTitle", "CardExtraControls"], ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MefdevInnerCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MefdevInnerCard, "mefdev-inner-card", never, { "Title": { "alias": "Title"; "required": false; }; "Type": { "alias": "Type"; "required": false; }; "MinimalHeader": { "alias": "MinimalHeader"; "required": false; }; "ProgressType": { "alias": "ProgressType"; "required": false; }; "ProgressColor": { "alias": "ProgressColor"; "required": false; }; "Refresh": { "alias": "Refresh"; "required": false; }; "RefreshColor": { "alias": "RefreshColor"; "required": false; }; "Maximize": { "alias": "Maximize"; "required": false; }; "Close": { "alias": "Close"; "required": false; }; "Toggle": { "alias": "Toggle"; "required": false; }; "HeaderClass": { "alias": "HeaderClass"; "required": false; }; "BodyClass": { "alias": "BodyClass"; "required": false; }; "AdditionalClasses": { "alias": "AdditionalClasses"; "required": false; }; "Controls": { "alias": "Controls"; "required": false; }; "ShowMessage": { "alias": "ShowMessage"; "required": false; }; "Message": { "alias": "Message"; "required": false; }; "Loading": { "alias": "Loading"; "required": false; }; "TimeOut": { "alias": "TimeOut"; "required": false; }; "CardBorderStyle": { "alias": "CardBorderStyle"; "required": false; }; }, { "onRefresh": "onRefresh"; }, ["CardTitle", "CardExtraControls"], ["*"], false, never>;
 }

package/lib/pg-components/card/card.module.d.ts

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./card.components";
 import * as i2 from "@angular/common";
 import * as i3 from "../progress/progress.module";
-export declare class pgCardModule {
-    static forRoot(): ModuleWithProviders<pgCardModule>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<pgCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<pgCardModule, [typeof i1.pgCard], [typeof i2.CommonModule, typeof i3.MefDevProgressModule], [typeof i1.pgCard]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<pgCardModule>;
+export declare class MefdevInnerCardModule {
+    static forRoot(): ModuleWithProviders<MefdevInnerCardModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MefdevInnerCardModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MefdevInnerCardModule, [typeof i1.MefdevInnerCard], [typeof i2.CommonModule, typeof i3.MefDevProgressModule], [typeof i1.MefdevInnerCard]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MefdevInnerCardModule>;
 }

package/lib/pg-components/select/select.component.d.ts

@@ -5,7 +5,7 @@ import { MefDevOptionComponent } from "./option.component";
 import * as i0 from "@angular/core";
 /**
   * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/select</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/controls/select</example-url>
   */
 export declare class MefDevSelectComponent implements OnInit, AfterContentInit, AfterContentChecked, ControlValueAccessor {
     private _elementRef;

package/lib/pg-components/switch/switch.component.d.ts

@@ -5,7 +5,7 @@ import * as i0 from "@angular/core";
   * @component
   * @skipTemplateDoc: true
   * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/switch</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/controls/switch</example-url>
 */
 export declare class MefDevSwitchComponent implements OnInit, ControlValueAccessor {
     private _disabled;

package/lib/pg-components/tabs/tabset.component.d.ts

@@ -24,7 +24,7 @@ export type TabType = 'line' | 'fillup' | 'linetriangle';
   * </mefdev-tabset>
   *
   * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/tabset</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_components/tabset</example-url>
   */
 export declare class MefDevTabSetComponent implements AfterContentChecked, OnInit, AfterViewInit {
     private _renderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "16.2.5",
+  "version": "16.3.49",
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"

package/src/lib/styles/designe-colors.scss

@@ -1,3 +1,4 @@
+$Black-Color: #000000;
 $Dark-Gray-1: #373737;
 $Dark-Gray-2: #4D4D4D;
 $Red: #CF0106;
@@ -7,6 +8,11 @@ $Light-Gray-2: #EAEAEA;
 $Light-Gray-3: #F3F3F3;
 $White: #FFFFFF;
 $Link: #0185CF;
+$Link-on-dark: #50C0FF;
+
+.color-black {
+  color: $Black-Color !important;
+}
 
 .color-Dark-Gray-1{
     color: $Dark-Gray-1 !important;
@@ -36,7 +42,13 @@ $Link: #0185CF;
 .color-Link{
     color: $Link !important;
 }
+.color-dark-link{
+   color: $Link-on-dark !important;
+}
 
+.b-color-black{
+  background-color: $Black-Color !important;
+}
 
 .b-color-Dark-Gray-1{
     background-color: $Dark-Gray-1 !important;
@@ -65,4 +77,7 @@ $Link: #0185CF;
 }
 .b-color-Link{
     background-color: $Link !important;
-}
+}
+.b-color-dark-link{
+  background-color: $Link-on-dark !important;
+}