c3-components 0.2.3 → 0.5.0

package/lib/c3-flowing-menu/c3-flowing-menu.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./components/c3-flowing-menu/c3-flowing-menu.component";
+import * as i2 from "./components/c3-flowing-menu-item/c3-flowing-menu-item.component";
+import * as i3 from "./components/c3-flowing-menu-item-content/c3-flowing-menu-item-content.component";
+import * as i4 from "@angular/common";
+export declare class C3FlowingMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FlowingMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3FlowingMenuModule, [typeof i1.C3FlowingMenuComponent, typeof i2.C3FlowingMenuItemComponent, typeof i3.C3FlowingMenuItemContentComponent], [typeof i4.CommonModule], [typeof i1.C3FlowingMenuComponent, typeof i2.C3FlowingMenuItemComponent, typeof i3.C3FlowingMenuItemContentComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<C3FlowingMenuModule>;
+}

package/lib/c3-flowing-menu/components/c3-flowing-menu/c3-flowing-menu.component.d.ts

@@ -0,0 +1,12 @@
+import { C3FlowingMenuItemComponent } from '../c3-flowing-menu-item/c3-flowing-menu-item.component';
+import * as i0 from "@angular/core";
+export declare class C3FlowingMenuComponent {
+    readonly c3FlowingMenu: import("@angular/core").Signal<readonly C3FlowingMenuItemComponent[]>;
+    private readonly targetContentRef;
+    readonly selectedIndex: import("@angular/core").WritableSignal<number>;
+    constructor();
+    selectMenu(index: number): void;
+    private updateView;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FlowingMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3FlowingMenuComponent, "c3-flowing-menu", never, {}, {}, ["c3FlowingMenu"], never, false, never>;
+}

package/lib/c3-flowing-menu/components/c3-flowing-menu-item/c3-flowing-menu-item.component.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class C3FlowingMenuItemComponent {
+    readonly menuTpl: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    readonly contentTpl: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+    readonly active: import("@angular/core").WritableSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FlowingMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3FlowingMenuItemComponent, "c3-flowing-menu-item", never, {}, {}, never, ["[menu-title]", "c3-flowing-menu-item-content"], false, never>;
+}

package/lib/c3-flowing-menu/components/c3-flowing-menu-item-content/c3-flowing-menu-item-content.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class C3FlowingMenuItemContentComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FlowingMenuItemContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3FlowingMenuItemContentComponent, "c3-flowing-menu-item-content", never, {}, {}, never, ["*"], false, never>;
+}

package/lib/c3-flowing-menu/styles/_c3-flowing-menu.scss

@@ -0,0 +1,86 @@
+@use "@angular/material" as mat;
+
+@mixin c3-flowing-menu($theme) {
+  $is-dark-theme: mat.get-theme-type($theme) == dark;
+  $menu-inactive: if($is-dark-theme, #9b9b9b, #dfdfdf);
+  $menu-active: if($is-dark-theme, #5f5f5f, #c0c0c0);
+  $menu-hover: if($is-dark-theme, #a5a5a5, #e7e7e7);
+  .c3-flowing-menu {
+    --menu-inactive: #{$menu-inactive};
+    --menu-active: #{$menu-active};
+    --menu-hover: #{$menu-hover};
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "menu contenu";
+    height: 100%;
+
+    .menu {
+      grid-area: menu;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      padding: 2rem 0;
+
+      > button {
+        position: relative;
+        margin: 0;
+        padding: 1rem;
+        background-color: var(--menu-inactive);
+        cursor: pointer;
+        min-width: 200px;
+        box-shadow: none;
+        border-radius: 0;
+        border-top-left-radius: 1rem;
+        border-bottom-left-radius: 1rem;
+        color: black;
+
+        &:hover {
+          background-color: var(--menu-hover);
+        }
+
+        &.active {
+          background-color: var(--menu-active);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+          z-index: 1;
+          &::before {
+            content: "";
+            position: absolute;
+
+            background-color: transparent;
+            bottom: -2rem;
+            right: 0;
+            height: 2rem;
+            width: 1rem;
+            border-top-right-radius: 1rem;
+            box-shadow: 0 -1rem 0 0 var(--menu-active);
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            background-color: transparent;
+            top: -2rem;
+            right: 0;
+            height: 2rem;
+            width: 1rem;
+            border-bottom-right-radius: 1rem;
+            box-shadow: 0 1rem 0 0 var(--menu-active);
+          }
+        }
+      }
+    }
+
+    .contenu {
+      grid-area: contenu;
+      padding: 1rem;
+      height: 100%;
+      overflow: auto;
+      background-color: var(--menu-active);
+      border-radius: 1rem;
+      @include mat.elevation(8);
+
+      transition: all 0.2s;
+    }
+  }
+}

package/lib/c3-styles/_c3-core.scss

@@ -2,10 +2,12 @@
 @use "../c3-dropdown/styles/_c3-dropdown" as *;
 @use "../c3-file-viewer/styles/_c3-file-viewer" as *;
 @use "../c3-expansion/styles/_c3-expansion" as *;
+@use "../c3-flowing-menu/styles/c3-flowing-menu" as *;
 
 @mixin c3-core($theme) {
   @include c3-root-variables($theme);
   @include c3-material-dropdown($theme);
   @include c3-file-viewer($theme);
   @include c3-expansion($theme);
+  @include c3-flowing-menu($theme);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3-components",
-  "version": "0.2.3",
+  "version": "0.5.0",
   "description": "C3 Components Library",
   "author": "c3ulnta0rk",
   "license": "MIT",

package/public-api.d.ts

@@ -59,3 +59,10 @@ export * from './lib/c3-signals/c3-boolean-signal';
  * C3 Tree
  */
 export * from './lib/c3-tree/c3-tree.component';
+/**
+ * C3 flowing menu
+ */
+export * from './lib/c3-flowing-menu/c3-flowing-menu.module';
+export * from './lib/c3-flowing-menu/components/c3-flowing-menu/c3-flowing-menu.component';
+export * from './lib/c3-flowing-menu/components/c3-flowing-menu-item/c3-flowing-menu-item.component';
+export * from './lib/c3-flowing-menu/components/c3-flowing-menu-item-content/c3-flowing-menu-item-content.component';