@f1falcha/stimulus 1.0.0

package/treeview/treeview-header/treeview-header.d.ts

@@ -0,0 +1,12 @@
+import { NbIconLibraries } from '@nebular/theme';
+import { SclTreeview } from '../treeview';
+import * as i0 from "@angular/core";
+export declare class SclTreeviewHeader {
+    private iconLibraries;
+    sclTreeview: SclTreeview;
+    constructor(iconLibraries: NbIconLibraries);
+    toggleTreeview(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTreeviewHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclTreeviewHeader, "scl-treeview-header", never, { "sclTreeview": { "alias": "sclTreeview"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=treeview-header.d.ts.map

package/treeview/treeview.d.ts

@@ -0,0 +1,66 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export interface TreeNode {
+    name: string;
+    children?: TreeNode[];
+    expanded?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    id?: number;
+    label?: string;
+    code?: string;
+    [key: string]: any;
+}
+export declare class SclTreeview {
+    private iconLibraries;
+    searchField: ElementRef;
+    selectionChange: EventEmitter<any>;
+    bindLabel: string;
+    bindValue: string;
+    id: string;
+    displaySearchFilter: boolean;
+    set showSearchFilter(value: string | boolean);
+    get showSearchFilter(): string | boolean;
+    displayUnchecked: boolean;
+    set showUnchecked(value: string | boolean);
+    get showUnchecked(): string | boolean;
+    isReadonly: boolean;
+    set readOnly(value: string | boolean);
+    get readOnly(): string | boolean;
+    getId(name: string): string;
+    set dataSource(data: TreeNode[]);
+    get dataSource(): TreeNode[];
+    isEveryNodeExpanded: boolean;
+    filteredNode: TreeNode[];
+    showClearButton: boolean;
+    searchValue: string;
+    showExpandButton: boolean;
+    constructor(iconLibraries: NbIconLibraries);
+    ngAfterViewInit(): void;
+    onSearchNode(searchValue: string): void;
+    filterNodes(nodes: TreeNode[], searchKeyword: string): TreeNode[];
+    onClearSearch(): void;
+    private treeNodes;
+    updateNodeState(nodes: TreeNode[]): TreeNode[];
+    treeviewItemExpandCollapse(node: TreeNode): void;
+    areEveryNodeExpanded(): boolean;
+    toggleAllNodes(): void;
+    recursivelyToggleNodes(nodes: TreeNode[], allNodesExpanded: boolean): void;
+    toggleAllSelection(): void;
+    checkAllNodes(nodes: TreeNode[]): void;
+    uncheckAllNodes(nodes: TreeNode[]): void;
+    isAllSelected(nodes: TreeNode[]): boolean;
+    toggleNodeSelection(node: TreeNode): void;
+    updateParentNode(node: TreeNode): void;
+    getParentNode(node: TreeNode): TreeNode | null;
+    checkChildren(node: TreeNode): void;
+    uncheckChildren(node: TreeNode): void;
+    emitCheckedNodes(): any;
+    traverseCheckedNodes(nodes: TreeNode[], selectedValues: number[]): void;
+    traverseCheckedItems(nodes: TreeNode[], treeViewItems: TreeNode[]): void;
+    showExpandAllButton(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTreeview, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclTreeview, "scl-treeview", ["sclTreeview"], { "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "id": { "alias": "id"; "required": false; }; "showSearchFilter": { "alias": "showSearchFilter"; "required": false; }; "showUnchecked": { "alias": "showUnchecked"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=treeview.d.ts.map

package/treeview/treeview.icon.d.ts

@@ -0,0 +1,3 @@
+import { NbIcons } from '@nebular/theme';
+export declare const SclTreeViewIcons: NbIcons;
+//# sourceMappingURL=treeview.icon.d.ts.map

package/treeview/treeview.scss

@@ -0,0 +1,278 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-filter {
+    &__input-wrapper {
+        margin: 0 0 15px 0;
+        position: relative;
+    }
+    &__inputbox {
+        &[nbInput].size-medium {
+            padding: nb-theme(scl-filter-inputbox-padding);
+        }
+    }
+    &__icon {
+        position: absolute;
+        top: 10px;
+        left: 14px;
+    }
+    &__button-wrapper {
+        position: absolute;
+        top: 4px;
+        right: 2px;
+    }
+}
+
+.scl-treeview-table {
+    width: nb-theme(scl-tree-view-tree-node-table-width);
+    border-spacing: 0;
+
+    &__body {
+        display: grid;
+        gap: nb-theme(scl-tree-view-tree-node-body-gap);
+    }
+
+    // Parent-node
+    &__row {
+        display: flex;
+        align-items: center;
+        font-weight: nb-theme(scl-tree-view-font-weight);
+        letter-spacing: nb-theme(scl-tree-view-tree-node-letter-spacing);
+
+        .scl-treeview-table {
+            &__body {
+                gap: nb-theme(scl-tree-view-child-node-body-gap);
+            }
+
+            // Ghost button
+            &__button {
+                background-color: transparent;
+                border-width: nb-theme(scl-tree-view-table-button-width);
+                border-style: nb-theme(scl-tree-view-table-button-style);
+                border-color: transparent;
+                border-radius: nb-theme(scl-tree-view-table-button-focus-border-radius);
+                margin: nb-theme(scl-tree-view-table-button-margin);
+                color: nb-theme(scl-tree-view-table-button-color);
+
+                &:focus {
+                    outline-width: nb-theme(scl-tree-view-table-button-focus-border-width);
+                    outline-style: nb-theme(scl-tree-view-table-button-focus-border-style);
+                    outline-color: nb-theme(scl-tree-view-table-button-focus-border-color);
+                }
+                &:hover {
+                    background-color: nb-theme(scl-tree-view-table-button-hover-color);
+                }
+            }
+
+            //Child-node
+            &__row {
+                .scl-treeview-table {
+                    &__title {
+                        background-color: nb-theme(scl-tree-view-child-node-background-color);
+                        border-radius: 0;
+
+                        .scl-readonly {
+                            &__icon {
+                                display: block;
+                                margin: nb-theme(scl-tree-view-child-readonly-icon-margin);
+                            }
+                        }
+
+                        label {
+                            .text {
+                                padding: nb-theme(scl-tree-view-child-text-padding);
+                                font-size: nb-theme(scl-tree-view-child-tree-node-font-size);
+                                line-height: nb-theme(scl-tree-view-child-tree-node-line-height);
+                                text-transform: none;
+                                display: flex;
+                                gap: nb-theme(scl-tree-view-child-readonly-icon-gap);
+                                letter-spacing: 0;
+                            }
+                        }
+                    }
+
+                    &__parent {
+                        margin-bottom: nb-theme(scl-tree-view-parent-margin-bottom);
+                        border-bottom: nb-theme(scl-tree-view-child-border-bottom-width) solid nb-theme(scl-tree-view-child-border-bottom-color);
+                        label.label {
+                            .text {
+                                color: nb-theme(scl-tree-view-child-text-color);
+                                nb-icon {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                & .scl-treeview-table__title:not(:has(.scl-treeview-table__button)) {
+                    padding: 0;
+                }
+            }
+        }
+
+        & .scl-treeview-table__title:not(:has(.scl-treeview-table__button)) {
+            padding: 0 0 0 2.5rem;
+        }
+    }
+
+    &__data {
+        flex-grow: 1;
+        padding: 0;
+
+        & .scl-treeview-table {
+            &__body:has(.scl-treeview-table__parent) {
+                grid-template-columns: nb-theme(scl-tree-view-table-body-grid-template-column);
+                gap: nb-theme(scl-tree-view-table-body-gap);
+                align-items: baseline;
+            }
+        }
+    }
+
+    &__title {
+        display: flex;
+        align-items: center;
+        background-color: nb-theme(scl-tree-view-background-color);
+        border-radius: nb-theme(scl-tree-view-border-radius);
+        line-height: nb-theme(scl-tree-view-tree-node-line-height);
+        text-transform: uppercase;
+
+        label {
+            .text {
+                padding: nb-theme(scl-tree-view-tree-node-text-padding);
+                font-size: nb-theme(scl-tree-view-tree-node-font-size);
+            }
+        }
+
+        .scl-readonly {
+            &__icon {
+                display: none;
+            }
+        }
+    }
+
+    &__title + .scl-treeview-table {
+        padding-left: 2.25rem;
+    }
+
+    &__parent + .scl-treeview-table {
+        position: relative;
+        padding: 0;
+
+        &:has(.scl-readonly__icon) {
+            padding: 0 0 0 0.5rem;
+        }
+
+        .scl-treeview-table__body {
+            grid-template-columns: none;
+            gap: 0;
+            word-break: break-word;
+        }
+
+        :has(.scl-treeview-table__parent) {
+            .scl-treeview-table {
+                padding: 0;
+
+                &__parent {
+                    margin-bottom: 0;
+                    border-bottom: none;
+                    label.label {
+                        .text {
+                            color: nb-theme(scl-tree-view-parent-label-text-color);
+                        }
+                        nb-icon {
+                            display: block;
+                        }
+                    }
+                }
+
+                &__body {
+                    position: relative;
+                    margin-left: nb-theme(scl-tree-view-table-body-margin-left);
+
+                    &:has(.scl-readonly__icon) {
+                        margin-left: nb-theme(scl-tree-view-table-body-readonly-icon-margin-left);
+                    }
+
+                    &:before {
+                        content: '';
+                        height: 100%;
+                        width: nb-theme(scl-tree-view-grand-child-border-left-width);
+                        background-color: nb-theme(scl-tree-view-grand-child-border-left-color);
+                        position: absolute;
+                        left: -20px;
+                    }
+                }
+            }
+        }
+    }
+
+    // Readonly
+    .scl-readonly {
+        &__icon {
+            svg {
+                height: nb-theme(scl-tree-view-readonly-icon-height);
+                width: nb-theme(scl-tree-view-readonly-icon-width);
+            }
+
+            &--success {
+                svg {
+                    color: nb-theme(scl-tree-view-readonly-success-icon-color);
+                }
+            }
+
+            &--danger {
+                svg {
+                    color: nb-theme(scl-tree-view-readonly-danger-icon-color);
+                }
+            }
+        }
+
+        &__checkbox {
+            .custom-checkbox {
+                display: none;
+            }
+            label.label .text:not(:empty) {
+                padding-left: 0;
+            }
+        }
+    }
+}
+
+scl-treeview {
+    .scl-image-card {
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        width: nb-theme(scl-image-card-content-width);
+        margin: auto;
+        padding: nb-theme(scl-image-card-content-padding);
+
+        &__image {
+            display: grid;
+            place-items: center;
+            gap: nb-theme(scl-image-card-image-gap);
+        }
+
+        &__content {
+            display: grid;
+            place-items: center;
+            gap: nb-theme(scl-image-card-content-gap);
+        }
+
+        &__title {
+            font-size: nb-theme(scl-image-card-title-font-size);
+            line-height: nb-theme(scl-image-card-title-line-height);
+            font-weight: nb-theme(scl-image-card-title-font-weight);
+            color: nb-theme(scl-image-card-title-color);
+            margin: nb-theme(scl-image-card-title-margin);
+        }
+
+        &__description {
+            font-size: nb-theme(image-info-font-size);
+            line-height: nb-theme(image-info-line-height);
+            color: nb-theme(image-info-color);
+            text-align: nb-theme(image-info-text-align);
+            margin: nb-theme(image-info-margin);
+        }
+    }
+}

package/truncate/truncate.component.d.ts

@@ -0,0 +1,16 @@
+import { ElementRef, Renderer2, AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SclTruncate implements AfterViewInit {
+    private el;
+    private renderer;
+    set lines(value: number | string);
+    get lines(): number;
+    private _lines;
+    constructor(el: ElementRef, renderer: Renderer2);
+    get truncateClass(): string;
+    ngAfterViewInit(): void;
+    private updateTooltip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclTruncate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclTruncate, "[sclTruncate]", never, { "lines": { "alias": "sclTruncate"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=truncate.component.d.ts.map

package/truncate/truncate.scss

@@ -0,0 +1,18 @@
+.scl-truncate {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    &--1 {
+        -webkit-line-clamp: 1;
+    }
+    &--2 {
+        -webkit-line-clamp: 2;
+    }
+    &--3 {
+        -webkit-line-clamp: 3;
+    }
+    &--4 {
+        -webkit-line-clamp: 4;
+    }
+}

package/typography/font.scss

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: 'Inter';
+    src: url('../assets/font_assets/Inter-Regular.eot');
+    src:
+        url('../assets/font_assets/Inter-Regular.woff') format('woff'),
+        url('../assets/font_assets/Inter-Regular.ttf') format('truetype'),
+        url('../assets/font_assets/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../assets/font_assets/Inter-Medium.eot'); /* IE9 Compat Modes */
+    src:
+        url('../assets/font_assets/Inter-Medium.woff') format('woff'),
+        /* Modern Browsers */ url('../assets/font_assets/Inter-Medium.ttf') format('truetype'),
+        url('../assets/font_assets/Inter-Medium.woff2') format('woff2'); /* Super Modern Browsers */
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../assets/font_assets/Inter-Bold.eot'); /* IE9 Compat Modes */
+    src:
+        url('../assets/font_assets/Inter-Bold.woff') format('woff'),
+        /* Modern Browsers */ url('../assets/font_assets/Inter-Bold.ttf') format('truetype'),
+        url('../assets/font_assets/Inter-Bold.woff2') format('woff2'); /* Super Modern Browsers */
+    font-weight: 700;
+}

package/typography/typography-config.scss

@@ -0,0 +1,73 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        font-family-primary: #{'Inter',
+        sans-serif},
+
+        scl-text-display-large-font-size: 3.5rem,
+        scl-text-display-large-line-height: 4rem,
+
+        scl-text-display-medium-font-size: 2.75rem,
+        scl-text-display-medium-line-height: 3.25rem,
+
+        scl-text-display-small-font-size: 2.25rem,
+        scl-text-display-small-line-height: 2.75rem,
+
+        scl-text-headline-large-font-size: 2rem,
+        scl-text-headline-large-line-height: 2.5rem,
+
+        scl-text-headline-medium-font-size: 1.75rem,
+        scl-text-headline-medium-line-height: 2.25rem,
+
+        scl-text-headline-small-font-size: 1.5rem,
+        scl-text-headline-small-line-height: 2rem,
+
+        scl-text-title-large-font-size: 1.375rem,
+        scl-text-title-large-line-height: 1.75rem,
+
+        scl-text-title-medium-font-size: 1.125rem,
+        scl-text-title-medium-line-height: 1.625rem,
+
+        scl-text-title-small-font-size: 1rem,
+        scl-text-title-small-line-height: 1.5rem,
+
+        scl-text-button-large-font-size: 1.125rem,
+        scl-text-button-large-line-height: 1.75rem,
+
+        scl-text-button-medium-font-size: 1rem,
+        scl-text-button-medium-line-height: 1.5rem,
+
+        scl-text-button-small-font-size: 0.875rem,
+        scl-text-button-small-line-height: 1.25rem,
+
+        scl-text-body-large-font-size: 1rem,
+        scl-text-body-large-line-height: 1.5rem,
+
+        scl-text-body-medium-font-size: 0.875rem,
+        scl-text-body-medium-line-height: 1.25rem,
+
+        scl-text-body-small-font-size: 0.75rem,
+        scl-text-body-small-line-height: 1rem,
+
+        scl-text-label-large-font-size: 0.875rem,
+        scl-text-label-large-line-height: 1.25rem,
+
+        scl-text-label-medium-font-size: 0.75rem,
+        scl-text-label-medium-line-height: 1rem,
+
+        scl-text-label-small-font-size: 0.625rem,
+        scl-text-label-small-line-height: 0.75rem,
+
+        scl-text-light-font-weight: 400,
+        scl-text-medium-font-weight: 500,
+        scl-text-semi-bold-font-weight: 600,
+        scl-text-bold-font-weight: 700,
+
+        scl-text-label-medium-uppercase-tracking: 0.063rem,
+        scl-text-title-medium-letter-spacing: -0.0225rem,
+        scl-text-color-basic-600: color-basic-600,
+    ),
+    default,
+    default
+);

package/typography/typography.d.ts

@@ -0,0 +1,37 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export type TextType = 'bodyLarge' | 'bodySmall' | 'bodyMedium' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titlelarge' | 'titleMedium' | 'titleSmall' | 'buttonlarge' | 'buttonMedium' | 'buttonSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall';
+export type FontWeight = 'bold' | 'semiBold' | 'light' | 'medium';
+export type FontColor = 'basic-600';
+export declare class SclText {
+    private elementRef;
+    private renderer;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    textType?: TextType;
+    weight?: FontWeight;
+    textColor?: string;
+    get bodyLarge(): boolean;
+    get bodySmall(): boolean;
+    get bodyMedium(): boolean;
+    get displayLarge(): boolean;
+    get displayMedium(): boolean;
+    get displaySmall(): boolean;
+    get headlineLarge(): boolean;
+    get headlineMedium(): boolean;
+    get headlineSmall(): boolean;
+    get titlelarge(): boolean;
+    get titleMedium(): boolean;
+    get titleSmall(): boolean;
+    get buttonlarge(): boolean;
+    get buttonMedium(): boolean;
+    get buttonSmall(): boolean;
+    get labellarge(): boolean;
+    get labelMedium(): boolean;
+    get labelSmall(): boolean;
+    get colorBasic(): boolean;
+    ngOnInit(): void;
+    private applyFontWeightClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclText, "[sclText]", never, { "textType": { "alias": "textType"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=typography.d.ts.map

package/typography/typography.scss

@@ -0,0 +1,47 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-text {
+    margin: 0;
+    $textType: (
+        body-large,
+        body-medium,
+        body-small,
+        display-large,
+        display-medium,
+        display-small,
+        headline-large,
+        headline-medium,
+        headline-small,
+        title-large,
+        title-medium,
+        title-small,
+        button-large,
+        button-medium,
+        button-small,
+        label-large,
+        label-medium,
+        label-small
+    );
+    @each $key in $textType {
+        &--#{$key} {
+            font-size: nb-theme(scl-text-#{$key}-font-size);
+            line-height: nb-theme(scl-text-#{$key}-line-height);
+        }
+    }
+
+    $textWeight: (bold, semi-bold, light, medium);
+
+    @each $key in $textWeight {
+        &--#{$key} {
+            font-weight: nb-theme(scl-text-#{$key}-font-weight);
+        }
+    }
+
+    $textColor: (color-basic-600);
+
+    @each $key in $textColor {
+        &--#{$key} {
+            color: nb-theme(scl-text-#{$key});
+        }
+    }
+}