@spicainternational/ngx-sds-components 5.13.0-beta.1 → 5.13.0-beta.3

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 (12) hide show
  1. package/esm2020/src/lib/page-header/page-header.component.mjs +6 -3
  2. package/esm2020/src/lib/side-bar/side-bar.component.mjs +2 -2
  3. package/fesm2015/spicainternational-ngx-sds-components-src-lib-page-header.mjs +5 -2
  4. package/fesm2015/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map +1 -1
  5. package/fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs +2 -2
  6. package/fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map +1 -1
  7. package/fesm2020/spicainternational-ngx-sds-components-src-lib-page-header.mjs +5 -2
  8. package/fesm2020/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map +1 -1
  9. package/fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs +2 -2
  10. package/fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map +1 -1
  11. package/package.json +1 -1
  12. package/src/lib/page-header/page-header.component.d.ts +2 -1
package/esm2020/src/lib/page-header/page-header.component.mjs CHANGED
@@ -4,19 +4,22 @@ import * as i1 from "@angular/common";
4
4
  export class SdsPageHeaderComponent {
5
5
  constructor() {
6
6
  this.titleContent = { nativeElement: undefined };
7
+ this.gap = "1rem";
7
8
  this.title = '';
8
9
  }
9
10
  ngOnInit() { }
10
11
  }
11
12
  SdsPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12
- SdsPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPageHeaderComponent, selector: "sds-page-header", inputs: { title: "title" }, queries: [{ propertyName: "titleContent", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
13
+ SdsPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPageHeaderComponent, selector: "sds-page-header", inputs: { title: "title", gap: "gap" }, queries: [{ propertyName: "titleContent", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
13
14
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPageHeaderComponent, decorators: [{
14
15
  type: Component,
15
- args: [{ selector: 'sds-page-header', template: "<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""] }]
16
+ args: [{ selector: 'sds-page-header', template: "<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""] }]
16
17
  }], ctorParameters: function () { return []; }, propDecorators: { titleContent: [{
17
18
  type: ContentChild,
18
19
  args: ['title']
19
20
  }], title: [{
20
21
  type: Input
22
+ }], gap: [{
23
+ type: Input
21
24
  }] } });
22
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWMsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFPbkYsTUFBTSxPQUFPLHNCQUFzQjtJQUkvQjtRQUh1QixpQkFBWSxHQUFlLEVBQUUsYUFBYSxFQUFFLFNBQVMsRUFBRSxDQUFDO1FBSTNFLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxRQUFRLEtBQVUsQ0FBQzs7bUhBUlYsc0JBQXNCO3VHQUF0QixzQkFBc0Isc0xDUG5DLDRhQWVBOzJGRFJhLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDSSxpQkFBaUI7MEVBS0osWUFBWTtzQkFBbEMsWUFBWTt1QkFBQyxPQUFPO2dCQUNaLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFbGVtZW50UmVmLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLXBhZ2UtaGVhZGVyJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9wYWdlLWhlYWRlci5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9wYWdlLWhlYWRlci5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzUGFnZUhlYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBAQ29udGVudENoaWxkKCd0aXRsZScpIHRpdGxlQ29udGVudDogRWxlbWVudFJlZiA9IHsgbmF0aXZlRWxlbWVudDogdW5kZWZpbmVkIH07XHJcbiAgICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICAgIHRoaXMudGl0bGUgPSAnJztcclxuICAgIH1cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImQtZmxleCBmbGV4LXdyYXAgYWxpZ24taXRlbXMtY2VudGVyXCI+XHJcbiAgICA8aDEgKm5nSWY9XCIhdGl0bGVDb250ZW50XCIgY2xhc3M9XCJtZS00XCI+XHJcbiAgICAgICAge3sgdGl0bGUgfX1cclxuICAgIDwvaDE+XHJcblxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRpdGxlQ29udGVudFwiPlxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInRpdGxlXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidGl0bGVBcHBlbmRpeFwiPjwvbmctY29udGVudD5cclxuXHJcbiAgICA8ZGl2IGNsYXNzPVwibXMtYXV0b1wiPlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
25
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWMsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFPbkYsTUFBTSxPQUFPLHNCQUFzQjtJQUsvQjtRQUp1QixpQkFBWSxHQUFlLEVBQUUsYUFBYSxFQUFFLFNBQVMsRUFBRSxDQUFDO1FBRXRFLFFBQUcsR0FBVyxNQUFNLENBQUM7UUFHMUIsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELFFBQVEsS0FBVSxDQUFDOzttSEFUVixzQkFBc0I7dUdBQXRCLHNCQUFzQixrTUNQbkMsd2VBa0JBOzJGRFhhLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDSSxpQkFBaUI7MEVBS0osWUFBWTtzQkFBbEMsWUFBWTt1QkFBQyxPQUFPO2dCQUNaLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy1wYWdlLWhlYWRlcicsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc1BhZ2VIZWFkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gICAgQENvbnRlbnRDaGlsZCgndGl0bGUnKSB0aXRsZUNvbnRlbnQ6IEVsZW1lbnRSZWYgPSB7IG5hdGl2ZUVsZW1lbnQ6IHVuZGVmaW5lZCB9O1xyXG4gICAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcclxuICAgIEBJbnB1dCgpIGdhcDogc3RyaW5nID0gXCIxcmVtXCI7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgdGhpcy50aXRsZSA9ICcnO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxufVxyXG4iLCI8ZGl2XHJcbiAgICBjbGFzcz1cImQtZmxleCBmbGV4LXdyYXAgYWxpZ24taXRlbXMtY2VudGVyXCJcclxuICAgIFtzdHlsZS5tYXJnaW4tYm90dG9tXT1cImdhcFwiICAgXHJcbiAgICA+XHJcbiAgICA8aDEgKm5nSWY9XCIhdGl0bGVDb250ZW50XCIgY2xhc3M9XCJtZS00IG1iLTBcIj5cclxuICAgICAgICB7eyB0aXRsZSB9fVxyXG4gICAgPC9oMT5cclxuXHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidGl0bGVDb250ZW50XCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidGl0bGVcIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ0aXRsZUFwcGVuZGl4XCI+PC9uZy1jb250ZW50PlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJtcy1hdXRvXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
package/esm2020/src/lib/side-bar/side-bar.component.mjs CHANGED
@@ -93,10 +93,10 @@ export class SdsSideBarComponent {
93
93
  }
94
94
  }
95
95
  SdsSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
96
- SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
96
+ SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:1.8rem;width:1.8rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:1.8rem;width:1.8rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.05rem;transition:visibility 0ms linear .18s,opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container .open-side-bar-button fa-icon{margin-left:.05rem}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-.9rem;visibility:hidden;transition:visibility 0s linear,opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
97
97
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, decorators: [{
98
98
  type: Component,
99
- args: [{ selector: 'sds-side-bar', template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
99
+ args: [{ selector: 'sds-side-bar', template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:1.8rem;width:1.8rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:1.8rem;width:1.8rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.05rem;transition:visibility 0ms linear .18s,opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container .open-side-bar-button fa-icon{margin-left:.05rem}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-.9rem;visibility:hidden;transition:visibility 0s linear,opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
100
100
  }], ctorParameters: function () { return []; }, propDecorators: { showCloseButton: [{
101
101
  type: Input
102
102
  }], enablePullOutMode: [{
package/fesm2015/spicainternational-ngx-sds-components-src-lib-page-header.mjs CHANGED
@@ -6,20 +6,23 @@ import { CommonModule } from '@angular/common';
6
6
  class SdsPageHeaderComponent {
7
7
  constructor() {
8
8
  this.titleContent = { nativeElement: undefined };
9
+ this.gap = "1rem";
9
10
  this.title = '';
10
11
  }
11
12
  ngOnInit() { }
12
13
  }
13
14
  SdsPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
- SdsPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPageHeaderComponent, selector: "sds-page-header", inputs: { title: "title" }, queries: [{ propertyName: "titleContent", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
15
+ SdsPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPageHeaderComponent, selector: "sds-page-header", inputs: { title: "title", gap: "gap" }, queries: [{ propertyName: "titleContent", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
15
16
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPageHeaderComponent, decorators: [{
16
17
  type: Component,
17
- args: [{ selector: 'sds-page-header', template: "<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""] }]
18
+ args: [{ selector: 'sds-page-header', template: "<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""] }]
18
19
  }], ctorParameters: function () { return []; }, propDecorators: { titleContent: [{
19
20
  type: ContentChild,
20
21
  args: ['title']
21
22
  }], title: [{
22
23
  type: Input
24
+ }], gap: [{
25
+ type: Input
23
26
  }] } });
24
27
 
25
28
  const components = [SdsPageHeaderComponent];
package/fesm2015/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-page-header.mjs","sources":["../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.ts","../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.html","../../../projects/ngx-sds-components/src/lib/page-header/page-header.module.ts","../../../projects/ngx-sds-components/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-page-header',\r\n templateUrl: './page-header.component.html',\r\n styleUrls: ['./page-header.component.scss'],\r\n})\r\nexport class SdsPageHeaderComponent implements OnInit {\r\n @ContentChild('title') titleContent: ElementRef = { nativeElement: undefined };\r\n @Input() title: string;\r\n\r\n constructor() {\r\n this.title = '';\r\n }\r\n\r\n ngOnInit(): void {}\r\n}\r\n","<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsPageHeaderComponent } from './page-header.component';\r\n\r\nconst components = [SdsPageHeaderComponent];\r\n\r\n@NgModule({\r\n declarations: [SdsPageHeaderComponent],\r\n imports: [CommonModule],\r\n exports: [...components],\r\n})\r\nexport class SdsPageHeaderModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAOa,sBAAsB,CAAA;AAI/B,IAAA,WAAA,GAAA;QAHuB,IAAA,CAAA,YAAY,GAAe,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC;AAI3E,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACnB;AAED,IAAA,QAAQ,MAAW;;mHARV,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,sLCPnC,4aAeA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDRa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,iBAAiB,EAAA,QAAA,EAAA,4aAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAKJ,YAAY,EAAA,CAAA;sBAAlC,YAAY;uBAAC,OAAO,CAAA;gBACZ,KAAK,EAAA,CAAA;sBAAb,KAAK;;;AELV,MAAM,UAAU,GAAG,CAAC,sBAAsB,CAAC,CAAC;MAO/B,mBAAmB,CAAA;;gHAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EAJb,YAAA,EAAA,CAAA,sBAAsB,CAC3B,EAAA,OAAA,EAAA,CAAA,YAAY,aAJN,sBAAsB,CAAA,EAAA,CAAA,CAAA;iHAO7B,mBAAmB,EAAA,OAAA,EAAA,CAHnB,CAAC,YAAY,CAAC,CAAA,EAAA,CAAA,CAAA;2FAGd,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,sBAAsB,CAAC;oBACtC,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;iBAC3B,CAAA;;;ACVD;;AAEG;;;;"}
1
+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-page-header.mjs","sources":["../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.ts","../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.html","../../../projects/ngx-sds-components/src/lib/page-header/page-header.module.ts","../../../projects/ngx-sds-components/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-page-header',\r\n templateUrl: './page-header.component.html',\r\n styleUrls: ['./page-header.component.scss'],\r\n})\r\nexport class SdsPageHeaderComponent implements OnInit {\r\n @ContentChild('title') titleContent: ElementRef = { nativeElement: undefined };\r\n @Input() title: string;\r\n @Input() gap: string = \"1rem\";\r\n\r\n constructor() {\r\n this.title = '';\r\n }\r\n\r\n ngOnInit(): void {}\r\n}\r\n","<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsPageHeaderComponent } from './page-header.component';\r\n\r\nconst components = [SdsPageHeaderComponent];\r\n\r\n@NgModule({\r\n declarations: [SdsPageHeaderComponent],\r\n imports: [CommonModule],\r\n exports: [...components],\r\n})\r\nexport class SdsPageHeaderModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAOa,sBAAsB,CAAA;AAK/B,IAAA,WAAA,GAAA;QAJuB,IAAA,CAAA,YAAY,GAAe,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC;AAEtE,QAAA,IAAG,CAAA,GAAA,GAAW,MAAM,CAAC;AAG1B,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACnB;AAED,IAAA,QAAQ,MAAW;;mHATV,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,kMCPnC,weAkBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDXa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,iBAAiB,EAAA,QAAA,EAAA,weAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAKJ,YAAY,EAAA,CAAA;sBAAlC,YAAY;uBAAC,OAAO,CAAA;gBACZ,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,GAAG,EAAA,CAAA;sBAAX,KAAK;;;AENV,MAAM,UAAU,GAAG,CAAC,sBAAsB,CAAC,CAAC;MAO/B,mBAAmB,CAAA;;gHAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EAJb,YAAA,EAAA,CAAA,sBAAsB,CAC3B,EAAA,OAAA,EAAA,CAAA,YAAY,aAJN,sBAAsB,CAAA,EAAA,CAAA,CAAA;iHAO7B,mBAAmB,EAAA,OAAA,EAAA,CAHnB,CAAC,YAAY,CAAC,CAAA,EAAA,CAAA,CAAA;2FAGd,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,sBAAsB,CAAC;oBACtC,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;iBAC3B,CAAA;;;ACVD;;AAEG;;;;"}
package/fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs CHANGED
@@ -96,10 +96,10 @@ class SdsSideBarComponent {
96
96
  }
97
97
  }
98
98
  SdsSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
99
- SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
99
+ SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:1.8rem;width:1.8rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:1.8rem;width:1.8rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.05rem;transition:visibility 0ms linear .18s,opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container .open-side-bar-button fa-icon{margin-left:.05rem}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-.9rem;visibility:hidden;transition:visibility 0s linear,opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
100
100
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, decorators: [{
101
101
  type: Component,
102
- args: [{ selector: 'sds-side-bar', template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
102
+ args: [{ selector: 'sds-side-bar', template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:1.8rem;width:1.8rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:1.8rem;width:1.8rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.05rem;transition:visibility 0ms linear .18s,opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container .open-side-bar-button fa-icon{margin-left:.05rem}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-.9rem;visibility:hidden;transition:visibility 0s linear,opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
103
103
  }], ctorParameters: function () { return []; }, propDecorators: { showCloseButton: [{
104
104
  type: Input
105
105
  }], enablePullOutMode: [{
package/fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map CHANGED
@@ -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/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { IconDefinition, faAngleLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\r\nimport { Subject } from 'rxjs';\r\n// import { faSidebar } from '@fortawesome/pro-light-svg-icons';\r\n// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';\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})\r\nexport class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {\r\n\r\n /**\r\n * Define when the hide panel button is shown. \r\n * Default is 'auto' which will only show the button when the users hovers over the panel.\r\n * 'always' will always show the button.\r\n *\r\n * @type {('always' | 'auto')}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public showCloseButton: 'always' | 'auto' = 'auto';\r\n \r\n /**\r\n * Pull out mode will show the side bar as user hovers over the left side of the screen\r\n * When side bar is in pull out mode it will be rendered over the main contents.\r\n *\r\n * @type {boolean}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public enablePullOutMode: boolean = false;\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 = 14;\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 /**\r\n * Define the width of the screen that triggers hiding of the side bar.\r\n * Note that the width is checked at the component creation and not when the screen is resized.\r\n * If user resizes the screen he must manually hide the side bar.\r\n *\r\n * @type {(number | undefined)}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public autoHideScreenWidth: number | undefined = 992;\r\n\r\n /**\r\n * Define the hint of the hide button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public closeButtonHint?: string;\r\n\r\n /**\r\n * Define the hint of the show button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public openButtonHint?: string;\r\n\r\n\r\n public showSideBar = true;\r\n public pullOutSideBar = false; \r\n public caretIcon: IconDefinition = faAngleLeft;\r\n public autoHideActive: boolean = false;\r\n\r\n private screenWidth: number = 0;\r\n private componentInitialized: boolean = false;\r\n\r\n private _checkAutoHide$ = new Subject<void>();\r\n\r\n constructor() {\r\n\r\n this._checkAutoHide$.subscribe(() => {\r\n console.log('check autohide');\r\n if (this.componentInitialized && this.autoHideScreenWidth) {\r\n console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);\r\n\r\n this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;\r\n\r\n console.log('hideSideBar', this.autoHideActive);\r\n\r\n if (this.autoHideActive) {\r\n this.showSideBar = false;\r\n }\r\n }\r\n });\r\n }\r\n ngOnDestroy(): void {\r\n this._checkAutoHide$.unsubscribe();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['autoHideScreenWidthRem']) {\r\n this._checkAutoHide$.next();\r\n }\r\n }\r\n\r\n ngOnInit() { \r\n this.componentInitialized = true;\r\n this.screenWidth = window.innerWidth; \r\n console.log('screenWidth', this.screenWidth);\r\n this._checkAutoHide$.next();\r\n } \r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\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-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/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { IconDefinition, faAngleLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\r\nimport { Subject } from 'rxjs';\r\n// import { faSidebar } from '@fortawesome/pro-light-svg-icons';\r\n// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';\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})\r\nexport class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {\r\n\r\n /**\r\n * Define when the hide panel button is shown. \r\n * Default is 'auto' which will only show the button when the users hovers over the panel.\r\n * 'always' will always show the button.\r\n *\r\n * @type {('always' | 'auto')}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public showCloseButton: 'always' | 'auto' = 'auto';\r\n \r\n /**\r\n * Pull out mode will show the side bar as user hovers over the left side of the screen\r\n * When side bar is in pull out mode it will be rendered over the main contents.\r\n *\r\n * @type {boolean}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public enablePullOutMode: boolean = false;\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 = 14;\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 /**\r\n * Define the width of the screen that triggers hiding of the side bar.\r\n * Note that the width is checked at the component creation and not when the screen is resized.\r\n * If user resizes the screen he must manually hide the side bar.\r\n *\r\n * @type {(number | undefined)}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public autoHideScreenWidth: number | undefined = 992;\r\n\r\n /**\r\n * Define the hint of the hide button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public closeButtonHint?: string;\r\n\r\n /**\r\n * Define the hint of the show button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public openButtonHint?: string;\r\n\r\n\r\n public showSideBar = true;\r\n public pullOutSideBar = false; \r\n public caretIcon: IconDefinition = faAngleLeft;\r\n public autoHideActive: boolean = false;\r\n\r\n private screenWidth: number = 0;\r\n private componentInitialized: boolean = false;\r\n\r\n private _checkAutoHide$ = new Subject<void>();\r\n\r\n constructor() {\r\n\r\n this._checkAutoHide$.subscribe(() => {\r\n console.log('check autohide');\r\n if (this.componentInitialized && this.autoHideScreenWidth) {\r\n console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);\r\n\r\n this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;\r\n\r\n console.log('hideSideBar', this.autoHideActive);\r\n\r\n if (this.autoHideActive) {\r\n this.showSideBar = false;\r\n }\r\n }\r\n });\r\n }\r\n ngOnDestroy(): void {\r\n this._checkAutoHide$.unsubscribe();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['autoHideScreenWidthRem']) {\r\n this._checkAutoHide$.next();\r\n }\r\n }\r\n\r\n ngOnInit() { \r\n this.componentInitialized = true;\r\n this.screenWidth = window.innerWidth; \r\n console.log('screenWidth', this.screenWidth);\r\n this._checkAutoHide$.next();\r\n } \r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2020/spicainternational-ngx-sds-components-src-lib-page-header.mjs CHANGED
@@ -6,20 +6,23 @@ import { CommonModule } from '@angular/common';
6
6
  class SdsPageHeaderComponent {
7
7
  constructor() {
8
8
  this.titleContent = { nativeElement: undefined };
9
+ this.gap = "1rem";
9
10
  this.title = '';
10
11
  }
11
12
  ngOnInit() { }
12
13
  }
13
14
  SdsPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
- SdsPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPageHeaderComponent, selector: "sds-page-header", inputs: { title: "title" }, queries: [{ propertyName: "titleContent", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
15
+ SdsPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPageHeaderComponent, selector: "sds-page-header", inputs: { title: "title", gap: "gap" }, queries: [{ propertyName: "titleContent", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
15
16
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPageHeaderComponent, decorators: [{
16
17
  type: Component,
17
- args: [{ selector: 'sds-page-header', template: "<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""] }]
18
+ args: [{ selector: 'sds-page-header', template: "<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""] }]
18
19
  }], ctorParameters: function () { return []; }, propDecorators: { titleContent: [{
19
20
  type: ContentChild,
20
21
  args: ['title']
21
22
  }], title: [{
22
23
  type: Input
24
+ }], gap: [{
25
+ type: Input
23
26
  }] } });
24
27
 
25
28
  const components = [SdsPageHeaderComponent];
package/fesm2020/spicainternational-ngx-sds-components-src-lib-page-header.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-page-header.mjs","sources":["../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.ts","../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.html","../../../projects/ngx-sds-components/src/lib/page-header/page-header.module.ts","../../../projects/ngx-sds-components/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-page-header',\r\n templateUrl: './page-header.component.html',\r\n styleUrls: ['./page-header.component.scss'],\r\n})\r\nexport class SdsPageHeaderComponent implements OnInit {\r\n @ContentChild('title') titleContent: ElementRef = { nativeElement: undefined };\r\n @Input() title: string;\r\n\r\n constructor() {\r\n this.title = '';\r\n }\r\n\r\n ngOnInit(): void {}\r\n}\r\n","<div class=\"d-flex flex-wrap align-items-center\">\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsPageHeaderComponent } from './page-header.component';\r\n\r\nconst components = [SdsPageHeaderComponent];\r\n\r\n@NgModule({\r\n declarations: [SdsPageHeaderComponent],\r\n imports: [CommonModule],\r\n exports: [...components],\r\n})\r\nexport class SdsPageHeaderModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAOa,sBAAsB,CAAA;AAI/B,IAAA,WAAA,GAAA;AAHuB,QAAA,IAAA,CAAA,YAAY,GAAe,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC;AAI3E,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACnB;AAED,IAAA,QAAQ,MAAW;;mHARV,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,sLCPnC,4aAeA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDRa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,iBAAiB,EAAA,QAAA,EAAA,4aAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAKJ,YAAY,EAAA,CAAA;sBAAlC,YAAY;uBAAC,OAAO,CAAA;gBACZ,KAAK,EAAA,CAAA;sBAAb,KAAK;;;AELV,MAAM,UAAU,GAAG,CAAC,sBAAsB,CAAC,CAAC;MAO/B,mBAAmB,CAAA;;gHAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EAJb,YAAA,EAAA,CAAA,sBAAsB,CAC3B,EAAA,OAAA,EAAA,CAAA,YAAY,aAJN,sBAAsB,CAAA,EAAA,CAAA,CAAA;iHAO7B,mBAAmB,EAAA,OAAA,EAAA,CAHnB,CAAC,YAAY,CAAC,CAAA,EAAA,CAAA,CAAA;2FAGd,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,sBAAsB,CAAC;oBACtC,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;AAC3B,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
1
+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-page-header.mjs","sources":["../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.ts","../../../projects/ngx-sds-components/src/lib/page-header/page-header.component.html","../../../projects/ngx-sds-components/src/lib/page-header/page-header.module.ts","../../../projects/ngx-sds-components/src/lib/page-header/spicainternational-ngx-sds-components-src-lib-page-header.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-page-header',\r\n templateUrl: './page-header.component.html',\r\n styleUrls: ['./page-header.component.scss'],\r\n})\r\nexport class SdsPageHeaderComponent implements OnInit {\r\n @ContentChild('title') titleContent: ElementRef = { nativeElement: undefined };\r\n @Input() title: string;\r\n @Input() gap: string = \"1rem\";\r\n\r\n constructor() {\r\n this.title = '';\r\n }\r\n\r\n ngOnInit(): void {}\r\n}\r\n","<div\r\n class=\"d-flex flex-wrap align-items-center\"\r\n [style.margin-bottom]=\"gap\" \r\n >\r\n <h1 *ngIf=\"!titleContent\" class=\"me-4 mb-0\">\r\n {{ title }}\r\n </h1>\r\n\r\n <ng-container *ngIf=\"titleContent\">\r\n <ng-content select=\"title\"></ng-content>\r\n </ng-container>\r\n\r\n <ng-content select=\"titleAppendix\"></ng-content>\r\n\r\n <div class=\"ms-auto\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsPageHeaderComponent } from './page-header.component';\r\n\r\nconst components = [SdsPageHeaderComponent];\r\n\r\n@NgModule({\r\n declarations: [SdsPageHeaderComponent],\r\n imports: [CommonModule],\r\n exports: [...components],\r\n})\r\nexport class SdsPageHeaderModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAOa,sBAAsB,CAAA;AAK/B,IAAA,WAAA,GAAA;AAJuB,QAAA,IAAA,CAAA,YAAY,GAAe,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC;QAEtE,IAAG,CAAA,GAAA,GAAW,MAAM,CAAC;AAG1B,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACnB;AAED,IAAA,QAAQ,MAAW;;mHATV,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,kMCPnC,weAkBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDXa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,iBAAiB,EAAA,QAAA,EAAA,weAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAKJ,YAAY,EAAA,CAAA;sBAAlC,YAAY;uBAAC,OAAO,CAAA;gBACZ,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,GAAG,EAAA,CAAA;sBAAX,KAAK;;;AENV,MAAM,UAAU,GAAG,CAAC,sBAAsB,CAAC,CAAC;MAO/B,mBAAmB,CAAA;;gHAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,mBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EAJb,YAAA,EAAA,CAAA,sBAAsB,CAC3B,EAAA,OAAA,EAAA,CAAA,YAAY,aAJN,sBAAsB,CAAA,EAAA,CAAA,CAAA;iHAO7B,mBAAmB,EAAA,OAAA,EAAA,CAHnB,CAAC,YAAY,CAAC,CAAA,EAAA,CAAA,CAAA;2FAGd,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,sBAAsB,CAAC;oBACtC,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;AAC3B,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
package/fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs CHANGED
@@ -96,10 +96,10 @@ class SdsSideBarComponent {
96
96
  }
97
97
  }
98
98
  SdsSideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
99
- SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
99
+ SdsSideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsSideBarComponent, selector: "sds-side-bar", inputs: { showCloseButton: "showCloseButton", enablePullOutMode: "enablePullOutMode", widthRem: "widthRem", product: "product", autoHideScreenWidth: "autoHideScreenWidth", closeButtonHint: "closeButtonHint", openButtonHint: "openButtonHint" }, usesOnChanges: true, ngImport: i0, template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:1.8rem;width:1.8rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:1.8rem;width:1.8rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.05rem;transition:visibility 0ms linear .18s,opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container .open-side-bar-button fa-icon{margin-left:.05rem}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-.9rem;visibility:hidden;transition:visibility 0s linear,opacity .3s ease-in;opacity:0}:host{display:block}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
100
100
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsSideBarComponent, decorators: [{
101
101
  type: Component,
102
- args: [{ selector: 'sds-side-bar', template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:2.2rem;width:2.2rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:2.2rem;width:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.3rem;transition:visibility 0ms linear .18s;transition:opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-1.1rem;visibility:hidden;transition:visibility 0s linear;transition:opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
102
+ args: [{ selector: 'sds-side-bar', template: "<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>", styles: [".sds-side-bar{transition:.3s;overflow-x:hidden;position:absolute;z-index:10}.sds-side-bar.sds-side-bar-open{position:relative}.sds-side-bar:has(.sds-side-bar-pull-out:hover){width:var(--sds-side-bar-width)!important}.sds-side-bar .sds-side-bar-pull-out{background-color:#f8f9fa}.sds-side-bar-container .sds-side-bar-button-container{position:absolute;z-index:11;height:1.8rem;width:1.8rem;top:.85rem;border-radius:50%;background-color:#fff}.sds-side-bar-container .sds-side-bar-button-container.always-show{visibility:visible;opacity:1}.sds-side-bar-container button{height:1.8rem;width:1.8rem;display:flex;align-items:center;justify-content:center;border:1px solid #CED4DA;border-radius:50%;color:#375d75!important;line-height:1rem}.sds-side-bar-container button:hover{color:#f8f9fa!important}.sds-side-bar-container button .hot-spot{position:absolute;inset:-1rem}.sds-side-bar-container .open-side-bar-button{top:.85rem;right:-2.05rem;transition:visibility 0ms linear .18s,opacity 0ms linear .18s;visibility:visible;opacity:1}.sds-side-bar-container .open-side-bar-button.hidden{visibility:hidden;opacity:0}.sds-side-bar-container .open-side-bar-button fa-icon{margin-left:.05rem}.sds-side-bar-container:hover .close-side-bar-button:not(.hidden){visibility:visible;opacity:1}.sds-side-bar-container .close-side-bar-button{right:-.9rem;visibility:hidden;transition:visibility 0s linear,opacity .3s ease-in;opacity:0}:host{display:block}\n"] }]
103
103
  }], ctorParameters: function () { return []; }, propDecorators: { showCloseButton: [{
104
104
  type: Input
105
105
  }], enablePullOutMode: [{
package/fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs.map CHANGED
@@ -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/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { IconDefinition, faAngleLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\r\nimport { Subject } from 'rxjs';\r\n// import { faSidebar } from '@fortawesome/pro-light-svg-icons';\r\n// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';\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})\r\nexport class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {\r\n\r\n /**\r\n * Define when the hide panel button is shown. \r\n * Default is 'auto' which will only show the button when the users hovers over the panel.\r\n * 'always' will always show the button.\r\n *\r\n * @type {('always' | 'auto')}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public showCloseButton: 'always' | 'auto' = 'auto';\r\n \r\n /**\r\n * Pull out mode will show the side bar as user hovers over the left side of the screen\r\n * When side bar is in pull out mode it will be rendered over the main contents.\r\n *\r\n * @type {boolean}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public enablePullOutMode: boolean = false;\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 = 14;\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 /**\r\n * Define the width of the screen that triggers hiding of the side bar.\r\n * Note that the width is checked at the component creation and not when the screen is resized.\r\n * If user resizes the screen he must manually hide the side bar.\r\n *\r\n * @type {(number | undefined)}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public autoHideScreenWidth: number | undefined = 992;\r\n\r\n /**\r\n * Define the hint of the hide button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public closeButtonHint?: string;\r\n\r\n /**\r\n * Define the hint of the show button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public openButtonHint?: string;\r\n\r\n\r\n public showSideBar = true;\r\n public pullOutSideBar = false; \r\n public caretIcon: IconDefinition = faAngleLeft;\r\n public autoHideActive: boolean = false;\r\n\r\n private screenWidth: number = 0;\r\n private componentInitialized: boolean = false;\r\n\r\n private _checkAutoHide$ = new Subject<void>();\r\n\r\n constructor() {\r\n\r\n this._checkAutoHide$.subscribe(() => {\r\n console.log('check autohide');\r\n if (this.componentInitialized && this.autoHideScreenWidth) {\r\n console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);\r\n\r\n this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;\r\n\r\n console.log('hideSideBar', this.autoHideActive);\r\n\r\n if (this.autoHideActive) {\r\n this.showSideBar = false;\r\n }\r\n }\r\n });\r\n }\r\n ngOnDestroy(): void {\r\n this._checkAutoHide$.unsubscribe();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['autoHideScreenWidthRem']) {\r\n this._checkAutoHide$.next();\r\n }\r\n }\r\n\r\n ngOnInit() { \r\n this.componentInitialized = true;\r\n this.screenWidth = window.innerWidth; \r\n console.log('screenWidth', this.screenWidth);\r\n this._checkAutoHide$.next();\r\n } \r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\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-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/side-bar.module.ts","../../../projects/ngx-sds-components/src/lib/side-bar/spicainternational-ngx-sds-components-src-lib-side-bar.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\r\nimport { IconDefinition, faAngleLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\r\nimport { Subject } from 'rxjs';\r\n// import { faSidebar } from '@fortawesome/pro-light-svg-icons';\r\n// import { IconDefinition, faSidebar, faChevronRight, faGripVertical, faGripLinesVertical, faChevronLeft, faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons';\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})\r\nexport class SdsSideBarComponent implements OnInit, OnChanges, OnDestroy {\r\n\r\n /**\r\n * Define when the hide panel button is shown. \r\n * Default is 'auto' which will only show the button when the users hovers over the panel.\r\n * 'always' will always show the button.\r\n *\r\n * @type {('always' | 'auto')}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public showCloseButton: 'always' | 'auto' = 'auto';\r\n \r\n /**\r\n * Pull out mode will show the side bar as user hovers over the left side of the screen\r\n * When side bar is in pull out mode it will be rendered over the main contents.\r\n *\r\n * @type {boolean}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public enablePullOutMode: boolean = false;\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 = 14;\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 /**\r\n * Define the width of the screen that triggers hiding of the side bar.\r\n * Note that the width is checked at the component creation and not when the screen is resized.\r\n * If user resizes the screen he must manually hide the side bar.\r\n *\r\n * @type {(number | undefined)}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public autoHideScreenWidth: number | undefined = 992;\r\n\r\n /**\r\n * Define the hint of the hide button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public closeButtonHint?: string;\r\n\r\n /**\r\n * Define the hint of the show button.\r\n *\r\n * @type {string}\r\n * @memberof SdsSideBarComponent\r\n */\r\n @Input() public openButtonHint?: string;\r\n\r\n\r\n public showSideBar = true;\r\n public pullOutSideBar = false; \r\n public caretIcon: IconDefinition = faAngleLeft;\r\n public autoHideActive: boolean = false;\r\n\r\n private screenWidth: number = 0;\r\n private componentInitialized: boolean = false;\r\n\r\n private _checkAutoHide$ = new Subject<void>();\r\n\r\n constructor() {\r\n\r\n this._checkAutoHide$.subscribe(() => {\r\n console.log('check autohide');\r\n if (this.componentInitialized && this.autoHideScreenWidth) {\r\n console.log('this.autoHideScreenWidthRem', this.autoHideScreenWidth);\r\n\r\n this.autoHideActive = this.screenWidth < this.autoHideScreenWidth;\r\n\r\n console.log('hideSideBar', this.autoHideActive);\r\n\r\n if (this.autoHideActive) {\r\n this.showSideBar = false;\r\n }\r\n }\r\n });\r\n }\r\n ngOnDestroy(): void {\r\n this._checkAutoHide$.unsubscribe();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['autoHideScreenWidthRem']) {\r\n this._checkAutoHide$.next();\r\n }\r\n }\r\n\r\n ngOnInit() { \r\n this.componentInitialized = true;\r\n this.screenWidth = window.innerWidth; \r\n console.log('screenWidth', this.screenWidth);\r\n this._checkAutoHide$.next();\r\n } \r\n\r\n public toggleSideBar(state?: boolean) {\r\n if (state !== undefined) {\r\n this.showSideBar = state;\r\n } else {\r\n this.showSideBar = !this.showSideBar;\r\n }\r\n } \r\n}\r\n","<div \r\n class=\"vh-100 position-relative sds-side-bar-container\"\r\n [class.sds-side-bar-open]=\"showSideBar\" \r\n >\r\n\r\n <!-- CLOSE SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || showSideBar)\"\r\n class=\"sds-side-bar-button-container close-side-bar-button\"\r\n [class.hidden]=\"!showSideBar\"\r\n [class.always-show]=\"showSideBar && showCloseButton === 'always'\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"closeButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\" \r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <!-- OPEN SIDEBAR -->\r\n <div \r\n *ngIf=\"!pullOutSideBar && (true || !showSideBar)\" \r\n class=\"sds-side-bar-button-container open-side-bar-button\"\r\n [class.hidden]=\"showSideBar\"\r\n >\r\n \r\n <button\r\n class=\"btn btn-outline-primary shadow-sm\"\r\n [title]=\"openButtonHint\"\r\n (click)=\"toggleSideBar()\"\r\n >\r\n <fa-icon \r\n [icon]=\"caretIcon\"\r\n [rotate]=\"180\"\r\n size=\"xs\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"hot-spot\"></div>\r\n\r\n </button>\r\n </div>\r\n\r\n <aside\r\n class=\"sds-side-bar h-100 border-end\"\r\n [class]=\"(product ? 'product-' + product : null)\"\r\n [class.shadow]=\"pullOutSideBar\"\r\n [class.sds-side-bar-open]=\"showSideBar\"\r\n [style.width.rem]=\"(showSideBar || pullOutSideBar) ? widthRem : enablePullOutMode ? 0.75 : 0\"\r\n \r\n (mouseleave)=\"pullOutSideBar = false\"\r\n >\r\n <div \r\n *ngIf=\"enablePullOutMode && !showSideBar && !pullOutSideBar\"\r\n class=\"sds-side-bar-pull-out h-100 position-absolute\" \r\n style=\"width: 0.75rem;\"\r\n (mouseenter)=\"pullOutSideBar = true\"\r\n >\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow-0 h-100\" \r\n [style.width.rem]=\"widthRem\">\r\n\r\n <ng-content></ng-content> \r\n </div>\r\n\r\n </aside>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsSideBarComponent } from './side-bar.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\nconst components = [\r\n SdsSideBarComponent\r\n]\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule, FontAwesomeModule\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsSideBarModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicainternational/ngx-sds-components",
3
- "version": "5.13.0-beta.1",
3
+ "version": "5.13.0-beta.3",
4
4
  "description": "Spica design system angular components.",
5
5
  "peerDependencies": {
6
6
  "@angular/common": ">=13.3.0",
package/src/lib/page-header/page-header.component.d.ts CHANGED
@@ -3,8 +3,9 @@ import * as i0 from "@angular/core";
3
3
  export declare class SdsPageHeaderComponent implements OnInit {
4
4
  titleContent: ElementRef;
5
5
  title: string;
6
+ gap: string;
6
7
  constructor();
7
8
  ngOnInit(): void;
8
9
  static ɵfac: i0.ɵɵFactoryDeclaration<SdsPageHeaderComponent, never>;
9
- static ɵcmp: i0.ɵɵComponentDeclaration<SdsPageHeaderComponent, "sds-page-header", never, { "title": "title"; }, {}, ["titleContent"], ["title", "titleAppendix", "*"]>;
10
+ static ɵcmp: i0.ɵɵComponentDeclaration<SdsPageHeaderComponent, "sds-page-header", never, { "title": "title"; "gap": "gap"; }, {}, ["titleContent"], ["title", "titleAppendix", "*"]>;
10
11
  }