@rt-tools/ui-kit 0.0.4

package/src/lib/ui-kit/dynamic-selectors/components/actions/rtui-dynamic-selector-list-actions.component.scss

@@ -0,0 +1,63 @@
+@use '../../../../../styles/base/mixin' as mixins;
+
+$dynamic-selector-list-actions: (
+    host: (
+        padding-right: 0.25rem,
+    ),
+    control: (
+        padding: 0 0.25rem 0 0.25rem,
+        border-right: none,
+    ),
+    control-last-child: (
+        padding: 0 0 0 0.25rem,
+        border-right: none,
+    ),
+    item-icon: (
+        size: 1.125rem,
+    ),
+    item-active: (
+        color: var(--clr-red-100),
+    ),
+);
+
+:host {
+    @each $element, $elements in $dynamic-selector-list-actions {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('dynamic-selector-list-actions', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-right: var(--rt-dynamic-selector-list-actions-host-padding-right);
+
+    .rtui-dynamic-selector-list-actions {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        padding-right: var(--rt-dynamic-selector-list-actions-padding-right);
+
+        &__control {
+            padding: var(--rt-dynamic-selector-list-actions-control-padding);
+            border-right: var(--rt-dynamic-selector-list-actions-control-border-right);
+
+            &:last-child {
+                padding: var(--rt-dynamic-selector-item-control-last-child-padding);
+                border-right: var(--rt-dynamic-selector-item-control-last-child-border-right);
+            }
+        }
+
+        &__item {
+            &--active {
+                color: var(--rt-dynamic-selector-list-actions-item-active-color);
+            }
+
+            &-icon {
+                width: var(--rt-dynamic-selector-list-actions-item-icon-size);
+                height: var(--rt-dynamic-selector-list-actions-item-icon-size);
+                font-size: var(--rt-dynamic-selector-list-actions-item-icon-size);
+            }
+        }
+    }
+}

package/src/lib/ui-kit/dynamic-selectors/components/dynamic-input/rtui-dynamic-input.component.scss

@@ -0,0 +1,3 @@
+:host {
+    width: 100%;
+}

package/src/lib/ui-kit/dynamic-selectors/components/dynamic-selector/rtui-dynamic-selector.component.scss

@@ -0,0 +1,7 @@
+:host {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}

package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss

@@ -0,0 +1,229 @@
+@use '../../../../../styles/base/mixin' as mixins;
+
+$multi-selector: (
+    host: (
+        width: 20rem,
+        height: 30rem,
+        padding: 1rem 0 1rem 1rem,
+        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+        border-radius: 0.375rem,
+        background-color: var(--clr-white-100),
+    ),
+    header: (
+        padding: 0 1rem 0 0,
+    ),
+    header-simple: (
+        padding: 0 1rem 1rem 0,
+    ),
+    header-controls-item-icon: (
+        margin-left: 0.5rem,
+        color: var(--clr-black-40),
+    ),
+    header-controls-item-info: (
+        margin-left: 0.5rem,
+        font-size: 0.875rem,
+        color: var(--clr-black-60),
+    ),
+    header-controls-item-first: (
+        padding: 1rem 0 0 0.5rem,
+    ),
+    header-controls-item-last: (
+        padding: 1rem 0 0 0,
+        border-bottom: solid 1px var(--clr-gray-20),
+    ),
+    item-label-hover: (
+        color: var(--clr-black-60),
+    ),
+    options-item-separated: (
+        border-bottom: solid 1px var(--clr-gray-20),
+    ),
+    options-item-title: (
+        max-width: 15rem,
+    ),
+    placeholder: (
+        gap: 1rem,
+        padding-right: 1rem,
+    ),
+    placeholder-icon: (
+        size: 3rem,
+        color: var(--clr-black-60),
+    ),
+    placeholder-title: (
+        font-size: 1.5rem,
+        color: var(--clr-black-60),
+    ),
+    footer: (
+        padding: 1rem 1.5rem 0 0.5rem,
+        gap: 0.5rem,
+    ),
+    footer-nav-action: (
+        font-size: 0.875rem,
+        color: var(--clr-black-60),
+    ),
+    footer-nav-action-hover: (
+        color: var(--clr-black-100),
+    ),
+);
+
+:host {
+    @each $element, $elements in $multi-selector {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('multi-selector', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    display: flex;
+    flex-direction: column;
+    width: var(--rt-multi-selector-host-width);
+    height: var(--rt-multi-selector-host-height);
+    padding: var(--rt-multi-selector-host-padding);
+    box-shadow: var(--rt-multi-selector-host-box-shadow);
+    border-radius: var(--rt-multi-selector-host-border-radius);
+    background-color: var(--rt-multi-selector-host-background-color);
+
+    &::ng-deep {
+        // radiobutton
+        mat-radio-button {
+            .mdc-form-field {
+                .mdc-label {
+                    cursor: pointer;
+                }
+
+                &:hover .mdc-label {
+                    color: var(--rt-multi-selector-item-label-hover-color);
+                }
+            }
+        }
+
+        // checkbox
+        mat-checkbox {
+            width: fit-content;
+
+            .mdc-form-field {
+                &:hover .mdc-label {
+                    color: var(--rt-multi-selector-item-label-hover-color);
+                }
+            }
+        }
+    }
+
+    .rtui-multi-selector-header {
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-multi-selector-header-padding);
+
+        &--simple {
+            padding: var(--rt-multi-selector-header-simple-padding);
+        }
+
+        &__controls {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            &-item {
+                &--first {
+                    display: flex;
+                    flex-direction: row;
+                    padding: var(--rt-multi-selector-header-controls-item-first-padding);
+                }
+
+                &--last {
+                    width: 100%;
+                    padding: var(--rt-multi-selector-header-controls-item-last-padding);
+                    border-bottom: var(--rt-multi-selector-header-controls-item-last-border-bottom);
+                }
+
+                &-icon {
+                    margin-left: var(--rt-multi-selector-header-controls-item-icon-margin-left);
+                    color: var(--rt-multi-selector-header-controls-item-icon-color);
+                }
+
+                &-info {
+                    margin-left: var(--rt-multi-selector-header-controls-item-info-margin-left);
+                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
+                    color: var(--rt-multi-selector-header-controls-item-info-color);
+                }
+            }
+        }
+    }
+
+    .rtui-multi-selector-options {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 100%;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+
+        &__item {
+            &-title {
+                width: 100%;
+                max-width: var(--rt-multi-selector-options-item-title-max-width);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &--separated {
+                border-bottom: var(--rt-multi-selector-options-item-separated-border-bottom);
+            }
+        }
+
+        &__loader {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .rtui-multi-selector-placeholder {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 1 1 100%;
+        gap: var(--rt-multi-selector-placeholder-gap);
+        padding-right: var(--rt-multi-selector-placeholder-padding-right);
+        overflow-y: auto;
+
+        &__icon {
+            width: var(--rt-multi-selector-placeholder-icon-size);
+            height: var(--rt-multi-selector-placeholder-icon-size);
+            font-size: var(--rt-multi-selector-placeholder-icon-size);
+            color: var(--rt-multi-selector-placeholder-icon-color);
+        }
+
+        &__title {
+            font-size: var(--rt-multi-selector-placeholder-title-font-size);
+            color: var(--rt-multi-selector-placeholder-title-color);
+        }
+    }
+
+    .rtui-multi-selector-footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: var(--rt-multi-selector-footer-padding);
+        gap: var(--rt-multi-selector-footer-gap);
+
+        &--full {
+            justify-content: space-between;
+        }
+
+        &__nav-action {
+            text-decoration: none;
+            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
+            color: var(--rt-multi-selector-footer-nav-action-color);
+
+            &:hover {
+                color: var(--rt-multi-selector-footer-nav-action-hover-color);
+            }
+        }
+
+        &__base-actions {
+            display: flex;
+            gap: var(--rt-multi-selector-footer-gap);
+        }
+    }
+}

package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss

@@ -0,0 +1,59 @@
+@use '../../../../../styles/base/mixin' as mixins;
+
+$dynamic-selector-placeholder: (
+    host: (
+        width: 100%,
+        height: 100%,
+        min-height: 10rem,
+        gap: 1rem,
+    ),
+    icon: (
+        size: 4rem,
+        color: var(--clr-black-80),
+    ),
+    icon-warn: (
+        color: var(--clr-orange-70),
+    ),
+    description: (
+        font-size: 1rem,
+        line-height: 1.25rem,
+        color: var(--clr-black-60),
+    ),
+);
+
+:host {
+    @each $element, $elements in $dynamic-selector-placeholder {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('dynamic-selector-placeholder', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    width: var(--rt-dynamic-selector-placeholder-host-width);
+    height: var(--rt-dynamic-selector-placeholder-host-height);
+    min-height: var(--rt-dynamic-selector-placeholder-host-min-height);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rt-dynamic-selector-placeholder-host-gap);
+
+    .rtui-dynamic-selector-placeholder {
+        &__icon {
+            width: var(--rt-dynamic-selector-placeholder-icon-size);
+            height: var(--rt-dynamic-selector-placeholder-icon-size);
+            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
+            color: var(--rt-dynamic-selector-placeholder-icon-color);
+
+            &--warn {
+                color: var(--rt-dynamic-selector-placeholder-icon-warn-color);
+            }
+        }
+
+        &__description {
+            font-size: var(--rt-dynamic-selector-placeholder-description-font-size);
+            line-height: var(--rt-dynamic-selector-placeholder-description-line-height);
+            color: var(--rt-dynamic-selector-placeholder-description-color);
+        }
+    }
+}

package/src/lib/ui-kit/dynamic-selectors/components/selected-list/rtui-dynamic-selector-selected-list.component.scss

@@ -0,0 +1,35 @@
+:host {
+    &::ng-deep {
+        .mat-mdc-form-field-flex {
+            height: 100%;
+        }
+
+        .mat-mdc-form-field-infix {
+            display: flex;
+            height: 100%;
+            min-height: 100%;
+            align-items: center;
+            padding: 0;
+        }
+    }
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drag-preview {
+    border: none;
+    box-sizing: border-box;
+    border-radius: var(--rt-dynamic-selector-item-border-radius);
+    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
+    background: var(--mat-option-selected-state-layer-color);
+}

package/src/lib/ui-kit/dynamic-selectors/strories/component/input/test-dynamic-input.component.scss

@@ -0,0 +1,16 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: -1rem;
+
+    rtui-dynamic-input {
+        width: 100%;
+        max-width: 30rem;
+        padding: 1rem;
+    }
+}

package/src/lib/ui-kit/dynamic-selectors/strories/component/selector/test-selector.component.scss

@@ -0,0 +1,22 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: -1rem;
+
+    rtui-dynamic-selector {
+        width: 100%;
+        max-width: 30rem;
+        padding: 1rem;
+    }
+
+    .preset-button {
+        position: fixed;
+        top: 1rem;
+        left: 1rem;
+    }
+}

package/src/lib/ui-kit/file-uploader/rtui-file-upload.component.scss

@@ -0,0 +1,69 @@
+@use '../../../styles/base/mixin' as mixins;
+
+$file-upload: (
+    host: (
+        width: 100%,
+        max-width: 20rem,
+        height: 100%,
+        max-height: 20rem,
+        display: flex,
+        flex-direction: column,
+        justify-content: center,
+        align-items: center,
+        gap: 1rem,
+        padding: 1rem,
+        border: 2px dashed var(--clr-black-20),
+        border-radius: 1rem,
+    ),
+    host-dragged: (
+        border-color: var(--mat-button-text-label-text-color),
+    ),
+    icon: (
+        size: 2rem,
+        color: var(--clr-black-100),
+    ),
+    title: (
+        font-size: 1rem,
+        color: var(--clr-text),
+    ),
+);
+
+:host {
+    @each $element, $elements in $file-upload {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('file-upload', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    width: var(--rt-file-upload-host-width);
+    max-width: var(--rt-file-upload-host-max-width);
+    height: var(--rt-file-upload-host-height);
+    max-height: var(--rt-file-upload-host-max-height);
+    display: var(--rt-file-upload-host-display);
+    flex-direction: var(--rt-file-upload-host-flex-direction);
+    justify-content: var(--rt-file-upload-host-justify-content);
+    align-items: var(--rt-file-upload-host-align-items);
+    gap: var(--rt-file-upload-host-gap);
+    padding: var(--rt-file-upload-host-padding);
+    border: var(--rt-file-upload-host-border);
+    border-radius: var(--rt-file-upload-host-border-radius);
+    transition: border-color 0.3s ease-in-out;
+
+    &.--dragged {
+        border-color: var(--rt-file-upload-host-dragged-border-color);
+    }
+
+    .file-upload {
+        &__icon {
+            width: var(--rt-file-upload-icon-size);
+            height: var(--rt-file-upload-icon-size);
+            font-size: var(--rt-file-upload-icon-size);
+            color: var(--rt-file-upload-icon-color);
+        }
+
+        &__title {
+            font-size: var(--rt-file-upload-title-font-size);
+            color: var(--rt-file-upload-title-color);
+        }
+    }
+}

package/src/lib/ui-kit/file-uploader/stories/component/test-file-upload.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

package/src/lib/ui-kit/header/stories/component/test-header.component.scss

@@ -0,0 +1,14 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: -1rem;
+
+    .content {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

package/src/lib/ui-kit/image-uploader/image-uploader/rtui-image-upload.component.scss

@@ -0,0 +1,93 @@
+@use '../../../../styles/base/mixin' as mixins;
+
+$image-upload: (
+    host: (
+        width: 100%,
+        min-width: 100%,
+        max-width: 100%,
+        height: 100%,
+        min-height: 15rem,
+        max-height: 100%,
+        display: flex,
+        justify-content: center,
+        align-items: center,
+    ),
+    image-cropper: (
+        padding: 0.25rem,
+    ),
+    image-cropper-actions: (
+        display: flex,
+        justify-content: flex-end,
+        gap: 0.5rem,
+        margin-top: 0.5rem,
+    ),
+    image-container: (
+        position: relative,
+        padding: 0.5rem,
+    ),
+    image-container-image: (
+        position: relative,
+        height: 100%,
+        max-height: 15rem,
+        object-fit: contain,
+    ),
+);
+
+:host {
+    @each $element, $elements in $image-upload {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('image-upload', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    width: var(--rt-image-upload-host-width);
+    min-width: var(--rt-image-upload-host-min-height);
+    max-width: var(--rt-image-upload-host-max-width);
+    height: var(--rt-image-upload-host-height);
+    min-height: var(--rt-image-upload-host-min-height);
+    max-height: var(--rt-image-upload-host-max-height);
+    display: var(--rt-image-upload-host-display);
+    justify-content: var(--rt-image-upload-host-justify-content);
+    align-items: var(--rt-image-upload-host-align-items);
+
+    .rtui-image-cropper {
+        padding: var(--rt-image-upload-image-cropper-padding);
+
+        &__actions {
+            display: var(--rt-image-upload-image-cropper-actions-display);
+            justify-content: var(--rt-image-upload-image-cropper-actions-justify-content);
+            gap: var(--rt-image-upload-image-cropper-actions-gap);
+            margin-top: var(--rt-image-upload-image-cropper-actions-justify-margin-top);
+        }
+    }
+
+    .rtui-image-container {
+        position: var(--rt-image-upload-image-container-position);
+        padding: var(--rt-image-upload-image-container-padding);
+
+        &__image {
+            position: var(--rt-image-upload-image-container-image-position);
+            height: var(--rt-image-upload-image-container-image-height);
+            max-height: var(--rt-image-upload-image-container-image-max-height);
+            object-fit: var(--rt-image-upload-image-container-image-object-fit);
+            pointer-events: none;
+
+            &--active {
+                pointer-events: initial;
+                cursor: pointer;
+
+                &:hover {
+                    opacity: 0.6;
+                }
+            }
+        }
+
+        &__action {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 999;
+            backdrop-filter: blur(1.25rem);
+        }
+    }
+}

package/src/lib/ui-kit/image-uploader/stories/component/test-image-upload.component.scss

@@ -0,0 +1,9 @@
+:host {
+    width: 20rem;
+    height: 30rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 1rem;
+}

package/src/lib/ui-kit/info-badge/info-badge.component.scss

@@ -0,0 +1,62 @@
+:host {
+    border-radius: 9999px;
+    display: block;
+    line-height: normal;
+    max-width: fit-content;
+
+    // default values
+    background-color: #005cbb;
+    color: #ffffff;
+
+    .c-info-badge {
+        display: flex;
+        gap: 0.15rem;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        line-height: normal;
+
+        &__content {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .size-l {
+        font-size: 1.125rem;
+        padding: 0.3rem 0.65rem;
+
+        .mat-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    .size-m {
+        font-size: 0.875rem;
+        padding: 0.22rem 0.65rem;
+
+        .mat-icon {
+            font-size: 1.05rem;
+        }
+    }
+
+    .size-s {
+        font-size: 0.75rem;
+        padding: 0.2rem 0.65rem;
+        letter-spacing: 0.025rem;
+
+        .mat-icon {
+            font-size: 0.75rem;
+        }
+    }
+
+    .mat-icon {
+        height: unset;
+        width: unset;
+    }
+
+    .bold {
+        font-weight: 700;
+    }
+}