oasys-lib 2.35.3 → 2.36.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/oasys-lib.mjs +37 -8
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/index.d.ts +15 -3
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +1 -1
- package/src/assets/bloomon/variables.css +1 -1
- package/src/assets/global/scss-breakpoints.scss +1 -1
package/fesm2022/oasys-lib.mjs
CHANGED
|
@@ -2377,6 +2377,7 @@ class CarouselComponent {
|
|
|
2377
2377
|
tokenService;
|
|
2378
2378
|
document;
|
|
2379
2379
|
element;
|
|
2380
|
+
changeDetectorRef;
|
|
2380
2381
|
// The swiper instance
|
|
2381
2382
|
swiper;
|
|
2382
2383
|
carouselscrollbarplaceholder;
|
|
@@ -2399,11 +2400,16 @@ class CarouselComponent {
|
|
|
2399
2400
|
center_active_slide = false; // Centers the active slide
|
|
2400
2401
|
start_slide = 0; // Start slide index
|
|
2401
2402
|
offset_scrollbar_top = false; // Offset the scrollbar to the top of the carousel
|
|
2403
|
+
splash_category_carousel = false;
|
|
2402
2404
|
activeIndexOnSlideChange = new EventEmitter();
|
|
2403
|
-
|
|
2405
|
+
// Track edge state so the floating arrows can be shown/hidden when scrolling
|
|
2406
|
+
isBeginning = true;
|
|
2407
|
+
isEnd = false;
|
|
2408
|
+
constructor(tokenService, document, element, changeDetectorRef) {
|
|
2404
2409
|
this.tokenService = tokenService;
|
|
2405
2410
|
this.document = document;
|
|
2406
2411
|
this.element = element;
|
|
2412
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
2407
2413
|
inject(SWIPER_PROVIDER_TOKEN).ensureSwiperRegistered();
|
|
2408
2414
|
}
|
|
2409
2415
|
ngOnInit() {
|
|
@@ -2465,7 +2471,9 @@ class CarouselComponent {
|
|
|
2465
2471
|
}
|
|
2466
2472
|
if (carouselStack && this.carousel_pagination === 'scroll-bar') {
|
|
2467
2473
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-width', '100%');
|
|
2468
|
-
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-offset-top',
|
|
2474
|
+
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-offset-top', this.offset_scrollbar_top
|
|
2475
|
+
? parseInt(this.getStyle(carouselStack, 'gap'), 10) + 'px'
|
|
2476
|
+
: '0px');
|
|
2469
2477
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-height', '4px');
|
|
2470
2478
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-left', '0px');
|
|
2471
2479
|
}
|
|
@@ -2473,7 +2481,6 @@ class CarouselComponent {
|
|
|
2473
2481
|
/**
|
|
2474
2482
|
* Set the dynamic swiper params and initialise the swiper instance
|
|
2475
2483
|
*/
|
|
2476
|
-
// eslint-disable-next-line complexity
|
|
2477
2484
|
initSwiper() {
|
|
2478
2485
|
// Colour overides
|
|
2479
2486
|
const scrollbarBackgroundColour = this.tokenService.getTokenValue('--oasys-color-linen-grey-200');
|
|
@@ -2564,7 +2571,15 @@ class CarouselComponent {
|
|
|
2564
2571
|
},
|
|
2565
2572
|
},
|
|
2566
2573
|
on: {
|
|
2567
|
-
|
|
2574
|
+
afterInit: this.updateNavigationState.bind(this),
|
|
2575
|
+
slideChange: (swiper) => {
|
|
2576
|
+
this.onSlideChange(swiper);
|
|
2577
|
+
this.updateNavigationState(swiper);
|
|
2578
|
+
},
|
|
2579
|
+
toEdge: this.updateNavigationState.bind(this),
|
|
2580
|
+
fromEdge: this.updateNavigationState.bind(this),
|
|
2581
|
+
reachBeginning: this.updateNavigationState.bind(this),
|
|
2582
|
+
reachEnd: this.updateNavigationState.bind(this),
|
|
2568
2583
|
},
|
|
2569
2584
|
};
|
|
2570
2585
|
// now we need to assign all parameters to the Swiper element
|
|
@@ -2596,16 +2611,28 @@ class CarouselComponent {
|
|
|
2596
2611
|
onSlideChange(swiper) {
|
|
2597
2612
|
this.activeIndexOnSlideChange.emit(swiper.activeIndex);
|
|
2598
2613
|
}
|
|
2599
|
-
|
|
2600
|
-
|
|
2614
|
+
/**
|
|
2615
|
+
* Update the cached edge state and trigger change detection so the floating
|
|
2616
|
+
* arrows are only shown when there is a slide to scroll to. Swiper updates
|
|
2617
|
+
* these flags outside of Angular, so we mirror them onto the component and
|
|
2618
|
+
* detect changes manually.
|
|
2619
|
+
* @param swiper
|
|
2620
|
+
*/
|
|
2621
|
+
updateNavigationState(swiper) {
|
|
2622
|
+
this.isBeginning = swiper.isBeginning;
|
|
2623
|
+
this.isEnd = swiper.isEnd;
|
|
2624
|
+
this.changeDetectorRef.detectChanges();
|
|
2625
|
+
}
|
|
2626
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CarouselComponent, deps: [{ token: TokenService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2627
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CarouselComponent, isStandalone: true, selector: "ui-carousel", inputs: { rewind: "rewind", carousel_overflow: "carousel_overflow", carousel_gap: "carousel_gap", carousel_pagination: "carousel_pagination", carousel_slides_per_view_desktop: "carousel_slides_per_view_desktop", carousel_slides_per_view_laptop: "carousel_slides_per_view_laptop", carousel_slides_per_view_tablet: "carousel_slides_per_view_tablet", carousel_slides_per_view_mobile: "carousel_slides_per_view_mobile", text_for_left_arrow: "text_for_left_arrow", text_for_right_arrow: "text_for_right_arrow", carousel_rows_per_row_mobile: "carousel_rows_per_row_mobile", carousel_loading: "carousel_loading", carousel_free_mode: "carousel_free_mode", center_insufficient_slides: "center_insufficient_slides", center_active_slide: "center_active_slide", start_slide: "start_slide", offset_scrollbar_top: "offset_scrollbar_top", splash_category_carousel: "splash_category_carousel" }, outputs: { activeIndexOnSlideChange: "activeIndexOnSlideChange" }, providers: [TokenService], viewQueries: [{ propertyName: "swiper", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "carouselscrollbarplaceholder", first: true, predicate: ["carouselscrollbarplaceholder"], descendants: true, read: ElementRef }, { propertyName: "carouselctastack", first: true, predicate: ["carouselctastack"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <div class=\"ui-carousel__viewport\">\n <!-- Floating arrow navigation buttons -->\n @if (carousel_pagination === 'floating-arrow') {\n <div\n class=\"ui-carousel__floating-arrows\"\n [ngClass]=\"{\n 'ui-carousel__floating-arrows--splash-categories': splash_category_carousel,\n }\"\n >\n <!-- Previous button - only visible when not scrolled to the start-->\n @if (!isBeginning) {\n <ui-button\n class=\"ui-carousel__floating-arrow ui-carousel__floating-arrow--previous ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Previous slide\n </ui-button>\n }\n <!-- Next button - only visible when not scrolled to the end-->\n @if (!isEnd) {\n <ui-button\n class=\"ui-carousel__floating-arrow ui-carousel__floating-arrow--next ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n }\n </div>\n }\n <swiper-container\n #swiper\n init=\"false\"\n touch-start-prevent-default=\"false\"\n prevent-clicks-propagation=\"true\"\n >\n <ng-content></ng-content>\n </swiper-container>\n </div>\n\n <!-- Custom navigation buttons -->\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n *ngIf=\"carousel_pagination === 'scroll-arrows' || carousel_pagination === 'scroll-bar'\"\n >\n <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n <ui-box\n *ngIf=\"carousel_pagination === 'scroll-arrows'\"\n box_space=\"none\"\n box_fill_mode=\"fit\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <ui-stack\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.ui-carousel swiper-container{width:100%}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}.ui-carousel swiper-slide img{-webkit-user-drag:none}.ui-carousel__small-arrows{align-items:center;display:flex;flex-direction:row;gap:var(--oasys-spacing-near);justify-content:center}@media only screen and (max-width:766px){.ui-carousel__small-arrows{gap:var(--oasys-spacing-tight)}}.ui-carousel__viewport{position:relative;width:100%}.ui-carousel__floating-arrows{align-items:center;display:flex;height:calc(100% - var(--oasys-typography-body-supporting-font-size));inset:0;justify-content:space-between;margin:0 -20px;pointer-events:none;position:absolute;z-index:2}@media only screen and (max-width:766px){.ui-carousel__floating-arrows{margin:0 var(--oasys-spacing-near)}}@media only screen and (max-width:766px){.ui-carousel__floating-arrows--splash-categories{height:74px}}.ui-carousel__floating-arrow button{background:var(--oasys-color-white);border-radius:var(--oasys-radius-round);border-width:0;color:var(--oasys-color-brand-foreground-primary);height:40px;min-width:40px;pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:40px}.ui-carousel__floating-arrow button .button-content{justify-content:center;min-height:unset;width:100%}.ui-carousel__floating-arrow button:focus .button-overlay{opacity:0}.ui-carousel__floating-arrow button:focus .button-overlay,.ui-carousel__floating-arrow button:hover .button-overlay{border-radius:var(--oasys-radius-round)}.ui-carousel__floating-arrow--previous button{background:linear-gradient(to left,rgba(255,255,255,0) 0%,var(--oasys-color-white) 33%);left:0}.ui-carousel__floating-arrow--next button{background:linear-gradient(to right,rgba(255,255,255,0) 0%,var(--oasys-color-white) 33%);right:0}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_type", "button_full_width", "button_event_type", "button_disabled", "button_selected", "button_text_nowrap", "aria_label", "aria_role", "href", "routerLink"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2601
2628
|
}
|
|
2602
2629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
2603
2630
|
type: Component,
|
|
2604
|
-
args: [{ selector: 'ui-carousel', encapsulation: ViewEncapsulation.None, standalone: true, imports: [LayoutBoxComponent, NgClass, LayoutStackComponent, NgIf, OasysButtonComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [TokenService], template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <swiper-container\n
|
|
2631
|
+
args: [{ selector: 'ui-carousel', encapsulation: ViewEncapsulation.None, standalone: true, imports: [LayoutBoxComponent, NgClass, LayoutStackComponent, NgIf, OasysButtonComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [TokenService], template: "<ui-box\n class=\"ui-carousel\"\n [ngClass]=\"{ 'ui-carousel-overflow': carousel_overflow }\"\n box_align_y=\"center\"\n box_space=\"none\"\n [box_content_fill_width]=\"true\"\n box_background=\"transparent\"\n>\n <ui-stack #carouselctastack>\n <!-- Custom navigation buttons -->\n <ui-stack\n *ngIf=\"carousel_pagination === 'small-arrows'\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_distribute=\"end\"\n >\n <ui-box\n box_space=\"none\"\n box_fill_mode=\"fit\"\n box_space_bottom=\"none\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <div\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n class=\"ui-carousel__small-arrows\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </div>\n </ui-box>\n </ui-stack>\n\n <!-- Swiper WebComponent-->\n <div class=\"ui-carousel__viewport\">\n <!-- Floating arrow navigation buttons -->\n @if (carousel_pagination === 'floating-arrow') {\n <div\n class=\"ui-carousel__floating-arrows\"\n [ngClass]=\"{\n 'ui-carousel__floating-arrows--splash-categories': splash_category_carousel,\n }\"\n >\n <!-- Previous button - only visible when not scrolled to the start-->\n @if (!isBeginning) {\n <ui-button\n class=\"ui-carousel__floating-arrow ui-carousel__floating-arrow--previous ui-carousel__previous\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Previous slide\n </ui-button>\n }\n <!-- Next button - only visible when not scrolled to the end-->\n @if (!isEnd) {\n <ui-button\n class=\"ui-carousel__floating-arrow ui-carousel__floating-arrow--next ui-carousel__next\"\n button_size=\"small\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"tertiary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n }\n </div>\n }\n <swiper-container\n #swiper\n init=\"false\"\n touch-start-prevent-default=\"false\"\n prevent-clicks-propagation=\"true\"\n >\n <ng-content></ng-content>\n </swiper-container>\n </div>\n\n <!-- Custom navigation buttons -->\n <ui-stack\n stack_direction=\"x\"\n stack_align=\"center\"\n *ngIf=\"carousel_pagination === 'scroll-arrows' || carousel_pagination === 'scroll-bar'\"\n >\n <div class=\"ui-carousel-scrollbar-placeholder\" #carouselscrollbarplaceholder></div>\n <ui-box\n *ngIf=\"carousel_pagination === 'scroll-arrows'\"\n box_space=\"none\"\n box_fill_mode=\"fit\"\n [box_space_right]=\"{ mobile: 'tight', tablet: 'none', laptop: 'none', desktop: 'none' }\"\n box_background=\"transparent\"\n >\n <ui-stack\n *ngIf=\"!(swiper?.swiper?.isBeginning && swiper?.swiper?.isEnd)\"\n stack_direction=\"x\"\n stack_gap=\"near\"\n >\n <!-- Previous button-->\n <ui-button\n class=\"ui-carousel__previous\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-left\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_left_arrow\"\n (clicked)=\"previousSlide()\"\n >\n Prevous slide\n </ui-button>\n <!-- Next button-->\n <ui-button\n class=\"ui-carousel__next\"\n button_size=\"large\"\n button_icon_placement=\"iconOnly\"\n button_icon=\"arrow-right\"\n button_type=\"secondary\"\n [aria_label]=\"text_for_right_arrow\"\n (clicked)=\"nextSlide()\"\n >\n Next slide\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [":root{--swiper-scrollbar-size: 4px}.ui-carousel{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.ui-carousel swiper-container{width:100%}.ui-carousel .ui-carousel-scrollbar-placeholder{width:100%;display:flex;align-self:stretch}.ui-carousel swiper-slide img{-webkit-user-drag:none}.ui-carousel__small-arrows{align-items:center;display:flex;flex-direction:row;gap:var(--oasys-spacing-near);justify-content:center}@media only screen and (max-width:766px){.ui-carousel__small-arrows{gap:var(--oasys-spacing-tight)}}.ui-carousel__viewport{position:relative;width:100%}.ui-carousel__floating-arrows{align-items:center;display:flex;height:calc(100% - var(--oasys-typography-body-supporting-font-size));inset:0;justify-content:space-between;margin:0 -20px;pointer-events:none;position:absolute;z-index:2}@media only screen and (max-width:766px){.ui-carousel__floating-arrows{margin:0 var(--oasys-spacing-near)}}@media only screen and (max-width:766px){.ui-carousel__floating-arrows--splash-categories{height:74px}}.ui-carousel__floating-arrow button{background:var(--oasys-color-white);border-radius:var(--oasys-radius-round);border-width:0;color:var(--oasys-color-brand-foreground-primary);height:40px;min-width:40px;pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:40px}.ui-carousel__floating-arrow button .button-content{justify-content:center;min-height:unset;width:100%}.ui-carousel__floating-arrow button:focus .button-overlay{opacity:0}.ui-carousel__floating-arrow button:focus .button-overlay,.ui-carousel__floating-arrow button:hover .button-overlay{border-radius:var(--oasys-radius-round)}.ui-carousel__floating-arrow--previous button{background:linear-gradient(to left,rgba(255,255,255,0) 0%,var(--oasys-color-white) 33%);left:0}.ui-carousel__floating-arrow--next button{background:linear-gradient(to right,rgba(255,255,255,0) 0%,var(--oasys-color-white) 33%);right:0}\n"] }]
|
|
2605
2632
|
}], ctorParameters: () => [{ type: TokenService }, { type: Document, decorators: [{
|
|
2606
2633
|
type: Inject,
|
|
2607
2634
|
args: [DOCUMENT]
|
|
2608
|
-
}] }, { type: i0.ElementRef }], propDecorators: { swiper: [{
|
|
2635
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { swiper: [{
|
|
2609
2636
|
type: ViewChild,
|
|
2610
2637
|
args: ['swiper', { static: true }]
|
|
2611
2638
|
}], carouselscrollbarplaceholder: [{
|
|
@@ -2648,6 +2675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2648
2675
|
type: Input
|
|
2649
2676
|
}], offset_scrollbar_top: [{
|
|
2650
2677
|
type: Input
|
|
2678
|
+
}], splash_category_carousel: [{
|
|
2679
|
+
type: Input
|
|
2651
2680
|
}], activeIndexOnSlideChange: [{
|
|
2652
2681
|
type: Output
|
|
2653
2682
|
}] } });
|