cax-design-system 2.6.1 → 2.7.1

package/README.md

@@ -1,6 +1,6 @@
 # Cax Design System
 
-You can access all the modules available in cax design system in the [storybook](https://673d43a5032fb6c56edd4107-jktgqqhdps.chromatic.com/)
+You can access all the modules available in cax design system in the [storybook](https://673d43a5032fb6c56edd4107-lhloxdjbbf.chromatic.com/)
 
 ### Installation
 

package/commentbox/commentbox.d.ts

@@ -0,0 +1,111 @@
+import { EventEmitter, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+interface Comment {
+    text: string;
+    date: Date;
+    files?: Array<{
+        name: string;
+        size: string;
+    }>;
+    isAdmin?: boolean;
+    sender?: string;
+}
+interface GroupedComments {
+    date: Date;
+    items: Comment[];
+}
+export declare class CommentboxComponent {
+    private sanitizer;
+    comments: Comment[];
+    mentionSuggestions: any[];
+    hashtagSuggestions: any[];
+    sidebarHeader: string;
+    isAdmin: boolean;
+    commentAdded: EventEmitter<any>;
+    fileSelected: EventEmitter<File>;
+    fileDownload: EventEmitter<{
+        name: string;
+        size: string;
+    }>;
+    visibleChange: EventEmitter<boolean>;
+    newComment: string;
+    isMentioning: boolean;
+    isHashtagging: boolean;
+    suggestions: any[];
+    selectedSuggestion: any;
+    selectedSuggestionIndex: number;
+    filteredSuggestions: any[];
+    currentTokenType: 'mention' | 'hashtag' | null;
+    cursorPosition: number;
+    fileInput: ElementRef<HTMLInputElement>;
+    suggestionPanel: ElementRef;
+    inputText: ElementRef;
+    private commentsList;
+    countChip: ElementRef;
+    selectedFiles: Array<{
+        name: string;
+        size: string;
+    }>;
+    selectedFilesMap: Map<number, {
+        name: string;
+        size: string;
+    }>;
+    today: Date;
+    overlayVisible: boolean;
+    filesOverlayVisible: boolean;
+    overlayPosition: {
+        top: number;
+        left: number;
+    };
+    private dateUpdateInterval;
+    private shouldAutoScroll;
+    private isUserScrolling;
+    private observer;
+    constructor(sanitizer: DomSanitizer);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private updateCurrentDate;
+    formatDate(date: Date): string;
+    formatMessageWithTags(text: string): SafeHtml;
+    addComment(): void;
+    private forceScrollToBottom;
+    private scrollToBottom;
+    set visible(value: boolean);
+    get visible(): boolean;
+    private _visible;
+    toggleComments(): void;
+    onSidebarHide(): void;
+    onDocumentClick(event: MouseEvent): void;
+    handleKeyUp(event: any): void;
+    getTokenAtCursor(text: string, cursorPos: number): string | null;
+    getWordAtPosition(text: string, position: number): string;
+    selectSuggestion(suggestion: any): void;
+    onSuggestionSelect(item: any): void;
+    onSuggestionPanelHide(): void;
+    getCursorPosition(input: HTMLInputElement): {
+        left: number;
+        top: number;
+    };
+    onFileIconClick(event: Event): void;
+    onFileSelect(event: Event): void;
+    private updateFileState;
+    removeFile(index: number, fromChip?: boolean): void;
+    getOverflowCount(): number;
+    showFilesOverlay(event: MouseEvent): void;
+    hideFilesOverlay(): void;
+    private handleClickOutside;
+    formatFileSize(bytes: number): string;
+    showSuggestions(_event: any, type: 'mention' | 'hashtag'): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private scrollSuggestionIntoView;
+    onFileDownload(file: {
+        name: string;
+        size: string;
+    }): void;
+    get groupedComments(): GroupedComments[];
+    getShortFileName(filename: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommentboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommentboxComponent, "cax-comments", never, { "comments": { "alias": "comments"; "required": false; }; "mentionSuggestions": { "alias": "mentionSuggestions"; "required": false; }; "hashtagSuggestions": { "alias": "hashtagSuggestions"; "required": false; }; "sidebarHeader": { "alias": "sidebarHeader"; "required": false; }; "isAdmin": { "alias": "isAdmin"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "commentAdded": "commentAdded"; "fileSelected": "fileSelected"; "fileDownload": "fileDownload"; "visibleChange": "visibleChange"; }, never, never, false, never>;
+}
+export {};

package/commentbox/commentbox.module.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./commentbox";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "cax-design-system/sidebar";
+import * as i5 from "cax-design-system/inputtext";
+import * as i6 from "cax-design-system/button";
+import * as i7 from "cax-design-system/chip";
+import * as i8 from "cax-design-system/overlay";
+import * as i9 from "cax-design-system/avatar";
+import * as i10 from "cax-design-system/ripple";
+import * as i11 from "cax-design-system/api";
+export declare class CommentboxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommentboxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CommentboxModule, [typeof i1.CommentboxComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.Sidebar, typeof i5.InputTextModule, typeof i6.ButtonModule, typeof i7.ChipModule, typeof i8.OverlayModule, typeof i9.AvatarModule, typeof i10.RippleModule, typeof i11.SharedModule], [typeof i1.CommentboxComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CommentboxModule>;
+}

package/commentbox/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="cax-design-system/commentbox" />
+export * from './public_api';

package/commentbox/public_api.d.ts

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

package/esm2022/card/card.mjs

@@ -79,13 +79,13 @@ export class Card {
         return this.el.nativeElement.children[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Card, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Card, selector: "cax-card", inputs: { header: "header", activeCard: "activeCard", imageUrl: "imageUrl", badgeSeverity: "badgeSeverity", badgeValue: "badgeValue", iconClass: "iconClass", subheader: "subheader", style: "style", styleClass: "styleClass" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\r\n  <div  [ngClass]=\"{\r\n    'cax-card-header': true,\r\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\r\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\r\n    'cax-card-header-with-image': imageUrl && !iconClass,\r\n    'cax-card-header-with-icon': iconClass && !imageUrl\r\n\r\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\r\n    <ng-content select=\"cax-header\"></ng-content>\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\r\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\r\n    <div *ngIf=\"activeCard\">\r\n      <cax-badge\r\n        [value]=\"badgeValue\"\r\n        [severity]=\"badgeSeverity\">\r\n      </cax-badge>\r\n    </div>\r\n </div>\r\n  <div class=\"cax-card-body\">\r\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\r\n          {{ header }}\r\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\r\n          {{ subheader }}\r\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-content\">\r\n          <ng-content></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n          <ng-content select=\"cax-footer\"></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-card-header{display:flex;align-items:center;position:relative;justify-content:space-between;padding:24px 24px 0}.cax-card-header-default-padding{padding:24px 24px 16px}.cax-card-no-header{padding:10px}.cax-card-header img{width:100%;height:180px;border-radius:12px;border:1px solid #e0e5eb}.cax-card-header i{width:100%;font-size:48px;line-height:48px}.cax-card-header cax-badge{position:absolute;top:24px;right:36px;z-index:10}.cax-card-header cax-badge .cax-card-header-default-padding{padding:24px 24px 0}.cax-card-header-with-image cax-badge{right:36px;top:36px}.cax-card-header-with-icon cax-badge{right:26px;top:36px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Badge, selector: "cax-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Card, selector: "cax-card", inputs: { header: "header", activeCard: "activeCard", imageUrl: "imageUrl", badgeSeverity: "badgeSeverity", badgeValue: "badgeValue", iconClass: "iconClass", subheader: "subheader", style: "style", styleClass: "styleClass" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\r\n  <div  [ngClass]=\"{\r\n    'cax-card-header': true,\r\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\r\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\r\n    'cax-card-header-with-image': imageUrl && !iconClass,\r\n    'cax-card-header-with-icon': iconClass && !imageUrl\r\n\r\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\r\n    <ng-content select=\"cax-header\"></ng-content>\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\r\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\r\n    <div *ngIf=\"activeCard\">\r\n      <cax-badge\r\n        [value]=\"badgeValue\"\r\n        [severity]=\"badgeSeverity\">\r\n      </cax-badge>\r\n    </div>\r\n </div>\r\n  <div class=\"cax-card-body\">\r\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\r\n          {{ header }}\r\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\r\n          {{ subheader }}\r\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-content\">\r\n          <ng-content></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n          <ng-content select=\"cax-footer\"></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-card-header{display:flex;align-items:center;position:relative;justify-content:space-between;padding:24px 24px 0}.cax-card-header-default-padding{padding:24px 24px 16px}.cax-card-no-header{padding:10px}.cax-card-header img{width:100%;height:180px;border-radius:12px;border:1px solid var(--neutral-100)}.cax-card-header i{width:100%;font-size:48px;line-height:48px}.cax-card-header cax-badge{position:absolute;top:24px;right:36px;z-index:10}.cax-card-header cax-badge .cax-card-header-default-padding{padding:24px 24px 0}.cax-card-header-with-image cax-badge{right:36px;top:36px}.cax-card-header-with-icon cax-badge{right:26px;top:36px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Badge, selector: "cax-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Card, decorators: [{
             type: Component,
             args: [{ selector: 'cax-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\r\n  <div  [ngClass]=\"{\r\n    'cax-card-header': true,\r\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\r\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\r\n    'cax-card-header-with-image': imageUrl && !iconClass,\r\n    'cax-card-header-with-icon': iconClass && !imageUrl\r\n\r\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\r\n    <ng-content select=\"cax-header\"></ng-content>\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\r\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\r\n    <div *ngIf=\"activeCard\">\r\n      <cax-badge\r\n        [value]=\"badgeValue\"\r\n        [severity]=\"badgeSeverity\">\r\n      </cax-badge>\r\n    </div>\r\n </div>\r\n  <div class=\"cax-card-body\">\r\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\r\n          {{ header }}\r\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\r\n          {{ subheader }}\r\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-content\">\r\n          <ng-content></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n          <ng-content select=\"cax-footer\"></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-card-header{display:flex;align-items:center;position:relative;justify-content:space-between;padding:24px 24px 0}.cax-card-header-default-padding{padding:24px 24px 16px}.cax-card-no-header{padding:10px}.cax-card-header img{width:100%;height:180px;border-radius:12px;border:1px solid #e0e5eb}.cax-card-header i{width:100%;font-size:48px;line-height:48px}.cax-card-header cax-badge{position:absolute;top:24px;right:36px;z-index:10}.cax-card-header cax-badge .cax-card-header-default-padding{padding:24px 24px 0}.cax-card-header-with-image cax-badge{right:36px;top:36px}.cax-card-header-with-icon cax-badge{right:26px;top:36px}}\n"] }]
+                    }, template: "<div [ngClass]=\"'cax-card cax-component'\" [ngStyle]=\"_style()\" [class]=\"styleClass\" [attr.data-pc-name]=\"'card'\">\r\n  <div  [ngClass]=\"{\r\n    'cax-card-header': true,\r\n    'cax-card-header-no-padding': !header && !headerTemplate && !imageUrl && !iconClass && activeCard,\r\n    'cax-card-header-default-padding': (header || headerTemplate || imageUrl || iconClass) && !(!iconClass && !imageUrl),\r\n    'cax-card-header-with-image': imageUrl && !iconClass,\r\n    'cax-card-header-with-icon': iconClass && !imageUrl\r\n\r\n  }\" *ngIf=\"header || headerTemplate || iconClass || imageUrl || activeCard\">\r\n    <ng-content select=\"cax-header\"></ng-content>\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    <i [class]=\"iconClass\" *ngIf=\"!imageUrl\"></i>\r\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"Card\" />\r\n    <div *ngIf=\"activeCard\">\r\n      <cax-badge\r\n        [value]=\"badgeValue\"\r\n        [severity]=\"badgeSeverity\">\r\n      </cax-badge>\r\n    </div>\r\n </div>\r\n  <div class=\"cax-card-body\">\r\n      <div class=\"cax-card-title\" *ngIf=\"header || titleTemplate\">\r\n          {{ header }}\r\n          <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-subtitle\" *ngIf=\"subheader || subtitleTemplate\">\r\n          {{ subheader }}\r\n          <ng-container *ngTemplateOutlet=\"subtitleTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-content\">\r\n          <ng-content></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n      </div>\r\n      <div class=\"cax-card-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n          <ng-content select=\"cax-footer\"></ng-content>\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-card-header{display:flex;align-items:center;position:relative;justify-content:space-between;padding:24px 24px 0}.cax-card-header-default-padding{padding:24px 24px 16px}.cax-card-no-header{padding:10px}.cax-card-header img{width:100%;height:180px;border-radius:12px;border:1px solid var(--neutral-100)}.cax-card-header i{width:100%;font-size:48px;line-height:48px}.cax-card-header cax-badge{position:absolute;top:24px;right:36px;z-index:10}.cax-card-header cax-badge .cax-card-header-default-padding{padding:24px 24px 0}.cax-card-header-with-image cax-badge{right:36px;top:36px}.cax-card-header-with-icon cax-badge{right:26px;top:36px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { header: [{
                 type: Input
             }], activeCard: [{