npm - @spicainternational/ngx-sds-components - Versions diffs - 8.1.1 → 8.3.0-beta.0 - Mend

@spicainternational/ngx-sds-components 8.1.1 → 8.3.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/fesm2022/spicainternational-ngx-sds-components-src-lib-pane.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { PanePage } from './pane.model';\r\n\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\nimport { isThisSecond } from 'date-fns';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sds-pane',\r\n templateUrl: './pane.component.html',\r\n styleUrls: ['./pane.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [NgIf, FaIconComponent, NgTemplateOutlet, NgFor]\r\n})\r\nexport class SdsPaneComponent implements OnInit, OnChanges {\r\n\r\n @Input() public pages?: PanePage[];\r\n @Input() public selectedPage?: PanePage;\r\n @Input() public contentWidthRem: number = 20;\r\n @Input() public product?: 'all-hours' \| 'my-hours' \| 'door-cloud' \| 'time-and-space' \| string;\r\n \r\n @Output() pageChange = new EventEmitter();\r\n\r\n public closeIcon = faXmark;\r\n\r\n public productCssClass?: string;\r\n\r\n constructor() {}\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['product']) {\r\n this.productCssClass = this.product ? `product-${this.product}` : undefined; \r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public showContent(page: PanePage): void{\r\n this.selectedPage = page;\r\n this.pageChange.emit(this.selectedPage);\r\n }\r\n\r\n public hideContent(): void{\r\n this.selectedPage = undefined;\r\n this.pageChange.emit(this.selectedPage);\r\n }\r\n\r\n}\r\n","<div \r\n class=\"pane border-start\"\r\n [class]=\"productCssClass\"\r\n >\r\n <div \r\n ngIf=\"selectedPage\" \r\n class=\"pane-content\"\r\n [style.width.rem]=\"contentWidthRem\"\r\n >\r\n \r\n <div class=\"page-header\">\r\n <div class=\"title\">\r\n {{selectedPage.title}}\r\n </div>\r\n\r\n <button \r\n class=\"btn btn-stealth ms-auto\"\r\n (click)=\"hideContent()\"\r\n >\r\n <fa-icon \r\n [icon]=\"closeIcon\" \r\n [fixedWidth]=\"true\"\r\n [size]=\"'sm'\"> \r\n </fa-icon> \r\n </button> \r\n\r\n </div>\r\n\r\n <div class=\"page-container\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\r\n >\r\n </ng-container> \r\n </div>\r\n </div>\r\n\r\n <div \r\n class=\"pane-header\"\r\n [class.border-start]=\"selectedPage\"\r\n >\r\n <ul>\r\n <li \r\n ngFor=\"let page of pages\"\r\n [class.active] = \"selectedPage === page\"\r\n >\r\n <div \r\n class=\"icon-container\"\r\n [title]=\"page.title\"\r\n (click) = \"showContent(page)\"\r\n >\r\n <fa-icon \r\n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \r\n [fixedWidth]=\"true\">\r\n </fa-icon>\r\n </div>\r\n </li>\r\n </ul>\r\n </div> \r\n</div>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;MAgBa,gBAAgB,CAAA;AAazB,IAAA,WAAA,GAAA;QATgB,IAAe,CAAA,eAAA,GAAW,EAAE;AAGlC,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE;QAElC,IAAS,CAAA,SAAA,GAAG,OAAO;;AAK1B,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;AACpB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAW,QAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,SAAS;;;AAInF,IAAA,QAAQ;AAED,IAAA,WAAW,CAAC,IAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;IAGpC,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;+GA7BlC,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB7B,~~01DA0DM~~,ED5CQ,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE/C,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGH,eAAA,EAAA,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAA,QAAA,EAAA,~~01DAAA~~,EAAA;wDAIzC,KAAK,EAAA,CAAA;sBAApB;gBACe,YAAY,EAAA,CAAA;sBAA3B;gBACe,eAAe,EAAA,CAAA;sBAA9B;gBACe,OAAO,EAAA,CAAA;sBAAtB;gBAES,UAAU,EAAA,CAAA;sBAAnB;;;AEvBL;;AAEG;;;;"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\nimport { isThisSecond } from 'date-fns';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';\n\n@Component({\n selector: 'sds-pane',\n templateUrl: './pane.component.html',\n styleUrls: ['./pane.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [NgIf, FaIconComponent, NgTemplateOutlet, NgFor]\n})\nexport class SdsPaneComponent implements OnInit, OnChanges {\n\n @Input() public pages?: PanePage[];\n @Input() public selectedPage?: PanePage;\n @Input() public contentWidthRem: number = 20;\n @Input() public product?: 'all-hours' \| 'my-hours' \| 'door-cloud' \| 'time-and-space' \| string;\n \n @Output() pageChange = new EventEmitter();\n\n public closeIcon = faXmark;\n\n public productCssClass?: string;\n\n constructor() {}\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['product']) {\n this.productCssClass = this.product ? `product-${this.product}` : undefined; \n }\n }\n\n ngOnInit(): void {}\n\n public showContent(page: PanePage): void{\n this.selectedPage = page;\n this.pageChange.emit(this.selectedPage);\n }\n\n public hideContent(): void{\n this.selectedPage = undefined;\n this.pageChange.emit(this.selectedPage);\n }\n\n}\n","<div \n class=\"pane border-start\"\n [class]=\"productCssClass\"\n >\n <div \n ngIf=\"selectedPage\" \n class=\"pane-content\"\n [style.width.rem]=\"contentWidthRem\"\n >\n \n <div class=\"page-header\">\n <div class=\"title\">\n {{selectedPage.title}}\n </div>\n\n <button \n class=\"btn btn-stealth ms-auto\"\n (click)=\"hideContent()\"\n >\n <fa-icon \n [icon]=\"closeIcon\" \n [fixedWidth]=\"true\"\n [size]=\"'sm'\"> \n </fa-icon> \n </button> \n\n </div>\n\n <div class=\"page-container\">\n <ng-container\n [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n >\n </ng-container> \n </div>\n </div>\n\n <div \n class=\"pane-header\"\n [class.border-start]=\"selectedPage\"\n >\n <ul>\n <li \n ngFor=\"let page of pages\"\n [class.active] = \"selectedPage === page\"\n >\n <div \n class=\"icon-container\"\n [title]=\"page.title\"\n (click) = \"showContent(page)\"\n >\n <fa-icon \n [icon]=\"(selectedPage === page ? page.selectedIcon ? page.selectedIcon : page.icon : page.icon)\" \n [fixedWidth]=\"true\">\n </fa-icon>\n </div>\n </li>\n </ul>\n </div> \n</div>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;MAgBa,gBAAgB,CAAA;AAazB,IAAA,WAAA,GAAA;QATgB,IAAe,CAAA,eAAA,GAAW,EAAE;AAGlC,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE;QAElC,IAAS,CAAA,SAAA,GAAG,OAAO;;AAK1B,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;AACpB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAW,QAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,SAAS;;;AAInF,IAAA,QAAQ;AAED,IAAA,WAAW,CAAC,IAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;IAGpC,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;+GA7BlC,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB7B,suDA0DM,ED5CQ,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE/C,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGH,eAAA,EAAA,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAA,QAAA,EAAA,suDAAA,EAAA;wDAIzC,KAAK,EAAA,CAAA;sBAApB;gBACe,YAAY,EAAA,CAAA;sBAA3B;gBACe,eAAe,EAAA,CAAA;sBAA9B;gBACe,OAAO,EAAA,CAAA;sBAAtB;gBAES,UAAU,EAAA,CAAA;sBAAnB;;;AEvBL;;AAEG;;;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs CHANGED Viewed

@@ -72,7 +72,7 @@ class SdsQuickInfoComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsQuickInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsQuickInfoComponent, isStandalone: true, selector: "sds-quick-info", inputs: { popoverMaxWidth: "popoverMaxWidth", popoverMinWidth: "popoverMinWidth", popoverWidth: "popoverWidth", showDelay: "showDelay", showEventName: "showEventName", hideDelay: "hideDelay", hideEventName: "hideEventName", mode: "mode", animation: "animation", showPopoverArrow: "showPopoverArrow", infoIcon: "infoIcon", popoverPosition: "popoverPosition" }, outputs: { hide: "hide", show: "show" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "buttonElementRef", first: true, predicate: ["popoverTarget"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #popoverTarget\r\n    class=\"d-inline-flex\">\r\n\r\n    <fa-icon *ngIf=\"!customContent\"\r\n        [icon]=\"infoIcon\"\r\n    > </fa-icon>\r\n\r\n    <ng-container *ngIf=\"customContent\" >\r\n        <ng-content select=\"customContent\"></ng-content>\r\n    </ng-container> \r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    class=\"d-inline-block\"\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    [minWidth]=\"popoverMinWidth\"\r\n    [width]=\"popoverWidth\"\r\n    [showEvent]=\"showEvent\"\r\n    [hideEvent]=\"hideEvent\"\r\n    (onHiding)=\"onHiding($event)\"\r\n    (onShown)=\"onShown()\"\r\n    (onHidden)=\"onHidden()\"\r\n    [animation]=\"animation ?? {}\"\r\n    [position]=\"popoverPosition ?? {}\"\r\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\r\n>\r\n    <ng-content></ng-content>\r\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsQuickInfoComponent, isStandalone: true, selector: "sds-quick-info", inputs: { popoverMaxWidth: "popoverMaxWidth", popoverMinWidth: "popoverMinWidth", popoverWidth: "popoverWidth", showDelay: "showDelay", showEventName: "showEventName", hideDelay: "hideDelay", hideEventName: "hideEventName", mode: "mode", animation: "animation", showPopoverArrow: "showPopoverArrow", infoIcon: "infoIcon", popoverPosition: "popoverPosition" }, outputs: { hide: "hide", show: "show" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "buttonElementRef", first: true, predicate: ["popoverTarget"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #popoverTarget\n    class=\"d-inline-flex\">\n\n    <fa-icon *ngIf=\"!customContent\"\n        [icon]=\"infoIcon\"\n    > </fa-icon>\n\n    <ng-container *ngIf=\"customContent\" >\n        <ng-content select=\"customContent\"></ng-content>\n    </ng-container> \n</div>\n\n<dx-popover\n    #popover\n    class=\"d-inline-block\"\n    [target]=\"buttonElementRef?.nativeElement\"\n    [maxWidth]=\"popoverMaxWidth\"\n    [minWidth]=\"popoverMinWidth\"\n    [width]=\"popoverWidth\"\n    [showEvent]=\"showEvent\"\n    [hideEvent]=\"hideEvent\"\n    (onHiding)=\"onHiding($event)\"\n    (onShown)=\"onShown()\"\n    (onHidden)=\"onHidden()\"\n    [animation]=\"animation ?? {}\"\n    [position]=\"popoverPosition ?? {}\"\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\n>\n    <ng-content></ng-content>\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsQuickInfoComponent, decorators: [{
             type: Component,
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgIf,
                         FaIconComponent,
                         DxPopoverModule,
-                    ], template: "<div #popoverTarget\r\n    class=\"d-inline-flex\">\r\n\r\n    <fa-icon *ngIf=\"!customContent\"\r\n        [icon]=\"infoIcon\"\r\n    > </fa-icon>\r\n\r\n    <ng-container *ngIf=\"customContent\" >\r\n        <ng-content select=\"customContent\"></ng-content>\r\n    </ng-container> \r\n</div>\r\n\r\n<dx-popover\r\n    #popover\r\n    class=\"d-inline-block\"\r\n    [target]=\"buttonElementRef?.nativeElement\"\r\n    [maxWidth]=\"popoverMaxWidth\"\r\n    [minWidth]=\"popoverMinWidth\"\r\n    [width]=\"popoverWidth\"\r\n    [showEvent]=\"showEvent\"\r\n    [hideEvent]=\"hideEvent\"\r\n    (onHiding)=\"onHiding($event)\"\r\n    (onShown)=\"onShown()\"\r\n    (onHidden)=\"onHidden()\"\r\n    [animation]=\"animation ?? {}\"\r\n    [position]=\"popoverPosition ?? {}\"\r\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\r\n>\r\n    <ng-content></ng-content>\r\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"] }]
+                    ], template: "<div #popoverTarget\n    class=\"d-inline-flex\">\n\n    <fa-icon *ngIf=\"!customContent\"\n        [icon]=\"infoIcon\"\n    > </fa-icon>\n\n    <ng-container *ngIf=\"customContent\" >\n        <ng-content select=\"customContent\"></ng-content>\n    </ng-container> \n</div>\n\n<dx-popover\n    #popover\n    class=\"d-inline-block\"\n    [target]=\"buttonElementRef?.nativeElement\"\n    [maxWidth]=\"popoverMaxWidth\"\n    [minWidth]=\"popoverMinWidth\"\n    [width]=\"popoverWidth\"\n    [showEvent]=\"showEvent\"\n    [hideEvent]=\"hideEvent\"\n    (onHiding)=\"onHiding($event)\"\n    (onShown)=\"onShown()\"\n    (onHidden)=\"onHidden()\"\n    [animation]=\"animation ?? {}\"\n    [position]=\"popoverPosition ?? {}\"\n    [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\n>\n    <ng-content></ng-content>\n</dx-popover>", styles: ["dx-popover{display:inline}::ng-deep .sds-quick-info-popover.sds-dx-popup-no-arrow .dx-popover-arrow{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { popoverMaxWidth: [{
                 type: Input
             }], popoverMinWidth: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-quick-info.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-quick-info.mjs","sources":["../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.ts","../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.html","../../../projects/ngx-sds-components/src/lib/quick-info/spicainternational-ngx-sds-components-src-lib-quick-info.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ContentChild,\r\n ElementRef,\r\n EventEmitter,\r\n Input,\r\n OnChanges,\r\n Output,\r\n SimpleChanges,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport { DxPopoverComponent } from 'devextreme-angular';\r\nimport { PopoverAnimation } from './quick-info.model';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n\r\n@Component({\r\n selector: 'sds-quick-info',\r\n templateUrl: './quick-info.component.html',\r\n styleUrls: ['./quick-info.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [\r\n NgIf,\r\n FaIconComponent,\r\n DxPopoverModule,\r\n ],\r\n})\r\nexport class SdsQuickInfoComponent implements OnChanges {\r\n @Input() popoverMaxWidth: number \| (() => string \| number) \| string = '20rem';\r\n @Input() popoverMinWidth: number \| (() => string \| number) \| string = '';\r\n @Input() popoverWidth: number \| (() => string \| number) \| string = '';\r\n @Input() showDelay?: number;\r\n @Input() showEventName: string = 'dxhoverstart';\r\n @Input() hideDelay?: number;\r\n @Input() hideEventName: string = 'dxhoverend';\r\n @Input() mode: 'default' \| 'hint' = 'default';\r\n @Input() animation: PopoverAnimation \| undefined;\r\n @Input() showPopoverArrow: boolean = true;\r\n @Input() infoIcon: IconProp = faInfoCircle;\r\n @Input() popoverPosition: string \| any;\r\n\r\n @Output() hide = new EventEmitter();\r\n @Output() show = new EventEmitter();\r\n\r\n @ViewChild('popover', { static: false }) private _popover: DxPopoverComponent \| undefined;\r\n @ViewChild('popoverTarget', { read: ElementRef, static: true }) public buttonElementRef?: ElementRef;\r\n @ContentChild('customContent') customContent: ElementRef = {nativeElement: undefined};\r\n\r\n public hideEvent: string \| {\r\n delay?: number;\r\n name?: string;\r\n };\r\n\r\n public showEvent: string \| {\r\n delay?: number;\r\n name?: string;\r\n };\r\n\r\n private _forceHide = false;\r\n\r\n constructor() {\r\n this.showEvent = { name: this.showEventName, delay: 200 };\r\n this.hideEvent = { name: this.hideEventName, delay: 200 };\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['showDelay'] \|\| changes['showEventName']) {\r\n this.setShowEvent();\r\n } else if (changes['hideDelay'] \|\| changes['hideEventName']) {\r\n this.setHideEvent();\r\n }\r\n }\r\n\r\n onHiding(e: any) {\r\n if (!this._forceHide && this.mode === 'default') {\r\n const popoverContent = e.component.content().parentNode;\r\n const isMouseInsidePopover = popoverContent.matches(':hover');\r\n e.cancel = isMouseInsidePopover;\r\n\r\n popoverContent.addEventListener('mouseleave', () => {\r\n e.component.hide();\r\n });\r\n }\r\n }\r\n\r\n onHidden() {\r\n this.hide.emit();\r\n }\r\n\r\n onShown() {\r\n this.show.emit();\r\n }\r\n\r\n public showInfo() {\r\n if (this._popover) {\r\n this._popover.instance.show();\r\n }\r\n }\r\n\r\n public hideInfo() {\r\n if (this._popover) {\r\n this._forceHide = true;\r\n this._popover.instance.hide();\r\n this._forceHide = false;\r\n }\r\n }\r\n\r\n private setShowEvent(): void {\r\n this.showEvent = {\r\n name: this.showEventName,\r\n delay: this.showDelay ?? 200,\r\n };\r\n }\r\n\r\n private setHideEvent(): void {\r\n this.hideEvent = {\r\n name: this.hideEventName,\r\n delay: this.hideDelay ?? 200,\r\n };\r\n }\r\n}\r\n","<div #popoverTarget\r\n class=\"d-inline-flex\">\r\n\r\n <fa-icon ngIf=\"!customContent\"\r\n [icon]=\"infoIcon\"\r\n > </fa-icon>\r\n\r\n <ng-container ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n</div>\r\n\r\n<dx-popover\r\n #popover\r\n class=\"d-inline-block\"\r\n [target]=\"buttonElementRef?.nativeElement\"\r\n [maxWidth]=\"popoverMaxWidth\"\r\n [minWidth]=\"popoverMinWidth\"\r\n [width]=\"popoverWidth\"\r\n [showEvent]=\"showEvent\"\r\n [hideEvent]=\"hideEvent\"\r\n (onHiding)=\"onHiding($event)\"\r\n (onShown)=\"onShown()\"\r\n (onHidden)=\"onHidden()\"\r\n [animation]=\"animation ?? {}\"\r\n [position]=\"popoverPosition ?? {}\"\r\n [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\r\n>\r\n <ng-content></ng-content>\r\n</dx-popover>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-quick-info.mjs","sources":["../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.ts","../../../projects/ngx-sds-components/src/lib/quick-info/quick-info.component.html","../../../projects/ngx-sds-components/src/lib/quick-info/spicainternational-ngx-sds-components-src-lib-quick-info.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';\n\nimport { DxPopoverComponent } from 'devextreme-angular';\nimport { PopoverAnimation } from './quick-info.model';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf } from '@angular/common';\n\n\n@Component({\n selector: 'sds-quick-info',\n templateUrl: './quick-info.component.html',\n styleUrls: ['./quick-info.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [\n NgIf,\n FaIconComponent,\n DxPopoverModule,\n ],\n})\nexport class SdsQuickInfoComponent implements OnChanges {\n @Input() popoverMaxWidth: number \| (() => string \| number) \| string = '20rem';\n @Input() popoverMinWidth: number \| (() => string \| number) \| string = '';\n @Input() popoverWidth: number \| (() => string \| number) \| string = '';\n @Input() showDelay?: number;\n @Input() showEventName: string = 'dxhoverstart';\n @Input() hideDelay?: number;\n @Input() hideEventName: string = 'dxhoverend';\n @Input() mode: 'default' \| 'hint' = 'default';\n @Input() animation: PopoverAnimation \| undefined;\n @Input() showPopoverArrow: boolean = true;\n @Input() infoIcon: IconProp = faInfoCircle;\n @Input() popoverPosition: string \| any;\n\n @Output() hide = new EventEmitter();\n @Output() show = new EventEmitter();\n\n @ViewChild('popover', { static: false }) private _popover: DxPopoverComponent \| undefined;\n @ViewChild('popoverTarget', { read: ElementRef, static: true }) public buttonElementRef?: ElementRef;\n @ContentChild('customContent') customContent: ElementRef = {nativeElement: undefined};\n\n public hideEvent: string \| {\n delay?: number;\n name?: string;\n };\n\n public showEvent: string \| {\n delay?: number;\n name?: string;\n };\n\n private _forceHide = false;\n\n constructor() {\n this.showEvent = { name: this.showEventName, delay: 200 };\n this.hideEvent = { name: this.hideEventName, delay: 200 };\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['showDelay'] \|\| changes['showEventName']) {\n this.setShowEvent();\n } else if (changes['hideDelay'] \|\| changes['hideEventName']) {\n this.setHideEvent();\n }\n }\n\n onHiding(e: any) {\n if (!this._forceHide && this.mode === 'default') {\n const popoverContent = e.component.content().parentNode;\n const isMouseInsidePopover = popoverContent.matches(':hover');\n e.cancel = isMouseInsidePopover;\n\n popoverContent.addEventListener('mouseleave', () => {\n e.component.hide();\n });\n }\n }\n\n onHidden() {\n this.hide.emit();\n }\n\n onShown() {\n this.show.emit();\n }\n\n public showInfo() {\n if (this._popover) {\n this._popover.instance.show();\n }\n }\n\n public hideInfo() {\n if (this._popover) {\n this._forceHide = true;\n this._popover.instance.hide();\n this._forceHide = false;\n }\n }\n\n private setShowEvent(): void {\n this.showEvent = {\n name: this.showEventName,\n delay: this.showDelay ?? 200,\n };\n }\n\n private setHideEvent(): void {\n this.hideEvent = {\n name: this.hideEventName,\n delay: this.hideDelay ?? 200,\n };\n }\n}\n","<div #popoverTarget\n class=\"d-inline-flex\">\n\n <fa-icon ngIf=\"!customContent\"\n [icon]=\"infoIcon\"\n > </fa-icon>\n\n <ng-container ngIf=\"customContent\" >\n <ng-content select=\"customContent\"></ng-content>\n </ng-container> \n</div>\n\n<dx-popover\n #popover\n class=\"d-inline-block\"\n [target]=\"buttonElementRef?.nativeElement\"\n [maxWidth]=\"popoverMaxWidth\"\n [minWidth]=\"popoverMinWidth\"\n [width]=\"popoverWidth\"\n [showEvent]=\"showEvent\"\n [hideEvent]=\"hideEvent\"\n (onHiding)=\"onHiding($event)\"\n (onShown)=\"onShown()\"\n (onHidden)=\"onHidden()\"\n [animation]=\"animation ?? {}\"\n [position]=\"popoverPosition ?? {}\"\n [wrapperAttr]=\"{ class: 'sds-quick-info-popover ' + (!showPopoverArrow ? 'sds-dx-popup-no-arrow' : '') }\"\n>\n <ng-content></ng-content>\n</dx-popover>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-ripple.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-ripple.mjs","sources":["../../../projects/ngx-sds-components/src/lib/ripple/ripple.directive.ts","../../../projects/ngx-sds-components/src/lib/ripple/spicainternational-ngx-sds-components-src-lib-ripple.ts"],"sourcesContent":["import {\r\n Directive,\r\n ElementRef,\r\n HostBinding,\r\n HostListener,\r\n Input,\r\n OnDestroy,\r\n Renderer2,\r\n} from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[sdsRipple]',\r\n standalone: true,\r\n})\r\nexport class SdsRippleDirective implements OnDestroy {\r\n @Input() sdsRippleColor: string = 'rgba(255, 255, 255, 0.5)';\r\n @Input() sdsRippleDuration: number = 600;\r\n @Input() sdsRippleMaxConcurrent: number = 3;\r\n\r\n @HostBinding('class.sds-ripple-container') addContainer = true;\r\n @HostBinding('style.position') position = 'relative';\r\n @HostBinding('style.overflow') overflow = 'hidden';\r\n\r\n private activeRipples: HTMLElement[] = [];\r\n private touchTimeout: any;\r\n\r\n constructor(\r\n private el: ElementRef,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n @HostListener('touchstart', ['$event'])\r\n onTouchStart(event: TouchEvent) {\r\n if (event.touches.length > 0) {\r\n const touch = event.touches[0];\r\n this.createRipple(touch.clientX, touch.clientY);\r\n }\r\n }\r\n\r\n @HostListener('mousedown', ['$event'])\r\n onMouseDown(event: MouseEvent) {\r\n // Only trigger on left click\r\n if (event.button !== 0) return;\r\n \r\n this.createRipple(event.clientX, event.clientY);\r\n }\r\n\r\n private createRipple(clientX: number, clientY: number) {\r\n // Remove oldest ripple if at max capacity\r\n if (this.activeRipples.length >= this.sdsRippleMaxConcurrent) {\r\n const oldestRipple = this.activeRipples.shift();\r\n if (oldestRipple?.parentNode) {\r\n this.renderer.removeChild(this.el.nativeElement, oldestRipple);\r\n }\r\n }\r\n\r\n const ripple = this.renderer.createElement('span');\r\n this.renderer.addClass(ripple, 'sds-ripple');\r\n\r\n const rect = this.el.nativeElement.getBoundingClientRect();\r\n const size = Math.max(rect.width, rect.height) * 2;\r\n const x = clientX - rect.left - size / 2;\r\n const y = clientY - rect.top - size / 2;\r\n\r\n const duration = Math.min(this.sdsRippleDuration, 1200);\r\n\r\n this.renderer.setStyle(ripple, 'width', `${size}px`);\r\n this.renderer.setStyle(ripple, 'height', `${size}px`);\r\n this.renderer.setStyle(ripple, 'left', `${x}px`);\r\n this.renderer.setStyle(ripple, 'top', `${y}px`);\r\n this.renderer.setStyle(ripple, 'background-color', this.sdsRippleColor);\r\n this.renderer.setStyle(ripple, 'animation-duration', `${duration}ms`);\r\n\r\n this.renderer.appendChild(this.el.nativeElement, ripple);\r\n this.activeRipples.push(ripple);\r\n\r\n setTimeout(() => {\r\n if (ripple.parentNode) {\r\n this.renderer.removeChild(this.el.nativeElement, ripple);\r\n }\r\n const index = this.activeRipples.indexOf(ripple);\r\n if (index > -1) {\r\n this.activeRipples.splice(index, 1);\r\n }\r\n }, duration);\r\n }\r\n\r\n ngOnDestroy() {\r\n // Clean up any remaining ripples\r\n this.activeRipples.forEach(ripple => {\r\n if (ripple.parentNode) {\r\n this.renderer.removeChild(this.el.nativeElement, ripple);\r\n }\r\n });\r\n this.activeRipples = [];\r\n \r\n if (this.touchTimeout) {\r\n clearTimeout(this.touchTimeout);\r\n }\r\n }\r\n}","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-ripple.mjs","sources":["../../../projects/ngx-sds-components/src/lib/ripple/ripple.directive.ts","../../../projects/ngx-sds-components/src/lib/ripple/spicainternational-ngx-sds-components-src-lib-ripple.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n OnDestroy,\n Renderer2,\n} from '@angular/core';\n\n@Directive({\n selector: '[sdsRipple]',\n standalone: true,\n})\nexport class SdsRippleDirective implements OnDestroy {\n @Input() sdsRippleColor: string = 'rgba(255, 255, 255, 0.5)';\n @Input() sdsRippleDuration: number = 600;\n @Input() sdsRippleMaxConcurrent: number = 3;\n\n @HostBinding('class.sds-ripple-container') addContainer = true;\n @HostBinding('style.position') position = 'relative';\n @HostBinding('style.overflow') overflow = 'hidden';\n\n private activeRipples: HTMLElement[] = [];\n private touchTimeout: any;\n\n constructor(\n private el: ElementRef,\n private renderer: Renderer2\n ) {}\n\n @HostListener('touchstart', ['$event'])\n onTouchStart(event: TouchEvent) {\n if (event.touches.length > 0) {\n const touch = event.touches[0];\n this.createRipple(touch.clientX, touch.clientY);\n }\n }\n\n @HostListener('mousedown', ['$event'])\n onMouseDown(event: MouseEvent) {\n // Only trigger on left click\n if (event.button !== 0) return;\n \n this.createRipple(event.clientX, event.clientY);\n }\n\n private createRipple(clientX: number, clientY: number) {\n // Remove oldest ripple if at max capacity\n if (this.activeRipples.length >= this.sdsRippleMaxConcurrent) {\n const oldestRipple = this.activeRipples.shift();\n if (oldestRipple?.parentNode) {\n this.renderer.removeChild(this.el.nativeElement, oldestRipple);\n }\n }\n\n const ripple = this.renderer.createElement('span');\n this.renderer.addClass(ripple, 'sds-ripple');\n\n const rect = this.el.nativeElement.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height) * 2;\n const x = clientX - rect.left - size / 2;\n const y = clientY - rect.top - size / 2;\n\n const duration = Math.min(this.sdsRippleDuration, 1200);\n\n this.renderer.setStyle(ripple, 'width', `${size}px`);\n this.renderer.setStyle(ripple, 'height', `${size}px`);\n this.renderer.setStyle(ripple, 'left', `${x}px`);\n this.renderer.setStyle(ripple, 'top', `${y}px`);\n this.renderer.setStyle(ripple, 'background-color', this.sdsRippleColor);\n this.renderer.setStyle(ripple, 'animation-duration', `${duration}ms`);\n\n this.renderer.appendChild(this.el.nativeElement, ripple);\n this.activeRipples.push(ripple);\n\n setTimeout(() => {\n if (ripple.parentNode) {\n this.renderer.removeChild(this.el.nativeElement, ripple);\n }\n const index = this.activeRipples.indexOf(ripple);\n if (index > -1) {\n this.activeRipples.splice(index, 1);\n }\n }, duration);\n }\n\n ngOnDestroy() {\n // Clean up any remaining ripples\n this.activeRipples.forEach(ripple => {\n if (ripple.parentNode) {\n this.renderer.removeChild(this.el.nativeElement, ripple);\n }\n });\n this.activeRipples = [];\n \n if (this.touchTimeout) {\n clearTimeout(this.touchTimeout);\n }\n }\n}","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs CHANGED Viewed

@@ -67,7 +67,7 @@ class SdsSegmentedControlComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSegmentedControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsSegmentedControlComponent, isStandalone: true, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", iconExpr: "iconExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled", style: "style", segmentPadding: "segmentPadding", enableAnimation: "enableAnimation" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "clipPathContainerRef", first: true, predicate: ["clipPathContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \r\n    class=\"sds-segmented-control-container\" \r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted',\r\n        'clip-path-enabled': enableAnimation\r\n    }\">\r\n    \r\n    <div *ngFor=\"let item of items; let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item, $event)\">\r\n\r\n        <div class=\"sds-flex-row-center gap-2\">\r\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"enableAnimation\" \r\n         class=\"sds-clip-path-overlay\" \r\n         #clipPathContainer \r\n         aria-hidden=\"true\">\r\n        <div *ngFor=\"let item of items; let last = last;\" \r\n            class=\"segment segment-overlay\" \r\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n            [tabIndex]=\"-1\">\r\n\r\n            <div class=\"sds-flex-row-center gap-2\">\r\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:#ced4da;border-color:#ced4da;border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:#ced4da;border-color:#ced4da;border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsSegmentedControlComponent, isStandalone: true, selector: "sds-segmented-control", inputs: { items: "items", value: "value", valueExpr: "valueExpr", displayExpr: "displayExpr", iconExpr: "iconExpr", tooltipExpr: "tooltipExpr", idExpr: "idExpr", disabled: "disabled", style: "style", segmentPadding: "segmentPadding", enableAnimation: "enableAnimation" }, outputs: { itemChange: "itemChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "clipPathContainerRef", first: true, predicate: ["clipPathContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \n    class=\"sds-segmented-control-container\" \n    [ngClass]=\"{\n        'disabled': disabled,\n        'sds-segmented-control-primary': style == 'primary',\n        'sds-segmented-control-inverted': style == 'inverted',\n        'clip-path-enabled': enableAnimation\n    }\">\n    \n    <div *ngFor=\"let item of items; let last = last;\" \n        class=\"segment\" \n        id=\"{{idExpr ? item[idExpr]: ''}}\"\n        [class.selected]=\"item[valueExpr] == value\"\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\n        (click)=\"selectItem(item, $event)\">\n\n        <div class=\"sds-flex-row-center gap-2\">\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n        </div>\n    </div>\n\n    <div *ngIf=\"enableAnimation\" \n         class=\"sds-clip-path-overlay\" \n         #clipPathContainer \n         aria-hidden=\"true\">\n        <div *ngFor=\"let item of items; let last = last;\" \n            class=\"segment segment-overlay\" \n            [class.tight-padding]=\"segmentPadding == 'tight'\"\n            [tabIndex]=\"-1\">\n\n            <div class=\"sds-flex-row-center gap-2\">\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSegmentedControlComponent, decorators: [{
             type: Component,
@@ -76,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgFor,
                         NgIf,
                         FaIconComponent,
-                    ], template: "<div \r\n    class=\"sds-segmented-control-container\" \r\n    [ngClass]=\"{\r\n        'disabled': disabled,\r\n        'sds-segmented-control-primary': style == 'primary',\r\n        'sds-segmented-control-inverted': style == 'inverted',\r\n        'clip-path-enabled': enableAnimation\r\n    }\">\r\n    \r\n    <div *ngFor=\"let item of items; let last = last;\" \r\n        class=\"segment\" \r\n        id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n        [class.selected]=\"item[valueExpr] == value\"\r\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n        (click)=\"selectItem(item, $event)\">\r\n\r\n        <div class=\"sds-flex-row-center gap-2\">\r\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"enableAnimation\" \r\n         class=\"sds-clip-path-overlay\" \r\n         #clipPathContainer \r\n         aria-hidden=\"true\">\r\n        <div *ngFor=\"let item of items; let last = last;\" \r\n            class=\"segment segment-overlay\" \r\n            [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n            [tabIndex]=\"-1\">\r\n\r\n            <div class=\"sds-flex-row-center gap-2\">\r\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:#ced4da;border-color:#ced4da;border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:#ced4da;border-color:#ced4da;border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"] }]
+                    ], template: "<div \n    class=\"sds-segmented-control-container\" \n    [ngClass]=\"{\n        'disabled': disabled,\n        'sds-segmented-control-primary': style == 'primary',\n        'sds-segmented-control-inverted': style == 'inverted',\n        'clip-path-enabled': enableAnimation\n    }\">\n    \n    <div *ngFor=\"let item of items; let last = last;\" \n        class=\"segment\" \n        id=\"{{idExpr ? item[idExpr]: ''}}\"\n        [class.selected]=\"item[valueExpr] == value\"\n        [class.tight-padding]=\"segmentPadding == 'tight'\"\n        [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\n        (click)=\"selectItem(item, $event)\">\n\n        <div class=\"sds-flex-row-center gap-2\">\n            <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n            <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n        </div>\n    </div>\n\n    <div *ngIf=\"enableAnimation\" \n         class=\"sds-clip-path-overlay\" \n         #clipPathContainer \n         aria-hidden=\"true\">\n        <div *ngFor=\"let item of items; let last = last;\" \n            class=\"segment segment-overlay\" \n            [class.tight-padding]=\"segmentPadding == 'tight'\"\n            [tabIndex]=\"-1\">\n\n            <div class=\"sds-flex-row-center gap-2\">\n                <fa-icon *ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n                <span *ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".sds-segmented-control-container .segment.tight-padding{padding-left:.5rem;padding-right:.5rem}.sds-segmented-control-container{display:inline-block;padding:max(.125rem,2px);border-style:solid;border-width:1px;border-radius:6px;border-color:#ced4da;background-color:#fff;font-size:.9rem;position:relative;white-space:nowrap}.sds-segmented-control-container .disabled{pointer-events:none;opacity:.5;background:#ced4da}.sds-segmented-control-container .segment{display:inline-block;border-radius:4px;color:#343434;cursor:pointer;color:#000;font-weight:500;margin-left:auto;margin-right:auto;padding:.25rem 1rem;-webkit-user-select:none;user-select:none}.sds-segmented-control-container .segment.selected{background-color:var(--bs-gray-300)}.sds-segmented-control-container .segment.selected .separator{border-color:transparent}.sds-segmented-control-container .segment:hover:not(.selected){background-color:transparent}.sds-segmented-control-container.disabled{pointer-events:none;opacity:.5;cursor:default}.sds-segmented-control-container.sds-segmented-control-primary .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-container.sds-segmented-control-inverted .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-container.clip-path-enabled .segment.selected{background-color:initial;color:initial}.sds-segmented-control-container .sds-clip-path-overlay{position:absolute;top:max(.125rem,2px);left:max(.125rem,2px);right:max(.125rem,2px);bottom:max(.125rem,2px);display:flex;z-index:1;overflow:hidden;transition:clip-path .25s ease;pointer-events:none;border-radius:4px;background-color:var(--bs-gray-300)}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000;font-weight:500;background:transparent}.sds-segmented-control-container .sds-clip-path-overlay .segment-overlay:hover{background:transparent}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-container.sds-segmented-control-primary .sds-clip-path-overlay .segment-overlay{color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-container.sds-segmented-control-inverted .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-light .sds-segmented-control-container{background-color:var(--bs-gray-300);border-color:var(--bs-gray-300);border-width:0}.sds-segmented-control-light .sds-segmented-control-container .segment.selected{background-color:#fff;color:#000}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay{background-color:#fff}.sds-segmented-control-light .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#000}.sds-segmented-control-primary .sds-segmented-control-container .segment.selected{background-color:var(--bs-primary);color:#fff}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay{background-color:var(--bs-primary)}.sds-segmented-control-primary .sds-segmented-control-container .sds-clip-path-overlay .segment-overlay{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { clipPathContainerRef: [{
                 type: ViewChild,
                 args: ['clipPathContainer']

package/fesm2022/spicainternational-ngx-sds-components-src-lib-segmented-control.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-segmented-control.mjs","sources":["../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.html","../../../projects/ngx-sds-components/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ElementRef,\r\n EventEmitter,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n Output,\r\n SimpleChanges,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgClass, NgFor, NgIf } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sds-segmented-control',\r\n templateUrl: './segmented-control.component.html',\r\n styleUrls: ['./segmented-control.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [\r\n NgClass,\r\n NgFor,\r\n NgIf,\r\n FaIconComponent,\r\n ],\r\n})\r\nexport class SdsSegmentedControlComponent implements OnInit, AfterViewInit, OnChanges {\r\n @ViewChild('clipPathContainer') clipPathContainerRef!: ElementRef<HTMLDivElement>;\r\n\r\n @Input() items: any[] \| undefined;\r\n @Input() value: any;\r\n @Input() valueExpr;\r\n @Input() displayExpr: string \| undefined;\r\n @Input() iconExpr: string \| undefined;\r\n @Input() tooltipExpr: string \| undefined;\r\n @Input() idExpr: string \| undefined;\r\n @Input() disabled: boolean;\r\n @Input() style: 'default' \| 'primary' \| 'inverted';\r\n @Input() segmentPadding: 'tight' \| 'loose' = 'loose';\r\n @Input() enableAnimation: boolean = true;\r\n\r\n @Output() itemChange: EventEmitter<any> = new EventEmitter();\r\n @Output() valueChange: EventEmitter<any> = new EventEmitter();\r\n\r\n constructor(private cdr: ChangeDetectorRef) {\r\n this.valueExpr = 'value';\r\n this.displayExpr = 'text';\r\n this.disabled = false;\r\n this.style = 'default';\r\n }\r\n\r\n ngOnInit() {}\r\n\r\n ngAfterViewInit() {\r\n if (this.enableAnimation) {\r\n this.updateClipPath();\r\n }\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if ((changes['value'] \|\| changes['enableClipPathAnimation']) && this.enableAnimation) {\r\n // Use a longer timeout to ensure the DOM is updated\r\n setTimeout(() => this.updateClipPath(), 50);\r\n }\r\n }\r\n\r\n public selectItem(item: any, event: MouseEvent): void {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.value = item[this.valueExpr];\r\n this.valueChange.emit(this.value);\r\n this.itemChange.emit(item);\r\n\r\n if (this.enableAnimation) {\r\n this.cdr.detectChanges(); \r\n this.updateClipPath();\r\n }\r\n }\r\n }\r\n\r\n private updateClipPath() {\r\n setTimeout(() => {\r\n const container = this.clipPathContainerRef?.nativeElement;\r\n if (!container) return;\r\n\r\n const activeSegment = container.parentElement?.querySelector(\r\n `.segment.selected:not(.segment-overlay)`\r\n ) as HTMLElement;\r\n\r\n if (activeSegment && container.parentElement) {\r\n const parentElement = container.parentElement;\r\n \r\n const computedStyle = window.getComputedStyle(parentElement);\r\n const paddingLeft = parseFloat(computedStyle.paddingLeft);\r\n \r\n const offsetLeft = activeSegment.offsetLeft - paddingLeft;\r\n const offsetWidth = activeSegment.offsetWidth;\r\n const overlayWidth = container.offsetWidth;\r\n\r\n // Only update if we have valid dimensions\r\n if (offsetWidth === 0 \|\| overlayWidth === 0) {\r\n // Retry after a short delay if elements aren't rendered yet\r\n setTimeout(() => this.updateClipPath(), 100);\r\n return;\r\n }\r\n\r\n const clipLeft = offsetLeft;\r\n const clipRight = offsetLeft + offsetWidth;\r\n \r\n const clipLeftPercent = ((clipLeft / overlayWidth) * 100).toFixed(2);\r\n const clipRightPercent = (100 - (clipRight / overlayWidth) * 100).toFixed(2);\r\n \r\n container.style.clipPath = `inset(0 ${clipRightPercent}% 0 ${clipLeftPercent}% round 4px)`;\r\n }\r\n }, 0);\r\n }\r\n}","<div \r\n class=\"sds-segmented-control-container\" \r\n [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'sds-segmented-control-primary': style == 'primary',\r\n 'sds-segmented-control-inverted': style == 'inverted',\r\n 'clip-path-enabled': enableAnimation\r\n }\">\r\n \r\n <div ngFor=\"let item of items; let last = last;\" \r\n class=\"segment\" \r\n id=\"{{idExpr ? item[idExpr]: ''}}\"\r\n [class.selected]=\"item[valueExpr] == value\"\r\n [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\r\n (click)=\"selectItem(item, $event)\">\r\n\r\n <div class=\"sds-flex-row-center gap-2\">\r\n <fa-icon ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n <span ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n </div>\r\n </div>\r\n\r\n <div ngIf=\"enableAnimation\" \r\n class=\"sds-clip-path-overlay\" \r\n #clipPathContainer \r\n aria-hidden=\"true\">\r\n <div ngFor=\"let item of items; let last = last;\" \r\n class=\"segment segment-overlay\" \r\n [class.tight-padding]=\"segmentPadding == 'tight'\"\r\n [tabIndex]=\"-1\">\r\n\r\n <div class=\"sds-flex-row-center gap-2\">\r\n <fa-icon ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\r\n <span ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-segmented-control.mjs","sources":["../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.ts","../../../projects/ngx-sds-components/src/lib/segmented-control/segmented-control.component.html","../../../projects/ngx-sds-components/src/lib/segmented-control/spicainternational-ngx-sds-components-src-lib-segmented-control.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgClass, NgFor, NgIf } from '@angular/common';\n\n@Component({\n selector: 'sds-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [\n NgClass,\n NgFor,\n NgIf,\n FaIconComponent,\n ],\n})\nexport class SdsSegmentedControlComponent implements OnInit, AfterViewInit, OnChanges {\n @ViewChild('clipPathContainer') clipPathContainerRef!: ElementRef<HTMLDivElement>;\n\n @Input() items: any[] \| undefined;\n @Input() value: any;\n @Input() valueExpr;\n @Input() displayExpr: string \| undefined;\n @Input() iconExpr: string \| undefined;\n @Input() tooltipExpr: string \| undefined;\n @Input() idExpr: string \| undefined;\n @Input() disabled: boolean;\n @Input() style: 'default' \| 'primary' \| 'inverted';\n @Input() segmentPadding: 'tight' \| 'loose' = 'loose';\n @Input() enableAnimation: boolean = true;\n\n @Output() itemChange: EventEmitter<any> = new EventEmitter();\n @Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n constructor(private cdr: ChangeDetectorRef) {\n this.valueExpr = 'value';\n this.displayExpr = 'text';\n this.disabled = false;\n this.style = 'default';\n }\n\n ngOnInit() {}\n\n ngAfterViewInit() {\n if (this.enableAnimation) {\n this.updateClipPath();\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if ((changes['value'] \|\| changes['enableClipPathAnimation']) && this.enableAnimation) {\n // Use a longer timeout to ensure the DOM is updated\n setTimeout(() => this.updateClipPath(), 50);\n }\n }\n\n public selectItem(item: any, event: MouseEvent): void {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.value = item[this.valueExpr];\n this.valueChange.emit(this.value);\n this.itemChange.emit(item);\n\n if (this.enableAnimation) {\n this.cdr.detectChanges(); \n this.updateClipPath();\n }\n }\n }\n\n private updateClipPath() {\n setTimeout(() => {\n const container = this.clipPathContainerRef?.nativeElement;\n if (!container) return;\n\n const activeSegment = container.parentElement?.querySelector(\n `.segment.selected:not(.segment-overlay)`\n ) as HTMLElement;\n\n if (activeSegment && container.parentElement) {\n const parentElement = container.parentElement;\n \n const computedStyle = window.getComputedStyle(parentElement);\n const paddingLeft = parseFloat(computedStyle.paddingLeft);\n \n const offsetLeft = activeSegment.offsetLeft - paddingLeft;\n const offsetWidth = activeSegment.offsetWidth;\n const overlayWidth = container.offsetWidth;\n\n // Only update if we have valid dimensions\n if (offsetWidth === 0 \|\| overlayWidth === 0) {\n // Retry after a short delay if elements aren't rendered yet\n setTimeout(() => this.updateClipPath(), 100);\n return;\n }\n\n const clipLeft = offsetLeft;\n const clipRight = offsetLeft + offsetWidth;\n \n const clipLeftPercent = ((clipLeft / overlayWidth) * 100).toFixed(2);\n const clipRightPercent = (100 - (clipRight / overlayWidth) * 100).toFixed(2);\n \n container.style.clipPath = `inset(0 ${clipRightPercent}% 0 ${clipLeftPercent}% round 4px)`;\n }\n }, 0);\n }\n}","<div \n class=\"sds-segmented-control-container\" \n [ngClass]=\"{\n 'disabled': disabled,\n 'sds-segmented-control-primary': style == 'primary',\n 'sds-segmented-control-inverted': style == 'inverted',\n 'clip-path-enabled': enableAnimation\n }\">\n \n <div ngFor=\"let item of items; let last = last;\" \n class=\"segment\" \n id=\"{{idExpr ? item[idExpr]: ''}}\"\n [class.selected]=\"item[valueExpr] == value\"\n [class.tight-padding]=\"segmentPadding == 'tight'\"\n [title]=\"tooltipExpr && item[tooltipExpr] ? item[tooltipExpr] : ''\"\n (click)=\"selectItem(item, $event)\">\n\n <div class=\"sds-flex-row-center gap-2\">\n <fa-icon ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n <span ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n </div>\n </div>\n\n <div ngIf=\"enableAnimation\" \n class=\"sds-clip-path-overlay\" \n #clipPathContainer \n aria-hidden=\"true\">\n <div ngFor=\"let item of items; let last = last;\" \n class=\"segment segment-overlay\" \n [class.tight-padding]=\"segmentPadding == 'tight'\"\n [tabIndex]=\"-1\">\n\n <div class=\"sds-flex-row-center gap-2\">\n <fa-icon ngIf=\"iconExpr && item[iconExpr]\" [icon]=\"item[iconExpr]\" [fixedWidth]=\"true\"></fa-icon>\n <span ngIf=\"displayExpr\">{{item[displayExpr]}}</span>\n </div>\n </div>\n </div>\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-side-bar.mjs CHANGED Viewed

@@ -1,7 +1,5 @@
 import * as i0 from '@angular/core';
-import { model, Input, Component } from '@angular/core';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { NgIf, NgStyle } from '@angular/common';
+import { input, model, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
 class SdsSideBarComponent {
     constructor() {
@@ -11,31 +9,39 @@ class SdsSideBarComponent {
          * @type {number}
          * @memberof SdsSideBarComponent
          */
-        this.widthRem = 16;
+        this.widthRem = input(16);
         /**
-         * Product name defines the color scheme of the side bar.
-         * Default is 'all-hours'.
-         * Options: 'all-hours', 'door-cloud', 'my-hours', 'time-and-space'
+         * State of the side bar, whether it is collapsed or expanded.
          *
-         * @type {string}
          * @memberof SdsSideBarComponent
          */
-        this.product = 'all-hours';
         this.isCollapsed = model(false);
+        /**
+         * Indicates whether the side bar is currently hovered by the user.
+         * This can be used to trigger hover effects or to temporarily expand
+         * the side bar on hover when it is in a collapsed state.
+         *
+         * @memberof SdsSideBarComponent
+         */
+        this.isHovered = output();
     }
+    onEnter() { this.isHovered.emit(true); }
+    onLeave() { this.isHovered.emit(false); }
     toggleSideBar(state) {
         this.isCollapsed.set(!this.isCollapsed());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsSideBarComponent, isStandalone: true, selector: "sds-side-bar", inputs: { widthRem: { classPropertyName: "widthRem", publicName: "widthRem", isSignal: false, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n    class=\"sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \r\n    [class.disable-transition]=\"!isCollapsed()\"\r\n    >\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [style.width.rem]=\"!isCollapsed()  ? widthRem : 3.5\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.sds-side-bar-open]=\"!isCollapsed()\"\r\n    >\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \r\n            style=\"transition: none\"\r\n            [style.width.rem]=\"!isCollapsed()  ? widthRem : 3.5\"\r\n            >\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsSideBarComponent, isStandalone: true, selector: "sds-side-bar", inputs: { widthRem: { classPropertyName: "widthRem", publicName: "widthRem", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isHovered: "isHovered" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" } }, ngImport: i0, template: "<div \n    class=\"sds-side-bar-container\"\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \n    [class.disable-transition]=\"!isCollapsed()\"\n    >\n\n    <aside\n        class=\"sds-side-bar h-100 border-end\"\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n        \n        [class.sds-side-bar-open]=\"!isCollapsed()\"\n    >\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \n            style=\"transition: none\"\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n            >\n            <ng-content></ng-content>                \n        </div>\n    </aside>\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block;--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsSideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-side-bar', standalone: true, imports: [NgIf, NgStyle, FaIconComponent], template: "<div \r\n    class=\"sds-side-bar-container\"\r\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \r\n    [class.disable-transition]=\"!isCollapsed()\"\r\n    >\r\n\r\n    <aside\r\n        class=\"sds-side-bar h-100 border-end\"\r\n        [style.width.rem]=\"!isCollapsed()  ? widthRem : 3.5\"\r\n        [class]=\"(product ? 'product-' + product : null)\"\r\n        [class.sds-side-bar-open]=\"!isCollapsed()\"\r\n    >\r\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \r\n            style=\"transition: none\"\r\n            [style.width.rem]=\"!isCollapsed()  ? widthRem : 3.5\"\r\n            >\r\n            <ng-content></ng-content>                \r\n        </div>\r\n    </aside>\r\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { widthRem: [{
-                type: Input
-            }], product: [{
-                type: Input
+            args: [{ selector: 'sds-side-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n    class=\"sds-side-bar-container\"\n    [class.sds-side-bar-open]=\"!isCollapsed()\"   \n    [class.disable-transition]=\"!isCollapsed()\"\n    >\n\n    <aside\n        class=\"sds-side-bar h-100 border-end\"\n        [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n        \n        [class.sds-side-bar-open]=\"!isCollapsed()\"\n    >\n        <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \n            style=\"transition: none\"\n            [style.width.rem]=\"!isCollapsed()  ? widthRem() : 3.5\"\n            >\n            <ng-content></ng-content>                \n        </div>\n    </aside>\n</div>", styles: [".sds-side-bar{transition:.2s ease-out;overflow-x:hidden;z-index:10;position:relative}.sds-side-bar.disable-transition{transition:none}:host{display:block;--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 /**

package/fesm2022/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, ~~inject~~, input, ~~Input,~~ model, ~~OnChanges,~~ ~~OnDestroy, OnInit, SimpleChanges~~ } from '@angular/core';\~~r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf, NgStyle } from '@angular/common';\r\~~n\r\n@Component({\r\n selector: 'sds-side-bar',\r\n templateUrl: './side-bar.component.html',\r\n styleUrls: ['./side-bar.component.scss'],\r\n standalone: true,\r\n ~~imports~~: ~~[NgIf, NgStyle, FaIconComponent]~~,\r\n})\r\nexport class SdsSideBarComponent {\r\n\r\n /*\r\n Define the width of the side bar in rem.\r\n \r\n @type {number}\r\n * @memberof SdsSideBarComponent\r\n /\r\n ~~@Input()~~ public widthRem: ~~number~~ = 16;\r\n\r\n /\r\n ~~Product~~ ~~name~~ ~~defines~~ the ~~color~~ ~~scheme~~ of ~~the~~ ~~side~~ ~~bar~~.\r\n * ~~Default~~ ~~is 'all-hours'.\r~~\n * ~~Options:~~ ~~'all-hours',~~ ~~'door-cloud', 'my-hours', 'time-and-space'~~\r\n \r\n ~~@type~~ ~~{string}~~\r\n * ~~@memberof~~ ~~SdsSideBarComponent~~\r\n /\r\n @Input() ~~product:~~ ~~'all-hours'~~ \| ~~'door-cloud'~~ \| ~~'my-hours'~~ \| ~~'time-and-space'~~ = ~~'all-hours';\r\~~n\r\n ~~isCollapsed~~ = ~~model~~<boolean>(~~false~~)\r\n\r\n constructor() {}\r\n\r\n public toggleSideBar(state?: boolean) {\r\n this.isCollapsed.set(!this.isCollapsed());\r\n } \r\n}\r\n","<div \r\n class=\"sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"!isCollapsed()\" \r\n [class.disable-transition]=\"!isCollapsed()\"\r\n >\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [style.width.rem]=\"!isCollapsed() ? widthRem : 3.5\"\r\n ~~[class]=\"(product ? 'product-' + product : null)~~\~~"\r\~~n [class.sds-side-bar-open]=\"!isCollapsed()\"\r\n >\r\n <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \r\n style=\"transition: none\"\r\n [style.width.rem]=\"!isCollapsed() ? widthRem : 3.5\"\r\n >\r\n <ng-content></ng-content> \r\n </div>\r\n </aside>\r\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"~~;;;;;MAWa~~,mBAAmB,CAAA;~~AAsB5B~~,IAAA,WAAA,GAAA;~~AApBA~~;;;;;AAKG;~~QACa~~,~~IAAQ~~,CAAA,~~QAAA~~,~~GAAW~~,~~EAAE;AAErC;;;;;;;AAOG;QACM~~,~~IAAO~~,~~CAAA~~,~~OAAA,GAA+D,WAAW~~;~~AAE1F~~,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,CAAC;;~~AAI5B~~,IAAA,aAAa,CAAC,KAAe,EAAA;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;+~~GAzBpC~~,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,~~8gBCXhC~~,~~wtBAmBM~~,EAAA,MAAA,EAAA,CAAA,~~8JAAA~~,CAAA,EAAA,CAAA,CAAA;;~~4FDRO~~,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS~~;+BACI~~,~~cAAc~~,EAAA,~~UAAA~~,~~EAGZ~~,~~IAAI~~,~~EACP~~,~~OAAA~~,EAAA,~~CAAC,~~IAAI,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~eAAe~~,CAAC,EAAA,QAAA,EAAA,~~wtBAAA~~,EAAA,MAAA,EAAA,CAAA,~~8JAAA~~,CAAA,EAAA;~~wDAUzB~~,~~QAAQ~~,EAAA,CAAA;~~sBAAvB~~;~~gBAUQ~~,OAAO,EAAA,CAAA;~~sBAAf~~;;;~~AE7BL~~;;AAEG;;;;"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-side-bar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.ts","../../../projects/ngx-sds-components/src/lib/side-bar/side-bar.component.html","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostListener, input, model, output } from '@angular/core';\n\n@Component({\n selector: 'sds-side-bar',\n templateUrl: './side-bar.component.html',\n styleUrls: ['./side-bar.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdsSideBarComponent {\n\n /*\n Define the width of the side bar in rem.\n \n @type {number}\n * @memberof SdsSideBarComponent\n /\n public widthRem = input<number>(16);\n\n /\n State of the side bar, whether it is collapsed or expanded.\n \n @memberof SdsSideBarComponent\n /\n public isCollapsed = model<boolean>(false)\n\n /\n Indicates whether the side bar is currently hovered by the user. \n * This can be used to trigger hover effects or to temporarily expand \n * the side bar on hover when it is in a collapsed state.\n \n @memberof SdsSideBarComponent\n /\n public isHovered = output<boolean>();\n\n\n constructor() {}\n\n @HostListener('mouseenter') onEnter() { this.isHovered.emit(true); }\n @HostListener('mouseleave') onLeave() { this.isHovered.emit(false); }\n\n public toggleSideBar(state?: boolean) {\n this.isCollapsed.set(!this.isCollapsed());\n } \n}\n","<div \n class=\"sds-side-bar-container\"\n [class.sds-side-bar-open]=\"!isCollapsed()\" \n [class.disable-transition]=\"!isCollapsed()\"\n >\n\n <aside\n class=\"sds-side-bar h-100 border-end\"\n [style.width.rem]=\"!isCollapsed() ? widthRem() : 3.5\"\n \n [class.sds-side-bar-open]=\"!isCollapsed()\"\n >\n <div class=\"d-flex flex-column flex-grow-0 h-100 w-100x\" \n style=\"transition: none\"\n [style.width.rem]=\"!isCollapsed() ? widthRem() : 3.5\"\n >\n <ng-content></ng-content> \n </div>\n </aside>\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;MASa,mBAAmB,CAAA;AA2B5B,IAAA,WAAA,GAAA;AAzBA;;;;;AAKG;AACI,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,CAAC;AAEnC;;;;AAIG;AACI,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,CAAC;AAE1C;;;;;;AAMG;QACI,IAAS,CAAA,SAAA,GAAG,MAAM,EAAW;;IAKR,OAAO,GAAA,EAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtC,OAAO,GAAA,EAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAE5D,IAAA,aAAa,CAAC,KAAe,EAAA;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;+GAjCpC,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,qfCThC,moBAmBM,EAAA,MAAA,EAAA,CAAA,oOAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDVO,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAGZ,UAAA,EAAA,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,moBAAA,EAAA,MAAA,EAAA,CAAA,oOAAA,CAAA,EAAA;wDA+BnB,OAAO,EAAA,CAAA;sBAAlC,YAAY;uBAAC,YAAY;gBACE,OAAO,EAAA,CAAA;sBAAlC,YAAY;uBAAC,YAAY;;;AEvC9B;;AAEG;;;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-static-value.mjs CHANGED Viewed

@@ -11,11 +11,11 @@ class SdsStaticValueComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsStaticValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsStaticValueComponent, isStandalone: true, selector: "sds-static-value", inputs: { icon: "icon", label: "label", showColon: "showColon" }, ngImport: i0, template: "<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsStaticValueComponent, isStandalone: true, selector: "sds-static-value", inputs: { icon: "icon", label: "label", showColon: "showColon" }, ngImport: i0, template: "<div class=\"d-flex gap-1 align-items-center\">\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\n    <div *ngIf=\"label || showColon\">\n        <span>{{label}}</span>\n        <span *ngIf=\"showColon\">:</span>\n    </div>\n    <ng-content></ng-content>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsStaticValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-static-value', standalone: true, imports: [NgIf, FaIconComponent], template: "<div class=\"d-flex gap-1 align-items-center\">\r\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n    <div *ngIf=\"label || showColon\">\r\n        <span>{{label}}</span>\r\n        <span *ngIf=\"showColon\">:</span>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
+            args: [{ selector: 'sds-static-value', standalone: true, imports: [NgIf, FaIconComponent], template: "<div class=\"d-flex gap-1 align-items-center\">\n    <fa-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\n    <div *ngIf=\"label || showColon\">\n        <span>{{label}}</span>\n        <span *ngIf=\"showColon\">:</span>\n    </div>\n    <ng-content></ng-content>\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], label: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-static-value.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-static-value.mjs","sources":["../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.ts","../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.html","../../../projects/ngx-sds-components/src/lib/static-value/spicainternational-ngx-sds-components-src-lib-static-value.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sds-static-value',\r\n templateUrl: './static-value.component.html',\r\n styleUrls: ['./static-value.component.scss'],\r\n standalone: true,\r\n imports: [NgIf, FaIconComponent]\r\n})\r\nexport class SdsStaticValueComponent implements OnInit {\r\n\r\n @Input() public icon: IconProp \| undefined;\r\n @Input() public label: string = '';\r\n @Input() public showColon: boolean = true;\r\n\r\n\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}\r\n","<div class=\"d-flex gap-1 align-items-center\">\r\n <fa-icon ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\r\n <div ngIf=\"label \|\| showColon\">\r\n <span>{{label}}</span>\r\n <span ngIf=\"showColon\">:</span>\r\n </div>\r\n <ng-content></ng-content>\r\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;MAYa,uBAAuB,CAAA;AAQhC,IAAA,WAAA,GAAA;QALgB,IAAK,CAAA,KAAA,GAAW,EAAE;QAClB,IAAS,CAAA,SAAA,GAAY,IAAI;;IAMzC,QAAQ,GAAA;;+GAVC,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,ECZpC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,~~oTAOM~~,EDGQ,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEtB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,cAGhB,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,~~oTAAA~~,EAAA;wDAIhB,IAAI,EAAA,CAAA;sBAAnB;gBACe,KAAK,EAAA,CAAA;sBAApB;gBACe,SAAS,EAAA,CAAA;sBAAxB;;;AEhBL;;AAEG;;;;"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-static-value.mjs","sources":["../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.ts","../../../projects/ngx-sds-components/src/lib/static-value/static-value.component.html","../../../projects/ngx-sds-components/src/lib/static-value/spicainternational-ngx-sds-components-src-lib-static-value.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf } from '@angular/common';\n\n@Component({\n selector: 'sds-static-value',\n templateUrl: './static-value.component.html',\n styleUrls: ['./static-value.component.scss'],\n standalone: true,\n imports: [NgIf, FaIconComponent]\n})\nexport class SdsStaticValueComponent implements OnInit {\n\n @Input() public icon: IconProp \| undefined;\n @Input() public label: string = '';\n @Input() public showColon: boolean = true;\n\n\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","<div class=\"d-flex gap-1 align-items-center\">\n <fa-icon ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\"></fa-icon>\n <div ngIf=\"label \|\| showColon\">\n <span>{{label}}</span>\n <span ngIf=\"showColon\">:</span>\n </div>\n <ng-content></ng-content>\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;MAYa,uBAAuB,CAAA;AAQhC,IAAA,WAAA,GAAA;QALgB,IAAK,CAAA,KAAA,GAAW,EAAE;QAClB,IAAS,CAAA,SAAA,GAAY,IAAI;;IAMzC,QAAQ,GAAA;;+GAVC,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,ECZpC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,sSAOM,EDGQ,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEtB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,cAGhB,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,sSAAA,EAAA;wDAIhB,IAAI,EAAA,CAAA;sBAAnB;gBACe,KAAK,EAAA,CAAA;sBAApB;gBACe,SAAS,EAAA,CAAA;sBAAxB;;;AEhBL;;AAEG;;;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-table-actions.mjs CHANGED Viewed

@@ -25,7 +25,7 @@ class SdsTableActionsComponent {
         this.showDropdown = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsTableActionsComponent, isStandalone: true, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth", hideActionsDropdown: "hideActionsDropdown" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i2.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i2.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsTableActionsComponent, isStandalone: true, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth", hideActionsDropdown: "hideActionsDropdown" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\n    <div class=\"btn-group sds-actions-wrapper\">\n        <ng-content select=\"quickActions\"></ng-content>\n\n        <ng-container *ngIf=\"!hideActionsDropdown\">\n            \n            <button\n                #dropdownButton\n                class=\"sds-actions-dropdown-button sds-btn-table\"\n                type=\"button\"\n                (click)=\"toggleDropdownMenu()\"\n            >\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <dx-popover\n                [target]=\"dropdownButton\"\n                [(visible)]=\"showDropdown\"\n                [minWidth]=\"dropdownMinWidth\"\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\n            >\n                <dxo-position\n                    my=\"right top\"\n                    at=\"right bottom\"\n                    [of]=\"dropdownButton\"\n                >\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\n                </dxo-position>\n\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\n                    <ng-content></ng-content>\n                </ul>\n            </dx-popover>\n        </ng-container>\n    </div>\n</div>\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i1.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i2.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i2.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
             type: Component,
@@ -34,7 +34,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FaIconComponent,
                         DxPopoverModule,
                         DxoPositionModule
-                    ], template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
+                    ], template: "<div class=\"sds-actions-container me-2\">\n    <div class=\"btn-group sds-actions-wrapper\">\n        <ng-content select=\"quickActions\"></ng-content>\n\n        <ng-container *ngIf=\"!hideActionsDropdown\">\n            \n            <button\n                #dropdownButton\n                class=\"sds-actions-dropdown-button sds-btn-table\"\n                type=\"button\"\n                (click)=\"toggleDropdownMenu()\"\n            >\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <dx-popover\n                [target]=\"dropdownButton\"\n                [(visible)]=\"showDropdown\"\n                [minWidth]=\"dropdownMinWidth\"\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\n            >\n                <dxo-position\n                    my=\"right top\"\n                    at=\"right bottom\"\n                    [of]=\"dropdownButton\"\n                >\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\n                </dxo-position>\n\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\n                    <ng-content></ng-content>\n                </ul>\n            </dx-popover>\n        </ng-container>\n    </div>\n</div>\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dropdownIcon: [{
                 type: Input
             }], dropDownAutoClose: [{

package/fesm2022/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { AfterContentInit, Component, HostBinding, Input, OnInit } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { faEllipsis } from '@fortawesome/pro-regular-svg-icons';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\nimport { DxPopoverModule } from 'devextreme-angular';\r\nimport { DxoPositionModule } from 'devextreme-angular/ui/nested';\r\n\r\n@Component({\r\n selector: 'sds-table-actions',\r\n templateUrl: './table-actions.component.html',\r\n styleUrls: ['./table-actions.component.scss'],\r\n standalone: true,\r\n imports: [\r\n NgIf,\r\n FaIconComponent,\r\n\r\n DxPopoverModule,\r\n DxoPositionModule\r\n ],\r\n})\r\nexport class SdsTableActionsComponent implements OnInit {\r\n\r\n @Input() dropdownIcon: IconProp = faEllipsis;\r\n // @Input() showShadow: boolean = false;\r\n @Input() dropDownAutoClose: 'true' \| 'false' \| 'inside' \| 'outside' = 'true';\r\n @Input() dropdownMinWidth: string = '10rem';\r\n @Input() hideActionsDropdown: boolean = false;\r\n\r\n @HostBinding('class.actions-dropdown-open') protected showDropdown: boolean = false;\r\n \r\n\r\n constructor(\r\n\r\n ) {}\r\n\r\n ngOnInit(): void {}\r\n\r\n\r\n \r\n protected toggleDropdownMenu(): void {\r\n this.showDropdown = !this.showDropdown;\r\n }\r\n\r\n protected closeDropdownMenu(): void {\r\n this.showDropdown = false;\r\n }\r\n\r\n}\r\n","<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <ng-container ngIf=\"!hideActionsDropdown\">\r\n \r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </ng-container>\r\n </div>\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAqBa,wBAAwB,CAAA;AAWjC,IAAA,WAAA,GAAA;QATS,IAAY,CAAA,YAAA,GAAa,UAAU;;QAEnC,IAAiB,CAAA,iBAAA,GAA4C,MAAM;QACnE,IAAgB,CAAA,gBAAA,GAAW,OAAO;QAClC,IAAmB,CAAA,mBAAA,GAAY,KAAK;QAES,IAAY,CAAA,YAAA,GAAY,KAAK;;AAOnF,IAAA,QAAQ;IAIE,kBAAkB,GAAA;AACxB,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;;IAGhC,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;+GAxBpB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,6BAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBrC,~~k4CAqCA~~,EDvBQ,MAAA,EAAA,CAAA,64DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FACJ,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAEf,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,cAAA,EAAA,SAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,wBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,GAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,iBAAiB,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGZ,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,SAAS;+BACI,mBAAmB,EAAA,UAAA,EAGjB,IAAI,EACP,OAAA,EAAA;wBACL,IAAI;wBACJ,eAAe;wBAEf,eAAe;wBACf;AACH,qBAAA,EAAA,QAAA,EAAA,~~k4CAAA~~,EAAA,MAAA,EAAA,CAAA,64DAAA,CAAA,EAAA;wDAIQ,YAAY,EAAA,CAAA;sBAApB;gBAEQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,mBAAmB,EAAA,CAAA;sBAA3B;gBAEqD,YAAY,EAAA,CAAA;sBAAjE,WAAW;uBAAC,6BAA6B;;;AE7B9C;;AAEG;;;;"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { AfterContentInit, Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport { faEllipsis } from '@fortawesome/pro-regular-svg-icons';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { NgIf } from '@angular/common';\nimport { DxPopoverModule } from 'devextreme-angular';\nimport { DxoPositionModule } from 'devextreme-angular/ui/nested';\n\n@Component({\n selector: 'sds-table-actions',\n templateUrl: './table-actions.component.html',\n styleUrls: ['./table-actions.component.scss'],\n standalone: true,\n imports: [\n NgIf,\n FaIconComponent,\n\n DxPopoverModule,\n DxoPositionModule\n ],\n})\nexport class SdsTableActionsComponent implements OnInit {\n\n @Input() dropdownIcon: IconProp = faEllipsis;\n // @Input() showShadow: boolean = false;\n @Input() dropDownAutoClose: 'true' \| 'false' \| 'inside' \| 'outside' = 'true';\n @Input() dropdownMinWidth: string = '10rem';\n @Input() hideActionsDropdown: boolean = false;\n\n @HostBinding('class.actions-dropdown-open') protected showDropdown: boolean = false;\n \n\n constructor(\n\n ) {}\n\n ngOnInit(): void {}\n\n\n \n protected toggleDropdownMenu(): void {\n this.showDropdown = !this.showDropdown;\n }\n\n protected closeDropdownMenu(): void {\n this.showDropdown = false;\n }\n\n}\n","<div class=\"sds-actions-container me-2\">\n <div class=\"btn-group sds-actions-wrapper\">\n <ng-content select=\"quickActions\"></ng-content>\n\n <ng-container ngIf=\"!hideActionsDropdown\">\n \n <button\n #dropdownButton\n class=\"sds-actions-dropdown-button sds-btn-table\"\n type=\"button\"\n (click)=\"toggleDropdownMenu()\"\n >\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\n </fa-icon>\n </button>\n\n <dx-popover\n [target]=\"dropdownButton\"\n [(visible)]=\"showDropdown\"\n [minWidth]=\"dropdownMinWidth\"\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\n >\n <dxo-position\n my=\"right top\"\n at=\"right bottom\"\n [of]=\"dropdownButton\"\n >\n <dxo-offset [y]=\"-7\"></dxo-offset>\n </dxo-position>\n\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\n <ng-content></ng-content>\n </ul>\n </dx-popover>\n </ng-container>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}