@koobiq/components 17.0.0-rc.9 → 17.0.1

package/input/input.scss

@@ -6,7 +6,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-input {
@@ -20,23 +19,24 @@ $tokens: meta.module-variables(tokens) !default;
     width: 100%;
     min-height: calc(
         var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-        (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
     );
 
-    padding:
-        calc(
-            var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) -
-            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
+    padding: calc(
+            var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) - var(
+                    --kbq-form-field-size-border-width,
+                    map.get($tokens, form-field-size-border-width)
+                )
         )
         kbq-css-variable(input-size-padding-horizontal);
 }
 
-input.kbq-input[type="number"] {
+input.kbq-input[type='number'] {
     -moz-appearance: textfield;
 }
 
-input.kbq-input[type="number"]::-webkit-inner-spin-button,
-input.kbq-input[type="number"]::-webkit-outer-spin-button {
+input.kbq-input[type='number']::-webkit-inner-spin-button,
+input.kbq-input[type='number']::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }
 

package/input/public-api.d.ts

@@ -1,6 +1,6 @@
-export * from './input.module';
 export * from './input';
 export * from './input-number';
+export * from './input-number-validators';
 export * from './input-password';
 export * from './input-value-accessor';
-export * from './input-number-validators';
+export * from './input.module';

package/link/_link-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-link-geometry($tokens) {
     display: inline;
 
@@ -17,8 +16,9 @@
         outline: none;
     }
 
-    &.kbq-text-only,
-    &.kbq-text-with-icon .kbq-link__text {
+    &.kbq-text-only:not(.kbq-text-with-dot),
+    &.kbq-text-with-icon .kbq-link__text,
+    &.kbq-text-with-dot .kbq-link__text {
         border-bottom-style: solid;
         border-bottom-width: 1px;
     }
@@ -45,7 +45,6 @@
         }
     }
 
-    /* stylelint-disable no-descending-specificity */
     &.kbq-link_big {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
@@ -58,21 +57,14 @@
         }
     }
 
-
+    &.kbq-link_no-underline,
     &.kbq-link_pseudo {
         &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
-            border-bottom: none;
-        }
-    }
-
-    &.kbq-link_no-underline {
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text {
+        &.kbq-text-with-icon .kbq-link__text,
+        &.kbq-text-with-dot .kbq-link__text {
             border-bottom-color: transparent;
         }
     }
-    /* stylelint-enable no-descending-specificity */
 }
 
 @mixin kbq-link-state($component, $state-name) {
@@ -81,7 +73,8 @@
     color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text));
 
     &.kbq-text-only,
-    &.kbq-text-with-icon .kbq-link__text {
+    &.kbq-text-with-icon .kbq-link__text,
+    &.kbq-text-with-dot .kbq-link__text {
         border-bottom-color: kbq-css-variable(link-#{$state-name}-border-bottom, map.get($state, border-bottom));
     }
 
@@ -140,12 +133,13 @@
         @media print {
             .kbq-link_print:not(.kbq-disabled) {
                 &.kbq-text-only,
-                &.kbq-text-with-icon .kbq-link__text {
+                &.kbq-text-with-icon .kbq-link__text,
+                &.kbq-text-with-dot .kbq-link__text {
                     border-bottom: none;
                 }
 
                 &::after {
-                    content: ":\a" attr(print);
+                    content: ':\a' attr(print);
                     white-space: pre;
                 }
             }
@@ -159,7 +153,7 @@
 
         & .kbq-icon {
             line-height: inherit;
-            vertical-align: text-bottom;
+            vertical-align: baseline;
         }
     }
 

package/link/link.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";

package/link/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './link.module';
 export * from './link.component';
+export * from './link.module';

package/list/_list-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-list-item($component, $state-name) {
     $state: map.get($component, $state-name);
 

package/list/list-selection.component.d.ts

@@ -1,9 +1,9 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, OnDestroy, OnInit, NgZone } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, HasTabIndexCtor, HasTabIndex, MultipleMode, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Observable, Subject } from 'rxjs';
@@ -34,7 +34,7 @@ export declare class KbqListSelectionBase {
 }
 /** @docs-private */
 export declare const KbqListSelectionMixinBase: CanDisableCtor & HasTabIndexCtor & typeof KbqListSelectionBase;
-export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, ControlValueAccessor {
+export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, ControlValueAccessor, OnDestroy {
     private changeDetectorRef;
     private clipboard;
     keyManager: FocusKeyManager<KbqListOption>;

package/list/list.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/list';
 
-
 .kbq-list,
 .kbq-list-selection {
     display: block;
@@ -22,14 +21,13 @@
 
     & .kbq-option-action {
         display: none;
-        height: 20px;
+        height: kbq-css-variable(size-xl);
         align-items: center;
     }
 
     &:not(.kbq-disabled):hover,
     &:not(.kbq-disabled).kbq-focused,
     &:not(.kbq-disabled).kbq-action-button-focused {
-
         & .kbq-option-action {
             display: flex;
         }

package/list/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './list.module';
-export * from './list.component';
 export * from './list-selection.component';
+export * from './list.component';
+export * from './list.module';

package/loader-overlay/_loader-overlay-theme.scss

@@ -4,14 +4,15 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-loader-overlay-theme($theme) {
     $loader-overlay: map.get(map.get($theme, components), loader-overlay);
 
     .kbq-loader-overlay_filled {
         &.kbq-loader-overlay {
             background: kbq-css-variable(
-                loader-overlay-filled-background, map.get($loader-overlay, filled, background));
+                loader-overlay-filled-background,
+                map.get($loader-overlay, filled, background)
+            );
         }
 
         & .kbq-loader-overlay-text {
@@ -26,7 +27,9 @@
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
             background: kbq-css-variable(
-                loader-overlay-transparent-background, map.get($loader-overlay, transparent, background));
+                loader-overlay-transparent-background,
+                map.get($loader-overlay, transparent, background)
+            );
         }
 
         & .kbq-loader-overlay-text {
@@ -60,4 +63,3 @@
         }
     }
 }
-

package/loader-overlay/loader-overlay.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-loader-overlay_parent {

package/loader-overlay/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './loader-overlay.module';
 export * from './loader-overlay.component';
+export * from './loader-overlay.module';

package/markdown/_markdown-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-markdown-theme($theme) {
     $markdown: map.get($theme, components, markdown);
 
@@ -50,14 +49,18 @@
             &:visited {
                 color: kbq-css-variable(markdown-link-state-visited-text, map.get($markdown, link-state-visited-text));
                 border-bottom-color: kbq-css-variable(
-                    markdown-link-state-visited-border-bottom, map.get($markdown, link-state-visited-border-bottom));
+                    markdown-link-state-visited-border-bottom,
+                    map.get($markdown, link-state-visited-border-bottom)
+                );
             }
 
             &:hover {
                 color: kbq-css-variable(markdown-link-state-hover-text, map.get($markdown, link-state-hover-text));
                 transition: color 0ms;
                 border-bottom-color: kbq-css-variable(
-                    markdown-link-state-hover-border-bottom, map.get($markdown, link-state-hover-border-bottom));
+                    markdown-link-state-hover-border-bottom,
+                    map.get($markdown, link-state-hover-border-bottom)
+                );
             }
 
             &:active {
@@ -65,11 +68,11 @@
             }
 
             &:focus {
-                outline:
-                    kbq-css-variable(
-                        markdown-link-state-focused-outline, map.get($markdown, link-state-focused-outline))
-                    solid
-                    kbq-css-variable(markdown-link-size-state-focused-outline-width);
+                outline: kbq-css-variable(
+                        markdown-link-state-focused-outline,
+                        map.get($markdown, link-state-focused-outline)
+                    )
+                    solid kbq-css-variable(markdown-link-size-state-focused-outline-width);
 
                 outline-offset: kbq-css-variable(markdown-link-size-state-focused-outline-offset);
             }

package/markdown/markdown.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-markdown {
@@ -77,7 +76,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         > li {
             &:before {
-                content:counter(li) ".";
+                content: counter(li) '.';
                 counter-increment: li;
                 padding-right: kbq-css-variable(markdown-list-size-ol-number-padding-right);
             }
@@ -166,7 +165,8 @@ $tokens: meta.module-variables(tokens) !default;
             vertical-align: top;
         }
 
-        th, td {
+        th,
+        td {
             padding: kbq-css-variable(markdown-table-size-padding);
             font-weight: 400;
         }

package/modal/README.md

@@ -1,6 +1,5 @@
 The dialog is currently divided into 3 modes - `default`, `confirm box`, `custom`.
 
-
 #### Using service to create Confirm Mode
 
 ```ts
@@ -23,9 +22,11 @@ let dialogRef = modalService.open({
 ```
 
 ```ts
-@Component({/* ... */})
+@Component({
+    /* ... */
+})
 export class CustomComponent {
-    constructor(private dialogRef: KbqModalRef) { }
+    constructor(private dialogRef: KbqModalRef) {}
 
     closeDialog() {
         this.modal.destroy({ data: 'this the result data' });

package/modal/_modal-animation.scss

@@ -1,6 +1,5 @@
 @use '../core/styles/functions/timing' as *;
 
-
 $animation-duration-base: 0.3s;
 
 @mixin _motion-common($duration: $animation-duration-base) {

package/modal/_modal-confirm.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-confirm {
     .kbq-modal-close {
         display: none;

package/modal/_modal-theme.scss

@@ -4,39 +4,38 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-modal-theme($theme) {
     $modal: map.get(map.get($theme, components), modal);
 
     .kbq-modal {
-        background:  kbq-css-variable(modal-container-background, map.get($modal, container-background));
-        box-shadow:  kbq-css-variable(modal-container-box-shadow, map.get($modal, container-box-shadow));
+        background: kbq-css-variable(modal-container-background, map.get($modal, container-background));
+        box-shadow: kbq-css-variable(modal-container-box-shadow, map.get($modal, container-box-shadow));
 
         .kbq-modal-header {
             & .kbq-modal-title {
-                color:  kbq-css-variable(modal-header, map.get($modal, header));
+                color: kbq-css-variable(modal-header, map.get($modal, header));
             }
 
             & .kbq-modal-close {
-                color:  kbq-css-variable(modal-close-button, map.get($modal, close-button));
+                color: kbq-css-variable(modal-close-button, map.get($modal, close-button));
             }
         }
 
         .kbq-modal-content {
-            color:  kbq-css-variable(modal-content, map.get($modal, content));
+            color: kbq-css-variable(modal-content, map.get($modal, content));
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
-            box-shadow:  kbq-css-variable(modal-body-top-shadow, map.get($modal, body-top-shadow));
+            box-shadow: kbq-css-variable(modal-body-top-shadow, map.get($modal, body-top-shadow));
         }
 
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
-            box-shadow:  kbq-css-variable(modal-body-bottom-shadow, map.get($modal, body-bottom-shadow));
+            box-shadow: kbq-css-variable(modal-body-bottom-shadow, map.get($modal, body-bottom-shadow));
         }
     }
 
     .kbq-modal-mask {
-        background-color:  kbq-css-variable(modal-overlay, map.get($modal, overlay));
+        background-color: kbq-css-variable(modal-overlay, map.get($modal, overlay));
     }
 }
 

package/modal/modal.directive.d.ts

@@ -1,15 +1,15 @@
 import * as i0 from "@angular/core";
 export declare class KbqModalTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [mcModalTitle]", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", never, {}, {}, never, ["*"], false, never>;
 }
 export declare class KbqModalBody {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [mcModalBody]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqModalFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalFooter, "[kbq-modal-footer], kbq-modal-footer, [mcModalFooter]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalFooter, "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqModalMainAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalMainAction, never>;

package/modal/modal.scss

@@ -5,7 +5,6 @@
 
 @use './modal-confirm';
 
-
 .kbq-modal {
     box-sizing: border-box;
 
@@ -84,11 +83,8 @@
     align-items: center;
     justify-content: space-between;
 
-    padding:
-        kbq-css-variable(modal-size-header-padding-vertical)
-        kbq-css-variable(modal-size-header-padding-right)
-        kbq-css-variable(modal-size-header-padding-vertical)
-        kbq-css-variable(modal-size-header-padding-left);
+    padding: kbq-css-variable(modal-size-header-padding-vertical) kbq-css-variable(modal-size-header-padding-right)
+        kbq-css-variable(modal-size-header-padding-vertical) kbq-css-variable(modal-size-header-padding-left);
 
     & + .kbq-modal-body {
         padding-top: kbq-css-variable(modal-size-content-padding-top);
@@ -102,31 +98,29 @@
     overflow: hidden;
 }
 
-/* stylelint-disable no-descending-specificity */
 .kbq-modal-body {
     display: block;
     overflow-y: auto;
 
     max-height: calc(100vh - 260px);
 
-    padding:
-        kbq-css-variable(modal-size-content-padding-top-without-header)
-        kbq-css-variable(modal-size-content-padding-horizontal)
-        kbq-css-variable(modal-size-content-padding-bottom)
+    padding: kbq-css-variable(modal-size-content-padding-top-without-header)
+        kbq-css-variable(modal-size-content-padding-horizontal) kbq-css-variable(modal-size-content-padding-bottom)
         kbq-css-variable(modal-size-content-padding-horizontal);
 
     word-wrap: break-word;
+
+    & > * {
+        position: relative;
+    }
 }
-/* stylelint-enable no-descending-specificity */
 
 .kbq-modal-footer,
 .kbq-confirm-footer {
     display: flex;
     align-items: center;
 
-    padding:
-        kbq-css-variable(modal-size-footer-padding-vertical)
-        kbq-css-variable(modal-size-footer-padding-horizontal);
+    padding: kbq-css-variable(modal-size-footer-padding-vertical) kbq-css-variable(modal-size-footer-padding-horizontal);
 
     gap: kbq-css-variable(modal-size-footer-content-gap-horizontal);
 }

package/modal/modal.type.d.ts

@@ -1,6 +1,6 @@
 import { OverlayRef } from '@angular/cdk/overlay';
 import { EventEmitter, TemplateRef, Type } from '@angular/core';
-export type OnClickCallback<T> = ((instance: T) => (false | void | {}) | Promise<false | void | {}>);
+export type OnClickCallback<T> = (instance: T) => (false | void | {}) | Promise<false | void | {}>;
 export type ModalType = 'default' | 'confirm' | 'custom';
 export type ConfirmType = 'confirm' | 'success' | 'warn';
 export declare enum ModalSize {
@@ -55,5 +55,5 @@ export interface IModalButtonOptions<T = any> {
     disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     autoFocus?: boolean;
     kbqModalMainAction?: boolean;
-    onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<(void | {})>;
+    onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<void | {}>;
 }

package/modal/public-api.d.ts

@@ -1,6 +1,6 @@
-export { KbqModalComponent } from './modal.component';
 export { KbqModalRef } from './modal-ref.class';
+export { KbqModalComponent } from './modal.component';
+export * from './modal.directive';
 export { KbqModalModule } from './modal.module';
 export { KbqModalService } from './modal.service';
-export * from './modal.directive';
 export * from './modal.type';

package/navbar/README.md

@@ -9,33 +9,34 @@
 
 We strongly recommend adhere to use our child components until it is possible but you are free to insert there what you want.
 
- - left\right side container **kbq-navbar-section**
-   - product\company title **kbq-navbar-brand**
-   - logo container **kbq-navbar-logo**
-     - any markup
-       - **kbq-navbar-title** (please see below)
-	 - title **kbq-navbar-title**
-	   - any markup, only font size, font color, font family is gonna be styled
-	- menu item container **kbq-navbar-item**
-	  - icon **[kbq-icon]** (another PT koobiq component, out of the scope of this)
-	  - title **kbq-navbar-title**
-    - dropdown **[kbq-dropdown]** (another PT koobiq component, out of the scope of this)
-	  - any markup
-	- any markup
-- any markup
+-   left\right side container **kbq-navbar-section**
+    -   product\company title **kbq-navbar-brand**
+    -   logo container **kbq-navbar-logo**
+        -   any markup
+            -   **kbq-navbar-title** (please see below)
+    -   title **kbq-navbar-title**
+        -   any markup, only font size, font color, font family is gonna be styled
+    -   menu item container **kbq-navbar-item**
+        -   icon **[kbq-icon]** (another PT koobiq component, out of the scope of this)
+        -   title **kbq-navbar-title**
+    -   dropdown **[kbq-dropdown]** (another PT koobiq component, out of the scope of this)
+    -   any markup
+    -   any markup
+-   any markup
 
 ## States
 
 We believe you are able to manage navbar child components from outside. Meantime we provide number of kbq-navbar-item states based on css classes which may be combined between each others.
 
- - kbq-active - selected item
- - kbq-progress - something in progress (striped animation)
- - cdk-focused - focused state, we control it as well for common tab order behaviour
- 
+-   kbq-active - selected item
+-   kbq-progress - something in progress (striped animation)
+-   cdk-focused - focused state, we control it as well for common tab order behaviour
+
 Disable state also could be combined with other states but it is **disabled** attribute.
 
 ## Collapsing
+
 In the case that absence of space the following elements is collapsed:
 
--  kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). The title attribute is added for [kbq-icon] from kbq-navbar-item text;
--  kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). 
+-   kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). The title attribute is added for [kbq-icon] from kbq-navbar-item text;
+-   kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed).