oasys-lib 3.5.0 → 3.7.4
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 +6 -5
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/bergamotte/fonts/ABCDiatype-Bold.woff2 +0 -0
- package/src/assets/bergamotte/fonts/ABCDiatype-BoldItalic.woff2 +0 -0
- package/src/assets/bergamotte/fonts/ABCDiatype-RegularItalic.woff +0 -0
- package/src/assets/bergamotte/fonts/LyonDisplay-BoldItalic-Web.woff2 +0 -0
- package/src/assets/bergamotte/fonts/LyonDisplay-RegularItalic-Web.woff2 +0 -0
- package/src/assets/bergamotte/styles.scss +59 -4
- package/src/assets/bergamotte/variables.css +4 -1
- package/src/assets/bergamotte-loyalty-tier-1/variables.css +7 -1
- package/src/assets/bergamotte-loyalty-tier-2/variables.css +7 -1
- package/src/assets/bloomandwild/variables.css +4 -1
- package/src/assets/bloomandwild-loyalty-tier-1/variables.css +7 -1
- package/src/assets/bloomandwild-loyalty-tier-2/variables.css +7 -1
- package/src/assets/bloomon/variables.css +4 -1
- package/src/assets/bloomon-loyalty-tier-1/variables.css +7 -1
- package/src/assets/bloomon-loyalty-tier-2/variables.css +7 -1
- package/src/assets/global/scss-breakpoints.scss +1 -1
- package/types/oasys-lib.d.ts +2 -1
- package/types/oasys-lib.d.ts.map +1 -1
- package/src/assets/bergamotte/fonts/ABCDiatype-Bold.woff +0 -0
package/fesm2022/oasys-lib.mjs
CHANGED
|
@@ -999,6 +999,7 @@ class CardComponent {
|
|
|
999
999
|
small_sub_title_right = input(...(ngDevMode ? [undefined, { debugName: "small_sub_title_right" }] : /* istanbul ignore next */ []));
|
|
1000
1000
|
standard_content = input(...(ngDevMode ? [undefined, { debugName: "standard_content" }] : /* istanbul ignore next */ []));
|
|
1001
1001
|
bold_content = input(...(ngDevMode ? [undefined, { debugName: "bold_content" }] : /* istanbul ignore next */ []));
|
|
1002
|
+
transparent_background = input(false, ...(ngDevMode ? [{ debugName: "transparent_background" }] : /* istanbul ignore next */ []));
|
|
1002
1003
|
aspectRatio = computed(() => {
|
|
1003
1004
|
switch (this.image_format()) {
|
|
1004
1005
|
case 'square':
|
|
@@ -1039,12 +1040,12 @@ class CardComponent {
|
|
|
1039
1040
|
});
|
|
1040
1041
|
}
|
|
1041
1042
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1042
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: CardComponent, isStandalone: true, selector: "ui-card", inputs: { label_text: { classPropertyName: "label_text", publicName: "label_text", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, alt_text: { classPropertyName: "alt_text", publicName: "alt_text", isSignal: true, isRequired: false, transformFunction: null }, image_format: { classPropertyName: "image_format", publicName: "image_format", isSignal: true, isRequired: false, transformFunction: null }, small_title_left: { classPropertyName: "small_title_left", publicName: "small_title_left", isSignal: true, isRequired: false, transformFunction: null }, small_sub_title_right: { classPropertyName: "small_sub_title_right", publicName: "small_sub_title_right", isSignal: true, isRequired: false, transformFunction: null }, standard_content: { classPropertyName: "standard_content", publicName: "standard_content", isSignal: true, isRequired: false, transformFunction: null }, bold_content: { classPropertyName: "bold_content", publicName: "bold_content", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TokenService], viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ui-box
|
|
1043
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: CardComponent, isStandalone: true, selector: "ui-card", inputs: { label_text: { classPropertyName: "label_text", publicName: "label_text", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, alt_text: { classPropertyName: "alt_text", publicName: "alt_text", isSignal: true, isRequired: false, transformFunction: null }, image_format: { classPropertyName: "image_format", publicName: "image_format", isSignal: true, isRequired: false, transformFunction: null }, small_title_left: { classPropertyName: "small_title_left", publicName: "small_title_left", isSignal: true, isRequired: false, transformFunction: null }, small_sub_title_right: { classPropertyName: "small_sub_title_right", publicName: "small_sub_title_right", isSignal: true, isRequired: false, transformFunction: null }, standard_content: { classPropertyName: "standard_content", publicName: "standard_content", isSignal: true, isRequired: false, transformFunction: null }, bold_content: { classPropertyName: "bold_content", publicName: "bold_content", isSignal: true, isRequired: false, transformFunction: null }, transparent_background: { classPropertyName: "transparent_background", publicName: "transparent_background", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TokenService], viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ui-box\n class=\"ui-card\"\n box_space=\"none\"\n [box_background]=\"transparent_background() ? 'transparent' : 'core-primary'\"\n>\n <ui-stack stack_align=\"center\" stack_gap=\"tight\">\n <ui-box\n class=\"ui-card__image\"\n [style.aspect-ratio]=\"aspectRatio()\"\n box_background=\"transparent\"\n box_align_x=\"center\"\n box_space=\"none\"\n >\n <ui-image [image_src]=\"image()\" [image_alt_text]=\"alt_text()\" [image_fill]=\"true\"></ui-image>\n </ui-box>\n <ui-stack stack_gap=\"tight\" [style.margin-top]=\"stackOffset()\">\n @let currentLabelText = label_text();\n @if (currentLabelText !== undefined) {\n <ui-box\n #imagelabel\n class=\"card__image-label center-content\"\n box_background=\"tint-highlight\"\n box_align_x=\"center\"\n box_align_y=\"center\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"tight\"\n box_space_top=\"tight\"\n >\n <h5>{{ currentLabelText }}</h5>\n </ui-box>\n }\n @if (small_title_left() || small_sub_title_right()) {\n <ui-box\n [box_space_top]=\"label_text() ? 'none' : 'tight'\"\n box_space=\"none\"\n box_background=\"transparent\"\n >\n <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n <span class=\"text-body--supporting text-color--supporting\">{{\n small_title_left()\n }}</span>\n <span class=\"text-body--supporting text-color--supporting\">{{\n small_sub_title_right()\n }}</span>\n </ui-stack>\n </ui-box>\n }\n @let currentStandardContent = standard_content();\n @if (currentStandardContent) {\n <p class=\"text-label--default center-content\">\n {{ currentStandardContent }}\n </p>\n }\n @let currentBoldContent = bold_content();\n @if (currentBoldContent) {\n <p class=\"text-label--primary text-body--emphasis\">{{ currentBoldContent }}</p>\n }\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [".ui-card__image{position:relative}.ui-card__image ui-image{position:absolute;height:100%;object-fit:cover;width:100%;left:0}.ui-card .center-content{text-align:center;align-self:center}.ui-card .card__image-label{width:auto;height:auto;border-radius:var(--oasys-radius-soften);margin:0 var(--oasys-spacing-tight);text-align:center;overflow:hidden;z-index:2}\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_text_on_dark", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { 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: "component", type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_aria_describedby", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio", "image_width", "image_sizes"], outputs: ["image_loaded"] }] });
|
|
1043
1044
|
}
|
|
1044
1045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: CardComponent, decorators: [{
|
|
1045
1046
|
type: Component,
|
|
1046
|
-
args: [{ selector: 'ui-card', imports: [LayoutBoxComponent, LayoutStackComponent, ImageComponent], providers: [TokenService], template: "<ui-box
|
|
1047
|
-
}], ctorParameters: () => [], propDecorators: { label_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "label_text", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], alt_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt_text", required: false }] }], image_format: [{ type: i0.Input, args: [{ isSignal: true, alias: "image_format", required: false }] }], small_title_left: [{ type: i0.Input, args: [{ isSignal: true, alias: "small_title_left", required: false }] }], small_sub_title_right: [{ type: i0.Input, args: [{ isSignal: true, alias: "small_sub_title_right", required: false }] }], standard_content: [{ type: i0.Input, args: [{ isSignal: true, alias: "standard_content", required: false }] }], bold_content: [{ type: i0.Input, args: [{ isSignal: true, alias: "bold_content", required: false }] }], imageLabel: [{ type: i0.ViewChild, args: ['imagelabel', { ...{
|
|
1047
|
+
args: [{ selector: 'ui-card', imports: [LayoutBoxComponent, LayoutStackComponent, ImageComponent], providers: [TokenService], template: "<ui-box\n class=\"ui-card\"\n box_space=\"none\"\n [box_background]=\"transparent_background() ? 'transparent' : 'core-primary'\"\n>\n <ui-stack stack_align=\"center\" stack_gap=\"tight\">\n <ui-box\n class=\"ui-card__image\"\n [style.aspect-ratio]=\"aspectRatio()\"\n box_background=\"transparent\"\n box_align_x=\"center\"\n box_space=\"none\"\n >\n <ui-image [image_src]=\"image()\" [image_alt_text]=\"alt_text()\" [image_fill]=\"true\"></ui-image>\n </ui-box>\n <ui-stack stack_gap=\"tight\" [style.margin-top]=\"stackOffset()\">\n @let currentLabelText = label_text();\n @if (currentLabelText !== undefined) {\n <ui-box\n #imagelabel\n class=\"card__image-label center-content\"\n box_background=\"tint-highlight\"\n box_align_x=\"center\"\n box_align_y=\"center\"\n box_space_left=\"near\"\n box_space_right=\"near\"\n box_space_bottom=\"tight\"\n box_space_top=\"tight\"\n >\n <h5>{{ currentLabelText }}</h5>\n </ui-box>\n }\n @if (small_title_left() || small_sub_title_right()) {\n <ui-box\n [box_space_top]=\"label_text() ? 'none' : 'tight'\"\n box_space=\"none\"\n box_background=\"transparent\"\n >\n <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n <span class=\"text-body--supporting text-color--supporting\">{{\n small_title_left()\n }}</span>\n <span class=\"text-body--supporting text-color--supporting\">{{\n small_sub_title_right()\n }}</span>\n </ui-stack>\n </ui-box>\n }\n @let currentStandardContent = standard_content();\n @if (currentStandardContent) {\n <p class=\"text-label--default center-content\">\n {{ currentStandardContent }}\n </p>\n }\n @let currentBoldContent = bold_content();\n @if (currentBoldContent) {\n <p class=\"text-label--primary text-body--emphasis\">{{ currentBoldContent }}</p>\n }\n </ui-stack>\n </ui-stack>\n</ui-box>\n", styles: [".ui-card__image{position:relative}.ui-card__image ui-image{position:absolute;height:100%;object-fit:cover;width:100%;left:0}.ui-card .center-content{text-align:center;align-self:center}.ui-card .card__image-label{width:auto;height:auto;border-radius:var(--oasys-radius-soften);margin:0 var(--oasys-spacing-tight);text-align:center;overflow:hidden;z-index:2}\n"] }]
|
|
1048
|
+
}], ctorParameters: () => [], propDecorators: { label_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "label_text", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], alt_text: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt_text", required: false }] }], image_format: [{ type: i0.Input, args: [{ isSignal: true, alias: "image_format", required: false }] }], small_title_left: [{ type: i0.Input, args: [{ isSignal: true, alias: "small_title_left", required: false }] }], small_sub_title_right: [{ type: i0.Input, args: [{ isSignal: true, alias: "small_sub_title_right", required: false }] }], standard_content: [{ type: i0.Input, args: [{ isSignal: true, alias: "standard_content", required: false }] }], bold_content: [{ type: i0.Input, args: [{ isSignal: true, alias: "bold_content", required: false }] }], transparent_background: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent_background", required: false }] }], imageLabel: [{ type: i0.ViewChild, args: ['imagelabel', { ...{
|
|
1048
1049
|
read: (ElementRef),
|
|
1049
1050
|
}, isSignal: true }] }] } });
|
|
1050
1051
|
|
|
@@ -2090,7 +2091,7 @@ class HeroComponent {
|
|
|
2090
2091
|
this.heroInsetSpaceLarge = this.tokenService.getTokenValue('--oasys-component-hero-inset-spacing-large');
|
|
2091
2092
|
}
|
|
2092
2093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: HeroComponent, isStandalone: true, selector: "ui-hero", inputs: { min_container_height: "min_container_height", image_left_desktop: "image_left_desktop", image_top_mobile: "image_top_mobile", background_colour: "background_colour", non_brand_background_colour: "non_brand_background_colour", heading_title: "heading_title", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", media_type: "media_type", text_on_dark_override: "text_on_dark_override", heading_level: "heading_level", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, providers: [TokenService], viewQueries: [{ propertyName: "herobox", first: true, predicate: ["herobox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\" #herobox>\n <ui-grid\n [style.min-height]=\"min_container_height ? min_container_height + 'px' : 'auto'\"\n grid_gap=\"none\"\n grid_collapse_below=\"tablet\"\n >\n <ui-column\n [columns]=\"5\"\n [class]=\"{ 'image-left': image_left_desktop, 'image-top': image_top_mobile }\"\n >\n <ui-box\n box_fill_mode=\"fill\"\n box_align_y=\"center\"\n box_background=\"transparent\"\n [box_space]=\"{\n mobile: heroInsetSpaceSmall,\n tablet: heroInsetSpaceSmall,\n laptop: heroInsetSpaceLarge,\n desktop: heroInsetSpaceLarge,\n }\"\n >\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n stack_gap=\"default\"\n >\n <ui-heading\n
|
|
2094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: HeroComponent, isStandalone: true, selector: "ui-hero", inputs: { min_container_height: "min_container_height", image_left_desktop: "image_left_desktop", image_top_mobile: "image_top_mobile", background_colour: "background_colour", non_brand_background_colour: "non_brand_background_colour", heading_title: "heading_title", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", media_type: "media_type", text_on_dark_override: "text_on_dark_override", heading_level: "heading_level", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, providers: [TokenService], viewQueries: [{ propertyName: "herobox", first: true, predicate: ["herobox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\" #herobox>\n <ui-grid\n [style.min-height]=\"min_container_height ? min_container_height + 'px' : 'auto'\"\n grid_gap=\"none\"\n grid_collapse_below=\"tablet\"\n >\n <ui-column\n [columns]=\"5\"\n [class]=\"{ 'image-left': image_left_desktop, 'image-top': image_top_mobile }\"\n >\n <ui-box\n box_fill_mode=\"fill\"\n box_align_y=\"center\"\n box_background=\"transparent\"\n [box_space]=\"{\n mobile: heroInsetSpaceSmall,\n tablet: heroInsetSpaceSmall,\n laptop: heroInsetSpaceLarge,\n desktop: heroInsetSpaceLarge,\n }\"\n >\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n stack_gap=\"default\"\n >\n <ui-box\n box_space=\"none\"\n box_background=\"transparent\"\n box_fill_mode=\"fill\"\n [box_content_fill_width]=\"true\"\n >\n <ui-heading\n heading_type=\"primary\"\n [heading_on_dark]=\"\n herobox.backgroundIsDark || text_on_dark_override === 'true' ? true : false\n \"\n [heading_title]=\"heading_title\"\n [heading_seo_priority]=\"true\"\n [heading_subtitle]=\"heading_subtitle\"\n [heading_surtitle]=\"heading_surtitle\"\n [heading_level]=\"heading_level\"\n >\n </ui-heading>\n </ui-box>\n <!-- TODO: replace with ui-button-group once built-->\n @if (primary_cta_text) {\n <ui-stack\n class=\"cta-container\"\n stack_direction=\"x\"\n [stack_align]=\"heroCtaAlignment\"\n [stack_distribute]=\"heroCtaAlignment\"\n [stack_wrap]=\"true\"\n stack_gap=\"near\"\n >\n <ui-button\n bwtrackas=\"oasys.hero-block.primary-cta\"\n button_size=\"large\"\n [button_type]=\"\n herobox.backgroundIsDark || text_on_dark_override === 'true'\n ? 'primary-inverse'\n : 'primary'\n \"\n [href]=\"href_primary_cta\"\n >\n <span>{{ primary_cta_text }}</span>\n </ui-button>\n @if (secondary_cta_text) {\n <ui-button\n bwtrackas=\"oasys.hero-block.secondary-cta\"\n button-size=\"large\"\n [button_type]=\"\n herobox.backgroundIsDark || text_on_dark_override === 'true'\n ? 'secondary-inverse'\n : 'secondary'\n \"\n [href]=\"href_secondary_cta\"\n >\n <span>{{ secondary_cta_text }}</span>\n </ui-button>\n }\n </ui-stack>\n }\n </ui-stack>\n </ui-box>\n </ui-column>\n <ui-column [columns]=\"7\">\n @if (media_type === 'image') {\n <picture>\n <source\n [srcset]=\"\n image + '?w=880&h=880&fm=webp&q=75 1x,' + image + '?w=1760&h=1760&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 1440px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"\n image + '?w=720&h=720&fm=webp&q=75 1x,' + image + '?w=1440&h=1440&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 1200px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"\n image + '?w=580&h=580&fm=webp&q=75 1x,' + image + '?w=1160&h=1160&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 992px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"\n image + '?w=430&h=430&fm=webp&q=75 1x,' + image + '?w=860&h=860&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 768px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"image + '?w=720&h=720&fm=webp&q=75 2x'\"\n media=\"(min-width: 454px)\"\n type=\"image/webp\"\n />\n <img\n fetchpriority=\"high\"\n [src]=\"image + '?w=430&h=430&fm=webp&q=75'\"\n [attr.alt]=\"alt_text\"\n width=\"100%\"\n height=\"100%\"\n style=\"object-fit: cover\"\n />\n </picture>\n }\n @if (media_type === 'video') {\n <ng-content></ng-content>\n }\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: ["ui-grid .image-top{order:0}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top{order:1}}\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_text_on_dark", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap", "grid_base"] }, { kind: "component", type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns", "column_inset"] }, { 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: "component", type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle", "heading_level"] }, { 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"] }] });
|
|
2094
2095
|
}
|
|
2095
2096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: HeroComponent, decorators: [{
|
|
2096
2097
|
type: Component,
|
|
@@ -2101,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
2101
2102
|
LayoutStackComponent,
|
|
2102
2103
|
OasysHeadingComponent,
|
|
2103
2104
|
OasysButtonComponent,
|
|
2104
|
-
], providers: [TokenService], template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\" #herobox>\n <ui-grid\n [style.min-height]=\"min_container_height ? min_container_height + 'px' : 'auto'\"\n grid_gap=\"none\"\n grid_collapse_below=\"tablet\"\n >\n <ui-column\n [columns]=\"5\"\n [class]=\"{ 'image-left': image_left_desktop, 'image-top': image_top_mobile }\"\n >\n <ui-box\n box_fill_mode=\"fill\"\n box_align_y=\"center\"\n box_background=\"transparent\"\n [box_space]=\"{\n mobile: heroInsetSpaceSmall,\n tablet: heroInsetSpaceSmall,\n laptop: heroInsetSpaceLarge,\n desktop: heroInsetSpaceLarge,\n }\"\n >\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n stack_gap=\"default\"\n >\n <ui-heading\n
|
|
2105
|
+
], providers: [TokenService], template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\" #herobox>\n <ui-grid\n [style.min-height]=\"min_container_height ? min_container_height + 'px' : 'auto'\"\n grid_gap=\"none\"\n grid_collapse_below=\"tablet\"\n >\n <ui-column\n [columns]=\"5\"\n [class]=\"{ 'image-left': image_left_desktop, 'image-top': image_top_mobile }\"\n >\n <ui-box\n box_fill_mode=\"fill\"\n box_align_y=\"center\"\n box_background=\"transparent\"\n [box_space]=\"{\n mobile: heroInsetSpaceSmall,\n tablet: heroInsetSpaceSmall,\n laptop: heroInsetSpaceLarge,\n desktop: heroInsetSpaceLarge,\n }\"\n >\n <ui-stack\n stack_direction=\"y\"\n stack_align=\"center\"\n stack_distribute=\"center\"\n stack_gap=\"default\"\n >\n <ui-box\n box_space=\"none\"\n box_background=\"transparent\"\n box_fill_mode=\"fill\"\n [box_content_fill_width]=\"true\"\n >\n <ui-heading\n heading_type=\"primary\"\n [heading_on_dark]=\"\n herobox.backgroundIsDark || text_on_dark_override === 'true' ? true : false\n \"\n [heading_title]=\"heading_title\"\n [heading_seo_priority]=\"true\"\n [heading_subtitle]=\"heading_subtitle\"\n [heading_surtitle]=\"heading_surtitle\"\n [heading_level]=\"heading_level\"\n >\n </ui-heading>\n </ui-box>\n <!-- TODO: replace with ui-button-group once built-->\n @if (primary_cta_text) {\n <ui-stack\n class=\"cta-container\"\n stack_direction=\"x\"\n [stack_align]=\"heroCtaAlignment\"\n [stack_distribute]=\"heroCtaAlignment\"\n [stack_wrap]=\"true\"\n stack_gap=\"near\"\n >\n <ui-button\n bwtrackas=\"oasys.hero-block.primary-cta\"\n button_size=\"large\"\n [button_type]=\"\n herobox.backgroundIsDark || text_on_dark_override === 'true'\n ? 'primary-inverse'\n : 'primary'\n \"\n [href]=\"href_primary_cta\"\n >\n <span>{{ primary_cta_text }}</span>\n </ui-button>\n @if (secondary_cta_text) {\n <ui-button\n bwtrackas=\"oasys.hero-block.secondary-cta\"\n button-size=\"large\"\n [button_type]=\"\n herobox.backgroundIsDark || text_on_dark_override === 'true'\n ? 'secondary-inverse'\n : 'secondary'\n \"\n [href]=\"href_secondary_cta\"\n >\n <span>{{ secondary_cta_text }}</span>\n </ui-button>\n }\n </ui-stack>\n }\n </ui-stack>\n </ui-box>\n </ui-column>\n <ui-column [columns]=\"7\">\n @if (media_type === 'image') {\n <picture>\n <source\n [srcset]=\"\n image + '?w=880&h=880&fm=webp&q=75 1x,' + image + '?w=1760&h=1760&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 1440px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"\n image + '?w=720&h=720&fm=webp&q=75 1x,' + image + '?w=1440&h=1440&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 1200px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"\n image + '?w=580&h=580&fm=webp&q=75 1x,' + image + '?w=1160&h=1160&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 992px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"\n image + '?w=430&h=430&fm=webp&q=75 1x,' + image + '?w=860&h=860&fm=webp&q=75 2x'\n \"\n media=\"(min-width: 768px)\"\n type=\"image/webp\"\n />\n <source\n [srcset]=\"image + '?w=720&h=720&fm=webp&q=75 2x'\"\n media=\"(min-width: 454px)\"\n type=\"image/webp\"\n />\n <img\n fetchpriority=\"high\"\n [src]=\"image + '?w=430&h=430&fm=webp&q=75'\"\n [attr.alt]=\"alt_text\"\n width=\"100%\"\n height=\"100%\"\n style=\"object-fit: cover\"\n />\n </picture>\n }\n @if (media_type === 'video') {\n <ng-content></ng-content>\n }\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: ["ui-grid .image-top{order:0}ui-grid .image-left{order:1}@media only screen and (max-width:766px){ui-grid .image-top{order:1}}\n"] }]
|
|
2105
2106
|
}], propDecorators: { herobox: [{
|
|
2106
2107
|
type: ViewChild,
|
|
2107
2108
|
args: ['herobox', { read: ElementRef }]
|