@koobiq/components 18.16.0 → 18.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.16.0",
+    "version": "18.17.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.16.0",
-        "@koobiq/angular-moment-adapter": "18.16.0",
-        "@koobiq/angular-luxon-adapter": "18.16.0",
+        "@koobiq/cdk": "18.17.0",
+        "@koobiq/angular-moment-adapter": "18.17.0",
+        "@koobiq/angular-luxon-adapter": "18.17.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -346,6 +346,12 @@
             "esm": "./esm2022/tooltip/koobiq-components-tooltip.mjs",
             "default": "./fesm2022/koobiq-components-tooltip.mjs"
         },
+        "./top-bar": {
+            "types": "./top-bar/index.d.ts",
+            "esm2022": "./esm2022/top-bar/koobiq-components-top-bar.mjs",
+            "esm": "./esm2022/top-bar/koobiq-components-top-bar.mjs",
+            "default": "./fesm2022/koobiq-components-top-bar.mjs"
+        },
         "./tree": {
             "types": "./tree/index.d.ts",
             "esm2022": "./esm2022/tree/koobiq-components-tree.mjs",

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.16.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.16.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.17.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.17.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.2.0");

package/top-bar/index.d.ts

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

package/top-bar/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./top-bar";
+export declare class KbqTopBarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTopBarModule, never, [typeof i1.KbqTopBar, typeof i1.KbqTopBarContainer, typeof i1.KbqTopBarSpacer], [typeof i1.KbqTopBar, typeof i1.KbqTopBarContainer, typeof i1.KbqTopBarSpacer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTopBarModule>;
+}

package/top-bar/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './top-bar';

package/top-bar/top-bar-tokens.scss

@@ -0,0 +1,12 @@
+.kbq-top-bar {
+    --kbq-top-bar-position: sticky;
+    --kbq-top-bar-background: var(--kbq-background-bg);
+    --kbq-top-bar-spacer-min-width: 80px;
+    --kbq-top-bar-padding-vertical: var(--kbq-size-l);
+    --kbq-top-bar-padding-horizontal: var(--kbq-size-l);
+    --kbq-top-bar-border-radius: 0;
+    --kbq-top-bar-left-gap: 0;
+    --kbq-top-bar-right-gap: var(--kbq-size-s);
+    --kbq-top-bar-shadow-bottom: var(--kbq-shadow-overflow-normal-bottom);
+    --kbq-top-bar-shadow-transition: ease-out 300ms;
+}

package/top-bar/top-bar.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+export declare class KbqTopBarSpacer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarSpacer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarSpacer, "[kbqTopBarSpacer]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive that dynamically applying CSS classes based on a placement value (left or right).
+ */
+export declare class KbqTopBarContainer {
+    /**
+     * Conditionally applies a CSS class based on the value
+     */
+    placement: import("@angular/core").InputSignal<"start" | "end">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarContainer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarContainer, "[kbqTopBarContainer]", never, { "placement": { "alias": "placement"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class KbqTopBar {
+    /**
+     * Enables overflow behavior, applying `kbq-top-bar-overflow` to show a bottom shadow.
+     */
+    withShadow: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTopBar, "kbq-top-bar", never, { "withShadow": { "alias": "withShadow"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_withShadow: unknown;
+}

package/top-bar/top-bar.scss

@@ -0,0 +1,36 @@
+@use '../core/styles/common/tokens';
+
+.kbq-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    box-sizing: border-box;
+
+    position: var(--kbq-top-bar-position);
+    background-color: var(--kbq-top-bar-background);
+    padding: var(--kbq-top-bar-padding-vertical) var(--kbq-top-bar-padding-horizontal);
+    border: var(--kbq-top-bar-border-radius);
+
+    .kbq-top-bar-spacer {
+        height: 100%;
+        flex: 1 0 var(--kbq-top-bar-spacer-min-width);
+    }
+
+    .kbq-top-bar-container__start {
+        display: flex;
+        gap: var(--kbq-top-bar-left-gap);
+    }
+
+    .kbq-top-bar-container__end {
+        display: flex;
+        gap: var(--kbq-top-bar-right-gap);
+    }
+
+    &.kbq-top-bar_with-shadow {
+        box-shadow: var(--kbq-top-bar-shadow-bottom);
+        transition: box-shadow var(--kbq-top-bar-shadow-transition);
+    }
+
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+}