@koobiq/components 18.9.0 → 18.10.0

package/file-upload/_file-upload-theme.scss

@@ -25,7 +25,7 @@
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                *,
+                :not(.kbq-link),
                 .kbq-icon {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
@@ -91,7 +91,7 @@
 
             &:not(.kbq-disabled) {
                 .kbq-file-upload__row.error {
-                    *,
+                    :not(.kbq-link),
                     .kbq-icon {
                         color: var(--kbq-file-upload-multiple-states-error-text-block-color);
                     }

package/form-field/_form-field-theme.scss

@@ -67,6 +67,13 @@
         }
     }
 
+    .kbq-form-field__prefix,
+    .kbq-form-field__suffix {
+        .kbq-icon {
+            color: var(--kbq-icon-contrast-fade);
+        }
+    }
+
     .kbq-form-field__hint {
         & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
             color: var(--kbq-form-field-hint-text);

package/form-field/form-field-tokens.scss

@@ -8,6 +8,8 @@
     --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
     --kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xxs);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
     --kbq-form-field-default-background: var(--kbq-background-bg);
@@ -24,7 +26,7 @@
     --kbq-form-field-states-error-text: var(--kbq-foreground-error);
     --kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);
     --kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);
-    --kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);
+    --kbq-form-field-states-autofill-background: var(--kbq-background-theme-less);
     --kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);
     --kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);
     --kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);

package/icon/_icon-item-theme.scss

@@ -10,6 +10,9 @@
 
 @mixin kbq-icon-item-theme() {
     .kbq-icon-item.kbq-icon-item_filled {
+        // set default color
+        @include kbq-icon-item-style(fade-on, contrast);
+
         &.kbq-icon-item_fade-off {
             &.kbq-theme {
                 @include kbq-icon-item-style(fade-off, theme);

package/icon/_icon-theme.scss

@@ -1,7 +1,9 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-icon-theme() {
-    .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
+    .kbq-icon {
+        color: var(--kbq-icon-contrast-color);
+
         &.kbq-theme {
             color: var(--kbq-icon-theme-color);
         }

package/markdown/_markdown-theme.scss

@@ -31,16 +31,24 @@
         }
 
         .kbq-markdown__pre,
-        .kbq-markdown__p > .kbq-markdown__code {
+        .kbq-markdown__code:not(.kbq-markdown__a .kbq-markdown__code) {
             color: var(--kbq-markdown-code-text);
             background-color: var(--kbq-markdown-code-background);
-            border-color: var(--kbq-markdown-code-border);
+        }
+
+        .kbq-markdown__a .kbq-markdown__code {
+            background-color: var(--kbq-markdown-code-background);
         }
 
         .kbq-markdown__a {
             color: var(--kbq-markdown-link-text, var(--kbq-foreground-theme));
             border-bottom-color: var(--kbq-markdown-link-border-bottom, var(--kbq-line-theme-less));
 
+            &:has(.kbq-markdown__code) {
+                display: inline;
+                border-bottom: none;
+            }
+
             &:visited {
                 color: var(--kbq-markdown-link-state-visited-text, var(--kbq-foreground-visited));
                 border-bottom-color: var(--kbq-markdown-link-state-visited-border-bottom, var(--kbq-line-visited));
@@ -106,13 +114,17 @@
         }
 
         .kbq-markdown__code {
-            @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
+            @include kbq-typography-level-to-styles-css-variables(md-typography, md-inline-code);
         }
 
         .kbq-markdown__a {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
         }
 
+        .kbq-markdown__a > .kbq-markdown__code {
+            @include kbq-typography-level-to-styles-css-variables(md-typography, md-inline-code-as-link);
+        }
+
         .kbq-markdown__img + em {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
         }

package/markdown/markdown-tokens.scss

@@ -34,10 +34,9 @@
     --kbq-markdown-blockquote-size-line-width: var(--kbq-size-xxs);
     --kbq-markdown-blockquote-size-border-radius: 0;
     --kbq-markdown-blockquote-size-border-width: 0;
-    --kbq-markdown-code-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-m);
     --kbq-markdown-code-size-multiline-margin-bottom: var(--kbq-size-xxl);
-    --kbq-markdown-code-size-inline-padding: 0 var(--kbq-size-xxs);
+    --kbq-markdown-code-size-inline-padding: var(--kbq-size-3xs) var(--kbq-size-xs);
     --kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);
     --kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);
     --kbq-markdown-code-size-border-width: var(--kbq-size-border-width);

package/markdown/markdown.scss

@@ -118,13 +118,12 @@
     }
 
     .kbq-markdown__pre,
-    .kbq-markdown__p > .kbq-markdown__code {
+    .kbq-markdown__code {
         border-radius: var(--kbq-markdown-code-size-border-radius);
-        border-width: var(--kbq-markdown-code-size-border-width);
-        border-style: solid;
     }
 
-    .kbq-markdown__p > .kbq-markdown__code {
+    .kbq-markdown__code {
+        white-space: nowrap;
         padding: var(--kbq-markdown-code-size-inline-padding);
     }
 

package/modal/modal.component.d.ts

@@ -17,7 +17,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private modalControl;
     private changeDetector;
     private focusMonitor;
-    private document;
+    protected readonly document: Document;
     componentColors: typeof KbqComponentColors;
     kbqModalType: ModalType;
     kbqComponent: Type<T>;
@@ -79,7 +79,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private contentComponentRef;
     private animationState;
     private container;
-    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, document: any);
+    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor);
     kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;

package/navbar/navbar-item.component.d.ts

@@ -22,13 +22,13 @@ export declare class KbqNavbarBento {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarBento, "kbq-navbar-item[bento], [kbq-navbar-item][bento]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqNavbarTitle implements AfterViewInit {
-    private elementRef;
+    protected readonly isBrowser: boolean;
+    protected readonly nativeElement: any;
     readonly hovered: Subject<boolean>;
     outerElementWidth: number;
     isTextOverflown: boolean;
     get text(): string;
     get isOverflown(): boolean;
-    constructor(elementRef: ElementRef);
     getOuterElementWidth(): number;
     checkTextOverflown(): void;
     ngAfterViewInit(): void;
@@ -85,7 +85,8 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     static ngAcceptInputType_disabled: unknown;
 }
 export declare class KbqNavbarRectangleElement {
-    elementRef: ElementRef;
+    protected readonly isBrowser: boolean;
+    protected readonly nativeElement: any;
     readonly state: Subject<void>;
     get horizontal(): boolean;
     set horizontal(value: boolean);
@@ -97,7 +98,6 @@ export declare class KbqNavbarRectangleElement {
     set collapsed(value: boolean);
     private _collapsed;
     button: KbqButtonCssStyler;
-    constructor(elementRef: ElementRef);
     getOuterElementWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarRectangleElement, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarRectangleElement, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", never, {}, {}, ["button"], never, false, never>;
@@ -140,18 +140,18 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
     navbar: KbqVerticalNavbar;
     private changeDetectorRef;
-    private document;
+    protected readonly document: Document;
     customIcon: KbqIcon;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, document: any);
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.9.0",
+    "version": "18.10.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.9.0",
-        "@koobiq/angular-moment-adapter": "18.9.0",
-        "@koobiq/angular-luxon-adapter": "18.9.0",
+        "@koobiq/cdk": "18.10.0",
+        "@koobiq/angular-moment-adapter": "18.10.0",
+        "@koobiq/angular-luxon-adapter": "18.10.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
         "@koobiq/tokens-builder": "3.8.1",

package/popover/popover.scss

@@ -92,6 +92,8 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__header_top-overflow {
+    position: relative;
+    z-index: 2;
     box-shadow: var(--kbq-shadow-overflow-normal-bottom);
 }
 
@@ -104,6 +106,8 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__footer_bottom-overflow {
+    position: relative;
+    z-index: 2;
     box-shadow: var(--kbq-shadow-overflow-normal-top);
 }