@koobiq/components 16.0.0-beta.1

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -0,0 +1,77 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../../styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-pseudo-checkbox {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+
+    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+
+    border: {
+        radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
+        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        style: solid;
+    }
+
+    cursor: pointer;
+
+    vertical-align: middle;
+    flex-shrink: 0;
+
+    & .kbq-checkbox-checkmark,
+    & .kbq-checkbox-mixedmark {
+        display: none;
+
+        position: absolute;
+        top: calc(
+            -1 * var(--kbq-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
+        );
+        left: calc(
+            -1 * var(--kbq-checkbox-size-normal-border-width, #{map.get($tokens, checkbox-size-normal-border-width)})
+        );
+    }
+
+    &.kbq-pseudo-checkbox-checked,
+    &.kbq-pseudo-checkbox-indeterminate {
+        border-color: transparent;
+    }
+
+    &.kbq-checked {
+        .kbq-checkbox-checkmark {
+            display: inline-block;
+        }
+    }
+
+    &.kbq-indeterminate {
+        .kbq-checkbox-mixedmark {
+            display: inline-block;
+        }
+    }
+
+    &.kbq-disabled {
+        cursor: default;
+    }
+}
+
+.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
+    width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+
+    border: {
+        radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
+        width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+    }
+
+    & .kbq-checkbox-checkmark,
+    & .kbq-checkbox-mixedmark {
+        top: calc(-1 * var(--kbq-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
+        left: calc(-1 * var(--kbq-checkbox-size-big-border-width, #{map.get($tokens, checkbox-size-big-border-width)}));
+    }
+}

package/core/services/measure-scrollbar.service.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare class KbqMeasureScrollbarService {
+    private document;
+    get scrollBarWidth(): number;
+    private _scrollBarWidth;
+    private scrollbarMeasure;
+    constructor(document: any);
+    initScrollBarWidth(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMeasureScrollbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqMeasureScrollbarService>;
+}

package/core/styles/_core.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+@use 'common/overlay' as *;
+@use 'common/visually-hidden' as *;
+
+
+// Mixin that renders all of the core styles that are not theme-dependent.
+@mixin kbq-core() {
+    @include a11y-visually-hidden();
+    @include overlay();
+}

package/core/styles/_koobiq-theme.scss

@@ -0,0 +1,153 @@
+@use 'sass:map';
+
+@use 'theming/theming' as *;
+@use 'typography/typography' as *;
+
+@use 'theming/badges-theme' as *;
+@use 'theming/scrollbars-theme' as *;
+
+@use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
+@use '../../alert/alert-theme' as *;
+@use '../../autocomplete/autocomplete-theme' as *;
+@use '../../button/button-theme' as *;
+@use '../../card/card-theme' as *;
+@use '../../checkbox/checkbox-theme' as *;
+@use '../../code-block/code-block-theme' as *;
+@use '../../datepicker/datepicker-theme' as *;
+@use '../../divider/divider-theme' as *;
+@use '../../dropdown/dropdown-theme' as *;
+@use '../../form-field/form-field-theme' as *;
+@use '../../form-field/hint-theme' as *;
+@use '../../icon/icon-theme' as *;
+@use '../../input/input-theme' as *;
+@use '../../link/link-theme' as *;
+@use '../../list/list-theme' as *;
+@use '../../loader-overlay/loader-overlay-theme' as *;
+@use '../../modal/modal-theme' as *;
+@use '../../markdown/markdown-theme' as *;
+@use '../../navbar/navbar-theme' as *;
+@use '../../popover/popover-theme' as *;
+@use '../../progress-bar/progress-bar-theme' as *;
+@use '../../progress-spinner/progress-spinner-theme' as *;
+@use '../../radio/radio-theme' as *;
+@use '../../select/select-theme' as *;
+@use '../../sidepanel/sidepanel-theme' as *;
+@use '../../splitter/splitter-theme' as *;
+@use '../../tabs/tabs-theme' as *;
+@use '../../tags/tag-theme' as *;
+@use '../../textarea/textarea-theme' as *;
+@use '../../timezone/timezone-option-theme' as *;
+@use '../../toast/toast-theme' as *;
+@use '../../toggle/toggle-theme' as *;
+@use '../../tooltip/tooltip-theme' as *;
+@use '../../tree-select/tree-select-theme' as *;
+@use '../../tree/tree-theme' as *;
+@use '../../table/table-theme' as *;
+@use '../forms/forms-theme' as *;
+@use '../option/option-theme' as *;
+@use '../option/optgroup-theme' as *;
+@use '../option/option-action-theme' as *;
+@use '../highlight/highlight-theme' as *;
+@use '../../dl/dl-theme' as *;
+
+
+@mixin koobiq-theme($theme) {
+    @include kbq-core-theme($theme);
+
+    @include kbq-alert-theme($theme);
+    @include kbq-autocomplete-theme($theme);
+    @include kbq-badge-theme($theme);
+    @include kbq-button-theme($theme);
+    @include kbq-card-theme($theme);
+    @include kbq-checkbox-theme($theme);
+    @include kbq-code-block-theme($theme);
+    @include kbq-datepicker-theme($theme);
+    @include kbq-dl-theme($theme);
+    @include kbq-divider-theme($theme);
+    @include kbq-dropdown-theme($theme);
+    @include kbq-form-field-theme($theme);
+    @include kbq-hint-theme($theme);
+    @include kbq-forms-theme($theme);
+    @include kbq-highlight-theme($theme);
+    @include kbq-icon-theme($theme);
+    @include kbq-icon-item-theme($theme);
+    @include kbq-icon-button-theme($theme);
+    @include kbq-link-theme($theme);
+    @include kbq-list-theme($theme);
+    @include kbq-loader-overlay-theme($theme);
+    @include kbq-modal-theme($theme);
+    @include kbq-markdown-theme($theme);
+    @include kbq-navbar-theme($theme);
+    @include kbq-option-theme($theme);
+    @include kbq-optgroup-theme($theme);
+    @include kbq-option-action-theme($theme);
+    @include kbq-popover-theme($theme);
+    @include kbq-progress-bar-theme($theme);
+    @include kbq-progress-spinner-theme($theme);
+    @include kbq-pseudo-checkbox-theme($theme);
+    @include kbq-radio-theme($theme);
+    @include kbq-scrollbar-theme($theme);
+    @include kbq-select-theme($theme);
+    @include kbq-sidepanel-theme($theme);
+    @include kbq-splitter-theme($theme);
+    @include kbq-tabs-theme($theme);
+    @include kbq-tag-theme($theme);
+    @include kbq-timezone-option-theme($theme);
+    @include kbq-toast-theme($theme);
+    @include kbq-toggle-theme($theme);
+    @include kbq-tooltip-theme($theme);
+    @include kbq-tree-select-theme($theme);
+    @include kbq-tree-theme($theme);
+    @include kbq-table-theme($theme);
+}
+
+@mixin koobiq-typography($tokens, $config: null, $md-config: null) {
+    @if $config == null {
+        $config: kbq-typography-config($tokens);
+    }
+
+    @if $md-config == null {
+        $md-config: kbq-markdown-typography-config($tokens);
+    }
+
+    @include kbq-base-typography($config);
+    @include kbq-markdown-base-typography($md-config);
+
+    @include kbq-alert-typography($config);
+    @include kbq-badge-typography($config);
+    @include kbq-button-typography($config);
+    @include kbq-checkbox-typography($config);
+    @include kbq-code-block-typography($config);
+    @include kbq-datepicker-typography($config);
+    @include kbq-dropdown-typography($config);
+    @include kbq-dl-typography($config);
+    @include kbq-form-field-typography($config);
+    @include kbq-hint-typography($config);
+    @include kbq-forms-typography($config);
+    @include kbq-input-typography($config);
+    @include kbq-link-typography($config);
+    @include kbq-list-typography($config);
+    @include kbq-loader-overlay-typography($config);
+    @include kbq-modal-typography($config);
+    @include kbq-navbar-typography($config);
+    @include kbq-option-typography($config);
+    @include kbq-optgroup-typography($config);
+    @include kbq-popover-typography($config);
+    @include kbq-progress-bar-typography($config);
+    @include kbq-progress-spinner-typography($config);
+    @include kbq-radio-typography($config);
+    @include kbq-select-typography($config);
+    @include kbq-sidepanel-typography($config);
+    @include kbq-tabs-typography($config);
+    @include kbq-tag-typography($config);
+    @include kbq-textarea-typography($config);
+    @include kbq-timezone-option-typography($config);
+    @include kbq-toast-typography($config);
+    @include kbq-toggle-typography($config);
+    @include kbq-tooltip-typography($config);
+    @include kbq-tree-select-typography($config);
+    @include kbq-tree-typography($config);
+    @include kbq-table-typography($config);
+
+    @include kbq-markdown-typography($md-config);
+}

package/core/styles/_tokens.kbq.import.scss

@@ -0,0 +1,4 @@
+@import '../../../../node_modules/@koobiq/tokens-koobiq/web/variables';
+@import '../../../../node_modules/@koobiq/tokens-koobiq/web/palette';
+@import '../../../../node_modules/@koobiq/tokens-koobiq/web/typography';
+@import '../../../../node_modules/@koobiq/tokens-koobiq/web/md-typography';

package/core/styles/_tokens.scss

@@ -0,0 +1,6 @@
+@use 'sass:color' as *;
+
+@forward '@koobiq/tokens-koobiq/web/variables';
+@forward '@koobiq/tokens-koobiq/web/palette';
+@forward '@koobiq/tokens-koobiq/web/typography';
+@forward '@koobiq/tokens-koobiq/web/md-typography';

package/core/styles/_variables.scss

@@ -0,0 +1,9 @@
+$z-index-modal-mask: 1000;
+$z-index-modal: 1000;
+$z-index-notification: 1010;
+$z-index-message: 1010;
+$z-index-popover: 1030;
+$z-index-picker: 1050;
+$z-index-dropdown: 1050;
+$z-index-tooltip: 1060;
+$z-index-toast: 1070;

package/core/styles/common/_animation.scss

@@ -0,0 +1,35 @@
+@keyframes kbq-progress {
+    from {
+        background-position: 0 0;
+    }
+
+    to {
+        background-position: 29px 0;
+    }
+}
+
+.kbq-progress {
+    position: relative;
+
+    &:after {
+        content: '';
+        position: absolute;
+        border-radius: inherit;
+
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        $lighter: transparent;
+        $darker: rgba(0, 0, 0, 0.05);
+        background: linear-gradient(
+            135deg,
+            $darker 10px, $lighter 10px,
+            $lighter 20px, $darker 20px,
+            $darker 30px, $lighter 30px
+        ) repeat;
+        background-size: 29px 29px;
+        animation: kbq-progress 1s linear infinite;
+    }
+}

package/core/styles/common/_button.scss

@@ -0,0 +1,10 @@
+@use 'vendor-prefixes';
+
+
+@mixin kbq-button-reset {
+    @include vendor-prefixes.user-select(none);
+    cursor: pointer;
+    outline: none;
+    border: none;
+}
+

package/core/styles/common/_clearfix.scss

@@ -0,0 +1,13 @@
+@mixin clearfix {
+    zoom: 1;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+}

package/core/styles/common/_groups.scss

@@ -0,0 +1,119 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin border-top-radius($radius) {
+    border-top: {
+        right-radius: $radius;
+        left-radius: $radius;
+    }
+}
+
+@mixin border-bottom-radius($radius) {
+    border-bottom: {
+        right-radius: $radius;
+        left-radius: $radius;
+    }
+}
+
+@mixin border-right-radius($radius) {
+    border: {
+        bottom-right-radius: $radius;
+        top-right-radius: $radius;
+    }
+}
+
+@mixin border-left-radius($radius) {
+    border: {
+        bottom-left-radius: $radius;
+        top-left-radius: $radius;
+    }
+}
+
+.kbq-group {
+    display: flex;
+    flex-direction: row;
+
+    .kbq-group_justified {
+        > .kbq-group-item {
+            width: 100%;
+        }
+    }
+
+    .kbq-group-item + .kbq-group-item {
+        margin-left: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+    }
+
+    & > .kbq-group-item:first-child:not(:last-child) {
+        @include border-right-radius(0);
+
+        > .kbq-form-field__container {
+            @include border-right-radius(0);
+        }
+    }
+
+    & > .kbq-group-item:last-child:not(:first-child) {
+        @include border-left-radius(0);
+
+        > .kbq-form-field__container {
+            @include border-left-radius(0);
+        }
+    }
+
+    & > .kbq-group-item:not(:first-child):not(:last-child) {
+        border-radius: 0;
+
+        > .kbq-form-field__container {
+            border-radius: 0;
+        }
+    }
+}
+
+.kbq-vertical-group {
+    display: flex;
+    flex-direction: column;
+
+    /* stylelint-disable no-descending-specificity */
+    > .kbq-group-item {
+        &:first-child:not(:last-child) {
+            @include border-bottom-radius(0);
+
+            border-top-right-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+
+            > .kbq-form-field__container {
+                @include border-bottom-radius(0);
+            }
+        }
+
+        &:last-child:not(:first-child) {
+            @include border-top-radius(0);
+
+            border-bottom-left-radius: var(
+                --kbq-button-size-border-radius,
+                map.get($tokens, button-size-border-radius)
+            );
+
+            > .kbq-form-field__container {
+                @include border-top-radius(0);
+            }
+        }
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+
+            > .kbq-form-field__container {
+                border-radius: 0;
+            }
+        }
+    }
+
+    .kbq-group-item + .kbq-group-item {
+        margin-top: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+    }
+    /* stylelint-enable no-descending-specificity */
+}
+

package/core/styles/common/_index.scss

@@ -0,0 +1,13 @@
+@forward 'animation';
+@forward 'button';
+@forward 'clearfix';
+@forward 'groups';
+@forward 'input';
+@forward 'layout';
+@forward 'list';
+@forward 'overlay';
+@forward 'popup';
+@forward 'rtl';
+@forward 'size';
+@forward 'vendor-prefixes';
+@forward 'visually-hidden';

package/core/styles/common/_input.scss

@@ -0,0 +1,28 @@
+@mixin kbq-reset-input {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+
+    /* clears the 'X' from Internet Explorer */
+    &::-ms-clear {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    &::-ms-reveal {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    /* clears the 'X' from Chrome */
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+        display: none;
+    }
+}

package/core/styles/common/_layout.scss

@@ -0,0 +1,8 @@
+// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
+@mixin kbq-fill {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+}

package/core/styles/common/_list.scss

@@ -0,0 +1,46 @@
+// This mixin will ensure that lines that overflow the container will hide the overflow and
+// truncate neatly with an ellipsis.
+@mixin kbq-truncate-line() {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// This mixin normalizes default element styles, e.g. font weight for heading text.
+@mixin kbq-normalize-text() {
+    & > * {
+        margin: 0;
+        padding: 0;
+        font-weight: normal;
+        font-size: inherit;
+    }
+}
+
+// This mixin provides base styles for the wrapper around kbq-line elements in a list.
+@mixin kbq-line-wrapper-base() {
+    @include kbq-normalize-text();
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    // Must remove wrapper when lines are empty or it takes up horizontal
+    // space and pushes other elements to the right.
+    &:empty {
+        display: none;
+    }
+}
+
+@mixin kbq-no-select() {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
+.kbq-no-select {
+    @include kbq-no-select;
+}