@tekus/design-system 4.0.3 → 5.0.1

package/tokens/blur/_blur.scss

@@ -0,0 +1,11 @@
+html {
+  --tk-low-blur-small: 2px;
+  --tk-low-blur-medium: 4px;
+  --tk-low-blur-large: 10px;
+  --tk-medium-blur-small: 4px;
+  --tk-medium-blur-medium: 8px;
+  --tk-medium-blur-large: 15px;
+  --tk-high-blur-small: 8px;
+  --tk-high-blur-medium: 12px;
+  --tk-high-blur-large: 20px;
+}

package/tokens/colors/_colors.scss

@@ -0,0 +1,97 @@
+html {
+
+  --tk-color-primary-900: #375f57;
+  --tk-color-primary-800: #467c71;
+  --tk-color-primary-700: #4f9385;
+  --tk-color-primary-600: #5bb09f;
+  --tk-color-primary-500: #6ad0bc;
+  --tk-color-primary-400: #87d9c9;
+  --tk-color-primary-300: #a5e2d6;
+  --tk-color-primary-200: #c3ece4;
+  --tk-color-primary-100: #e1f5f1;
+
+  --tk-color-secondary-900: #16006f;
+  --tk-color-secondary-800: #2b177b;
+  --tk-color-secondary-700: #44338b;
+  --tk-color-secondary-600: #54429d;
+  --tk-color-secondary-500: #7366a8;
+  --tk-color-secondary-400: #8275bb;
+  --tk-color-secondary-300: #a29ac5;
+  --tk-color-secondary-200: #d1cde2;
+  --tk-color-secondary-100: #efeef5;
+
+  --tk-color-accent-900: #420008;
+  --tk-color-accent-800: #6a000c;
+  --tk-color-accent-700: #8e0d1c;
+  --tk-color-accent-600: #b22535;
+  --tk-color-accent-500: #ce4556;
+  --tk-color-accent-400: #ee707e;
+  --tk-color-accent-300: #f89a9c;
+  --tk-color-accent-200: #fcc2c9;
+  --tk-color-accent-100: #fee6e9;
+
+  --tk-color-neutral-900: #040303;
+  --tk-color-neutral-800: #333333;
+  --tk-color-neutral-700: #444444;
+  --tk-color-neutral-600: #5b5b5b;
+  --tk-color-neutral-500: #6b6b6b;
+  --tk-color-neutral-400: #9b9b9b;
+  --tk-color-neutral-300: #b3b3b3;
+  --tk-color-neutral-200: #cdcdcd;
+  --tk-color-neutral-100: #f2f2f2;
+
+  --tk-color-success-900: #004d34;
+  --tk-color-success-800: #0c623e;
+  --tk-color-success-700: #00875b;
+  --tk-color-success-600: #18ae7d;
+  --tk-color-success-500: #36b37e;
+  --tk-color-success-400: #57d9a3;
+  --tk-color-success-300: #79f2c0;
+  --tk-color-success-200: #abf5d1;
+  --tk-color-success-100: #e3fcef;
+
+  --tk-color-danger-900: #950700;
+  --tk-color-danger-800: #af0c1d;
+  --tk-color-danger-700: #cf2604;
+  --tk-color-danger-600: #f43e11;
+  --tk-color-danger-500: #ff6640;
+  --tk-color-danger-400: #ff7f63;
+  --tk-color-danger-300: #ffa28b;
+  --tk-color-danger-200: #fbc2b4;
+  --tk-color-danger-100: #ffddd4;
+
+  --tk-color-info-900: #01367b;
+  --tk-color-info-800: #01469e;
+  --tk-color-info-700: #0a68e0;
+  --tk-color-info-600: #1c89ff;
+  --tk-color-info-500: #3998ff;
+  --tk-color-info-400: #509dff;
+  --tk-color-info-300: #7bb4fe;
+  --tk-color-info-200: #b3d4ff;
+  --tk-color-info-100: #deebff;
+
+  --tk-color-warning-900: #ffc55d;
+  --tk-color-warning-800: #ffca6b;
+  --tk-color-warning-700: #ffd07d;
+  --tk-color-warning-600: #ffd68f;
+  --tk-color-warning-500: #ffdc9d;
+  --tk-color-warning-400: #f5dbac;
+  --tk-color-warning-300: #ffe8be;
+  --tk-color-warning-200: #fff3df;
+  --tk-color-warning-100: #fffaf2;
+
+  --tk-text-default-900: #101820;
+  --tk-text-default-800: #6c6c6c;
+  --tk-text-default-700: #656d76;
+  --tk-text-default-600: #a0a9b4;
+  --tk-text-default-500: #d0d5dd;
+
+  --tk-border-soft: #eaecf0;
+  --tk-border-error: #de350b;
+  --tk-border-hover: #667085;
+  --tk-border-focused: #6ad0bc;
+  --tk-border-disabled: #d0d5dd;
+
+  --tk-color-full-black: #101820;
+  --tk-color-full-white: #ffffff;
+}

package/tokens/index.scss

@@ -0,0 +1,5 @@
+@forward './colors/colors';
+@forward './spacing/spacing';
+@forward './shapes/shapes';
+@forward './blur/blur';
+@forward './shadow/shadow';

package/tokens/shadow/_shadow.scss

@@ -0,0 +1,10 @@
+html {
+
+  /**
+    * @tokens Shadows
+    * @presenter Shadow
+    */
+  --tk-shadow-small: 2px 2px 4px 0px #cdcdcd26;
+  --tk-shadow-medium: 2px 4px 8px 0px #cdcdcd66;
+  --tk-shadow-large: 0px 4px 8px 0px #cdcdcd99;
+}

package/tokens/shapes/_shapes.scss

@@ -0,0 +1,9 @@
+html {
+  --tk-rounded-null: 0;
+  --tk-rounded-scale-01: 2px;
+  --tk-rounded-scale-02: 4px;
+  --tk-rounded-scale-03: 8px;
+  --tk-rounded-scale-04: 12px;
+  --tk-rounded-scale-05: 16px;
+  --tk-rounded-scale-10: 100%;
+}

package/tokens/spacing/_spacing.scss

@@ -0,0 +1,25 @@
+html {
+
+  /**
+    * @tokens Spacings
+    * @presenter Spacing
+    */
+
+  --tk-spacing-1: 4px;
+  --tk-spacing-2: 8px;
+  --tk-spacing-3: 12px;
+  --tk-spacing-4: 16px;
+  --tk-spacing-5: 20px;
+  --tk-spacing-6: 24px;
+  --tk-spacing-7: 32px;
+  --tk-spacing-8: 40px;
+  --tk-spacing-9: 48px;
+  --tk-spacing-10: 64px;
+  --tk-spacing-11: 80px;
+  --tk-spacing-12: 96px;
+  --tk-spacing-13: 128px;
+  --tk-spacing-14: 160px;
+  --tk-spacing-15: 192px;
+  --tk-spacing-16: 224px;
+  --tk-spacing-17: 256px;
+}

package/utils/sanitizer-utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/utils/sanitizer-utils" />
+export * from './public-api';

package/utils/sanitizer-utils/public-api.d.ts

@@ -0,0 +1 @@
+export * from './src/sanitizer-utils';

package/utils/sanitizer-utils/src/sanitizer-utils.d.ts

@@ -0,0 +1,20 @@
+export declare const UNSAFE_SVG_REGEX: {
+    script: RegExp;
+    onAttr: RegExp;
+    jsHref: RegExp;
+    href: RegExp;
+    foreignObject: RegExp;
+    iframe: RegExp;
+};
+/**
+ * Sanitize the contents of an SVG to remove malicious code.
+ * @param svgContent The SVG content as a string.
+ * @returns The sanitized SVG.
+ */
+export declare function sanitizeSvgContent(svgContent: string): string;
+/**
+ * Edit the SVG to ensure that the color is dynamic and the ‘none’ fills are maintained.
+ * @param svgContent The SVG content as a string.
+ * @returns The modified SVG.
+ */
+export declare function retouchSvgForColor(svgContent: string): string;

package/components/forms/public-api.d.ts

@@ -1,3 +0,0 @@
-export * from './tk-form-input-field/tk-form-input-field.component';
-export * from './tk-form-autocomplete-field/tk-form-autocomplete-field.component';
-export * from './tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component';

package/components/forms/tk-form-autocomplete-field/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@tekus/design-system/components/forms/tk-form-autocomplete-field" />
-export * from './public-api';

package/components/forms/tk-form-autocomplete-field/models/option.model.d.ts

@@ -1,4 +0,0 @@
-export interface Option {
-    ViewValue: string;
-    Value: string | number;
-}

package/components/forms/tk-form-autocomplete-field/public-api.d.ts

@@ -1 +0,0 @@
-export * from './tk-form-autocomplete-field.component';

package/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.d.ts

@@ -1,173 +0,0 @@
-import { OnInit, OnDestroy, OnChanges, EventEmitter, AfterViewInit, SimpleChanges } from '@angular/core';
-import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatAutocomplete } from '@angular/material/autocomplete';
-import { Option } from './models/option.model';
-import { ThemePalette } from '@angular/material/core';
-import { Observable } from 'rxjs';
-import { FormControl } from '@angular/forms';
-import * as i0 from "@angular/core";
-export declare class TkFormAutocompleteFieldComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
-    /**
-     * Input field control
-     * @ignore
-     */
-    formControl: FormControl<string | Option | null>;
-    /**
-     * Optional input field width
-     * @default 100%
-     */
-    fieldWidth?: string;
-    /**
-     * What color palette to use
-     * @default 'accent'
-     */
-    theme?: ThemePalette;
-    /**
-     * Form field appearance
-     * @default 'fill'
-     */
-    appearance: MatFormFieldAppearance;
-    /**
-     * Form field reserved space for one line by default.
-     * @default 'dynamic'
-     */
-    subscriptSizing: SubscriptSizing;
-    /**
-     * Whether the first option should be highlighted when the autocomplete panel is opened
-     * @default true
-     */
-    autoActiveFirstOption?: boolean;
-    /**
-     * Whether the active option should be selected as the user is navigating.
-     * @default true
-     */
-    autoSelectActiveOption?: boolean;
-    /**
-     * Optional field input type
-     * @default 'text'
-     */
-    type: string;
-    /**
-     * Whether the field is required
-     * @default true
-     */
-    required: boolean;
-    /**
-     * Optional input field title
-     * @default null
-     */
-    fieldTitle?: string;
-    /**
-     * Input field label
-     */
-    fieldLabel: string;
-    /**
-     * Input field placeholder
-     * @default ''
-     */
-    placeHolder: string;
-    /**
-     * Filtered options
-     * @ignore
-     */
-    filteredOptions: Observable<Option[]>;
-    /**
-     * Options to be displayed
-     * @ignore
-     */
-    options: Option[];
-    /**
-     * Option changes handler
-     */
-    optionSelected: EventEmitter<string | number>;
-    /**
-     * Input field changes handler
-     */
-    inputStatus: EventEmitter<FormControl<any>>;
-    /**
-     * Autocomplete bottom reached handler
-     */
-    bottomReached: EventEmitter<void>;
-    /**
-     * Subscriptions property to handle all subscriptions
-     * @ignore
-     */
-    private readonly subscriptions;
-    /**
-     * Mat-autocomplete reference
-     * @ignore
-     */
-    matAutocomplete: MatAutocomplete;
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngOnInit(): void;
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngAfterViewInit(): void;
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * Handles options updates
-     * @ignore
-     */
-    private updateFilteredOptions;
-    /**
-     * Starts the autocomplete subscriptions
-     * @ignore
-     */
-    initAutocompleteListener(): void;
-    /**
-     * Handles the autocomplete opened event
-     * @ignore
-     */
-    private onAutocompleteOpened;
-    /**
-     * Handles the autocomplete closed event
-     * @ignore
-     */
-    private onAutocompleteClosed;
-    /**
-     * Handles the scrolling event
-     * @ignore
-     */
-    private onScroll;
-    /**
-     * Emits the bottomReached when the user reaches the end of the autocomplete panel
-     * @ignore
-     */
-    private onScrolledToEnd;
-    /**
-     * Conditions the options' view to display the view value
-     * @ignore
-     */
-    displayFn(option: Option | null): string;
-    /**
-     * Filters the options according to the input value
-     * @ignore
-     */
-    private _filterOptions;
-    /**
-     * Emits the selected option every time it changes
-     * @ignore
-     */
-    onSelectionChanged(option: Option): void;
-    /**
-     * Emits the formControl variable every time the input value changes
-     * @ignore
-     */
-    onInputChanged(): void;
-    /**
-     * Unsubscribe from all subscriptions when the component is destroyed
-     * @ignore
-     */
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TkFormAutocompleteFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TkFormAutocompleteFieldComponent, "lib-tk-form-autocomplete-field", never, { "fieldWidth": { "alias": "fieldWidth"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "type": { "alias": "type"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fieldTitle": { "alias": "fieldTitle"; "required": false; }; "fieldLabel": { "alias": "fieldLabel"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "optionSelected": "optionSelected"; "inputStatus": "inputStatus"; "bottomReached": "bottomReached"; }, never, never, true, never>;
-}

package/components/forms/tk-form-chips-autocomplete-field/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@tekus/design-system/components/forms/tk-form-chips-autocomplete-field" />
-export * from './public-api';

package/components/forms/tk-form-chips-autocomplete-field/models/option.model.d.ts

@@ -1,4 +0,0 @@
-export interface Option {
-    ViewValue: string;
-    Value: string | number;
-}

package/components/forms/tk-form-chips-autocomplete-field/public-api.d.ts

@@ -1 +0,0 @@
-export * from './tk-form-chips-autocomplete-field.component';

package/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.d.ts

@@ -1,124 +0,0 @@
-import { OnInit, OnChanges, ElementRef, EventEmitter, SimpleChanges } from '@angular/core';
-import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { Option } from './models/option.model';
-import { Observable } from 'rxjs';
-import { ThemePalette } from '@angular/material/core';
-import { FormControl } from '@angular/forms';
-import * as i0 from "@angular/core";
-export declare class TkFormChipsAutocompleteFieldComponent implements OnInit, OnChanges {
-    /**
-     * Input field label
-     */
-    fieldLabel: string;
-    /**
-     * Input field placeholder
-     * @default ''
-     */
-    placeHolder: string;
-    /**
-     * Optional input field title
-     * @default null
-     */
-    fieldTitle?: string;
-    /**
-     * What color palette to use
-     * @default 'accent'
-     */
-    theme?: ThemePalette;
-    /**
-     * Form field reserved space for one line by default.
-     * @default 'dynamic'
-     */
-    subscriptSizing: SubscriptSizing;
-    /**
-     * Optional input field width
-     * @default 100%
-     */
-    fieldWidth?: string;
-    /**
-     * Form field appearance
-     * @default 'fill'
-     */
-    appearance: MatFormFieldAppearance;
-    /**
-     * Input field control
-     * @ignore
-     */
-    formControl: FormControl<string | null>;
-    /**
-     * Selected keywords
-     * @ignore
-     */
-    keywords: Option[];
-    /**
-     * Input field changes handler
-     */
-    inputStatus: EventEmitter<FormControl<any>>;
-    /**
-     * Keywords changes handler
-     */
-    selectedKeywords: EventEmitter<(string | number)[]>;
-    /**
-     * Separator constants
-     * @ignore
-     */
-    readonly separatorKeysCodes: number[];
-    /**
-     * Options to be displayed
-     * @ignore
-     */
-    allKeywords: Option[];
-    /**
-     * Filtered keywords after the input field changes
-     * @ignore
-     */
-    filteredKeywords: Observable<Option[]> | undefined;
-    /**
-     * Keyword Input element reference
-     * @ignore
-     */
-    keywordInput: ElementRef<HTMLInputElement>;
-    /**
-     * @ignore
-     * Lifecycle method
-     */
-    ngOnInit(): void;
-    /**
-     * @ignore
-     * Lifecycle method
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * Updates the filtered keywords when allKeywords changes
-     * @ignore
-     */
-    private updateFilteredKeywords;
-    /**
-     * Handles every keyword deletion
-     * @ignore
-     */
-    remove(keyword: Option): void;
-    /**
-     * Emits the formControl variable every time the field value changes
-     * @ignore
-     */
-    onInputChanged(): void;
-    /**
-     * Emits the selected keywords every time they changed
-     * @ignore
-     */
-    onKeywordsChanged(): void;
-    /**
-     * Handles the autocomplete selection
-     * @ignore
-     */
-    selected(event: MatAutocompleteSelectedEvent): void;
-    /**
-     * Filters the keywords based on the input
-     * @ignore
-     */
-    private _filter;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TkFormChipsAutocompleteFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TkFormChipsAutocompleteFieldComponent, "lib-tk-form-chips-autocomplete-field", never, { "fieldLabel": { "alias": "fieldLabel"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; }; "fieldTitle": { "alias": "fieldTitle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "fieldWidth": { "alias": "fieldWidth"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "allKeywords": { "alias": "allKeywords"; "required": false; }; }, { "inputStatus": "inputStatus"; "selectedKeywords": "selectedKeywords"; }, never, never, true, never>;
-}

package/components/forms/tk-form-input-field/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@tekus/design-system/components/forms/tk-form-input-field" />
-export * from './public-api';

package/components/forms/tk-form-input-field/public-api.d.ts

@@ -1 +0,0 @@
-export * from './tk-form-input-field.component';

package/components/forms/tk-form-input-field/tk-form-input-field.component.d.ts

@@ -1,137 +0,0 @@
-import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { FloatLabelType, SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
-import { ThemePalette } from '@angular/material/core';
-import { ValidatorWithMessage } from './models/validator-with-message.model';
-import * as i0 from "@angular/core";
-export declare class TkFormInputFieldComponent implements OnInit, OnChanges {
-    /**
-     * Optional input field width
-     * @default 100%
-     */
-    fieldWidth?: string;
-    /**
-     * Optional input field title
-     * @default null
-     */
-    fieldTitle?: string;
-    /**
-     * What color palette to use
-     * @default 'accent'
-     */
-    theme?: ThemePalette;
-    /**
-     * Optional field input type
-     * @default 'text'
-     */
-    type: string;
-    /**
-     * Whether the field is required
-     * @default true
-     */
-    required: boolean;
-    /**
-     * Form field label behavior
-     * @default 'auto'
-     */
-    floatLabel: FloatLabelType;
-    /**
-     * Form field appearance
-     * @default 'fill'
-     */
-    appearance: MatFormFieldAppearance;
-    /**
-     * Form field reserved space for one line by default.
-     * @default 'dynamic'
-     */
-    subscriptSizing: SubscriptSizing;
-    /**
-     * Input field label
-     */
-    fieldLabel: string;
-    /**
-     * Input field placeholder
-     * @default ''
-     */
-    placeHolder: string;
-    /**
-     * Optional Input field text prefix
-     * @default ''
-     */
-    inputPrefix?: string;
-    /**
-     * Optional Input field text suffix
-     * @default ''
-     */
-    inputSuffix?: string;
-    /**
-     * Input field control
-     * @ignore
-     */
-    formControl: FormControl<string | null>;
-    /**
-     * Input field error message
-     * @ignore
-     */
-    errorMessage: string;
-    /**
-     * Optional validators for the field
-     * @default ''
-     */
-    validatorsWithMessages: {
-        [key: string]: ValidatorWithMessage;
-    };
-    /**
-     * Optional async validators for the field
-     * @default ''
-     */
-    asyncValidatorsWithMessages: {
-        [key: string]: ValidatorWithMessage;
-    };
-    /**
-     * Input field changes handler
-     */
-    inputStatus: EventEmitter<FormControl<any>>;
-    /**
-     * @ignore
-     * Class constructor
-     */
-    constructor();
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngOnInit(): void;
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @ignore
-     * Component lifecycle method
-     */
-    private isThereAnyValidator;
-    /**
-     * Applies all the passed validators
-     * @ignore
-     */
-    private applyValidators;
-    /**
-     * Checks if there is any validation error
-     * @ignore
-     */
-    private checkValidationErrors;
-    /**
-     * Emits the formControl variable every time the field value changes
-     * @ignore
-     */
-    onInputChanged(): void;
-    /**
-     * Updates the error message every time the input value changes
-     * @ignore
-     */
-    updateErrorMessage(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TkFormInputFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TkFormInputFieldComponent, "lib-tk-form-input-field", never, { "fieldWidth": { "alias": "fieldWidth"; "required": false; }; "fieldTitle": { "alias": "fieldTitle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "type": { "alias": "type"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "fieldLabel": { "alias": "fieldLabel"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; }; "inputPrefix": { "alias": "inputPrefix"; "required": false; }; "inputSuffix": { "alias": "inputSuffix"; "required": false; }; "validatorsWithMessages": { "alias": "validatorsWithMessages"; "required": false; }; "asyncValidatorsWithMessages": { "alias": "asyncValidatorsWithMessages"; "required": false; }; }, { "inputStatus": "inputStatus"; }, never, never, true, never>;
-}

package/components/tk-dropdown-list/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@tekus/design-system/components/tk-dropdown-list" />
-export * from './public-api';