oasys-lib 2.35.2 → 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 +46 -18
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/index.d.ts +19 -7
- 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
|
@@ -942,7 +942,7 @@ class ImageComponent {
|
|
|
942
942
|
image_fill = false;
|
|
943
943
|
fetchpriority = 'auto';
|
|
944
944
|
loading = 'lazy';
|
|
945
|
-
preload_aspect_ratio =
|
|
945
|
+
preload_aspect_ratio = null;
|
|
946
946
|
image_width = null; // explicit rendered width in px, when known by the consumer
|
|
947
947
|
image_sizes = null; // fallback `sizes` value for non-lazy / no-auto-support cases
|
|
948
948
|
image_loaded = new EventEmitter();
|
|
@@ -972,19 +972,19 @@ class ImageComponent {
|
|
|
972
972
|
* Creates the image object with the provided properties.
|
|
973
973
|
*/
|
|
974
974
|
createImage() {
|
|
975
|
-
const ratios = this.preload_aspect_ratio
|
|
975
|
+
const ratios = this.preload_aspect_ratio?.split(':');
|
|
976
976
|
const imageUrlResponse = this.imageUrlProvider.generateImageUrl(this.image_src, this.breakpoints, this.fallbackBreakpoint);
|
|
977
977
|
const loading = this.resolveLoading();
|
|
978
978
|
const newImage = {
|
|
979
979
|
...imageUrlResponse,
|
|
980
|
-
ratioWidth: parseInt(ratios[0], 10),
|
|
981
|
-
ratioHeight: parseInt(ratios[1], 10),
|
|
980
|
+
ratioWidth: ratios ? parseInt(ratios[0], 10) : undefined,
|
|
981
|
+
ratioHeight: ratios ? parseInt(ratios[1], 10) : undefined,
|
|
982
982
|
loading,
|
|
983
983
|
fill: this.image_fill,
|
|
984
984
|
fetchpriority: this.fetchpriority,
|
|
985
985
|
preloadAspectRatio: this.preload_aspect_ratio,
|
|
986
986
|
width: this.image_width ? `${this.image_width}px` : null,
|
|
987
|
-
sizes: this.resolveSizes(
|
|
987
|
+
sizes: this.resolveSizes(),
|
|
988
988
|
altText: this.image_alt_text,
|
|
989
989
|
ariaDescribedby: this.image_aria_describedby ?? null,
|
|
990
990
|
};
|
|
@@ -993,19 +993,18 @@ class ImageComponent {
|
|
|
993
993
|
resolveLoading() {
|
|
994
994
|
return this.fetchpriority === 'high' ? 'eager' : this.loading;
|
|
995
995
|
}
|
|
996
|
-
resolveSizes(
|
|
996
|
+
resolveSizes() {
|
|
997
997
|
if (this.image_width) {
|
|
998
998
|
return `${this.image_width}px`;
|
|
999
999
|
}
|
|
1000
|
-
|
|
1001
|
-
return loading === 'lazy' ? `auto, ${fallback}` : fallback;
|
|
1000
|
+
return this.image_sizes ?? '100vw';
|
|
1002
1001
|
}
|
|
1003
1002
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1004
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ImageComponent, isStandalone: true, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_aria_describedby: "image_aria_describedby", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio", image_width: "image_width", image_sizes: "image_sizes" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n <picture>\n <source\n [attr.srcset]=\"image().srcSetUrls\"\n [attr.sizes]=\"image().sizes\"\n type=\"image/webp\"\n />\n\n <img\n [class.imageFill]=\"image().fill\"\n [attr.width]=\"image().ratioWidth\"\n [attr.height]=\"image().ratioHeight\"\n [attr.src]=\"image().fallbackUrl\"\n [attr.sizes]=\"image().sizes\"\n [attr.loading]=\"image().loading\"\n [attr.fetchpriority]=\"image().fetchpriority\"\n [attr.alt]=\"image().altText\"\n [attr.aria-describedby]=\"image().ariaDescribedby\"\n [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n (load)=\"image_loaded.emit()\"\n [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n />\n </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1003
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ImageComponent, isStandalone: true, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_aria_describedby: "image_aria_describedby", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio", image_width: "image_width", image_sizes: "image_sizes" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n <picture>\n <source\n [attr.srcset]=\"image().srcSetUrls\"\n [attr.sizes]=\"image().sizes\"\n type=\"image/webp\"\n />\n\n <img\n [class.imageFill]=\"image().fill\"\n [attr.width]=\"image().ratioWidth\"\n [attr.height]=\"image().ratioHeight\"\n [attr.src]=\"image().fallbackUrl\"\n [attr.sizes]=\"image().sizes\"\n [attr.loading]=\"image().loading\"\n [attr.fetchpriority]=\"image().fetchpriority\"\n [attr.alt]=\"image().altText\"\n [attr.aria-describedby]=\"image().ariaDescribedby\"\n [ngStyle]=\"image().preloadAspectRatio ? { 'aspect-ratio': image().preloadAspectRatio } : {}\"\n (load)=\"image_loaded.emit()\"\n [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n />\n </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1005
1004
|
}
|
|
1006
1005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1007
1006
|
type: Component,
|
|
1008
|
-
args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n <picture>\n <source\n [attr.srcset]=\"image().srcSetUrls\"\n [attr.sizes]=\"image().sizes\"\n type=\"image/webp\"\n />\n\n <img\n [class.imageFill]=\"image().fill\"\n [attr.width]=\"image().ratioWidth\"\n [attr.height]=\"image().ratioHeight\"\n [attr.src]=\"image().fallbackUrl\"\n [attr.sizes]=\"image().sizes\"\n [attr.loading]=\"image().loading\"\n [attr.fetchpriority]=\"image().fetchpriority\"\n [attr.alt]=\"image().altText\"\n [attr.aria-describedby]=\"image().ariaDescribedby\"\n [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n (load)=\"image_loaded.emit()\"\n [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n />\n </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"] }]
|
|
1007
|
+
args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n <picture>\n <source\n [attr.srcset]=\"image().srcSetUrls\"\n [attr.sizes]=\"image().sizes\"\n type=\"image/webp\"\n />\n\n <img\n [class.imageFill]=\"image().fill\"\n [attr.width]=\"image().ratioWidth\"\n [attr.height]=\"image().ratioHeight\"\n [attr.src]=\"image().fallbackUrl\"\n [attr.sizes]=\"image().sizes\"\n [attr.loading]=\"image().loading\"\n [attr.fetchpriority]=\"image().fetchpriority\"\n [attr.alt]=\"image().altText\"\n [attr.aria-describedby]=\"image().ariaDescribedby\"\n [ngStyle]=\"image().preloadAspectRatio ? { 'aspect-ratio': image().preloadAspectRatio } : {}\"\n (load)=\"image_loaded.emit()\"\n [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n />\n </picture>\n}\n", styles: [":host.imageFill{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"] }]
|
|
1009
1008
|
}], propDecorators: { image_src: [{
|
|
1010
1009
|
type: Input,
|
|
1011
1010
|
args: [{ required: true }]
|
|
@@ -2378,6 +2377,7 @@ class CarouselComponent {
|
|
|
2378
2377
|
tokenService;
|
|
2379
2378
|
document;
|
|
2380
2379
|
element;
|
|
2380
|
+
changeDetectorRef;
|
|
2381
2381
|
// The swiper instance
|
|
2382
2382
|
swiper;
|
|
2383
2383
|
carouselscrollbarplaceholder;
|
|
@@ -2400,11 +2400,16 @@ class CarouselComponent {
|
|
|
2400
2400
|
center_active_slide = false; // Centers the active slide
|
|
2401
2401
|
start_slide = 0; // Start slide index
|
|
2402
2402
|
offset_scrollbar_top = false; // Offset the scrollbar to the top of the carousel
|
|
2403
|
+
splash_category_carousel = false;
|
|
2403
2404
|
activeIndexOnSlideChange = new EventEmitter();
|
|
2404
|
-
|
|
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) {
|
|
2405
2409
|
this.tokenService = tokenService;
|
|
2406
2410
|
this.document = document;
|
|
2407
2411
|
this.element = element;
|
|
2412
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
2408
2413
|
inject(SWIPER_PROVIDER_TOKEN).ensureSwiperRegistered();
|
|
2409
2414
|
}
|
|
2410
2415
|
ngOnInit() {
|
|
@@ -2466,7 +2471,9 @@ class CarouselComponent {
|
|
|
2466
2471
|
}
|
|
2467
2472
|
if (carouselStack && this.carousel_pagination === 'scroll-bar') {
|
|
2468
2473
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-width', '100%');
|
|
2469
|
-
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');
|
|
2470
2477
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-height', '4px');
|
|
2471
2478
|
this.element?.nativeElement?.style?.setProperty('--ui-carousel-scrollbar-left', '0px');
|
|
2472
2479
|
}
|
|
@@ -2474,7 +2481,6 @@ class CarouselComponent {
|
|
|
2474
2481
|
/**
|
|
2475
2482
|
* Set the dynamic swiper params and initialise the swiper instance
|
|
2476
2483
|
*/
|
|
2477
|
-
// eslint-disable-next-line complexity
|
|
2478
2484
|
initSwiper() {
|
|
2479
2485
|
// Colour overides
|
|
2480
2486
|
const scrollbarBackgroundColour = this.tokenService.getTokenValue('--oasys-color-linen-grey-200');
|
|
@@ -2565,7 +2571,15 @@ class CarouselComponent {
|
|
|
2565
2571
|
},
|
|
2566
2572
|
},
|
|
2567
2573
|
on: {
|
|
2568
|
-
|
|
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),
|
|
2569
2583
|
},
|
|
2570
2584
|
};
|
|
2571
2585
|
// now we need to assign all parameters to the Swiper element
|
|
@@ -2597,16 +2611,28 @@ class CarouselComponent {
|
|
|
2597
2611
|
onSlideChange(swiper) {
|
|
2598
2612
|
this.activeIndexOnSlideChange.emit(swiper.activeIndex);
|
|
2599
2613
|
}
|
|
2600
|
-
|
|
2601
|
-
|
|
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 });
|
|
2602
2628
|
}
|
|
2603
2629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
2604
2630
|
type: Component,
|
|
2605
|
-
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"] }]
|
|
2606
2632
|
}], ctorParameters: () => [{ type: TokenService }, { type: Document, decorators: [{
|
|
2607
2633
|
type: Inject,
|
|
2608
2634
|
args: [DOCUMENT]
|
|
2609
|
-
}] }, { type: i0.ElementRef }], propDecorators: { swiper: [{
|
|
2635
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { swiper: [{
|
|
2610
2636
|
type: ViewChild,
|
|
2611
2637
|
args: ['swiper', { static: true }]
|
|
2612
2638
|
}], carouselscrollbarplaceholder: [{
|
|
@@ -2649,6 +2675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2649
2675
|
type: Input
|
|
2650
2676
|
}], offset_scrollbar_top: [{
|
|
2651
2677
|
type: Input
|
|
2678
|
+
}], splash_category_carousel: [{
|
|
2679
|
+
type: Input
|
|
2652
2680
|
}], activeIndexOnSlideChange: [{
|
|
2653
2681
|
type: Output
|
|
2654
2682
|
}] } });
|