c3-components 0.15.2 → 0.16.0

package/index.d.ts

@@ -1,9 +1,8 @@
 import { HttpHeaders, HttpContext, HttpParams, HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { TemplateRef, OnDestroy, ElementRef, ViewContainerRef, AfterViewInit, Signal, ComponentRef, ChangeDetectorRef, OnInit, SimpleChanges, PipeTransform, InjectionToken } from '@angular/core';
-import * as i4 from '@angular/cdk/overlay';
-import { Overlay } from '@angular/cdk/overlay';
+import { TemplateRef, OnDestroy, AfterViewInit, Signal, ViewContainerRef, ComponentRef, ChangeDetectorRef, OnInit, SimpleChanges, ElementRef, PipeTransform, InjectionToken, QueryList } from '@angular/core';
 import * as i3 from '@angular/common';
+import * as i4 from '@angular/cdk/overlay';
 import * as i10 from '@angular/material/dialog';
 import { MatDialogRef, MatDialogContainer, MatDialogState, MatDialogConfig, MatDialog } from '@angular/material/dialog';
 import * as i8 from '@angular/forms';
@@ -23,6 +22,7 @@ import * as i7 from '@angular/material/tooltip';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
 import * as i4$1 from '@angular/router';
+import { RouterLink } from '@angular/router';
 import * as i5$1 from '@angular/material/core';
 
 interface HttpClientOptions {
@@ -39,45 +39,59 @@ interface HttpClientOptions {
     withCredentials?: boolean;
 }
 
+type NgClassType$1 = string | string[] | Set<string> | {
+    [key: string]: any;
+};
 declare class C3DropdownComponent {
-    readonly panelClass: i0.InputSignal<string | string[] | Set<string> | {
-        [key: string]: any;
-    } | undefined>;
+    /** Classes set directly on the component via [panelClass]. */
+    readonly panelClass: i0.InputSignal<NgClassType$1 | undefined>;
+    /** Classes set by the trigger directive via [c3DropdownClass] or [dropdownClass]. */
+    readonly dropdownClass: i0.WritableSignal<NgClassType$1 | undefined>;
+    /** Whether the dropdown is currently open. */
     readonly isOpen: i0.WritableSignal<boolean>;
     readonly template: i0.Signal<TemplateRef<any>>;
+    /** Merges panelClass (from component input) and dropdownClass (from trigger). */
+    readonly mergedClass: i0.Signal<NgClassType$1>;
     private readonly _changeDetectorRef;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<C3DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<C3DropdownComponent, "c3-dropdown", never, { "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3DropdownComponent, "c3-dropdown", ["c3Dropdown"], { "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
 }
 
 declare const MAT_DROPDOWN_VALUE_ACCESSOR: any;
+type NgClassType = string | string[] | Set<string> | {
+    [key: string]: any;
+};
 /**
  * @description The C3DropdownTrigger directive is used to display or hide a dropdown menu
  * C3DropdownComponent when an item is clicked.
- * @selector [c3Dropdown]
+ * @selector [c3Dropdown], [c3DropdownTrigger]
  * @exportAs c3DropdownTrigger
  * @input c3Dropdown - A reference to an instance of C3DropdownComponent.
+ * @input c3DropdownTrigger - A reference to an instance of C3DropdownComponent (alias).
  * @input c3DropdownDisabled - A boolean indicating whether the directive should be disabled.
- * @input c3DropdownClass - A string, an array of strings, a set of strings or a
- * object representing the CSS classes to be applied to the dropdown menu.
+ * @input c3DropdownClass / dropdownClass - CSS classes to be applied to the dropdown panel.
  */
 declare class C3DropdownTrigger implements OnDestroy {
-    private _element;
-    private _overlay;
-    private _viewContainerRef;
     private overlayRef?;
     private _closingActionsSubscription;
     private _destroyed;
-    /** The dropdown menu instance */
-    readonly dropdown: i0.ModelSignal<C3DropdownComponent>;
+    private readonly _element;
+    private readonly _overlay;
+    private readonly _viewContainerRef;
+    /** The dropdown menu instance (via [c3Dropdown] binding). */
+    readonly c3Dropdown: i0.InputSignal<C3DropdownComponent | null>;
+    /** The dropdown menu instance (via [c3DropdownTrigger] binding). */
+    readonly c3DropdownTrigger: i0.InputSignal<C3DropdownComponent | null>;
+    /** Resolved dropdown reference (supports both binding syntaxes). */
+    private readonly _dropdown;
     /** Whether the dropdown is disabled. */
     readonly dropdownDisabled: i0.InputSignal<boolean>;
-    /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
-    readonly dropdownClass: i0.InputSignal<string | string[] | Set<string> | {
-        [key: string]: any;
-    }>;
-    constructor(_element: ElementRef<HTMLElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef);
+    /** Classes to be passed to the dropdown menu via [c3DropdownClass]. */
+    readonly c3DropdownClass: i0.InputSignal<NgClassType | undefined>;
+    /** Classes to be passed to the dropdown menu via [dropdownClass]. */
+    readonly dropdownClass: i0.InputSignal<NgClassType | undefined>;
+    constructor();
     onClick(): void;
     ngOnDestroy(): void;
     show(): void;
@@ -86,7 +100,7 @@ declare class C3DropdownTrigger implements OnDestroy {
     /** Returns a stream that emits whenever an action that should close the menu occurs. */
     private _menuClosingActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<C3DropdownTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<C3DropdownTrigger, "[c3DropdownTrigger]", never, { "dropdown": { "alias": "c3DropdownTrigger"; "required": true; "isSignal": true; }; "dropdownDisabled": { "alias": "dropdownDisabled"; "required": false; "isSignal": true; }; "dropdownClass": { "alias": "dropdownClass"; "required": false; "isSignal": true; }; }, { "dropdown": "c3DropdownTriggerChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C3DropdownTrigger, "[c3Dropdown], [c3DropdownTrigger]", ["c3DropdownTrigger"], { "c3Dropdown": { "alias": "c3Dropdown"; "required": false; "isSignal": true; }; "c3DropdownTrigger": { "alias": "c3DropdownTrigger"; "required": false; "isSignal": true; }; "dropdownDisabled": { "alias": "c3DropdownDisabled"; "required": false; "isSignal": true; }; "c3DropdownClass": { "alias": "c3DropdownClass"; "required": false; "isSignal": true; }; "dropdownClass": { "alias": "dropdownClass"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
 }
 
 declare class C3DropdownModule {
@@ -615,15 +629,6 @@ declare class C3FileDisplayGridComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayGridComponent, "c3-file-display-grid", never, { "files": { "alias": "files"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "cardSize": { "alias": "cardSize"; "required": false; "isSignal": true; }; "displayFn": { "alias": "displayFn"; "required": false; "isSignal": true; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, never, true, never>;
 }
 
-declare class C3FileDisplayListColumnDefDirective {
-    readonly title: i0.InputSignal<string>;
-    readonly classList: i0.InputSignal<string[]>;
-    private readonly _table;
-    readonly headerCellDef: i0.Signal<C3FileDisplayListHeaderCellDefDirective | undefined>;
-    readonly cellDef: i0.Signal<C3FileDisplayListCellDefDirective | undefined>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListColumnDefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<C3FileDisplayListColumnDefDirective, "[c3FileDisplayListColumnDef]", never, { "title": { "alias": "c3FileDisplayListColumnDef"; "required": true; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; }, {}, ["headerCellDef", "cellDef"], never, true, never>;
-}
 declare class C3FileDisplayListHeaderCellDefDirective {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListHeaderCellDefDirective, never>;
@@ -634,6 +639,15 @@ declare class C3FileDisplayListCellDefDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListCellDefDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<C3FileDisplayListCellDefDirective, "[c3FileDisplayListCellDef]", never, {}, {}, never, never, true, never>;
 }
+declare class C3FileDisplayListColumnDefDirective {
+    readonly title: i0.InputSignal<string>;
+    readonly classList: i0.InputSignal<string[]>;
+    private readonly _table;
+    readonly headerCellDef: i0.Signal<any>;
+    readonly cellDef: i0.Signal<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListColumnDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C3FileDisplayListColumnDefDirective, "[c3FileDisplayListColumnDef]", never, { "title": { "alias": "c3FileDisplayListColumnDef"; "required": true; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; }, {}, ["headerCellDef", "cellDef"], never, true, never>;
+}
 
 declare class C3FileDisplayListComponent {
     readonly files: i0.InputSignal<(FileMetadata & {
@@ -902,5 +916,218 @@ declare class C3MenuModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<C3MenuModule>;
 }
 
-export { C3AlertDialogComponent, C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DialogTemplateComponent, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListCellDefDirective, C3FileDisplayListColumnDefDirective, C3FileDisplayListComponent, C3FileDisplayListHeaderCellDefDirective, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3MenuComponent, C3MenuModule, C3NavItemComponent, C3OpenDialogDirective, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, C3_FILE_DISPLAY_LIST, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR };
+/**
+ * @description Directive that highlights matching text within the host element's content.
+ * Wraps matched text in `<span class="c3-highlight">` inside a `<span class="c3-highlight_container">`.
+ *
+ * @selector [c3HighlightText]
+ * @input c3HighlightText - The text to highlight.
+ * @input c3HighlightTextCaseSensitive - Whether the match should be case-sensitive (default: false).
+ *
+ * @example
+ * ```html
+ * <p [c3HighlightText]="searchTerm">Some text to search in</p>
+ * <p [c3HighlightText]="searchTerm" [c3HighlightTextCaseSensitive]="true">Case-sensitive match</p>
+ * ```
+ */
+declare class C3HighlightTextDirective {
+    /** The text string to highlight within the host element. */
+    readonly highlightText: i0.InputSignal<string>;
+    /** Whether the highlighting should be case-sensitive. Defaults to false. */
+    readonly caseSensitive: i0.InputSignal<boolean>;
+    private readonly _el;
+    constructor();
+    /** Walks the DOM tree and wraps matching text nodes in highlight spans. */
+    private _applyHighlight;
+    /** Escapes special regex characters in the search text. */
+    private _escapeRegExp;
+    /** Removes all previously applied highlight wrappers, restoring original text nodes. */
+    private _resetHighlights;
+    /** Recursively collects all text nodes within an element. */
+    private _getTextNodes;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3HighlightTextDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C3HighlightTextDirective, "[c3HighlightText]", never, { "highlightText": { "alias": "c3HighlightText"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "c3HighlightTextCaseSensitive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class C3HighlightTextModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3HighlightTextModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3HighlightTextModule, never, [typeof C3HighlightTextDirective], [typeof C3HighlightTextDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<C3HighlightTextModule>;
+}
+
+/**
+ * @description A rounded title container that wraps projected content in a pill-shaped element.
+ * Styled via the `c3-rounded-title-theme` SCSS mixin.
+ *
+ * @selector c3-rounded-title
+ *
+ * @example
+ * ```html
+ * <c3-rounded-title>My Section Title</c3-rounded-title>
+ * ```
+ */
+declare class C3RoundedTitleComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3RoundedTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3RoundedTitleComponent, "c3-rounded-title", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class C3RoundedTitleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3RoundedTitleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3RoundedTitleModule, never, [typeof C3RoundedTitleComponent], [typeof C3RoundedTitleComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<C3RoundedTitleModule>;
+}
+
+/**
+ * @description A simple navigation bar component with elevation.
+ * Content is projected via `ng-content`. Styled via the `c3-navbar-theme` SCSS mixin.
+ *
+ * @selector c3-navbar
+ *
+ * @example
+ * ```html
+ * <c3-navbar>
+ *   <a routerLink="/home" routerLinkActive="selected">Home</a>
+ *   <a routerLink="/settings" routerLinkActive="selected">Settings</a>
+ * </c3-navbar>
+ * ```
+ */
+declare class C3NavbarComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3NavbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3NavbarComponent, "c3-navbar", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class C3NavbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3NavbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3NavbarModule, never, [typeof C3NavbarComponent], [typeof C3NavbarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<C3NavbarModule>;
+}
+
+/**
+ * @description A side-panel modal component that slides in from the right.
+ * Uses a `router-outlet` for content and provides a close button that navigates
+ * back to the computed return route.
+ *
+ * The return route is automatically computed from the current route tree,
+ * or can be overridden via the `returnRoute` input.
+ *
+ * @selector c3-modal
+ *
+ * @example
+ * ```html
+ * <!-- Auto-computed return route -->
+ * <c3-modal></c3-modal>
+ *
+ * <!-- Custom return route -->
+ * <c3-modal returnRoute="/dashboard"></c3-modal>
+ * ```
+ */
+declare class C3ModalComponent implements AfterViewInit, OnDestroy {
+    /** Override the auto-computed return route. */
+    readonly returnRoute: i0.InputSignal<string | null>;
+    /** Resolved return route (input override or auto-computed). */
+    readonly _returnRoute: i0.WritableSignal<string>;
+    readonly height: i0.WritableSignal<string>;
+    readonly posButton: i0.WritableSignal<number>;
+    readonly container: i0.Signal<ElementRef<HTMLDivElement> | undefined>;
+    private readonly _activatedRoute;
+    private readonly _cdr;
+    private readonly _platformId;
+    private _containerWatcher?;
+    private _resizeListener?;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private _updateHeight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3ModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3ModalComponent, "c3-modal", never, { "returnRoute": { "alias": "returnRoute"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class C3ModalModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3ModalModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3ModalModule, never, [typeof C3ModalComponent], [typeof C3ModalComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<C3ModalModule>;
+}
+
+/**
+ * @description A single tab item used inside `c3-tabs`.
+ * Provides a ripple effect and wraps projected content.
+ *
+ * @selector c3-tab, [c3-tab]
+ *
+ * @example
+ * ```html
+ * <c3-tabs>
+ *   <c3-tab><a routerLink="/page-a">Page A</a></c3-tab>
+ *   <c3-tab><a routerLink="/page-b">Page B</a></c3-tab>
+ * </c3-tabs>
+ * ```
+ */
+declare class C3TabComponent {
+    readonly elementRef: ElementRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3TabComponent, "c3-tab, [c3-tab]", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * @description A pill-shaped tab bar with an animated background indicator
+ * that slides to the active tab. Works with Angular Router to auto-detect
+ * the active route.
+ *
+ * @selector c3-tabs, [c3-tabs]
+ * @input ignoreQueryParams - If true, query params are ignored when matching active route.
+ *
+ * @example
+ * ```html
+ * <c3-tabs>
+ *   <c3-tab><a routerLink="/page-a">Page A</a></c3-tab>
+ *   <c3-tab><a routerLink="/page-b">Page B</a></c3-tab>
+ * </c3-tabs>
+ *
+ * <!-- Ignore query params for route matching -->
+ * <c3-tabs [ignoreQueryParams]="true">
+ *   <c3-tab><a routerLink="/search" [queryParams]="{ q: 'test' }">Search</a></c3-tab>
+ * </c3-tabs>
+ * ```
+ */
+declare class C3TabsComponent implements AfterViewInit {
+    /** Whether to ignore query parameters when matching the active route. */
+    readonly ignoreQueryParams: i0.InputSignal<boolean>;
+    containerElement: ElementRef;
+    items: QueryList<C3TabComponent>;
+    links: QueryList<RouterLink>;
+    selectedItem: C3TabComponent | undefined;
+    btnBackgroundOffset: number | string;
+    btnWidth: number | string;
+    private readonly _router;
+    private readonly _cdr;
+    private readonly _platformId;
+    private readonly _destroyRef;
+    ngAfterViewInit(): void;
+    /**
+     * Gets the left position of an element relative to the viewport.
+     * Returns 0 on server platform.
+     */
+    getLeftPositionElement(element: Element): number;
+    /** Computes the offset for the sliding background indicator. */
+    getBtnBackgroundOffset(): number | string;
+    /** Selects a tab by index and updates the indicator position. */
+    setSelectedItem(index?: number): void;
+    /**
+     * Finds the active tab index by matching router links.
+     * When multiple links match, the most specific one (most query params) wins.
+     */
+    private _getActiveTabIndex;
+    /** Updates the sliding indicator position and width. */
+    private _setBtn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3TabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3TabsComponent, "c3-tabs, [c3-tabs]", never, { "ignoreQueryParams": { "alias": "ignoreQueryParams"; "required": false; "isSignal": true; }; }, {}, ["items", "links"], ["*"], false, never>;
+}
+
+declare class C3TabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3TabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3TabsModule, [typeof C3TabsComponent], [typeof i3.CommonModule, typeof i4$1.RouterModule, typeof i5$1.MatRippleModule, typeof C3TabComponent], [typeof C3TabsComponent, typeof C3TabComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<C3TabsModule>;
+}
+
+export { C3AlertDialogComponent, C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DialogTemplateComponent, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListCellDefDirective, C3FileDisplayListColumnDefDirective, C3FileDisplayListComponent, C3FileDisplayListHeaderCellDefDirective, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3HighlightTextDirective, C3HighlightTextModule, C3MenuComponent, C3MenuModule, C3ModalComponent, C3ModalModule, C3NavItemComponent, C3NavbarComponent, C3NavbarModule, C3OpenDialogDirective, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3RoundedTitleComponent, C3RoundedTitleModule, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TabComponent, C3TabsComponent, C3TabsModule, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, C3_FILE_DISPLAY_LIST, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR };
 export type { AlertConfig, C3CreateDialogFromComponentConfig, C3CreateDialogFromComponentResult, C3FileCardSize, C3FileViewerConfig, ConfirmConfig, FileMetadata, FileNode, HttpClientOptions, PromptConfig, TreeType, VariantFile };

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

@@ -0,0 +1,39 @@
+@use "@angular/material" as mat;
+
+@mixin c3-modal-theme($theme) {
+  $bg-card: mat.get-theme-color($theme, background, card);
+
+  .c3-modal {
+    .container {
+      position: fixed;
+      z-index: 100;
+      top: 0;
+      right: 0;
+      min-height: 400px;
+      overflow: auto;
+      overflow-x: hidden;
+      background: $bg-card;
+      border-left: 1px solid rgba(255, 255, 255, 0.03);
+      min-width: 720px;
+
+      > div {
+        margin: 20px;
+        min-height: calc(100% - 40px);
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .close-button {
+      position: fixed;
+      z-index: 101;
+      top: 1rem;
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+@use "@angular/material" as mat;
+
+@mixin c3-navbar-theme($theme) {
+  $bg: mat.get-theme-color($theme, background, background);
+  $accent: mat.get-theme-color($theme, accent);
+  $is-dark-theme: if(mat.get-theme-type($theme) == dark, true, false);
+
+  .c3-navbar {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    background-color: $bg;
+
+    &.fixed {
+      position: fixed;
+      width: calc(100% - 60px);
+      left: 60px;
+      height: 36px;
+      display: flex;
+      overflow-x: hidden;
+      overflow-y: hidden;
+    }
+
+    &:hover {
+      overflow-x: visible;
+    }
+
+    a {
+      display: block;
+      flex-direction: row;
+      min-width: 150px;
+      cursor: pointer;
+      padding: 0 16px;
+      text-decoration: none;
+      line-height: 1.8em;
+      border-top: 3px solid transparent;
+      border-right: 1px solid #ffffff1a;
+      color: inherit;
+
+      &:last-of-type {
+        border-right: none;
+      }
+
+      &.selected {
+        border-top: 3px solid $accent;
+
+        @if $is-dark-theme {
+          background-color: $accent;
+        }
+      }
+    }
+
+    &.flex a {
+      display: flex;
+      flex: 1;
+      padding-left: 16px;
+    }
+
+    .spacer {
+      display: block;
+      flex-direction: row;
+      min-width: 100px;
+    }
+  }
+}

package/lib/c3-rounded-title/styles/_c3-rounded-title.scss

@@ -0,0 +1,37 @@
+@use "@angular/material" as mat;
+
+@mixin c3-rounded-title-theme($theme) {
+  $bg-accent: mat.get-theme-color($theme, accent);
+  $bg-primary: mat.get-theme-color($theme, primary);
+  $is-dark-theme: if(mat.get-theme-type($theme) == dark, true, false);
+
+  .c3-rounded-title {
+    $menuText-height: 44px;
+
+    position: relative;
+    display: flex;
+    border-radius: 26px;
+    height: $menuText-height;
+    padding: 4px;
+
+    @if $is-dark-theme {
+      background-color: $bg-accent;
+    } @else {
+      background-color: $bg-accent;
+    }
+
+    .title {
+      z-index: 1;
+      cursor: pointer;
+      transition: 0.5s all ease;
+      line-height: calc($menuText-height - 8px);
+      text-decoration: none;
+      color: white;
+      padding: 0 8px;
+      width: 100%;
+      background: $bg-primary;
+      border-radius: 18px;
+      user-select: none;
+    }
+  }
+}

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

@@ -4,6 +4,10 @@
 @use "../c3-expansion/styles/_c3-expansion" as *;
 @use "../c3-flowing-menu/styles/c3-flowing-menu" as *;
 @use "../c3-menu/styles/c3-menu" as *;
+@use "../c3-tabs/styles/c3-tabs" as *;
+@use "../c3-navbar/styles/c3-navbar" as *;
+@use "../c3-modal/styles/c3-modal" as *;
+@use "../c3-rounded-title/styles/c3-rounded-title" as *;
 
 @mixin c3-core($theme) {
   @include c3-root-variables($theme);
@@ -12,6 +16,10 @@
   @include c3-expansion($theme);
   @include c3-flowing-menu($theme);
   @include c3-menu-theme();
+  @include c3-tabs-theme($theme);
+  @include c3-navbar-theme($theme);
+  @include c3-modal-theme($theme);
+  @include c3-rounded-title-theme($theme);
 }
 
 @mixin c3-core-m3($theme) {

package/lib/c3-tabs/components/c3-tabs/c3-tabs.component.scss

@@ -0,0 +1,39 @@
+// Base structure; colors come from c3-tabs theme mixin
+.c3-tabs {
+  display: block;
+
+  .menu-text__container {
+    $menuText-height: 44px;
+
+    position: relative;
+    display: flex;
+    border-radius: 26px;
+    height: $menuText-height;
+    padding: 4px;
+
+    .item,
+    .item a {
+      z-index: 1;
+      cursor: pointer;
+      transition: 0.5s all ease;
+      line-height: calc($menuText-height - 8px);
+      text-decoration: none;
+      color: white;
+      padding: 0 8px;
+    }
+
+    .item:not(.active),
+    .item:not(.active) a {
+      color: white;
+    }
+
+    .toggle-btn__background {
+      position: absolute;
+      width: 70px;
+      border-radius: 18px;
+      height: calc($menuText-height - 8px);
+      transition: 0.5s all ease;
+      user-select: none;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+@use "@angular/material" as mat;
+
+@mixin c3-tabs-theme($theme) {
+  $primary: mat.get-theme-color($theme, primary);
+  $accent: mat.get-theme-color($theme, accent);
+  $is-dark-theme: mat.get-theme-type($theme) == dark;
+
+  .c3-tabs .menu-text__container {
+    @if $is-dark-theme {
+      background-color: color-mix(in srgb, #{$accent} 70%, black);
+    } @else {
+      background-color: color-mix(in srgb, #{$accent} 50%, white);
+    }
+
+    .toggle-btn__background {
+      background: #{$primary};
+    }
+  }
+}

package/package.json

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