@koobiq/components 16.0.0-beta.1

package/core/styles/visual/_layout.scss

@@ -0,0 +1,527 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../../styles/common/rtl';
+
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+/*
+*  Responsive attributes
+*
+*  References:
+*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
+*  2) https://css-tricks.com/almanac/properties/f/flex/
+*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+*  5) http://godban.com.ua/projects/flexgrid
+*/
+@-moz-document url-prefix() {
+    .layout-fill {
+        margin: 0;
+        width: 100%;
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@mixin flex-order-for-name($sizes: null) {
+    @if $sizes == null {
+        $sizes: '';
+
+        .flex-order {
+            order: 0;
+        }
+    }
+
+    @for $i from -20 through 20 {
+        $order: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $order: '.flex-order-#{$suffix}';
+        }
+
+        #{$order} {
+            order: #{$i};
+        }
+    }
+}
+
+@mixin offset-for-name($sizes:null) {
+    @if $sizes == null {
+        $sizes: '';
+    }
+
+    @for $i from 0 through 19 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i * 5}';
+            } @else {
+                $suffix: '#{$i * 5}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            @if $i != 0 {
+                @include rtl.rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto);
+            } @else {
+                @include rtl.rtl-prop(margin-left, margin-right, 0, auto);
+            }
+        }
+    }
+
+    @each $i in 33 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            margin-left: calc(100% / 3);
+        }
+    }
+
+    @each $i in 66 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            @include rtl.rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
+        }
+    }
+}
+
+@mixin layout-for-name($name: null) {
+    @if $name == null {
+        $name: '';
+    }
+
+    @if $name != '' {
+        $name: '-#{$name}';
+    }
+
+    .layout#{$name},
+    .layout#{$name}-column,
+    .layout#{$name}-row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: flex;
+
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .layout#{$name}-column {
+        flex-direction: column;
+    }
+
+    .layout#{$name}-row {
+        flex-direction: row;
+    }
+}
+
+@mixin flex-properties-for-name($name: null) {
+    $flexName: 'flex';
+
+    @if $name != null {
+        $flexName: 'flex-#{$name}';
+        $name: '-#{$name}';
+    } @else {
+        $name: '';
+    }
+
+    // === flex: 1 1 0%;
+    .#{$flexName}             { flex: 1; }
+    .#{$flexName}-grow        { flex: 1 1 100%; }
+    .#{$flexName}-initial     { flex: 0 1 auto; }
+    .#{$flexName}-auto        { flex: 1 1 auto; }
+    .#{$flexName}-none        { flex: 0 0 auto; }
+    .#{$flexName}-no-shrink    { flex: 1 0 auto; }
+    .#{$flexName}-no-grow      { flex: 0 1 auto; }
+
+    // (1-20) * 5 = 0-100%
+    @for $i from 0 through 20 {
+        $value: #{$i * 5 + '%'};
+
+        .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+        }
+
+        .layout-row > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-width: 0;
+            }
+        }
+
+        .layout-column > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: #{$value};
+        }
+
+        .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-width: 0;
+            }
+        }
+
+        .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: #{$value};
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-height: 0;
+            }
+        }
+    }
+
+    @if ($name == '') {
+        .flex-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+        }
+
+        .flex-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+        }
+    }
+
+    .layout-row {
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 33.33%;
+            max-height: 100%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 66.66%;
+            max-height: 100%;
+        }
+    }
+
+    .layout-column {
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 100%;
+            max-height: 33.33%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 100%;
+            max-height: 66.66%;
+        }
+    }
+
+    .layout#{$name}-row {
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+        }
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        > .flex {
+            min-width: 0;
+        }
+    }
+
+    .layout#{$name}-column {
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 33.33%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 66.66%;
+        }
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        > .flex {
+            min-height: 0;
+        }
+    }
+
+    .layout-wrap {
+        flex-wrap: wrap;
+    }
+
+    .layout-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .layout-fill {
+        margin: 0;
+
+        width: 100%;
+
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@mixin layout-align-for-name($suffix: null) {
+
+    // Alignment attributes for layout containers' children
+    // Arrange on the Main Axis
+    // center, start, end, space-between, space-around
+    // flex-start is the default for justify-content
+    // ------------------------------
+
+    $name: 'layout-align';
+    @if $suffix != null {
+        $name: 'layout-align-#{$suffix}';
+    }
+
+    .#{$name},
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+    }
+
+    // Main Axis Center
+    .#{$name}-start,
+    .#{$name}-start-start,
+    .#{$name}-start-center,
+    .#{$name}-start-end,
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+    }
+
+    // Main Axis Center
+    .#{$name}-center, //stretch
+    .#{$name}-center-start,
+    .#{$name}-center-center,
+    .#{$name}-center-end,
+    .#{$name}-center-stretch {
+        justify-content: center;
+    }
+
+    // Main Axis End
+    .#{$name}-end, //stretch
+    .#{$name}-end-start,
+    .#{$name}-end-center,
+    .#{$name}-end-end,
+    .#{$name}-end-stretch {
+        justify-content: flex-end;
+    }
+
+    // Main Axis Space Around
+    .#{$name}-space-around, //stretch
+    .#{$name}-space-around-center,
+    .#{$name}-space-around-start,
+    .#{$name}-space-around-end,
+    .#{$name}-space-around-stretch {
+        justify-content: space-around;
+    }
+
+    // Main Axis Space Between
+    .#{$name}-space-between, //stretch
+    .#{$name}-space-between-center,
+    .#{$name}-space-between-start,
+    .#{$name}-space-between-end,
+    .#{$name}-space-between-stretch {
+        justify-content: space-between;
+    }
+
+    // Arrange on the Cross Axis
+    // center, start, end
+    // stretch is the default for align-items
+    // ------------------------------
+
+    // Cross Axis Start
+    .#{$name}-start-start,
+    .#{$name}-center-start,
+    .#{$name}-end-start,
+    .#{$name}-space-between-start,
+    .#{$name}-space-around-start {
+        align-items: flex-start;
+        align-content: flex-start;
+    }
+
+    // Cross Axis Center
+    .#{$name}-start-center,
+    .#{$name}-center-center,
+    .#{$name}-end-center,
+    .#{$name}-space-between-center,
+    .#{$name}-space-around-center {
+        align-items: center;
+        align-content: center;
+        max-width: 100%;
+    }
+
+    // Cross Axis Center IE overflow fix
+    .#{$name}-start-center > *,
+    .#{$name}-center-center > *,
+    .#{$name}-end-center > *,
+    .#{$name}-space-between-center > *,
+    .#{$name}-space-around-center > * {
+        max-width: 100%;
+    }
+
+    // Cross Axis End
+    .#{$name}-start-end,
+    .#{$name}-center-end,
+    .#{$name}-end-end,
+    .#{$name}-space-between-end,
+    .#{$name}-space-around-end {
+        align-items: flex-end;
+        align-content: flex-end;
+    }
+
+    // Cross Axis Start
+    .#{$name}-start-stretch,
+    .#{$name}-center-stretch,
+    .#{$name}-end-stretch,
+    .#{$name}-space-between-stretch,
+    .#{$name}-space-around-stretch {
+        align-items: stretch;
+        align-content: stretch;
+    }
+}
+
+@mixin layout-indents() {
+    $sizes: (
+        '3xs': map.get($tokens, size-3xs),
+        'xxs': map.get($tokens, size-xxs),
+        'xs': map.get($tokens, size-xs),
+        's': map.get($tokens, size-s),
+        'm': map.get($tokens, size-m),
+        'l': map.get($tokens, size-l),
+        'xl': map.get($tokens, size-xl),
+        'xxl': map.get($tokens, size-xxl),
+        '3xl': map.get($tokens, size-3xl),
+        '4xl': map.get($tokens, size-4xl),
+        '5xl': map.get($tokens, size-5xl),
+        '6xl': map.get($tokens, size-6xl),
+        '7xl': map.get($tokens, size-7xl)
+    );
+
+    $indents: 'padding', 'margin';
+
+    @each $indent in $indents {
+        @each $name, $value in $sizes {
+            .layout-#{$indent}-#{$name} {
+                #{$indent}: $value !important;
+            }
+
+            .layout-#{$indent}-top-#{$name} {
+                #{$indent}-top: $value !important;
+            }
+
+            .layout-#{$indent}-right-#{$name} {
+                #{$indent}-right: $value !important;
+            }
+
+            .layout-#{$indent}-bottom-#{$name} {
+                #{$indent}-bottom: $value !important;
+            }
+
+            .layout-#{$indent}-left-#{$name} {
+                #{$indent}-left: $value !important;
+            }
+        }
+
+        .layout-#{$indent}-no-top {
+            #{$indent}-top: 0 !important;
+        }
+
+        .layout-#{$indent}-no-right {
+            #{$indent}-right: 0 !important;
+        }
+
+        .layout-#{$indent}-no-bottom {
+            #{$indent}-bottom: 0 !important;
+        }
+
+        .layout-#{$indent}-no-left {
+            #{$indent}-left: 0 !important;
+        }
+    }
+}
+
+@mixin layouts-for-breakpoint($name: null) {
+    @include flex-order-for-name($name);
+    @include offset-for-name($name);
+    @include layout-align-for-name($name);
+
+    @include flex-properties-for-name($name);
+    @include layout-for-name($name);
+
+    @include layout-indents();
+}
+

package/core/title/index.d.ts

@@ -0,0 +1 @@
+export * from './title-text-ref';

package/core/title/title-text-ref.d.ts

@@ -0,0 +1,6 @@
+import { ElementRef, InjectionToken } from '@angular/core';
+export interface KbqTitleTextRef {
+    textElement?: ElementRef;
+    parentTextElement?: ElementRef;
+}
+export declare const KBQ_TITLE_TEXT_REF: InjectionToken<KbqTitleTextRef>;

package/core/utils/data-size/config.d.ts

@@ -0,0 +1,20 @@
+export declare enum MeasurementSystem {
+    SI = "SI",
+    IEC = "IEC"
+}
+export declare const sizeUnitsConfig: {
+    defaultUnitSystem: MeasurementSystem;
+    defaultPrecision: number;
+    unitSystems: {
+        SI: {
+            abbreviations: string[];
+            base: number;
+            power: number;
+        };
+        IEC: {
+            abbreviations: string[];
+            base: number;
+            power: number;
+        };
+    };
+};

package/core/utils/data-size/data-size.pipe.d.ts

@@ -0,0 +1,13 @@
+import { PipeTransform } from '@angular/core';
+import { MeasurementSystem } from './config';
+import * as i0 from "@angular/core";
+export declare class KbqDataSizePipe implements PipeTransform {
+    transform(source: number, precision?: number, measurementSystem?: MeasurementSystem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDataSizePipe, "mcDataSize", false>;
+}
+export declare class KbqDataSizeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDataSizeModule, [typeof KbqDataSizePipe], never, [typeof KbqDataSizePipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqDataSizeModule>;
+}

package/core/utils/data-size/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './size';
+export * from './data-size.pipe';

package/core/utils/data-size/size.d.ts

@@ -0,0 +1,16 @@
+import { MeasurementSystem } from './config';
+export declare const formatDataSize: (value: number, systemCode?: MeasurementSystem, precision?: number) => {
+    value: string;
+    unit: string;
+};
+/**
+ * Переводит байты в Кб, Мб, Гб
+ *
+ * @param value количество байт
+ * @param systemCode система измерения
+ * @param threshold нижний порог подсчета
+ */
+export declare const getHumanizedBytes: (value: number, systemCode?: MeasurementSystem, threshold?: number) => {
+    result: number;
+    unit: string;
+};

package/core/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/core/utils/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './data-size';

package/core/utils/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function isBoolean(val: any): val is boolean;
+export declare function toBoolean(value: any): boolean;

package/core/validation/index.d.ts

@@ -0,0 +1 @@
+export * from './validation';

package/core/validation/validation.d.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+export declare const validationTooltipShowDelay = 10;
+export declare const validationTooltipHideDelay = 3000;
+export interface KbqValidationOptions {
+    useValidation: boolean;
+}
+export declare const KBQ_VALIDATION: InjectionToken<KbqValidationOptions>;

package/core/version.d.ts

@@ -0,0 +1,2 @@
+import { Version } from '@angular/core';
+export declare const VERSION: Version;