@f1falcha/stimulus 1.0.0

package/label/label-config.scss

@@ -0,0 +1,13 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        label-text-color: color-basic-600,
+        label-text-font-size: 0.875rem,
+        label-text-line-height: 1.43,
+        label-text-font-weight: 500,
+        label-text-margin: 0.375rem,
+    ),
+    default,
+    default
+);

package/label/label.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class SclLabel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclLabel, "[sclLabel]", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=label.d.ts.map

package/label/label.scss

@@ -0,0 +1,10 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-label {
+    display: block;
+    color: nb-theme(label-text-color);
+    font-size: nb-theme(label-text-font-size);
+    line-height: nb-theme(label-text-line-height);
+    font-weight: nb-theme(label-text-font-weight);
+    margin-bottom: nb-theme(label-text-margin);
+}

package/layout/layout.component.d.ts

@@ -0,0 +1,9 @@
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export declare class SclLayoutComponent {
+    private iconLibraries;
+    constructor(iconLibraries: NbIconLibraries);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclLayoutComponent, "scl-layout", never, {}, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=layout.component.d.ts.map

package/link/link-config.scss

@@ -0,0 +1,89 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-link-small-font-size: 0.75rem,
+        scl-link-small-line-height: 1rem,
+
+        scl-link-small-icon-width: 1rem,
+        scl-link-small-icon-height: 1rem,
+
+        scl-link-medium-font-size: 0.875rem,
+        scl-link-medium-line-height: 1.25rem,
+
+        scl-link-large-font-size: 1rem,
+        scl-link-large-line-height: 1.25rem,
+
+        // Basic link
+        scl-link-basic-text-color: color-basic-600,
+
+        scl-link-basic-hover-text-color: color-basic-700,
+
+        scl-link-basic-active-text-color: color-basic-800,
+
+        scl-link-basic-focus-text-color: color-basic-600,
+
+        scl-link-basic-disabled-text-color: color-basic-400,
+
+        // Primary link
+        scl-link-primary-text-color: color-primary-600,
+
+        scl-link-primary-hover-text-color: color-primary-700,
+
+        scl-link-primary-active-text-color: color-primary-800,
+
+        scl-link-primary-focus-text-color: color-primary-500,
+
+        scl-link-primary-disabled-text-color: color-primary-300,
+
+        // Danger Link
+        scl-link-danger-text-color: color-danger-700,
+
+        scl-link-danger-hover-text-color: color-danger-800,
+
+        scl-link-danger-active-text-color: color-danger-900,
+
+        scl-link-danger-focus-text-color: color-danger-700,
+
+        scl-link-danger-disabled-text-color: color-danger-300,
+
+        // Info Link
+        scl-link-info-text-color: color-info-700,
+
+        scl-link-info-focus-text-color: color-info-800,
+
+        scl-link-info-hover-text-color: color-info-900,
+
+        scl-link-info-active-text-color: color-info-700,
+
+        scl-link-info-disabled-text-color: color-info-300,
+
+        // Success Link
+        scl-link-success-text-color: color-success-700,
+
+        scl-link-success-hover-text-color: color-success-800,
+
+        scl-link-success-active-text-color: color-success-900,
+
+        scl-link-success-focus-text-color: color-success-700,
+
+        scl-link-success-disabled-text-color: color-success-300,
+
+        // Warning Link
+        scl-link-warning-text-color: color-warning-700,
+
+        scl-link-warning-hover-text-color: color-warning-800,
+
+        scl-link-warning-active-text-color: color-warning-900,
+
+        scl-link-warning-focus-text-color: color-warning-700,
+
+        scl-link-warning-disabled-text-color: color-warning-300,
+
+        scl-link-focus-width: 0.25rem,
+        scl-link-focus-style: solid,
+        scl-link-focus-border-radius: 0.31rem,
+    ),
+    default,
+    default
+);

package/link/link.d.ts

@@ -0,0 +1,19 @@
+import { NbComponentOrCustomStatus } from '@nebular/theme';
+import * as i0 from "@angular/core";
+export type Size = 'small' | 'medium' | 'large';
+export declare class SclLink {
+    size: Size;
+    get small(): boolean;
+    get medium(): boolean;
+    get large(): boolean;
+    status: NbComponentOrCustomStatus;
+    get basic(): boolean;
+    get primary(): boolean;
+    get danger(): boolean;
+    get info(): boolean;
+    get success(): boolean;
+    get warning(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SclLink, "[sclLink]", never, { "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=link.d.ts.map

package/link/link.scss

@@ -0,0 +1,157 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-link {
+    cursor: pointer;
+    text-decoration: none;
+    padding: 0;
+    border-width: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+
+    &--small {
+        font-size: nb-theme(scl-link-small-font-size);
+        line-height: nb-theme(scl-link-small-line-height);
+
+        nb-icon {
+            width: nb-theme(scl-link-small-icon-width);
+            height: nb-theme(scl-link-small-icon-height);
+        }
+    }
+    &--medium {
+        font-size: nb-theme(scl-link-medium-font-size);
+        line-height: nb-theme(scl-link-medium-line-height);
+    }
+    &--large {
+        font-size: nb-theme(scl-link-large-font-size);
+        line-height: nb-theme(scl-link-large-line-height);
+    }
+
+    &--basic {
+        color: nb-theme(scl-link-basic-text-color);
+
+        &:hover {
+            color: nb-theme(scl-link-basic-hover-text-color);
+        }
+
+        &:active {
+            color: nb-theme(scl-link-basic-active-text-color);
+        }
+
+        &:focus {
+            color: nb-theme(scl-link-basic-focus-text-color);
+        }
+
+        &[disabled] {
+            color: nb-theme(scl-link-basic-disabled-text-color);
+            cursor: not-allowed;
+        }
+    }
+
+    &--primary {
+        color: nb-theme(scl-link-primary-text-color);
+
+        &:hover {
+            color: nb-theme(scl-link-primary-hover-text-color);
+        }
+
+        &:active {
+            color: nb-theme(scl-link-primary-active-text-color);
+        }
+
+        &:focus {
+            color: nb-theme(scl-link-primary-focus-text-color);
+            outline: nb-theme(scl-link-focus-width) nb-theme(scl-link-focus-style) nb-theme(color-primary-100);
+            border-radius: nb-theme(scl-link-focus-border-radius);
+        }
+
+        &[disabled] {
+            color: nb-theme(scl-link-primary-disabled-text-color);
+            cursor: not-allowed;
+        }
+    }
+
+    &--danger {
+        color: nb-theme(scl-link-danger-text-color);
+
+        &:hover {
+            color: nb-theme(scl-link-danger-hover-text-color);
+        }
+
+        &:active {
+            color: nb-theme(scl-link-danger-active-text-color);
+        }
+
+        &:focus {
+            color: nb-theme(scl-link-danger-focus-text-color);
+        }
+
+        &[disabled] {
+            color: nb-theme(scl-link-danger-disabled-text-color);
+            cursor: not-allowed;
+        }
+    }
+
+    &--info {
+        color: nb-theme(scl-link-info-text-color);
+
+        &:hover {
+            color: nb-theme(scl-link-info-hover-text-color);
+        }
+
+        &:active {
+            color: nb-theme(scl-link-info-active-text-color);
+        }
+
+        &:focus {
+            color: nb-theme(scl-link-info-focus-text-color);
+        }
+
+        &[disabled] {
+            color: nb-theme(scl-link-info-disabled-text-color);
+            cursor: not-allowed;
+        }
+    }
+
+    &--success {
+        color: nb-theme(scl-link-success-text-color);
+
+        &:hover {
+            color: nb-theme(scl-link-success-hover-text-color);
+        }
+
+        &:active {
+            color: nb-theme(scl-link-success-active-text-color);
+        }
+
+        &:focus {
+            color: nb-theme(scl-link-success-focus-text-color);
+        }
+
+        &[disabled] {
+            color: nb-theme(scl-link-success-disabled-text-color);
+            cursor: not-allowed;
+        }
+    }
+
+    &--warning {
+        color: nb-theme(scl-link-warning-text-color);
+
+        &:hover {
+            color: nb-theme(scl-link-warning-hover-text-color);
+        }
+
+        &:active {
+            color: nb-theme(scl-link-warning-active-text-color);
+        }
+
+        &:focus {
+            color: nb-theme(scl-link-warning-focus-text-color);
+        }
+
+        &[disabled] {
+            color: nb-theme(scl-link-warning-disabled-text-color);
+            cursor: not-allowed;
+        }
+    }
+}

package/media-preview/media-preview-config.scss

@@ -0,0 +1,15 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-media-preview-container-gap: 2rem 1rem,
+
+        scl-media-preview-item-gap: 0.375rem,
+        scl-media-preview-item-margin: 0,
+
+        scl-media-preview-image-width: 100%,
+        scl-media-preview-image-height: 100%,
+    ),
+    default,
+    default
+);

package/media-preview/media-preview-icon.d.ts

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

package/media-preview/media-preview-modal/media-preview-modal.d.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { SwiperContainer } from 'swiper/element';
+import { SclMedia } from '../media-preview';
+import { MediaPreviewService } from '../media_preview.service';
+import * as i0 from "@angular/core";
+export declare class SclMediaPreviewModal implements OnInit, AfterViewInit, OnDestroy {
+    private mediaService;
+    closeModal: EventEmitter<null>;
+    medias: SclMedia[];
+    activeImageIndex: number;
+    showCaption: boolean;
+    showThumbnails: boolean;
+    swiperPreview: ElementRef<SwiperContainer>;
+    swiperThumbs: ElementRef<SwiperContainer>;
+    activeMedia: BehaviorSubject<SclMedia>;
+    constructor(mediaService: MediaPreviewService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    get showNavigation(): boolean;
+    private initializeSwiper;
+    initPreviewSwiper(): void;
+    initThumbsSwiper(): void;
+    closePreview(): void;
+    copyUrl(url: string): void;
+    downloadImage(media: any): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclMediaPreviewModal, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclMediaPreviewModal, "scl-media-preview-modal", never, { "medias": { "alias": "medias"; "required": false; }; "activeImageIndex": { "alias": "activeImageIndex"; "required": false; }; "showCaption": { "alias": "showCaption"; "required": false; }; "showThumbnails": { "alias": "showThumbnails"; "required": false; }; }, { "closeModal": "closeModal"; }, never, never, true, never>;
+}
+//# sourceMappingURL=media-preview-modal.d.ts.map

package/media-preview/media-preview-modal/media-preview-modal.scss

@@ -0,0 +1,148 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-media-preview-modal {
+    display: flex;
+    flex-direction: column;
+    width: nb-theme(scl-media-preview-modal-width);
+    height: nb-theme(scl-media-preview-modal-height);
+    position: relative;
+    backdrop-filter: blur(6px);
+    background-color: nb-theme(scl-media-preview-modal-background-color);
+    overflow: hidden auto;
+    justify-content: space-between;
+
+    &__header {
+        display: flex;
+        justify-content: center;
+        width: nb-theme(scl-media-preview-modal-header-width);
+        padding: nb-theme(scl-media-preview-modal-header-padding);
+    }
+
+    &__container {
+        flex-grow: 1;
+        position: relative;
+        max-height: 75%;
+
+        &--with-thumbnail {
+            max-height: 60%;
+        }
+    }
+
+    &__footer {
+        min-height: 150px;
+        &--slide-caption {
+            color: nb-theme(scl-media-preview-modal-footer-caption-color);
+            text-align: center;
+            padding: nb-theme(scl-media-preview-modal-footer-caption-padding);
+            height: nb-theme(scl-media-preview-modal-footer-caption-height);
+            overflow-y: auto;
+            display: grid;
+            place-items: center;
+
+            nb-icon {
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+.scl-swiper-preview {
+    height: nb-theme(scl-swiper-preview-height);
+    margin: auto;
+
+    &__slide {
+        position: relative;
+        text-align: center;
+        font-size: nb-theme(scl-swiper-preview-slide-font-size);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__slide-image {
+        height: 100%;
+        object-fit: contain;
+        overflow: hidden;
+    }
+}
+
+.scl-swiper-thumbs {
+    width: nb-theme(scl-swiper-thumbs-width);
+    padding: nb-theme(scl-swiper-thumbs-padding);
+
+    &__slide {
+        cursor: pointer;
+        filter: brightness(0.6);
+
+        figure {
+            margin: nb-theme(scl-swiper-thumbs-slide-margin);
+        }
+    }
+
+    &__slide-image {
+        width: nb-theme(scl-swiper-thumbs-slide-image-width);
+        height: nb-theme(scl-swiper-thumbs-slide-image-height);
+        height: clamp(80px, 10vw, 100px);
+        object-fit: cover;
+        border-radius: nb-theme(scl-swiper-thumbs-slide-image-border-radius);
+    }
+}
+
+.scl-swiper-thumbs .swiper-slide-thumb-active {
+    filter: brightness(1);
+    .scl-swiper-thumbs__slide-image {
+        width: nb-theme(scl-swiper-thumbs-slide-image-active-width);
+        height: nb-theme(scl-swiper-thumbs-slide-image-active-height);
+        height: clamp(100px, 12vw, 132px);
+        border: nb-theme(scl-swiper-thumbs-slide-image-active-border);
+    }
+}
+
+.scl-preview-button {
+    position: absolute;
+    color: nb-theme(scl-swiper-preview-slide-button-color);
+    z-index: 3;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 14px;
+    border-style: nb-theme(button-outline-border-style);
+    border-width: nb-theme(button-outline-border-width);
+    border-color: nb-theme(button-outline-control-border-color);
+    text-transform: nb-theme(button-outline-text-transform);
+    border-radius: nb-theme(scl-swiper-preview-slide-button-border-radius);
+    cursor: pointer;
+    transition: 0.15s ease-in;
+    transition-property: background-color, border-color, box-shadow, color;
+
+    &:hover {
+        background-color: nb-theme(button-outline-control-focus-background-color);
+        border-color: nb-theme(button-outline-control-hover-border-color);
+        color: nb-t heme(button-outline-control-hover-text-color);
+    }
+    &:focus {
+        background-color: nb-theme(button-outline-control-focus-background-color);
+        border-color: nb-theme(button-outline-control-focus-border-color);
+        color: nb-theme(button-outline-control-focus-text-color);
+    }
+
+    &:active {
+        outline: 0.25rem solid nb-theme(scl-swiper-preview-slide-button-color);
+    }
+
+    &[disabled],
+    &.btn-disabled {
+        background-color: nb-theme(button-outline-control-disabled-background-color);
+        border-color: nb-theme(button-outline-control-disabled-border-color);
+        color: nb-theme(button-outline-control-disabled-text-color);
+        cursor: not-allowed;
+    }
+    &__previous {
+        bottom: nb-theme(scl-swiper-preview-slide-button-bottom);
+        left: nb-theme(scl-swiper-preview-slide-previous-button-left);
+    }
+
+    &__next {
+        bottom: nb-theme(scl-swiper-preview-slide-button-bottom);
+        right: nb-theme(scl-swiper-preview-slide-next-button-right);
+    }
+}

package/media-preview/media-preview-modal/media-previw-modal-config.scss

@@ -0,0 +1,44 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-media-preview-modal-width: 100vw,
+        scl-media-preview-modal-height: 100vh,
+        scl-media-preview-modal-background-color: rgba(0, 0, 0, 0.9),
+        scl-media-preview-modal-header-width: 100%,
+        scl-media-preview-modal-header-padding: 1rem,
+
+        scl-media-preview-modal-footer-caption-padding: 1rem,
+        scl-media-preview-modal-footer-caption-height: 7.5rem,
+        scl-media-preview-modal-footer-caption-color: color-base-white,
+
+        scl-swiper-preview-navigation-size: 1.25rem,
+        scl-swiper-preview-theme-color: color-base-white,
+        scl-swiper-preview-navigation-offset: 1.563rem,
+        scl-swiper-preview-height: 100%,
+
+        scl-swiper-preview-slide-font-size: 1.125rem,
+        scl-swiper-preview-slide-image-height: 100%,
+
+        scl-swiper-preview-slide-button-bottom: 16.625rem,
+        scl-swiper-preview-slide-next-button-right: 2.625rem,
+        scl-swiper-preview-slide-previous-button-left: 2.625rem,
+        scl-swiper-preview-slide-button-border-radius: 0.375rem,
+        scl-swiper-preview-slide-button-color: color-base-white,
+
+        scl-swiper-thumbs-width: 95%,
+        scl-swiper-thumbs-padding: 1rem,
+
+        scl-swiper-thumbs-slide-margin: 0,
+
+        scl-swiper-thumbs-slide-image-width: 100%,
+        scl-swiper-thumbs-slide-image-height: 100px,
+        scl-swiper-thumbs-slide-image-border-radius: 0.5rem,
+
+        scl-swiper-thumbs-slide-image-active-width: 100%,
+        scl-swiper-thumbs-slide-image-active-height: 8.25rem,
+        scl-swiper-thumbs-slide-image-active-border: 0.125rem solid color-base-white,
+    ),
+    default,
+    default
+);

package/media-preview/media-preview.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { NbDialogService, NbIconLibraries } from '@nebular/theme';
+import { MediaPreviewService } from './media_preview.service';
+import * as i0 from "@angular/core";
+export type SclMedia = {
+    url: string;
+    name?: string;
+    alt?: string;
+};
+declare const LAYOUT: {
+    readonly LIST: "list";
+    readonly GRID: "grid";
+    readonly LABELLED_GRID: "labelled-grid";
+};
+export type SclLayout = (typeof LAYOUT)[keyof typeof LAYOUT];
+export declare class SclMediaPreview implements OnDestroy {
+    private dialogService;
+    private mediaService;
+    private iconLibraries;
+    download: EventEmitter<SclMedia>;
+    layout: SclLayout;
+    get media(): SclMedia[];
+    set media(value: SclMedia | SclMedia[]);
+    get showPreviewCaption(): boolean | string;
+    set showPreviewCaption(value: boolean | string);
+    get showThumbnails(): boolean | string;
+    set showThumbnails(value: boolean | string);
+    private mediaServiceSubscription$;
+    private _showThumbnails;
+    private _showPreviewCaption;
+    readonly LAYOUT: {
+        readonly LIST: "list";
+        readonly GRID: "grid";
+        readonly LABELLED_GRID: "labelled-grid";
+    };
+    mediaList: SclMedia[];
+    isPreviewModalOpen: boolean;
+    constructor(dialogService: NbDialogService, mediaService: MediaPreviewService, iconLibraries: NbIconLibraries);
+    previewImage(index: number): void;
+    copyImageUrl(value: string): void;
+    downloadImage(media: SclMedia): void;
+    handleSpaceKey(event: Event, index: number): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclMediaPreview, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclMediaPreview, "scl-media-preview", never, { "layout": { "alias": "layout"; "required": false; }; "media": { "alias": "media"; "required": false; }; "showPreviewCaption": { "alias": "showPreviewCaption"; "required": false; }; "showThumbnails": { "alias": "showThumbnails"; "required": false; }; }, { "download": "download"; }, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=media-preview.d.ts.map

package/media-preview/media-preview.scss

@@ -0,0 +1,59 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-media-preview {
+    &__container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: nb-theme(scl-media-preview-container-gap);
+
+        scl-image-panel {
+            cursor: pointer;
+        }
+    }
+    &__list {
+        position: relative;
+    }
+    &__item {
+        gap: nb-theme(scl-media-preview-item-gap);
+        margin: nb-theme(scl-media-preview-item-margin);
+        cursor: pointer;
+
+        &--list {
+            display: flex;
+            align-items: flex-end;
+
+            &:focus {
+                outline: 0.25rem solid nb-theme(color-primary-100);
+            }
+        }
+
+        &--tiny {
+            height: 32px;
+            width: 32px;
+        }
+        &--small {
+            height: 64px;
+            width: 64px;
+        }
+        &--medium {
+            height: 128px;
+            width: 128px;
+        }
+        &--large {
+            height: 256px;
+            width: 256px;
+        }
+    }
+    &__image {
+        width: nb-theme(scl-media-preview-image-width);
+        height: nb-theme(scl-media-preview-image-width);
+        object-fit: cover;
+    }
+
+    &__caption {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+    }
+}

package/media-preview/media_preview.service.d.ts

@@ -0,0 +1,16 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { SclAlertService } from '../alert/alert.service';
+import { SclMedia } from './media-preview';
+import * as i0 from "@angular/core";
+export declare class MediaPreviewService {
+    private clipboard;
+    private alertService;
+    private dataSubject;
+    data$: import("rxjs").Observable<SclMedia>;
+    constructor(clipboard: Clipboard, alertService: SclAlertService);
+    emitMediaData(media: SclMedia): void;
+    copyMediaUrl(url: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MediaPreviewService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MediaPreviewService>;
+}
+//# sourceMappingURL=media_preview.service.d.ts.map