@fundamental-ngx/core 0.61.2-rc.9 → 0.61.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.
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +2 -3
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +4 -6
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +13 -11
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +7 -5
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-calendar.mjs +31 -35
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-carousel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-combobox.mjs +3 -5
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime.mjs +13 -7
- package/fesm2022/fundamental-ngx-core-datetime.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +16 -11
- package/fesm2022/fundamental-ngx-core-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-form.mjs +1 -1
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-info-label.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-info-label.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-inline-help.mjs +65 -59
- package/fesm2022/fundamental-ngx-core-inline-help.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-link.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-menu.mjs +5 -5
- package/fesm2022/fundamental-ngx-core-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-box.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-message-box.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +49 -44
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +20 -25
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +8 -6
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +21 -22
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +16 -13
- package/fesm2022/fundamental-ngx-core-notification.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-number.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-number.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-status.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-object-status.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +14 -11
- package/fesm2022/fundamental-ngx-core-pagination.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-popover.mjs +9 -3
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +7 -4
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +11 -10
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +6 -7
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +6 -6
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-slider.mjs +6 -6
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-split-button.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-split-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-step-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-step-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-switch.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tabs.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-text.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time-picker.mjs +29 -4
- package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-token.mjs +15 -12
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +3 -5
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-tree.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +4 -4
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +3 -5
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +2 -2
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/package.json +3 -3
- package/types/fundamental-ngx-core-breadcrumb.d.ts +5 -5
- package/types/fundamental-ngx-core-busy-indicator.d.ts +3 -3
- package/types/fundamental-ngx-core-combobox.d.ts +2 -4
- package/types/fundamental-ngx-core-datetime.d.ts +5 -1
- package/types/fundamental-ngx-core-dialog.d.ts +1 -1
- package/types/fundamental-ngx-core-dynamic-page.d.ts +2 -1
- package/types/fundamental-ngx-core-inline-help.d.ts +45 -24
- package/types/fundamental-ngx-core-menu.d.ts +0 -2
- package/types/fundamental-ngx-core-message-box.d.ts +1 -1
- package/types/fundamental-ngx-core-message-strip.d.ts +12 -3
- package/types/fundamental-ngx-core-multi-combobox.d.ts +1 -1
- package/types/fundamental-ngx-core-nested-list.d.ts +10 -10
- package/types/fundamental-ngx-core-notification.d.ts +7 -5
- package/types/fundamental-ngx-core-pagination.d.ts +4 -3
- package/types/fundamental-ngx-core-rating-indicator.d.ts +2 -3
- package/types/fundamental-ngx-core-segmented-button.d.ts +5 -3
- package/types/fundamental-ngx-core-slider.d.ts +1 -1
- package/types/fundamental-ngx-core-time-picker.d.ts +17 -1
- package/types/fundamental-ngx-core-token.d.ts +4 -4
|
@@ -1077,13 +1077,13 @@ class CarouselComponent {
|
|
|
1077
1077
|
return slides;
|
|
1078
1078
|
}
|
|
1079
1079
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: CarouselService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CarouselComponent, isStandalone: true, selector: "fd-carousel", inputs: { id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", pageIndicatorsOrientation: "pageIndicatorsOrientation", height: "height", width: "width", loop: "loop", navigation: "navigation", navigatorInPageIndicator: "navigatorInPageIndicator", numericIndicator: "numericIndicator", pageIndicatorContainer: "pageIndicatorContainer", pageIndicator: "pageIndicator", resourceStrings: "resourceStrings", slideTransitionDuration: "slideTransitionDuration", swipeEnabled: "swipeEnabled", vertical: "vertical", noPaginationContainerBorder: "noPaginationContainerBorder", contentBackground: "contentBackground", pageIndicatorBackground: "pageIndicatorBackground", visibleSlidesCount: "visibleSlidesCount" }, outputs: { slideChange: "slideChange" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" }, properties: { "style.width": "width", "attr.id": "this.id" } }, providers: [CarouselService], queries: [{ propertyName: "slides", predicate: CarouselItemComponent, descendants: true }], viewQueries: [{ propertyName: "slideContainer", first: true, predicate: ["slideContainer"], descendants: true }, { propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section\n class=\"fd-carousel\"\n [class.fd-carousel--no-navigation]=\"!navigation\"\n tabindex=\"0\"\n [style.height]=\"height\"\n [style.width]=\"width\"\n [attr.dir]=\"dir()\"\n role=\"listbox\"\n aria-roledescription=\"Carousel\"\n [attr.aria-activedescendant]=\"ariaActivedescendant\"\n #carouselContainer\n (click)=\"_focus()\"\n>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'top') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div\n class=\"fd-carousel__content\"\n [class.fd-carousel__content--horizontal]=\"!vertical\"\n [ngClass]=\"'fd-carousel__content--' + contentBackground\"\n [style.width]=\"_contentSizePx\"\n >\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <div #slideContainer class=\"fd-carousel__slides\">\n <ng-content></ng-content>\n </div>\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'bottom') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div [style.display]=\"'none'\" role=\"region\" [attr.id]=\"id + '-accessibility'\" aria-live=\"polite\" dir=\"ltr\">\n {{ screenReaderLabel }}\n </div>\n</section>\n<ng-template #pageIndicatorContainer>\n <div\n class=\"fd-carousel__page-indicator-container\"\n [class.fd-carousel__page-indicator-container--no-border]=\"noPaginationContainerBorder\"\n [ngClass]=\"'fd-carousel__page-indicator-container--' + pageIndicatorBackground\"\n >\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <ng-template [ngTemplateOutlet]=\"pageIndicators\"> </ng-template>\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n</ng-template>\n<ng-template #pageIndicators>\n @if (numericIndicator) {\n <div class=\"fd-carousel__page-indicators\">\n @if (pageIndicator) {\n <div class=\"fd-carousel__text\" dir=\"ltr\">\n {{ getPageIndicatorLabel }}\n </div>\n }\n </div>\n }\n @if (!numericIndicator && _showNavigationButtonInPageIndicatorContainer) {\n <div class=\"fd-carousel__page-indicators\" [attr.dir]=\"dir()\">\n @if (pageIndicator) {\n @for (item of pageIndicatorsCountArray; track item; let i = $index) {\n <span\n role=\"img\"\n [attr.aria-label]=\"\n (\n 'coreCarousel.pageIndicatorLabel'\n | fdTranslate: { itemNum: i + 1, totalNum: totalSlides }\n )()\n \"\n class=\"fd-carousel__page-indicator\"\n [class.fd-carousel__page-indicator--active]=\"i === currentActiveSlidesStartIndex\"\n ></span>\n }\n }\n </div>\n }\n</ng-template>\n<ng-template #buttonLeft>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--left]=\"!vertical\"\n [class.fd-carousel__button--up]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"('coreCarousel.leftNavigationBtnLabel' | fdTranslate)()\"\n (click)=\"previous(); $event.stopPropagation()\"\n [disabled]=\"leftButtonDisabled\"\n [attr.title]=\"('coreCarousel.leftNavigationBtnLabel' | fdTranslate)()\"\n [glyph]=\"vertical ? 'slim-arrow-up' : 'slim-arrow-left'\"\n ></button>\n</ng-template>\n<ng-template #buttonRight>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--right]=\"!vertical\"\n [class.fd-carousel__button--down]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"('coreCarousel.rightNavigationBtnLabel' | fdTranslate)()\"\n (click)=\"next(); $event.stopPropagation()\"\n [disabled]=\"rightButtonDisabled\"\n [attr.title]=\"('coreCarousel.rightNavigationBtnLabel' | fdTranslate)()\"\n [glyph]=\"vertical ? 'slim-arrow-down' : 'slim-arrow-right'\"\n ></button>\n</ng-template>\n", styles: [".fd-carousel{--fdCarousel_Button_Display:block;--fdCarousel_Content_Background:var(--sapBackgroundColor);--fdCarousel_Page_Indicator_Margin:var(--fdCarousel_Dot_Margin);--fdCarousel_Page_Indicator_Size:var(--fdCarousel_Dot_Size);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Background);--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Border);--fdCarousel_Page_Indicator_Container_Background:var(--sapPageFooter_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:100%;min-width:15.5rem;width:100%}.fd-carousel:after,.fd-carousel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel.is-focus,.fd-carousel:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth)}.fd-carousel.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:block}.fd-carousel .fd-carousel__button+.fd-carousel__button{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-carousel__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-ms-flex-preferred-size:100%;background:var(--fdCarousel_Content_Background);flex-basis:100%;overflow:hidden;position:relative}.fd-carousel__content:after,.fd-carousel__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none;-webkit-box-shadow:var(--sapContent_Shadow0);box-shadow:var(--sapContent_Shadow0);margin-block:0;margin-inline:0;position:absolute}.fd-carousel__content .fd-carousel__button--left,.fd-carousel__content .fd-carousel__button--right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fd-carousel__content .fd-carousel__button--down,.fd-carousel__content .fd-carousel__button--up{left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.fd-carousel__content .fd-carousel__button--down[dir=rtl]>[class*=sap-icon],.fd-carousel__content .fd-carousel__button--up[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--down>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--up>[class*=sap-icon]{-webkit-transform:rotate(0deg);transform:rotate(0)}.fd-carousel__content .fd-carousel__button--left{left:.5rem}.fd-carousel__content .fd-carousel__button--left[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--left{left:auto;right:.5rem}.fd-carousel__content .fd-carousel__button--right{right:.5rem}.fd-carousel__content .fd-carousel__button--right[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--right{left:.5rem;right:auto}.fd-carousel__content .fd-carousel__button--up{top:.5rem}.fd-carousel__content .fd-carousel__button--down{bottom:.5rem}.fd-carousel__content .fd-carousel__item img{height:auto;min-width:100%}.fd-carousel__content--horizontal .fd-carousel__slides{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y;width:100%}.fd-carousel__content--horizontal .fd-carousel__item img{min-height:100%;min-width:auto;width:auto}.fd-carousel__content--solid{--fdCarousel_Content_Background:var(--sapGroup_ContentBackground)}.fd-carousel__content--transparent{--fdCarousel_Content_Background:transparent}.fd-carousel__slides{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;padding-block:0;padding-inline:0;-ms-touch-action:pan-x;touch-action:pan-x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--fdMessage_Page_Container_Corner_Radius:0}.fd-carousel__slides:after,.fd-carousel__slides:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;height:100%;line-height:0}.fd-carousel__item:after,.fd-carousel__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item--active{display:block}.fd-carousel__item img{pointer-events:none}.fd-carousel__page-indicator-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdCarousel_Page_Indicator_Container_Background);border-top:var(--fdCarousel_Pagination_Border);max-height:3.5rem;min-height:2.75rem;padding-block:.375rem;padding-inline:.5rem}.fd-carousel__page-indicator-container:after,.fd-carousel__page-indicator-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator-container:first-child{border-bottom:var(--fdCarousel_Pagination_Border);border-top:none}.fd-carousel__page-indicator-container--translucent{--fdCarousel_Page_Indicator_Container_Background:var(--sapBackgroundColor)}.fd-carousel__page-indicator-container--transparent{--fdCarousel_Page_Indicator_Container_Background:transparent}.fd-carousel__page-indicator-container--no-border{border-top-color:transparent}.fd-carousel__page-indicator-container--no-border:first-child{border-bottom-color:transparent;border-top:none}.fd-carousel__page-indicators{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:9rem;padding-block:.5rem;padding-inline:.5rem}.fd-carousel__page-indicators:after,.fd-carousel__page-indicators:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator{background-color:var(--fdCarousel_Page_Indicator_Background_Color);border:0;border:var(--fdCarousel_Page_Indicator_Border);border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCarousel_Page_Indicator_Size);line-height:normal;list-style-type:none;margin-block:0;margin-inline:0;margin-inline:var(--fdCarousel_Page_Indicator_Margin);max-height:var(--fdCarousel_Page_Indicator_Size);max-width:var(--fdCarousel_Page_Indicator_Size);min-height:var(--fdCarousel_Page_Indicator_Size);min-width:var(--fdCarousel_Page_Indicator_Size);padding-block:0;padding-inline:0;width:var(--fdCarousel_Page_Indicator_Size)}.fd-carousel__page-indicator:after,.fd-carousel__page-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator--active{--fdCarousel_Page_Indicator_Size:.5rem;--fdCarousel_Page_Indicator_Margin:.25rem;--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Selected_Border);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Selected_Background)}.fd-carousel__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapPageFooter_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-align:center;text-overflow:ellipsis;white-space:nowrap}.fd-carousel__text:after,.fd-carousel__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel .fd-carousel__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;display:var(--fdCarousel_Button_Display);height:2.125rem;margin-block:.25rem;margin-inline:.25rem;max-height:2.125rem;max-width:2.125rem;min-height:2.125rem;min-width:2.125rem;padding-block:0;padding-inline:0;width:2.125rem}.fd-carousel .fd-carousel__button:before{inset:-.25rem;width:auto}.fd-carousel .fd-carousel__button[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel .fd-carousel__button>[class*=sap-icon]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-carousel .fd-carousel__button.is-focus,.fd-carousel .fd-carousel__button:focus{z-index:5}.fd-carousel .fd-carousel__button.is-focus:after,.fd-carousel .fd-carousel__button:focus:after{--fdButton_Focus_Border_Radius:50%}.fd-carousel--no-navigation .fd-carousel__button,.fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none}.fd-carousel__item fd-busy-indicator{display:block;height:100%;width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/carousel.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1080
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CarouselComponent, isStandalone: true, selector: "fd-carousel", inputs: { id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", pageIndicatorsOrientation: "pageIndicatorsOrientation", height: "height", width: "width", loop: "loop", navigation: "navigation", navigatorInPageIndicator: "navigatorInPageIndicator", numericIndicator: "numericIndicator", pageIndicatorContainer: "pageIndicatorContainer", pageIndicator: "pageIndicator", resourceStrings: "resourceStrings", slideTransitionDuration: "slideTransitionDuration", swipeEnabled: "swipeEnabled", vertical: "vertical", noPaginationContainerBorder: "noPaginationContainerBorder", contentBackground: "contentBackground", pageIndicatorBackground: "pageIndicatorBackground", visibleSlidesCount: "visibleSlidesCount" }, outputs: { slideChange: "slideChange" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" }, properties: { "style.width": "width", "attr.id": "this.id" } }, providers: [CarouselService], queries: [{ propertyName: "slides", predicate: CarouselItemComponent, descendants: true }], viewQueries: [{ propertyName: "slideContainer", first: true, predicate: ["slideContainer"], descendants: true }, { propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section\n class=\"fd-carousel\"\n [class.fd-carousel--no-navigation]=\"!navigation\"\n tabindex=\"0\"\n [style.height]=\"height\"\n [style.width]=\"width\"\n [attr.dir]=\"dir()\"\n role=\"listbox\"\n aria-roledescription=\"Carousel\"\n [attr.aria-activedescendant]=\"ariaActivedescendant\"\n #carouselContainer\n (click)=\"_focus()\"\n>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'top') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div\n class=\"fd-carousel__content\"\n [class.fd-carousel__content--horizontal]=\"!vertical\"\n [ngClass]=\"'fd-carousel__content--' + contentBackground\"\n [style.width]=\"_contentSizePx\"\n >\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <div #slideContainer class=\"fd-carousel__slides\">\n <ng-content></ng-content>\n </div>\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'bottom') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div [style.display]=\"'none'\" role=\"region\" [attr.id]=\"id + '-accessibility'\" aria-live=\"polite\" dir=\"ltr\">\n {{ screenReaderLabel }}\n </div>\n</section>\n<ng-template #pageIndicatorContainer>\n <div\n class=\"fd-carousel__page-indicator-container\"\n [class.fd-carousel__page-indicator-container--no-border]=\"noPaginationContainerBorder\"\n [ngClass]=\"'fd-carousel__page-indicator-container--' + pageIndicatorBackground\"\n >\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <ng-template [ngTemplateOutlet]=\"pageIndicators\"> </ng-template>\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n</ng-template>\n<ng-template #pageIndicators>\n @if (numericIndicator) {\n <div class=\"fd-carousel__page-indicators\">\n @if (pageIndicator) {\n <div class=\"fd-carousel__text\" dir=\"ltr\">\n {{ getPageIndicatorLabel }}\n </div>\n }\n </div>\n }\n @if (!numericIndicator && _showNavigationButtonInPageIndicatorContainer) {\n <div class=\"fd-carousel__page-indicators\" [attr.dir]=\"dir()\">\n @if (pageIndicator) {\n @for (item of pageIndicatorsCountArray; track item; let i = $index) {\n <span\n role=\"img\"\n [attr.aria-label]=\"\n 'coreCarousel.pageIndicatorLabel' | fdTranslate: { itemNum: i + 1, totalNum: totalSlides }\n \"\n class=\"fd-carousel__page-indicator\"\n [class.fd-carousel__page-indicator--active]=\"i === currentActiveSlidesStartIndex\"\n ></span>\n }\n }\n </div>\n }\n</ng-template>\n<ng-template #buttonLeft>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--left]=\"!vertical\"\n [class.fd-carousel__button--up]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n (click)=\"previous(); $event.stopPropagation()\"\n [disabled]=\"leftButtonDisabled\"\n [attr.title]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n [glyph]=\"vertical ? 'slim-arrow-up' : 'slim-arrow-left'\"\n ></button>\n</ng-template>\n<ng-template #buttonRight>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--right]=\"!vertical\"\n [class.fd-carousel__button--down]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n (click)=\"next(); $event.stopPropagation()\"\n [disabled]=\"rightButtonDisabled\"\n [attr.title]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n [glyph]=\"vertical ? 'slim-arrow-down' : 'slim-arrow-right'\"\n ></button>\n</ng-template>\n", styles: [".fd-carousel{--fdCarousel_Button_Display:block;--fdCarousel_Content_Background:var(--sapBackgroundColor);--fdCarousel_Page_Indicator_Margin:var(--fdCarousel_Dot_Margin);--fdCarousel_Page_Indicator_Size:var(--fdCarousel_Dot_Size);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Background);--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Border);--fdCarousel_Page_Indicator_Container_Background:var(--sapPageFooter_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:100%;min-width:15.5rem;width:100%}.fd-carousel:after,.fd-carousel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel.is-focus,.fd-carousel:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth)}.fd-carousel.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:block}.fd-carousel .fd-carousel__button+.fd-carousel__button{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-carousel__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-ms-flex-preferred-size:100%;background:var(--fdCarousel_Content_Background);flex-basis:100%;overflow:hidden;position:relative}.fd-carousel__content:after,.fd-carousel__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none;-webkit-box-shadow:var(--sapContent_Shadow0);box-shadow:var(--sapContent_Shadow0);margin-block:0;margin-inline:0;position:absolute}.fd-carousel__content .fd-carousel__button--left,.fd-carousel__content .fd-carousel__button--right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fd-carousel__content .fd-carousel__button--down,.fd-carousel__content .fd-carousel__button--up{left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.fd-carousel__content .fd-carousel__button--down[dir=rtl]>[class*=sap-icon],.fd-carousel__content .fd-carousel__button--up[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--down>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--up>[class*=sap-icon]{-webkit-transform:rotate(0deg);transform:rotate(0)}.fd-carousel__content .fd-carousel__button--left{left:.5rem}.fd-carousel__content .fd-carousel__button--left[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--left{left:auto;right:.5rem}.fd-carousel__content .fd-carousel__button--right{right:.5rem}.fd-carousel__content .fd-carousel__button--right[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--right{left:.5rem;right:auto}.fd-carousel__content .fd-carousel__button--up{top:.5rem}.fd-carousel__content .fd-carousel__button--down{bottom:.5rem}.fd-carousel__content .fd-carousel__item img{height:auto;min-width:100%}.fd-carousel__content--horizontal .fd-carousel__slides{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y;width:100%}.fd-carousel__content--horizontal .fd-carousel__item img{min-height:100%;min-width:auto;width:auto}.fd-carousel__content--solid{--fdCarousel_Content_Background:var(--sapGroup_ContentBackground)}.fd-carousel__content--transparent{--fdCarousel_Content_Background:transparent}.fd-carousel__slides{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;padding-block:0;padding-inline:0;-ms-touch-action:pan-x;touch-action:pan-x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--fdMessage_Page_Container_Corner_Radius:0}.fd-carousel__slides:after,.fd-carousel__slides:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;height:100%;line-height:0}.fd-carousel__item:after,.fd-carousel__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item--active{display:block}.fd-carousel__item img{pointer-events:none}.fd-carousel__page-indicator-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdCarousel_Page_Indicator_Container_Background);border-top:var(--fdCarousel_Pagination_Border);max-height:3.5rem;min-height:2.75rem;padding-block:.375rem;padding-inline:.5rem}.fd-carousel__page-indicator-container:after,.fd-carousel__page-indicator-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator-container:first-child{border-bottom:var(--fdCarousel_Pagination_Border);border-top:none}.fd-carousel__page-indicator-container--translucent{--fdCarousel_Page_Indicator_Container_Background:var(--sapBackgroundColor)}.fd-carousel__page-indicator-container--transparent{--fdCarousel_Page_Indicator_Container_Background:transparent}.fd-carousel__page-indicator-container--no-border{border-top-color:transparent}.fd-carousel__page-indicator-container--no-border:first-child{border-bottom-color:transparent;border-top:none}.fd-carousel__page-indicators{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:9rem;padding-block:.5rem;padding-inline:.5rem}.fd-carousel__page-indicators:after,.fd-carousel__page-indicators:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator{background-color:var(--fdCarousel_Page_Indicator_Background_Color);border:0;border:var(--fdCarousel_Page_Indicator_Border);border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCarousel_Page_Indicator_Size);line-height:normal;list-style-type:none;margin-block:0;margin-inline:0;margin-inline:var(--fdCarousel_Page_Indicator_Margin);max-height:var(--fdCarousel_Page_Indicator_Size);max-width:var(--fdCarousel_Page_Indicator_Size);min-height:var(--fdCarousel_Page_Indicator_Size);min-width:var(--fdCarousel_Page_Indicator_Size);padding-block:0;padding-inline:0;width:var(--fdCarousel_Page_Indicator_Size)}.fd-carousel__page-indicator:after,.fd-carousel__page-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator--active{--fdCarousel_Page_Indicator_Size:.5rem;--fdCarousel_Page_Indicator_Margin:.25rem;--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Selected_Border);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Selected_Background)}.fd-carousel__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapPageFooter_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-align:center;text-overflow:ellipsis;white-space:nowrap}.fd-carousel__text:after,.fd-carousel__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel .fd-carousel__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;display:var(--fdCarousel_Button_Display);height:2.125rem;margin-block:.25rem;margin-inline:.25rem;max-height:2.125rem;max-width:2.125rem;min-height:2.125rem;min-width:2.125rem;padding-block:0;padding-inline:0;width:2.125rem}.fd-carousel .fd-carousel__button:before{inset:-.25rem;width:auto}.fd-carousel .fd-carousel__button[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel .fd-carousel__button>[class*=sap-icon]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-carousel .fd-carousel__button.is-focus,.fd-carousel .fd-carousel__button:focus{z-index:5}.fd-carousel .fd-carousel__button.is-focus:after,.fd-carousel .fd-carousel__button:focus:after{--fdButton_Focus_Border_Radius:50%}.fd-carousel--no-navigation .fd-carousel__button,.fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none}.fd-carousel__item fd-busy-indicator{display:block;height:100%;width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/carousel.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1081
1081
|
}
|
|
1082
1082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
1083
1083
|
type: Component,
|
|
1084
1084
|
args: [{ selector: 'fd-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CarouselService], host: {
|
|
1085
1085
|
'[style.width]': 'width'
|
|
1086
|
-
}, imports: [NgTemplateOutlet, NgClass, ButtonComponent, FdTranslatePipe], template: "<section\n class=\"fd-carousel\"\n [class.fd-carousel--no-navigation]=\"!navigation\"\n tabindex=\"0\"\n [style.height]=\"height\"\n [style.width]=\"width\"\n [attr.dir]=\"dir()\"\n role=\"listbox\"\n aria-roledescription=\"Carousel\"\n [attr.aria-activedescendant]=\"ariaActivedescendant\"\n #carouselContainer\n (click)=\"_focus()\"\n>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'top') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div\n class=\"fd-carousel__content\"\n [class.fd-carousel__content--horizontal]=\"!vertical\"\n [ngClass]=\"'fd-carousel__content--' + contentBackground\"\n [style.width]=\"_contentSizePx\"\n >\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <div #slideContainer class=\"fd-carousel__slides\">\n <ng-content></ng-content>\n </div>\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'bottom') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div [style.display]=\"'none'\" role=\"region\" [attr.id]=\"id + '-accessibility'\" aria-live=\"polite\" dir=\"ltr\">\n {{ screenReaderLabel }}\n </div>\n</section>\n<ng-template #pageIndicatorContainer>\n <div\n class=\"fd-carousel__page-indicator-container\"\n [class.fd-carousel__page-indicator-container--no-border]=\"noPaginationContainerBorder\"\n [ngClass]=\"'fd-carousel__page-indicator-container--' + pageIndicatorBackground\"\n >\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <ng-template [ngTemplateOutlet]=\"pageIndicators\"> </ng-template>\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n</ng-template>\n<ng-template #pageIndicators>\n @if (numericIndicator) {\n <div class=\"fd-carousel__page-indicators\">\n @if (pageIndicator) {\n <div class=\"fd-carousel__text\" dir=\"ltr\">\n {{ getPageIndicatorLabel }}\n </div>\n }\n </div>\n }\n @if (!numericIndicator && _showNavigationButtonInPageIndicatorContainer) {\n <div class=\"fd-carousel__page-indicators\" [attr.dir]=\"dir()\">\n @if (pageIndicator) {\n @for (item of pageIndicatorsCountArray; track item; let i = $index) {\n <span\n role=\"img\"\n [attr.aria-label]=\"\n (\n 'coreCarousel.pageIndicatorLabel'\n | fdTranslate: { itemNum: i + 1, totalNum: totalSlides }\n )()\n \"\n class=\"fd-carousel__page-indicator\"\n [class.fd-carousel__page-indicator--active]=\"i === currentActiveSlidesStartIndex\"\n ></span>\n }\n }\n </div>\n }\n</ng-template>\n<ng-template #buttonLeft>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--left]=\"!vertical\"\n [class.fd-carousel__button--up]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"('coreCarousel.leftNavigationBtnLabel' | fdTranslate)()\"\n (click)=\"previous(); $event.stopPropagation()\"\n [disabled]=\"leftButtonDisabled\"\n [attr.title]=\"('coreCarousel.leftNavigationBtnLabel' | fdTranslate)()\"\n [glyph]=\"vertical ? 'slim-arrow-up' : 'slim-arrow-left'\"\n ></button>\n</ng-template>\n<ng-template #buttonRight>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--right]=\"!vertical\"\n [class.fd-carousel__button--down]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"('coreCarousel.rightNavigationBtnLabel' | fdTranslate)()\"\n (click)=\"next(); $event.stopPropagation()\"\n [disabled]=\"rightButtonDisabled\"\n [attr.title]=\"('coreCarousel.rightNavigationBtnLabel' | fdTranslate)()\"\n [glyph]=\"vertical ? 'slim-arrow-down' : 'slim-arrow-right'\"\n ></button>\n</ng-template>\n", styles: [".fd-carousel{--fdCarousel_Button_Display:block;--fdCarousel_Content_Background:var(--sapBackgroundColor);--fdCarousel_Page_Indicator_Margin:var(--fdCarousel_Dot_Margin);--fdCarousel_Page_Indicator_Size:var(--fdCarousel_Dot_Size);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Background);--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Border);--fdCarousel_Page_Indicator_Container_Background:var(--sapPageFooter_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:100%;min-width:15.5rem;width:100%}.fd-carousel:after,.fd-carousel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel.is-focus,.fd-carousel:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth)}.fd-carousel.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:block}.fd-carousel .fd-carousel__button+.fd-carousel__button{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-carousel__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-ms-flex-preferred-size:100%;background:var(--fdCarousel_Content_Background);flex-basis:100%;overflow:hidden;position:relative}.fd-carousel__content:after,.fd-carousel__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none;-webkit-box-shadow:var(--sapContent_Shadow0);box-shadow:var(--sapContent_Shadow0);margin-block:0;margin-inline:0;position:absolute}.fd-carousel__content .fd-carousel__button--left,.fd-carousel__content .fd-carousel__button--right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fd-carousel__content .fd-carousel__button--down,.fd-carousel__content .fd-carousel__button--up{left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.fd-carousel__content .fd-carousel__button--down[dir=rtl]>[class*=sap-icon],.fd-carousel__content .fd-carousel__button--up[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--down>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--up>[class*=sap-icon]{-webkit-transform:rotate(0deg);transform:rotate(0)}.fd-carousel__content .fd-carousel__button--left{left:.5rem}.fd-carousel__content .fd-carousel__button--left[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--left{left:auto;right:.5rem}.fd-carousel__content .fd-carousel__button--right{right:.5rem}.fd-carousel__content .fd-carousel__button--right[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--right{left:.5rem;right:auto}.fd-carousel__content .fd-carousel__button--up{top:.5rem}.fd-carousel__content .fd-carousel__button--down{bottom:.5rem}.fd-carousel__content .fd-carousel__item img{height:auto;min-width:100%}.fd-carousel__content--horizontal .fd-carousel__slides{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y;width:100%}.fd-carousel__content--horizontal .fd-carousel__item img{min-height:100%;min-width:auto;width:auto}.fd-carousel__content--solid{--fdCarousel_Content_Background:var(--sapGroup_ContentBackground)}.fd-carousel__content--transparent{--fdCarousel_Content_Background:transparent}.fd-carousel__slides{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;padding-block:0;padding-inline:0;-ms-touch-action:pan-x;touch-action:pan-x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--fdMessage_Page_Container_Corner_Radius:0}.fd-carousel__slides:after,.fd-carousel__slides:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;height:100%;line-height:0}.fd-carousel__item:after,.fd-carousel__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item--active{display:block}.fd-carousel__item img{pointer-events:none}.fd-carousel__page-indicator-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdCarousel_Page_Indicator_Container_Background);border-top:var(--fdCarousel_Pagination_Border);max-height:3.5rem;min-height:2.75rem;padding-block:.375rem;padding-inline:.5rem}.fd-carousel__page-indicator-container:after,.fd-carousel__page-indicator-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator-container:first-child{border-bottom:var(--fdCarousel_Pagination_Border);border-top:none}.fd-carousel__page-indicator-container--translucent{--fdCarousel_Page_Indicator_Container_Background:var(--sapBackgroundColor)}.fd-carousel__page-indicator-container--transparent{--fdCarousel_Page_Indicator_Container_Background:transparent}.fd-carousel__page-indicator-container--no-border{border-top-color:transparent}.fd-carousel__page-indicator-container--no-border:first-child{border-bottom-color:transparent;border-top:none}.fd-carousel__page-indicators{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:9rem;padding-block:.5rem;padding-inline:.5rem}.fd-carousel__page-indicators:after,.fd-carousel__page-indicators:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator{background-color:var(--fdCarousel_Page_Indicator_Background_Color);border:0;border:var(--fdCarousel_Page_Indicator_Border);border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCarousel_Page_Indicator_Size);line-height:normal;list-style-type:none;margin-block:0;margin-inline:0;margin-inline:var(--fdCarousel_Page_Indicator_Margin);max-height:var(--fdCarousel_Page_Indicator_Size);max-width:var(--fdCarousel_Page_Indicator_Size);min-height:var(--fdCarousel_Page_Indicator_Size);min-width:var(--fdCarousel_Page_Indicator_Size);padding-block:0;padding-inline:0;width:var(--fdCarousel_Page_Indicator_Size)}.fd-carousel__page-indicator:after,.fd-carousel__page-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator--active{--fdCarousel_Page_Indicator_Size:.5rem;--fdCarousel_Page_Indicator_Margin:.25rem;--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Selected_Border);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Selected_Background)}.fd-carousel__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapPageFooter_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-align:center;text-overflow:ellipsis;white-space:nowrap}.fd-carousel__text:after,.fd-carousel__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel .fd-carousel__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;display:var(--fdCarousel_Button_Display);height:2.125rem;margin-block:.25rem;margin-inline:.25rem;max-height:2.125rem;max-width:2.125rem;min-height:2.125rem;min-width:2.125rem;padding-block:0;padding-inline:0;width:2.125rem}.fd-carousel .fd-carousel__button:before{inset:-.25rem;width:auto}.fd-carousel .fd-carousel__button[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel .fd-carousel__button>[class*=sap-icon]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-carousel .fd-carousel__button.is-focus,.fd-carousel .fd-carousel__button:focus{z-index:5}.fd-carousel .fd-carousel__button.is-focus:after,.fd-carousel .fd-carousel__button:focus:after{--fdButton_Focus_Border_Radius:50%}.fd-carousel--no-navigation .fd-carousel__button,.fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none}.fd-carousel__item fd-busy-indicator{display:block;height:100%;width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/carousel.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
1086
|
+
}, imports: [NgTemplateOutlet, NgClass, ButtonComponent, FdTranslatePipe], template: "<section\n class=\"fd-carousel\"\n [class.fd-carousel--no-navigation]=\"!navigation\"\n tabindex=\"0\"\n [style.height]=\"height\"\n [style.width]=\"width\"\n [attr.dir]=\"dir()\"\n role=\"listbox\"\n aria-roledescription=\"Carousel\"\n [attr.aria-activedescendant]=\"ariaActivedescendant\"\n #carouselContainer\n (click)=\"_focus()\"\n>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'top') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div\n class=\"fd-carousel__content\"\n [class.fd-carousel__content--horizontal]=\"!vertical\"\n [ngClass]=\"'fd-carousel__content--' + contentBackground\"\n [style.width]=\"_contentSizePx\"\n >\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <div #slideContainer class=\"fd-carousel__slides\">\n <ng-content></ng-content>\n </div>\n @if (_showNavigationButtonInContent) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'bottom') {\n <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n }\n <div [style.display]=\"'none'\" role=\"region\" [attr.id]=\"id + '-accessibility'\" aria-live=\"polite\" dir=\"ltr\">\n {{ screenReaderLabel }}\n </div>\n</section>\n<ng-template #pageIndicatorContainer>\n <div\n class=\"fd-carousel__page-indicator-container\"\n [class.fd-carousel__page-indicator-container--no-border]=\"noPaginationContainerBorder\"\n [ngClass]=\"'fd-carousel__page-indicator-container--' + pageIndicatorBackground\"\n >\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n }\n <ng-template [ngTemplateOutlet]=\"pageIndicators\"> </ng-template>\n @if (_showNavigationButtonInPageIndicatorContainer) {\n <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n }\n </div>\n</ng-template>\n<ng-template #pageIndicators>\n @if (numericIndicator) {\n <div class=\"fd-carousel__page-indicators\">\n @if (pageIndicator) {\n <div class=\"fd-carousel__text\" dir=\"ltr\">\n {{ getPageIndicatorLabel }}\n </div>\n }\n </div>\n }\n @if (!numericIndicator && _showNavigationButtonInPageIndicatorContainer) {\n <div class=\"fd-carousel__page-indicators\" [attr.dir]=\"dir()\">\n @if (pageIndicator) {\n @for (item of pageIndicatorsCountArray; track item; let i = $index) {\n <span\n role=\"img\"\n [attr.aria-label]=\"\n 'coreCarousel.pageIndicatorLabel' | fdTranslate: { itemNum: i + 1, totalNum: totalSlides }\n \"\n class=\"fd-carousel__page-indicator\"\n [class.fd-carousel__page-indicator--active]=\"i === currentActiveSlidesStartIndex\"\n ></span>\n }\n }\n </div>\n }\n</ng-template>\n<ng-template #buttonLeft>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--left]=\"!vertical\"\n [class.fd-carousel__button--up]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n (click)=\"previous(); $event.stopPropagation()\"\n [disabled]=\"leftButtonDisabled\"\n [attr.title]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n [glyph]=\"vertical ? 'slim-arrow-up' : 'slim-arrow-left'\"\n ></button>\n</ng-template>\n<ng-template #buttonRight>\n <button\n fd-button\n role=\"button\"\n class=\"fd-carousel__button\"\n [class.fd-carousel__button--right]=\"!vertical\"\n [class.fd-carousel__button--down]=\"vertical\"\n [style.z-index]=\"1\"\n [attr.aria-label]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n (click)=\"next(); $event.stopPropagation()\"\n [disabled]=\"rightButtonDisabled\"\n [attr.title]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n [glyph]=\"vertical ? 'slim-arrow-down' : 'slim-arrow-right'\"\n ></button>\n</ng-template>\n", styles: [".fd-carousel{--fdCarousel_Button_Display:block;--fdCarousel_Content_Background:var(--sapBackgroundColor);--fdCarousel_Page_Indicator_Margin:var(--fdCarousel_Dot_Margin);--fdCarousel_Page_Indicator_Size:var(--fdCarousel_Dot_Size);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Background);--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Border);--fdCarousel_Page_Indicator_Container_Background:var(--sapPageFooter_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:100%;min-width:15.5rem;width:100%}.fd-carousel:after,.fd-carousel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel.is-focus,.fd-carousel:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth)}.fd-carousel.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:block}.fd-carousel .fd-carousel__button+.fd-carousel__button{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-carousel__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-ms-flex-preferred-size:100%;background:var(--fdCarousel_Content_Background);flex-basis:100%;overflow:hidden;position:relative}.fd-carousel__content:after,.fd-carousel__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none;-webkit-box-shadow:var(--sapContent_Shadow0);box-shadow:var(--sapContent_Shadow0);margin-block:0;margin-inline:0;position:absolute}.fd-carousel__content .fd-carousel__button--left,.fd-carousel__content .fd-carousel__button--right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fd-carousel__content .fd-carousel__button--down,.fd-carousel__content .fd-carousel__button--up{left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.fd-carousel__content .fd-carousel__button--down[dir=rtl]>[class*=sap-icon],.fd-carousel__content .fd-carousel__button--up[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--down>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--up>[class*=sap-icon]{-webkit-transform:rotate(0deg);transform:rotate(0)}.fd-carousel__content .fd-carousel__button--left{left:.5rem}.fd-carousel__content .fd-carousel__button--left[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--left{left:auto;right:.5rem}.fd-carousel__content .fd-carousel__button--right{right:.5rem}.fd-carousel__content .fd-carousel__button--right[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--right{left:.5rem;right:auto}.fd-carousel__content .fd-carousel__button--up{top:.5rem}.fd-carousel__content .fd-carousel__button--down{bottom:.5rem}.fd-carousel__content .fd-carousel__item img{height:auto;min-width:100%}.fd-carousel__content--horizontal .fd-carousel__slides{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y;width:100%}.fd-carousel__content--horizontal .fd-carousel__item img{min-height:100%;min-width:auto;width:auto}.fd-carousel__content--solid{--fdCarousel_Content_Background:var(--sapGroup_ContentBackground)}.fd-carousel__content--transparent{--fdCarousel_Content_Background:transparent}.fd-carousel__slides{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;padding-block:0;padding-inline:0;-ms-touch-action:pan-x;touch-action:pan-x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--fdMessage_Page_Container_Corner_Radius:0}.fd-carousel__slides:after,.fd-carousel__slides:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;height:100%;line-height:0}.fd-carousel__item:after,.fd-carousel__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item--active{display:block}.fd-carousel__item img{pointer-events:none}.fd-carousel__page-indicator-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdCarousel_Page_Indicator_Container_Background);border-top:var(--fdCarousel_Pagination_Border);max-height:3.5rem;min-height:2.75rem;padding-block:.375rem;padding-inline:.5rem}.fd-carousel__page-indicator-container:after,.fd-carousel__page-indicator-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator-container:first-child{border-bottom:var(--fdCarousel_Pagination_Border);border-top:none}.fd-carousel__page-indicator-container--translucent{--fdCarousel_Page_Indicator_Container_Background:var(--sapBackgroundColor)}.fd-carousel__page-indicator-container--transparent{--fdCarousel_Page_Indicator_Container_Background:transparent}.fd-carousel__page-indicator-container--no-border{border-top-color:transparent}.fd-carousel__page-indicator-container--no-border:first-child{border-bottom-color:transparent;border-top:none}.fd-carousel__page-indicators{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:9rem;padding-block:.5rem;padding-inline:.5rem}.fd-carousel__page-indicators:after,.fd-carousel__page-indicators:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator{background-color:var(--fdCarousel_Page_Indicator_Background_Color);border:0;border:var(--fdCarousel_Page_Indicator_Border);border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCarousel_Page_Indicator_Size);line-height:normal;list-style-type:none;margin-block:0;margin-inline:0;margin-inline:var(--fdCarousel_Page_Indicator_Margin);max-height:var(--fdCarousel_Page_Indicator_Size);max-width:var(--fdCarousel_Page_Indicator_Size);min-height:var(--fdCarousel_Page_Indicator_Size);min-width:var(--fdCarousel_Page_Indicator_Size);padding-block:0;padding-inline:0;width:var(--fdCarousel_Page_Indicator_Size)}.fd-carousel__page-indicator:after,.fd-carousel__page-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator--active{--fdCarousel_Page_Indicator_Size:.5rem;--fdCarousel_Page_Indicator_Margin:.25rem;--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Selected_Border);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Selected_Background)}.fd-carousel__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapPageFooter_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-align:center;text-overflow:ellipsis;white-space:nowrap}.fd-carousel__text:after,.fd-carousel__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel .fd-carousel__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;display:var(--fdCarousel_Button_Display);height:2.125rem;margin-block:.25rem;margin-inline:.25rem;max-height:2.125rem;max-width:2.125rem;min-height:2.125rem;min-width:2.125rem;padding-block:0;padding-inline:0;width:2.125rem}.fd-carousel .fd-carousel__button:before{inset:-.25rem;width:auto}.fd-carousel .fd-carousel__button[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel .fd-carousel__button>[class*=sap-icon]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-carousel .fd-carousel__button.is-focus,.fd-carousel .fd-carousel__button:focus{z-index:5}.fd-carousel .fd-carousel__button.is-focus:after,.fd-carousel .fd-carousel__button:focus:after{--fdButton_Focus_Border_Radius:50%}.fd-carousel--no-navigation .fd-carousel__button,.fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none}.fd-carousel__item fd-busy-indicator{display:block;height:100%;width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/carousel.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
1087
1087
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: CarouselService }, { type: i0.NgZone }], propDecorators: { id: [{
|
|
1088
1088
|
type: Input
|
|
1089
1089
|
}, {
|