@f1falcha/stimulus 1.0.0

package/select-country/select-country.component.d.ts

@@ -0,0 +1,33 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, EventEmitter } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup } from '@angular/forms';
+import * as i0 from "@angular/core";
+export interface FilteredCountriesGroup {
+    name: string;
+    code: string;
+    dial_code: string;
+    flag: string;
+}
+export declare class SclSelectCountryComponent implements ControlValueAccessor {
+    private formBuilder;
+    private focusMonitor;
+    private elementRef;
+    filteredCountries: FilteredCountriesGroup[];
+    changeCountry: EventEmitter<FilteredCountriesGroup>;
+    disabled: boolean;
+    selectCountryForm: FormGroup;
+    code: string;
+    onChange: (val: string) => void;
+    onTouch: () => void;
+    set countryCode(value: string);
+    get countryCode(): string;
+    constructor(formBuilder: FormBuilder, focusMonitor: FocusMonitor, elementRef: ElementRef);
+    writeValue(value: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    selectCountry(value: FilteredCountriesGroup): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclSelectCountryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclSelectCountryComponent, "scl-select-country", never, { "filteredCountries": { "alias": "filteredCountries"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "countryCode": { "alias": "countryCode"; "required": false; }; }, { "changeCountry": "changeCountry"; }, never, never, true, never>;
+}
+//# sourceMappingURL=select-country.component.d.ts.map

package/select-country/select-country.component.scss

@@ -0,0 +1,34 @@
+@use '@nebular/theme/styles/theming' as *;
+
+body {
+    position: relative;
+}
+
+.nb-theme-default {
+    .scl-select-input-field {
+        scl-select-country {
+            width: nb-theme(scl-select-country-width);
+
+            ng-select {
+                max-width: nb-theme(scl-select-country-width);
+            }
+        }
+    }
+}
+
+.scl-select-country {
+    &__select {
+        .scroll-host {
+            width: fit-content;
+        }
+    }
+
+    &__desc {
+        display: flex;
+        gap: nb-theme(scl-select-country-field-gap);
+    }
+}
+
+.ng-dropdown-panel-items {
+    background-color: inherit;
+}

package/shell/checker-sidebar/checker-sidebar-config.scss

@@ -0,0 +1,21 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-checker-sidebar-container-padding: 0,
+        scl-checker-sidebar-margin: 0.5rem 0 0 0,
+        scl-checker-sidebar-background-color: color-base-white,
+
+        // Border style
+        scl-checker-sidebar-border-width: 0.0625rem 0 0 0.0625rem,
+        scl-checker-sidebar-border-style: solid,
+        scl-checker-sidebar-border-color: color-basic-300,
+        scl-checker-sidebar-border-top-left-radius: 1.25rem,
+
+        //nb-card style
+        scl-checker-sidebar-card-margin-top: 0.5rem,
+        scl-checker-sidebar-card-max-height: 100vh,
+    ),
+    default,
+    default
+);

package/shell/checker-sidebar/checker-sidebar.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SclCheckerSidebar {
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclCheckerSidebar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclCheckerSidebar, "scl-checker-sidebar", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=checker-sidebar.component.d.ts.map

package/shell/checker-sidebar/checker-sidebar.component.scss

@@ -0,0 +1,34 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.checker-sidebar {
+    &.expanded {
+        background-color: nb-theme(scl-checker-sidebar-background-color);
+        border-width: nb-theme(scl-checker-sidebar-border-width);
+        border-style: nb-theme(scl-checker-sidebar-border-style);
+        border-color: nb-theme(scl-checker-sidebar-border-color);
+        border-top-left-radius: nb-theme(scl-checker-sidebar-border-top-left-radius);
+        margin: nb-theme(scl-checker-sidebar-margin);
+        & + .content {
+            .scl-shell-content {
+                border-radius: 0;
+            }
+        }
+    }
+    .main-container .scrollable {
+        padding: nb-theme(scl-checker-sidebar-container-padding);
+    }
+}
+
+.scl-checker-sidebar {
+    nb-card {
+        max-height: nb-theme(scl-checker-sidebar-card-max-height);
+        background-color: transparent;
+        border: none;
+        margin-top: nb-theme(scl-checker-sidebar-card-margin-top);
+    }
+
+    nb-card-body {
+        overflow-y: auto;
+        padding: 0;
+    }
+}

package/shell/maker-sidebar/maker-sidebar-config.scss

@@ -0,0 +1,21 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-maker-sidebar-container-padding: 0,
+        scl-maker-sidebar-margin: 0.5rem 0 0 0,
+        scl-maker-sidebar-background-color: color-base-white,
+
+        // Border style
+        scl-maker-sidebar-border-width: 0.0625rem 0 0 0.0625rem,
+        scl-maker-sidebar-border-style: solid,
+        scl-maker-sidebar-border-color: color-basic-300,
+        scl-maker-sidebar-border-top-left-radius: 1.25rem,
+
+        //nb-card style
+        scl-maker-sidebar-card-margin-top: 0.5rem,
+        scl-maker-sidebar-card-max-height: 100vh,
+    ),
+    default,
+    default
+);

package/shell/maker-sidebar/maker-sidebar.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SclMakerSidebarComponent {
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclMakerSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclMakerSidebarComponent, "scl-maker-sidebar", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=maker-sidebar.component.d.ts.map

package/shell/maker-sidebar/maker-sidebar.component.scss

@@ -0,0 +1,34 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.maker-sidebar {
+    &.expanded {
+        background-color: nb-theme(scl-maker-sidebar-background-color);
+        border-width: nb-theme(scl-maker-sidebar-border-width);
+        border-style: nb-theme(scl-maker-sidebar-border-style);
+        border-color: nb-theme(scl-maker-sidebar-border-color);
+        border-top-left-radius: nb-theme(scl-maker-sidebar-border-top-left-radius);
+        margin: nb-theme(scl-maker-sidebar-margin);
+        & + .checker-sidebar + .content {
+            .scl-shell-content {
+                border-top-left-radius: 0;
+            }
+        }
+    }
+    .main-container .scrollable {
+        padding: nb-theme(scl-maker-sidebar-container-padding);
+    }
+}
+
+.scl-maker-sidebar {
+    nb-card {
+        max-height: nb-theme(scl-maker-sidebar-card-max-height);
+        background-color: transparent;
+        border: none;
+        margin-top: nb-theme(scl-maker-sidebar-card-margin-top);
+    }
+
+    nb-card-body {
+        overflow-y: auto;
+        padding: 0;
+    }
+}

package/shell/nebular-icons.d.ts

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

package/shell/shell-config.component.scss

@@ -0,0 +1,25 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        // Nebular-layout styles
+        layout-padding: 0.5rem 1.5rem 1.25rem,
+        layout-medium-padding: 0,
+        layout-small-padding: 0,
+        layout-background-color: color-basic-50,
+
+        // Custom shell content styles
+        shell-content-background-color: color-base-white,
+        shell-content-min-height: 100vh,
+        shell-content-border-color: color-basic-300,
+        shell-content-margin: 0.5rem 0.5rem 0 0,
+        shell-content-border-radius: 0.75rem 0.75rem 0 0,
+        shell-content-border-width: 0.063rem 0.063rem 0 0.063rem,
+
+        // Compacted Sidebar
+        shell-sidebar-compacted-width: 5rem,
+        shell-sidebar-compacted-context-menu-padding: 0.5rem
+    ),
+    default,
+    default
+);

package/shell/shell-icons.d.ts

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

package/shell/shell-sidebar/shell-sidebar-config.scss

@@ -0,0 +1,43 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        // Sidebar main-container style
+        header-height: 0,
+
+        // Custom shell sidebar styles
+        shell-sidebar-height: 8.813rem,
+        shell-sidebar-background-color: color-basic-50,
+        // Custom shell header styles
+        shell-header-margin: 0 0 1.25rem 0,
+        shell-header-padding: 0rem 0.375rem 0.75rem 0.375rem,
+        shell-header-gap: 0.5rem,
+
+        // Custom shell action styles
+        shell-actions-margin: 0 -1rem,
+        shell-actions-padding: 0.75rem 1rem,
+        shell-actions-border-width: 0.063rem,
+        shell-actions-border-color: color-basic-300,
+
+        // Shell icon
+        shell-sidebar-icon-padding: 0 0.875rem,
+
+        // Shell sidebar label
+        shell-sidebar-label-font-size: 0.625rem,
+        shell-sidebar-label-font-weight: 600,
+        shell-sidebar-label-line-height: 1.2,
+        shell-sidebar-label-letter-spacing: 0.0625rem,
+        shell-sidebar-label-padding: 1rem 0.75rem 0.5rem 0.75rem,
+        shell-sidebar-label-color: color-basic-600,
+
+        shell-sidebar-margin-right: -1rem,
+        shell-sidebar-width: 5rem,
+        shell-sidebar-border: none,
+        shell-sidebar-padding: 0,
+
+        //nb-sidebar-width
+        sidebar-width: 16rem
+    ),
+    default,
+    default
+);

package/shell/shell-sidebar/shell-sidebar.component.d.ts

@@ -0,0 +1,14 @@
+import { NbIconLibraries, NbSidebarService } from '@nebular/theme';
+import { SclShellComponent } from '../shell.component';
+import * as i0 from "@angular/core";
+export declare class SclShellSidebar {
+    private shell;
+    private sidebarService;
+    private iconLibraries;
+    protected imgSrc: string;
+    constructor(shell: SclShellComponent, sidebarService: NbSidebarService, iconLibraries: NbIconLibraries, imgSrc: string);
+    sidebarToggle(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclShellSidebar, [{ optional: true; }, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclShellSidebar, "scl-shell-sidebar", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=shell-sidebar.component.d.ts.map

package/shell/shell-sidebar/shell-sidebar.component.scss

@@ -0,0 +1,106 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-shell-header {
+    display: flex;
+    align-items: center;
+    gap: nb-theme(shell-header-gap);
+    padding: nb-theme(shell-header-padding);
+    position: sticky;
+    top: 0;
+    background-color: nb-theme(shell-sidebar-background-color);
+
+    &__logo {
+        flex-grow: 1;
+        line-height: 1;
+        font-size: 0;
+        max-width: 100px;
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.scl-shell-sidebar {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    nb-menu {
+        margin-right: 16px;
+    }
+}
+
+.shell-sidebar {
+    &.compacted {
+        scl-shell-sidebar {
+            width: nb-theme(shell-sidebar-width);
+        }
+        .scl-shell-sidebar {
+            nb-card {
+                width: 100%;
+            }
+            nb-card-body {
+                overflow-x: hidden;
+            }
+            nb-menu {
+                // For icons
+                .menu-items > .menu-item {
+                    padding: nb-theme(shell-sidebar-icon-padding);
+                }
+
+                // For labels
+                .menu-items > .menu-item.menu-group {
+                    display: flex;
+                    justify-content: center;
+                    text-align: center;
+                    font-size: nb-theme(shell-sidebar-label-font-size);
+                    font-weight: nb-theme(shell-sidebar-label-font-weight);
+                    line-height: nb-theme(shell-sidebar-label-line-height);
+                    letter-spacing: nb-theme(shell-sidebar-label-letter-spacing);
+                    color: nb-theme(shell-sidebar-label-color);
+                    width: 100%;
+                    padding: nb-theme(shell-sidebar-label-padding);
+                }
+            }
+        }
+
+        scl-shell-actions {
+            width: 5rem;
+        }
+    }
+}
+
+.scl-shell-sidebar {
+    nb-card {
+        margin-right: nb-theme(shell-sidebar-margin-right);
+        max-height: calc(100vh - nb-theme(shell-sidebar-height));
+        height: 100%;
+        padding: nb-theme(shell-sidebar-padding);
+        background-color: transparent;
+        border: nb-theme(shell-sidebar-border);
+    }
+    nb-card-body {
+        overflow-y: auto;
+        padding: nb-theme(shell-sidebar-padding);
+    }
+}
+
+.scl-shell-actions {
+    position: fixed;
+    bottom: 0;
+    background-color: nb-theme(shell-sidebar-background-color);
+    width: nb-theme(sidebar-width);
+    left: 0;
+}
+
+storybook-shell-layout {
+    .layout-container {
+        .shell-sidebar {
+            .main-container-fixed {
+                position: static;
+            }
+        }
+    }
+}

package/shell/shell-sidebar-menu/shell-sidebar-menu-config.scss

@@ -0,0 +1,56 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        // Sidebar styles
+        sidebar-padding: 0.75rem 1rem 0rem 1rem,
+        sidebar-shadow: none,
+        sidebar-background-color: color-basic-50,
+        sidebar-label-font-size: scl-text-label-small-font-size,
+        sidebar-label-line-height: scl-text-label-small-line-height,
+
+        // Compacted sidebar styles
+        sidebar-width-compact: 5rem,
+        sidebar-compacted-menu-item-padding: 0.5rem 0rem 0.5rem 0rem,
+        sidebar-compacted-menu-item-icon-margin: 0rem,
+
+        // Menu group styles
+        menu-group-padding: 1.25rem 1rem 0.25rem,
+
+        // Menu styles
+        menu-text-color: color-basic-600,
+        menu-text-font-size: scl-text-label-large-font-size,
+        menu-text-line-height: scl-text-label-large-line-weight,
+        menu-text-font-weight: scl-text-medium-font-weight,
+
+        // Menu item styles
+        menu-item-padding: 0.5rem 1rem 0.5rem 1rem,
+        menu-item-text-padding: 0.75rem 1rem,
+        menu-item-border-radius: 0.375rem,
+        menu-item-divider-width: 0,
+        menu-item-hover-background-color: color-basic-100,
+        menu-item-hover-text-color: color-basic-600,
+        menu-item-active-background-color: color-primary-50,
+        menu-item-active-text-color: color-primary-500,
+        menu-item-border-color: color-basic-300,
+
+        // Menu items styles
+        menu-items-expanded-border-width: 0.125rem,
+        menu-items-expanded-border-color: color-basic-300,
+
+        // Submenu styles
+        menu-submenu-padding: 0.25rem 0.719rem,
+        menu-submenu-margin: 0.25rem 0rem 0.25rem 1.625rem,
+
+        // Submenu padding when menu collapsed
+        menu-items-collapsed-submenu-padding: 0,
+
+        // Submenu item styles
+        menu-submenu-item-padding: 0.5rem 1rem,
+        menu-submenu-item-hover-background-color: color-basic-100,
+        menu-submenu-item-hover-text-color: color-basic-600,
+        menu-submenu-item-active-background-color: color-primary-50
+    ),
+    default,
+    default
+);

package/shell/shell-sidebar-menu/shell-sidebar-menu.scss

@@ -0,0 +1,76 @@
+@use '@nebular/theme/styles/theming' as *;
+nb-menu {
+    .menu-items {
+        .menu-group {
+            text-transform: uppercase;
+            font-size: nb-theme(sidebar-label-font-size);
+            line-height: nb-theme(sidebar-label-line-height);
+            letter-spacing: nb-theme(sidebar-label-uppercase-tracking);
+            padding: nb-theme(menu-group-padding);
+        }
+
+        .expanded {
+            border-left: nb-theme(menu-items-expanded-border-width) solid nb-theme(menu-items-expanded-border-color);
+        }
+
+        .menu-item {
+            a.active {
+                &:has(+ .menu-items) {
+                    background-color: nb-theme(sidebar-background-color);
+                    color: nb-theme(menu-text-color);
+
+                    .menu-icon {
+                        color: nb-theme(menu-text-color);
+                    }
+                }
+            }
+
+            .menu-items.collapsed {
+                padding: nb-theme(menu-items-collapsed-submenu-padding);
+            }
+        }
+    }
+}
+
+nb-sidebar.compacted {
+    nb-menu {
+        display: inherit;
+
+        .menu-items {
+            .menu-item {
+                a {
+                    padding: nb-theme(sidebar-compacted-menu-item-padding);
+
+                    .menu-icon {
+                        margin: nb-theme(sidebar-compacted-menu-item-icon-margin);
+                    }
+                }
+
+                a.active {
+                    &:has(+ .menu-items) {
+                        background-color: nb-theme(menu-item-active-background-color);
+                    }
+
+                    .menu-icon {
+                        color: nb-theme(menu-item-active-text-color);
+                    }
+
+                    &::before {
+                        background: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// overriding nebular menu chevron-left icon as chevron-right
+.menu-item {
+    &:has(.menu-items.collapsed) {
+        a {
+            nb-icon.expand-state {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

package/shell/shell.component.d.ts

@@ -0,0 +1,21 @@
+import { OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { NbIconLibraries, NbMenuService, NbSidebarService } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclShellComponent implements OnInit {
+    private sidebarService;
+    private iconLibraries;
+    private menuService;
+    private router;
+    private readonly sidebars;
+    constructor(sidebarService: NbSidebarService, iconLibraries: NbIconLibraries, menuService: NbMenuService, router: Router);
+    ngOnInit(): void;
+    private handleMenuItemSelect;
+    private collapseSidebars;
+    private defaultSidebarAction;
+    private toggleSidebar;
+    sidebarToggle(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclShellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclShellComponent, "scl-shell-layout", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=shell.component.d.ts.map

package/shell/shell.component.scss

@@ -0,0 +1,55 @@
+@use '@nebular/theme/styles/theming' as *;
+
+nb-sidebar.compacted {
+    .scl-shell-header {
+        justify-content: center;
+
+        &__logo {
+            display: none;
+        }
+    }
+}
+
+.scl-shell-header {
+    display: flex;
+
+    &__image {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.scl-shell-content {
+    background-color: nb-theme(shell-content-background-color);
+    border-width: nb-theme(shell-content-border-width);
+    border-style: solid;
+    border-color: nb-theme(shell-content-border-color);
+    border-radius: nb-theme(shell-content-border-radius);
+    margin: nb-theme(shell-content-margin);
+}
+
+// For compacted sidebar
+.shell-sidebar {
+    &.compacted {
+        .scl-shell-sidebar {
+            width: nb-theme(shell-sidebar-compacted-width);
+        }
+
+        .scrollable {
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+
+nb-sidebar {
+    .main-container.main-container-fixed {
+        .scrollable {
+            overflow: hidden;
+        }
+    }
+}
+
+nb-layout .layout .layout-container .content .columns nb-layout-column.xpas-shell-content:has(.scl-pagination) {
+    padding-bottom: 0;
+}

package/side-drawer/side-drawer-config.scss

@@ -0,0 +1,20 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-side-drawer-background-color: color-base-white,
+        scl-side-drawer-min-height: 100vh,
+        scl-side-drawer-padding: 0 1.5rem 1.5rem,
+        scl-side-drawer-width: 29.25rem,
+
+        scl-side-drawer-content-width: 100%,
+        scl-side-drawer-content-height: 100%,
+
+        scl-side-drawer-small-width: 29.25rem,
+        scl-side-drawer-medium-width: 38rem,
+        scl-side-drawer-large-width: 59rem,
+        scl-side-drawer-giant-width: 75rem,
+    ),
+    default,
+    default
+);

package/side-drawer/side-drawer.d.ts

@@ -0,0 +1,8 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SclSideDrawer implements OnInit {
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclSideDrawer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclSideDrawer, "scl-side-drawer", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=side-drawer.d.ts.map