barsa-tiles 1.0.352 → 1.0.353
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.
- package/esm2020/lib/actions-link/actions-link.component.mjs +20 -5
- package/esm2020/lib/news-tile/news-tile.component.mjs +3 -3
- package/esm2020/lib/shellbar/shellbar.component.mjs +2 -2
- package/fesm2015/barsa-tiles.mjs +23 -7
- package/fesm2015/barsa-tiles.mjs.map +1 -1
- package/fesm2020/barsa-tiles.mjs +22 -7
- package/fesm2020/barsa-tiles.mjs.map +1 -1
- package/lib/actions-link/actions-link.component.d.ts +8 -1
- package/lib/barsa-tiles.module.d.ts +2 -1
- package/package.json +1 -1
package/fesm2020/barsa-tiles.mjs
CHANGED
|
@@ -832,17 +832,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
832
832
|
}] });
|
|
833
833
|
|
|
834
834
|
class ActionsLinkComponent extends BaseComponent {
|
|
835
|
+
/**
|
|
836
|
+
*
|
|
837
|
+
*/
|
|
838
|
+
constructor(_cdr) {
|
|
839
|
+
super();
|
|
840
|
+
this._cdr = _cdr;
|
|
841
|
+
}
|
|
835
842
|
ngOnInit() {
|
|
836
843
|
super.ngOnInit();
|
|
837
|
-
this.hide =
|
|
844
|
+
this.hide = this.actionsLink?.length === 0;
|
|
845
|
+
}
|
|
846
|
+
ngOnChanges(changes) {
|
|
847
|
+
super.ngOnChanges(changes);
|
|
848
|
+
const { actionsLink } = changes;
|
|
849
|
+
if (!actionsLink.firstChange) {
|
|
850
|
+
this.hide = actionsLink.currentValue?.length === 0;
|
|
851
|
+
this._cdr.detectChanges();
|
|
852
|
+
}
|
|
838
853
|
}
|
|
839
854
|
}
|
|
840
|
-
ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps:
|
|
841
|
-
ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit" }, host: { properties: { "class.hide": "this.hide" } }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\n *ngFor=\"let actionItem of actionsLink\"\n cdkDrag\n [data]=\"actionItem\"\n [edit]=\"edit\"\n [title]=\"actionItem | tileProp: 'Title'\"\n [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n [footer]=\"actionItem | tileProp: 'Footer'\"\n [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ActionItemComponent, selector: "bt-action-item" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
855
|
+
ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
856
|
+
ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit" }, host: { properties: { "class.hide": "this.hide" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bt-action-item\n *ngFor=\"let actionItem of actionsLink\"\n cdkDrag\n [data]=\"actionItem\"\n [edit]=\"edit\"\n [title]=\"actionItem | tileProp: 'Title'\"\n [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n [footer]=\"actionItem | tileProp: 'Footer'\"\n [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ActionItemComponent, selector: "bt-action-item" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
842
857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, decorators: [{
|
|
843
858
|
type: Component,
|
|
844
859
|
args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\n *ngFor=\"let actionItem of actionsLink\"\n cdkDrag\n [data]=\"actionItem\"\n [edit]=\"edit\"\n [title]=\"actionItem | tileProp: 'Title'\"\n [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n [footer]=\"actionItem | tileProp: 'Footer'\"\n [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
|
|
845
|
-
}], propDecorators: { hide: [{
|
|
860
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hide: [{
|
|
846
861
|
type: HostBinding,
|
|
847
862
|
args: ['class.hide']
|
|
848
863
|
}], actionsLink: [{
|
|
@@ -1619,10 +1634,10 @@ class NewsTileComponent extends BaseBtTileComponent {
|
|
|
1619
1634
|
}
|
|
1620
1635
|
}
|
|
1621
1636
|
NewsTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1622
|
-
NewsTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NewsTileComponent, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\
|
|
1637
|
+
NewsTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NewsTileComponent, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\n [data]=\"data\"\n [type]=\"'launch'\"\n [footerTemplate]=\"newsFooter\"\n [edit]=\"edit\"\n [title]=\"data | tileProp: 'Title':parameters\"\n [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n [footer]=\"data | tileProp: 'Footer':parameters\"\n (hideClick)=\"hideClick.emit()\"\n (renameClick)=\"renameClick.emit()\"\n (click)=\"onTileClick()\"\n>\n <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\n <span>\n {{ activeNews?.Text | bbbTranslate }}\n </span>\n\n <div class=\"wrapper-carousel\">\n <div class=\"cover\"></div>\n <button\n fd-button\n fdType=\"transparent\"\n [glyph]=\"isStop ? 'play' : 'pause'\"\n (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\n ></button>\n <fd-carousel\n carouselIndicatorsOrientation=\"top\"\n [slideTransitionDuration]=\"1000\"\n (slideChange)=\"slideChange($event)\"\n [loop]=\"true\"\n [navigation]=\"false\"\n [navigatorInPageIndicator]=\"false\"\n width=\"100%\"\n >\n <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\n <img\n [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\n />\n </fd-carousel-item>\n </fd-carousel>\n </div>\n </div>\n</bt-tile>\n\n<!-- tile footer-->\n<ng-template #newsFooter>\n <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\n <ng-container *ngIf=\"twoColumn; else oneColumn\">\n <div fd-tile-section>\n <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n </div>\n <div fd-tile-section>\n <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\n </div>\n </ng-container>\n <ng-template #oneColumn>\n <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n </ng-template>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3$2.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "leftNavigationBtnLabel", "rightNavigationBtnLabel", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i3$2.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1623
1638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, decorators: [{
|
|
1624
1639
|
type: Component,
|
|
1625
|
-
args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\
|
|
1640
|
+
args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n [data]=\"data\"\n [type]=\"'launch'\"\n [footerTemplate]=\"newsFooter\"\n [edit]=\"edit\"\n [title]=\"data | tileProp: 'Title':parameters\"\n [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n [footer]=\"data | tileProp: 'Footer':parameters\"\n (hideClick)=\"hideClick.emit()\"\n (renameClick)=\"renameClick.emit()\"\n (click)=\"onTileClick()\"\n>\n <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\n <span>\n {{ activeNews?.Text | bbbTranslate }}\n </span>\n\n <div class=\"wrapper-carousel\">\n <div class=\"cover\"></div>\n <button\n fd-button\n fdType=\"transparent\"\n [glyph]=\"isStop ? 'play' : 'pause'\"\n (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\n ></button>\n <fd-carousel\n carouselIndicatorsOrientation=\"top\"\n [slideTransitionDuration]=\"1000\"\n (slideChange)=\"slideChange($event)\"\n [loop]=\"true\"\n [navigation]=\"false\"\n [navigatorInPageIndicator]=\"false\"\n width=\"100%\"\n >\n <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\n <img\n [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\n />\n </fd-carousel-item>\n </fd-carousel>\n </div>\n </div>\n</bt-tile>\n\n<!-- tile footer-->\n<ng-template #newsFooter>\n <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\n <ng-container *ngIf=\"twoColumn; else oneColumn\">\n <div fd-tile-section>\n <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n </div>\n <div fd-tile-section>\n <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\n </div>\n </ng-container>\n <ng-template #oneColumn>\n <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n </ng-template>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"] }]
|
|
1626
1641
|
}], propDecorators: { carouselComponent: [{
|
|
1627
1642
|
type: ViewChild,
|
|
1628
1643
|
args: [CarouselComponent]
|
|
@@ -2394,7 +2409,7 @@ class ShellbarComponent extends BaseComponent {
|
|
|
2394
2409
|
if (!this.shellbarData) {
|
|
2395
2410
|
return '';
|
|
2396
2411
|
}
|
|
2397
|
-
if (this.deviceSize === 's') {
|
|
2412
|
+
if (this.deviceSize === 's' && this.shellbarData.MobileSubtitle) {
|
|
2398
2413
|
return this.shellbarData.MobileSubtitle
|
|
2399
2414
|
? `${this.shellbarData.MobileSubtitle} ${typeof this.shellbarData?.calcSubtitle === 'string' ? this.shellbarData.calcSubtitle : ''}`
|
|
2400
2415
|
: '';
|