@rubeusteam/rb-angular-components 0.0.1-dev.1 → 0.0.2-dev.1

package/lib/components/rb-header/rb-header.component.d.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectorRef, EventEmitter, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { RbHeaderUserProfile, RbHeaderApp, RbHeaderProfileMenuItem } from '../../interfaces/rb-header.interface';
+import * as i0 from "@angular/core";
+export declare class RbHeaderComponent {
+    private sanitizer;
+    private changeDetectorRef;
+    private readonly document;
+    private readonly destroyRef;
+    pageTitle: string;
+    userProfile?: RbHeaderUserProfile;
+    appsList: RbHeaderApp[];
+    backgroundColor: string;
+    profileMenu: RbHeaderProfileMenuItem[];
+    onHelpClick: EventEmitter<void>;
+    onAppsClick: EventEmitter<void>;
+    onViewAllAppsClick: EventEmitter<void>;
+    onProfileMenuItemClick: EventEmitter<RbHeaderProfileMenuItem>;
+    onLogoutClick: EventEmitter<void>;
+    onProfileMenuClick: EventEmitter<void>;
+    isAppsMenuOpen: boolean;
+    isProfileMenuOpen: boolean;
+    appsMenuRef?: ElementRef;
+    appsButtonRef?: ElementRef;
+    appsContainerRef?: ElementRef<HTMLElement>;
+    profileButtonRef?: ElementRef;
+    profileMenuRef?: ElementRef;
+    constructor(sanitizer: DomSanitizer, changeDetectorRef: ChangeDetectorRef);
+    get rubeusApps(): RbHeaderApp[];
+    get nonRubeusApps(): RbHeaderApp[];
+    getSafeSvg(svgString?: string): SafeHtml | null;
+    private readonly handleDocumentPointerDown;
+    handleAppsClick(): void;
+    handleAppSelect(app: RbHeaderApp): void;
+    handleViewAllAppsClick(): void;
+    handleHelpClick(): void;
+    handleProfileClick(): void;
+    handleProfileMenuItemClick(item: RbHeaderProfileMenuItem): void;
+    handleLogoutClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RbHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RbHeaderComponent, "rb-header", never, { "pageTitle": { "alias": "pageTitle"; "required": false; }; "userProfile": { "alias": "userProfile"; "required": false; }; "appsList": { "alias": "appsList"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "profileMenu": { "alias": "profileMenu"; "required": false; }; }, { "onHelpClick": "onHelpClick"; "onAppsClick": "onAppsClick"; "onViewAllAppsClick": "onViewAllAppsClick"; "onProfileMenuItemClick": "onProfileMenuItemClick"; "onLogoutClick": "onLogoutClick"; "onProfileMenuClick": "onProfileMenuClick"; }, never, never, true, never>;
+}

package/lib/components/rb-help-panel/rb-help-panel.component.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { RbHelpArticle, RbHelpIntegrationProvider } from '../../interfaces/rb-help-panel.interface';
+import * as i0 from "@angular/core";
+export declare class RbHelpPanelComponent implements OnInit, OnChanges {
+    private destroyRef;
+    isOpen: boolean;
+    panelTitle: string;
+    routeContext?: string;
+    integrationProvider?: RbHelpIntegrationProvider;
+    onClose: EventEmitter<void>;
+    onClickKnowledgeBase: EventEmitter<void>;
+    onClickCommunity: EventEmitter<void>;
+    onClickNews: EventEmitter<void>;
+    onClickMyTickets: EventEmitter<void>;
+    onClickChat: EventEmitter<void>;
+    searchQuery: string;
+    articles: RbHelpArticle[];
+    isLoading: boolean;
+    private searchSubject;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    loadInitialArticles(): void;
+    onSearchChange(query: string): void;
+    handleClose(): void;
+    openArticle(article: RbHelpArticle): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RbHelpPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RbHelpPanelComponent, "rb-help-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "panelTitle": { "alias": "panelTitle"; "required": false; }; "routeContext": { "alias": "routeContext"; "required": false; }; "integrationProvider": { "alias": "integrationProvider"; "required": false; }; }, { "onClose": "onClose"; "onClickKnowledgeBase": "onClickKnowledgeBase"; "onClickCommunity": "onClickCommunity"; "onClickNews": "onClickNews"; "onClickMyTickets": "onClickMyTickets"; "onClickChat": "onClickChat"; }, never, never, true, never>;
+}

package/lib/components/rb-sidebar-navigation/rb-sidebar-navigation.component.d.ts

@@ -0,0 +1,81 @@
+import { EventEmitter, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
+import { RbSidebarNavigationItem } from '../../interfaces/rb-sidebar-navigation.interface';
+import * as i0 from "@angular/core";
+export declare class RbSidebarNavigationComponent implements OnInit, OnDestroy, AfterViewInit {
+    private router;
+    private elementRef;
+    private routerSubscription?;
+    logoUrl: string;
+    logoTextUrl: string;
+    logoName: string;
+    private _items;
+    set items(value: RbSidebarNavigationItem[]);
+    get items(): RbSidebarNavigationItem[];
+    initiallyFixed: boolean;
+    private _secondaryItems;
+    private selectedSecondaryItemId;
+    secondaryTitle: string;
+    set secondaryItems(value: RbSidebarNavigationItem[]);
+    get secondaryItems(): RbSidebarNavigationItem[];
+    backgroundColor: string;
+    textColor: string;
+    activeTextColor: string;
+    hoverBackgroundColor: string;
+    private _width;
+    set width(value: string | number);
+    get width(): string | number;
+    set sidebarWidth(value: string | number);
+    get sidebarWidth(): string | number;
+    private _secondaryWidth;
+    set secondaryWidth(value: string | number);
+    get secondaryWidth(): string | number;
+    set secondarySidebarWidth(value: string | number);
+    get secondarySidebarWidth(): string | number;
+    private _closedWidth;
+    set closedWidth(value: string | number);
+    get closedWidth(): string | number;
+    private _sectionGap;
+    set sectionGap(value: string | number);
+    get sectionGap(): string | number;
+    get formattedWidth(): string;
+    get formattedSecondaryWidth(): string;
+    get formattedClosedWidth(): string;
+    get formattedSectionGap(): string;
+    private formatCssUnit;
+    toggleIcon: string;
+    itemClick: EventEmitter<RbSidebarNavigationItem>;
+    logoClick: EventEmitter<void | RbSidebarNavigationItem>;
+    isFixed: boolean;
+    isHovered: boolean;
+    isOverlayActive: boolean;
+    private hoverTimeout?;
+    private overlayCloseTimeout?;
+    get hasSecondary(): boolean;
+    private closePrimaryForSecondaryMenu;
+    private sortItems;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    get isOpen(): boolean;
+    set isOpen(value: boolean);
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    ngOnDestroy(): void;
+    toggleFixed(): void;
+    private finishOverlayAfterClosingTransition;
+    private clearHoverTimeout;
+    private clearOverlayCloseTimeout;
+    onLogoClicked(): void;
+    onItemClicked(item: RbSidebarNavigationItem): void;
+    toggleItem(item: RbSidebarNavigationItem): void;
+    isChildActive(item: RbSidebarNavigationItem): boolean;
+    isParentActive(item: RbSidebarNavigationItem): boolean;
+    isSecondaryItemActive(item: RbSidebarNavigationItem): boolean;
+    private isRouteActive;
+    getSectionTitleLabel(item: RbSidebarNavigationItem): string;
+    getNavItemLabel(item: RbSidebarNavigationItem): string;
+    getSubmenuItemLabel(item: RbSidebarNavigationItem): string;
+    scrollToActiveItem(smooth?: boolean): void;
+    private performScrollToActiveItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RbSidebarNavigationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RbSidebarNavigationComponent, "rb-sidebar-navigation", never, { "logoUrl": { "alias": "logoUrl"; "required": false; }; "logoTextUrl": { "alias": "logoTextUrl"; "required": false; }; "logoName": { "alias": "logoName"; "required": false; }; "items": { "alias": "items"; "required": false; }; "initiallyFixed": { "alias": "initiallyFixed"; "required": false; }; "secondaryTitle": { "alias": "secondaryTitle"; "required": false; }; "secondaryItems": { "alias": "secondaryItems"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "activeTextColor": { "alias": "activeTextColor"; "required": false; }; "hoverBackgroundColor": { "alias": "hoverBackgroundColor"; "required": false; }; "width": { "alias": "width"; "required": false; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; }; "secondaryWidth": { "alias": "secondaryWidth"; "required": false; }; "secondarySidebarWidth": { "alias": "secondarySidebarWidth"; "required": false; }; "closedWidth": { "alias": "closedWidth"; "required": false; }; "sectionGap": { "alias": "sectionGap"; "required": false; }; "toggleIcon": { "alias": "toggleIcon"; "required": false; }; }, { "itemClick": "itemClick"; "logoClick": "logoClick"; }, never, never, true, never>;
+}

package/lib/directives/rb-overflow-tooltip/rb-overflow-tooltip.directive.d.ts

@@ -0,0 +1,14 @@
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class RbOverflowTooltipDirective implements AfterViewInit, OnDestroy {
+    private readonly elementRef;
+    private readonly tooltip;
+    private resizeObserver?;
+    private mutationObserver?;
+    rbOverflowTooltip: string;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    updateTooltip(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RbOverflowTooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RbOverflowTooltipDirective, "[rbOverflowTooltip]", never, { "rbOverflowTooltip": { "alias": "rbOverflowTooltip"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/interfaces/rb-header.interface.d.ts

@@ -0,0 +1,19 @@
+export interface RbHeaderUserProfile {
+    name: string;
+    base: string;
+    avatarUrl: string;
+}
+export interface RbHeaderApp {
+    name: string;
+    iconUrl?: string;
+    iconSvg?: string;
+    url?: string;
+    action?: () => void;
+    isRubeusApp?: boolean;
+}
+export interface RbHeaderProfileMenuItem {
+    id?: string;
+    label: string;
+    iconSvg?: string;
+    iconUrl?: string;
+}

package/lib/interfaces/rb-help-panel.interface.d.ts

@@ -0,0 +1,17 @@
+import { Observable } from 'rxjs';
+export interface RbHelpArticle {
+    id: string | number;
+    title: string;
+    url?: string;
+    category?: string;
+}
+export interface RbHelpIntegrationProvider {
+    /**
+     * Método para carregar artigos da página atual ao abrir o painel
+     */
+    fetchInitialArticles(routeContext?: string): Observable<RbHelpArticle[]>;
+    /**
+     * Método para pesquisar artigos no zendesk
+     */
+    searchArticles(query: string): Observable<RbHelpArticle[]>;
+}

package/lib/interfaces/rb-sidebar-navigation.interface.d.ts

@@ -0,0 +1,19 @@
+export interface RbSidebarNavigationItem {
+    id: string;
+    icon: string;
+    label: string;
+    route?: string;
+    action?: () => void;
+    children?: RbSidebarNavigationItem[];
+    expanded?: boolean;
+    isSectionTitle?: boolean;
+    hasDivider?: boolean;
+    usageCount?: number;
+}
+export interface RbSidebarNavigationConfig {
+    logoUrl?: string;
+    logoName?: string;
+    items: RbSidebarNavigationItem[];
+    bottomButtonIconOpen?: string;
+    bottomButtonIconClosed?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rubeusteam/rb-angular-components",
-  "version": "0.0.1-dev.1",
-  "description": "Correção referência paginação e ordenação",
+  "version": "0.0.2-dev.1",
+  "description": "Correções e adições no componente de crud",
   "license": "MIT",
   "keywords": [
     "angular",

package/public-api.d.ts

@@ -7,13 +7,20 @@ export * from './lib/components/rb-filter-dropdown/rb-filter-dropdown.component'
 export * from './lib/components/rb-copy-confirm-dialog/rb-copy-confirm-dialog.component';
 export * from './lib/components/rb-change-log-dialog/rb-change-log-dialog.component';
 export * from './lib/components/rb-columns-sort-setting/rb-columns-sort-setting.component';
+export * from './lib/components/rb-sidebar-navigation/rb-sidebar-navigation.component';
+export * from './lib/components/rb-header/rb-header.component';
 export * from './lib/pipes/rb-custom/rb-custom.pipe';
 export * from './lib/pipes/rb-conditional-class/rb-conditional-class.pipe';
 export * from './lib/pipes/is-array.pipe';
 export * from './lib/directives/rb-dynamic-button/rb-dynamic-button.directive';
+export * from './lib/directives/rb-overflow-tooltip/rb-overflow-tooltip.directive';
 export * from './lib/interfaces/rb-crud.interface';
 export * from './lib/interfaces/button.interface';
 export * from './lib/interfaces/rb-dialog.interface';
 export * from './lib/interfaces/rb-filter.interface';
 export * from './lib/interfaces/rb-change-log-dialog.interface';
 export * from './lib/interfaces/rb-conditional-class.interface';
+export * from './lib/interfaces/rb-sidebar-navigation.interface';
+export * from './lib/interfaces/rb-header.interface';
+export * from './lib/interfaces/rb-help-panel.interface';
+export * from './lib/components/rb-help-panel/rb-help-panel.component';

package/src/lib/styles/README.md

@@ -1,83 +0,0 @@
-
-# Tipografia - rb-angular-components
-
-No diretório styles, contém o arquivo `typography.scss` onde se define **tipografia** da biblioteca `rb-angular-components` contém as classes CSS responsáveis por estilizar os textos nos componentes. As classes estão baseadas no Rubeus Style Guide, que pode ser facilmente aplicado em qualquer elemento de texto na sua aplicação.
-
-## Como utilizar
-
-Existem duas formas de utilizar os estilos de tipografia: inserindo diretamente no arquivo `styles.scss` ou configurando no `angular.json`. Ambas as abordagens permitem que você use as classes de tipografia em toda a sua aplicação.
-
-### Alternativa 1: Inserindo pelo `styles.scss`
-
-A primeira alternativa é importar o arquivo de estilos diretamente no seu arquivo global de estilos, como o `styles.scss` ou `styles.css`. Para isso, basta adicionar a seguinte linha no início do seu arquivo:
-
-```scss
-@import 'node_modules/rb-angular-components/styles/typography.scss';
-
-```
-
-Esta abordagem é a mais simples e é adequada para projetos que já possuem um arquivo global de estilos.
-
-#### Exemplo de uso:
-
-Após a importação do arquivo de tipografia no `styles.scss`, você pode usar as classes de tipografia diretamente nos elementos HTML do seu projeto.
-
-```html
-<div>
-  <h1 class="rb-h1">Título Principal</h1>
-  <p class="rb-font-body rb-large">Texto grande para o corpo.</p>
-  <p class="rb-font-body rb-medium">Texto médio para o corpo.</p>
-  <p class="rb-font-body rb-small">Texto pequeno para o corpo.</p>
-  <h2 class="rb-h2">Subtítulo</h2>
-  <p class="rb-font-body">Texto padrão no corpo.</p>
-</div>
-```
-
-### Alternativa 2: Inserindo pelo `angular.json`
-
-A segunda alternativa é configurar os estilos diretamente no arquivo `angular.json`. Isso garante que o arquivo de tipografia seja carregado globalmente em toda a aplicação, sem a necessidade de importação manual no `styles.scss`.
-
-Para isso, siga os seguintes passos:
-
-1. Abra o arquivo `angular.json`.
-2. Encontre a seção `"styles"` dentro do seu projeto, que fica em `projects -> <nome-do-projeto> -> architect -> build`.
-3. Adicione o caminho do arquivo de tipografia na lista de estilos.
-
-```json
-{
-  "projects": {
-    "<nome-do-projeto>": {
-      "architect": {
-        "build": {
-          "styles": [
-            "src/styles.scss",
-            "node_modules/rb-angular-components/styles/typography.scss",
-          ]
-        }
-      }
-    }
-  }
-}
-```
-
-Com isso, o arquivo de tipografia será carregado automaticamente, sem necessidade de importação explícita no `styles.scss`.
-
-#### Exemplo de uso:
-
-Após adicionar a referência no `angular.json`, você pode usar as classes de tipografia nos elementos HTML, assim como no exemplo anterior:
-
-```html
-<div>
-  <h1 class="rb-font-heading rb-h1">Título Principal</h1>
-  <p class="rb-font-body rb-large">Texto grande para o corpo.</p>
-  <p class="rb-font-body rb-medium">Texto médio para o corpo.</p>
-  <p class="rb-font-body rb-small">Texto pequeno para o corpo.</p>
-  <h2 class="rb-font-heading rb-h2">Subtítulo</h2>
-  <p class="rb-font-body">Texto padrão no corpo.</p>
-</div>
-```
-
-## Conclusão
-
-As classes de tipografia são uma maneira prática e simples de garantir consistência visual no seu projeto. Você pode escolher a melhor abordagem para seu caso, seja inserindo os estilos pelo `styles.scss` ou configurando no `angular.json`. Ambas as opções oferecem flexibilidade e facilidade de manutenção.
-

package/src/lib/styles/_crud.scss

@@ -1,34 +0,0 @@
-.rb-menu-crud .mat-mdc-menu-content{
-  background: #F8FAF9;
-}
-
-.rb-menu-crud .mat-menu-item,
-.rb-menu-crud .mat-mdc-menu-item {
-  color: #2E3131;
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(24px);
-  letter-spacing: var(0.5px);
-}
-
-.rb-menu-crud .mat-icon {
-  color: #505353;
-}
-
-.rb-menu-crud button[color="warn"],
-.rb-menu-crud button[color="warn"] span {
-  color: var(--mat-menu-item-text-color-warn, #7E0007);
-  mat-icon {
-    color: #93000A;
-  }
-}
-
-.rb-menu-crud hr {
-  color: #C4C7C6;
-}
-
-.rb-table-container thead {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}

package/src/lib/styles/_dialog.scss

@@ -1,59 +0,0 @@
-.rb-dialog-header {
-  display: flex;
-  padding: 4px 16px 4px 32px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  background: rgba(239, 241, 240, 1);     // Palettes/Neutral 95
-  color: rgba(80, 83, 83, 1);             //Palettes/Neutral 35
-
-  h2{
-    font-family: Roboto;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 23.4px;
-  }
-}
-
-.rb-dialog-content {
-  text-align: center;
-  color: rgba(14, 18, 17, 1);             // Palettes/Neutral 5
-  display: flex;
-  padding: 32px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-
-.rb-dialog-content.bg-white {
-  background-color: #ffffff;
-}
-
-.rb-dialog-actions {
-  display: flex;
-  align-self: stretch;
-  padding: 16px 32px;
-  border-top: solid 1px rgba(225, 227, 226, 1); // Palettes/Neutral 90
-}
-
-.width-100 {
-  width: 100%;
-}
-
-mat-dialog-content.rb-dialog-content.has-crud {
-  padding: 0;
-  .rb-crud-container {
-    margin-top: 0;
-
-    .mat-mdc-header-cell {
-      vertical-align: middle;
-    }
-    td, th {
-      padding: 0 16px;
-    }
-    th {
-      border-bottom: 1px solid rgb(225, 227, 226);
-    }
-  }
-}

package/src/lib/styles/_layout.scss

@@ -1,86 +0,0 @@
-/* Display */
-.rb-row {
-  display: flex;
-}
-
-/* Direction */
-.rb-flex-row {
-  flex-direction: row;
-}
-
-.rb-flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.rb-flex-column {
-  flex-direction: column;
-}
-
-.rb-flex-column-reverse {
-  flex-direction: column-reverse;
-}
-
-/* Align */
-
-.rb-align-items-start {
-  align-items: flex-start;
-}
-
-.rb-align-items-center {
-  align-items: center;
-}
-
-.rb-align-items-end {
-  align-items: flex-end;
-}
-
-.rb-align-items-stretch {
-  align-items: stretch;
-}
-
-.rb-align-items-baseline {
-  align-items: baseline;
-}
-
-
-/* Justify */
-
-.rb-justify-content-start {
-  justify-content: flex-start;
-}
-
-.rb-justify-content-center {
-  justify-content: center;
-}
-
-.rb-justify-content-end {
-  justify-content: flex-end;
-}
-
-.rb-justify-content-around {
-  justify-content: space-around;
-}
-
-.rb-justify-content-between {
-  justify-content: space-between;
-}
-
-.rb-justify-content-evenly {
-  justify-content: space-evenly;
-}
-
-/* Wrap */
-
-.rb-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.rb-flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.rb-flex-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-
-

package/src/lib/styles/_typography.scss

@@ -1,62 +0,0 @@
-:root {
-  --font-plain: 'Roboto', sans-serif;
-  --font-heading: 'Poppins', sans-serif;
-}
-
-/* Fontes de corpo */
-
-.rb-font-body {
-  font-family: var(--font-plain);
-  font-weight: regular;
-}
-
-.rb-large {
-  font-size: 1rem;             // 16px
-  line-height: 1.5rem;         // 24px
-  letter-spacing: 0.03125rem; // 0.5px
-}
-
-.rb-medium {
-  font-size: 0.875rem;          // 14px
-  line-height: 1.25rem;         // 20px
-  letter-spacing: 0.015625rem;  // 0.25px
-}
-
-.rb-small {
-  font-size: 0.75rem;    // 12px
-  line-height: 1rem;     // 16px
-}
-
-
-/* Fontes de títulos */
-
-.rb-font-heading {
-  font-family: var(--font-heading);
-  font-weight: bold;
-}
-
-.rb-h1 {
-  font-size: 2.4375rem;    // 39px
-  line-height: 4.425rem;   // 70.8px
-}
-
-.rb-h2 {
-  font-size: 1.9375rem;    // 31px
-  line-height: 3.525rem;   // 56.4px
-}
-
-.rb-h3 {
-  font-size: 1.5625rem;    // 25px
-  line-height: 2.85rem;    // 45.6px
-}
-
-.rb-h4 {
-  font-size: 1.25rem;      // 20px
-  line-height: 2.25rem;    // 36px
-}
-
-.rb-h5 {
-  font-size: 1rem;         // 16px
-  line-height: 1.8rem;     // 28.8px
-}
-

package/src/lib/styles/index.scss

@@ -1,5 +0,0 @@
-@forward '_crud';
-@forward '_dialog';
-@forward '_layout';
-@forward '_typography';
-