oasys-lib 2.43.1-rc.0 → 2.44.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 +14 -10
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/index.d.ts +2 -2
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +1 -1
- package/src/assets/bloomandwild-loyalty-tier-1/variables.css +1 -1
- package/src/assets/bloomandwild-loyalty-tier-2/variables.css +1 -1
- package/src/assets/bloomon/variables.css +1 -1
- package/src/assets/bloomon-loyalty-tier-1/variables.css +1 -1
- package/src/assets/bloomon-loyalty-tier-2/variables.css +1 -1
- package/src/assets/global/scss-breakpoints.scss +1 -1
package/fesm2022/oasys-lib.mjs
CHANGED
|
@@ -1054,7 +1054,9 @@ class CardComponent {
|
|
|
1054
1054
|
return this.tokenService.getTokenValue('--oasys-component-card-aspect-ratio-portrait');
|
|
1055
1055
|
}
|
|
1056
1056
|
}, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
1057
|
-
imageLabel = viewChild('imagelabel', ...(ngDevMode ? [{ debugName: "imageLabel" }] : [
|
|
1057
|
+
imageLabel = viewChild('imagelabel', ...(ngDevMode ? [{ debugName: "imageLabel", read: (ElementRef) }] : [{
|
|
1058
|
+
read: (ElementRef),
|
|
1059
|
+
}]));
|
|
1058
1060
|
stackOffset = signal('0px', ...(ngDevMode ? [{ debugName: "stackOffset" }] : []));
|
|
1059
1061
|
constructor() {
|
|
1060
1062
|
const spacingTightSize = this.tokenService.getTokenValue('--oasys-spacing-tight');
|
|
@@ -1066,7 +1068,7 @@ class CardComponent {
|
|
|
1066
1068
|
for (const entry of entries) {
|
|
1067
1069
|
const height = entry.borderBoxSize.at(0)?.blockSize;
|
|
1068
1070
|
this.stackOffset.set(height !== undefined && height > 0
|
|
1069
|
-
? `calc(
|
|
1071
|
+
? `calc(-${height / 2}px - ${spacingTightSize})`
|
|
1070
1072
|
: '0px');
|
|
1071
1073
|
}
|
|
1072
1074
|
});
|
|
@@ -1082,12 +1084,14 @@ class CardComponent {
|
|
|
1082
1084
|
});
|
|
1083
1085
|
}
|
|
1084
1086
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1085
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", 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, isSignal: true }], ngImport: i0, template: "<ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"none\">\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"] }] });
|
|
1087
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", 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 class=\"ui-card\" box_background=\"core-primary\" box_space=\"none\">\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"] }] });
|
|
1086
1088
|
}
|
|
1087
1089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CardComponent, decorators: [{
|
|
1088
1090
|
type: Component,
|
|
1089
1091
|
args: [{ selector: 'ui-card', imports: [LayoutBoxComponent, LayoutStackComponent, ImageComponent], providers: [TokenService], template: "<ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"none\">\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"] }]
|
|
1090
|
-
}], 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', {
|
|
1092
|
+
}], 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', { ...{
|
|
1093
|
+
read: (ElementRef),
|
|
1094
|
+
}, isSignal: true }] }] } });
|
|
1091
1095
|
|
|
1092
1096
|
/** @deprecated Import the standalone CardComponent directly instead. */
|
|
1093
1097
|
class OasysCardModule {
|
|
@@ -2371,7 +2375,7 @@ class BannerComponent {
|
|
|
2371
2375
|
this.cta_clicked.emit();
|
|
2372
2376
|
}
|
|
2373
2377
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BannerComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2374
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: BannerComponent, isStandalone: true, selector: "ui-banner", inputs: { background_colour: "background_colour", cta_text: "cta_text", banner_title: "banner_title", banner_surtitle: "banner_surtitle", banner_subtitle: "banner_subtitle", cta_link: "cta_link" }, outputs: { cta_clicked: "cta_clicked" }, providers: [TokenService], ngImport: i0, template: "<ui-box\n [box_background]=\"background_colour\"\n box_space_left=\"none\"\n box_space_right=\"none\"\n box_fill_mode=\"fill\"\n box_align_x=\"center\"\n class=\"ui-banner\"\n #bannerbox\n>\n <ui-grid grid_collapse_below=\"tablet\">\n <ui-column\n [columns]=\"{ mobile: 12, tablet: 10, laptop: 8, desktop: 8 }\"\n [column_inset]=\"{ mobile: 0, tablet: 1, laptop: 2, desktop: 2 }\"\n class=\"ui-banner__content\"\n >\n <ui-box\n [box_space]=\"{ mobile: mobilePadding, tablet: 'none' }\"\n box_space_top=\"none\"\n box_space_bottom=\"none\"\n box_background=\"transparent\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_gap=\"near\"\n stack_collapse_below=\"tablet\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"near\"\n >\n <!-- This is a stack as the icon will go here above the ui-heading -->\n <ui-heading\n *ngIf=\"banner_title || banner_surtitle || banner_subtitle\"\n heading_type=\"functional-primary\"\n [heading_title]=\"banner_title\"\n [heading_surtitle]=\"banner_surtitle\"\n [heading_subtitle]=\"banner_subtitle\"\n >\n </ui-heading>\n </ui-stack>\n <ui-button\n *ngIf=\"cta_text\"\n bwtrackas=\"oasys.hva-banner.cta\"\n button_size=\"large\"\n [button_type]=\"bannerbox.backgroundIsDark ? 'primary-inverse' : 'primary'\"\n [href]=\"cta_link\"\n (clicked)=\"onCtaClicked()\"\n >\n <span>{{ cta_text }}</span>\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: [".ui-banner__content .content__stack{align-items:flex-start}@media only screen and (min-width:767px)
|
|
2378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: BannerComponent, isStandalone: true, selector: "ui-banner", inputs: { background_colour: "background_colour", cta_text: "cta_text", banner_title: "banner_title", banner_surtitle: "banner_surtitle", banner_subtitle: "banner_subtitle", cta_link: "cta_link" }, outputs: { cta_clicked: "cta_clicked" }, providers: [TokenService], ngImport: i0, template: "<ui-box\n [box_background]=\"background_colour\"\n box_space_left=\"none\"\n box_space_right=\"none\"\n box_fill_mode=\"fill\"\n box_align_x=\"center\"\n class=\"ui-banner\"\n #bannerbox\n>\n <ui-grid grid_collapse_below=\"tablet\">\n <ui-column\n [columns]=\"{ mobile: 12, tablet: 10, laptop: 8, desktop: 8 }\"\n [column_inset]=\"{ mobile: 0, tablet: 1, laptop: 2, desktop: 2 }\"\n class=\"ui-banner__content\"\n >\n <ui-box\n [box_space]=\"{ mobile: mobilePadding, tablet: 'none' }\"\n box_space_top=\"none\"\n box_space_bottom=\"none\"\n box_background=\"transparent\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_gap=\"near\"\n stack_collapse_below=\"tablet\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"near\"\n >\n <!-- This is a stack as the icon will go here above the ui-heading -->\n <ui-heading\n *ngIf=\"banner_title || banner_surtitle || banner_subtitle\"\n heading_type=\"functional-primary\"\n [heading_title]=\"banner_title\"\n [heading_surtitle]=\"banner_surtitle\"\n [heading_subtitle]=\"banner_subtitle\"\n >\n </ui-heading>\n </ui-stack>\n <ui-button\n *ngIf=\"cta_text\"\n bwtrackas=\"oasys.hva-banner.cta\"\n button_size=\"large\"\n [button_type]=\"bannerbox.backgroundIsDark ? 'primary-inverse' : 'primary'\"\n [button_text_nowrap]=\"true\"\n [href]=\"cta_link\"\n (clicked)=\"onCtaClicked()\"\n >\n <span>{{ cta_text }}</span>\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: [".ui-banner__content .content__stack{align-items:flex-start}@media only screen and (min-width:767px){.ui-banner__content .content__stack{align-items:center}}\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
2375
2379
|
}
|
|
2376
2380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BannerComponent, decorators: [{
|
|
2377
2381
|
type: Component,
|
|
@@ -2383,7 +2387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
|
|
|
2383
2387
|
NgIf,
|
|
2384
2388
|
OasysHeadingComponent,
|
|
2385
2389
|
OasysButtonComponent,
|
|
2386
|
-
], providers: [TokenService], template: "<ui-box\n [box_background]=\"background_colour\"\n box_space_left=\"none\"\n box_space_right=\"none\"\n box_fill_mode=\"fill\"\n box_align_x=\"center\"\n class=\"ui-banner\"\n #bannerbox\n>\n <ui-grid grid_collapse_below=\"tablet\">\n <ui-column\n [columns]=\"{ mobile: 12, tablet: 10, laptop: 8, desktop: 8 }\"\n [column_inset]=\"{ mobile: 0, tablet: 1, laptop: 2, desktop: 2 }\"\n class=\"ui-banner__content\"\n >\n <ui-box\n [box_space]=\"{ mobile: mobilePadding, tablet: 'none' }\"\n box_space_top=\"none\"\n box_space_bottom=\"none\"\n box_background=\"transparent\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_gap=\"near\"\n stack_collapse_below=\"tablet\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"near\"\n >\n <!-- This is a stack as the icon will go here above the ui-heading -->\n <ui-heading\n *ngIf=\"banner_title || banner_surtitle || banner_subtitle\"\n heading_type=\"functional-primary\"\n [heading_title]=\"banner_title\"\n [heading_surtitle]=\"banner_surtitle\"\n [heading_subtitle]=\"banner_subtitle\"\n >\n </ui-heading>\n </ui-stack>\n <ui-button\n *ngIf=\"cta_text\"\n bwtrackas=\"oasys.hva-banner.cta\"\n button_size=\"large\"\n [button_type]=\"bannerbox.backgroundIsDark ? 'primary-inverse' : 'primary'\"\n [href]=\"cta_link\"\n (clicked)=\"onCtaClicked()\"\n >\n <span>{{ cta_text }}</span>\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: [".ui-banner__content .content__stack{align-items:flex-start}@media only screen and (min-width:767px)
|
|
2390
|
+
], providers: [TokenService], template: "<ui-box\n [box_background]=\"background_colour\"\n box_space_left=\"none\"\n box_space_right=\"none\"\n box_fill_mode=\"fill\"\n box_align_x=\"center\"\n class=\"ui-banner\"\n #bannerbox\n>\n <ui-grid grid_collapse_below=\"tablet\">\n <ui-column\n [columns]=\"{ mobile: 12, tablet: 10, laptop: 8, desktop: 8 }\"\n [column_inset]=\"{ mobile: 0, tablet: 1, laptop: 2, desktop: 2 }\"\n class=\"ui-banner__content\"\n >\n <ui-box\n [box_space]=\"{ mobile: mobilePadding, tablet: 'none' }\"\n box_space_top=\"none\"\n box_space_bottom=\"none\"\n box_background=\"transparent\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_distribute=\"space-between\"\n stack_gap=\"near\"\n stack_collapse_below=\"tablet\"\n >\n <ui-stack\n class=\"content__stack\"\n stack_direction=\"x\"\n stack_align=\"center\"\n stack_gap=\"near\"\n >\n <!-- This is a stack as the icon will go here above the ui-heading -->\n <ui-heading\n *ngIf=\"banner_title || banner_surtitle || banner_subtitle\"\n heading_type=\"functional-primary\"\n [heading_title]=\"banner_title\"\n [heading_surtitle]=\"banner_surtitle\"\n [heading_subtitle]=\"banner_subtitle\"\n >\n </ui-heading>\n </ui-stack>\n <ui-button\n *ngIf=\"cta_text\"\n bwtrackas=\"oasys.hva-banner.cta\"\n button_size=\"large\"\n [button_type]=\"bannerbox.backgroundIsDark ? 'primary-inverse' : 'primary'\"\n [button_text_nowrap]=\"true\"\n [href]=\"cta_link\"\n (clicked)=\"onCtaClicked()\"\n >\n <span>{{ cta_text }}</span>\n </ui-button>\n </ui-stack>\n </ui-box>\n </ui-column>\n </ui-grid>\n</ui-box>\n", styles: [".ui-banner__content .content__stack{align-items:flex-start}@media only screen and (min-width:767px){.ui-banner__content .content__stack{align-items:center}}\n"] }]
|
|
2387
2391
|
}], ctorParameters: () => [{ type: TokenService }], propDecorators: { background_colour: [{
|
|
2388
2392
|
type: Input
|
|
2389
2393
|
}], cta_text: [{
|
|
@@ -3650,17 +3654,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
|
|
|
3650
3654
|
|
|
3651
3655
|
class ProgressBarComponent {
|
|
3652
3656
|
percentage = 50;
|
|
3653
|
-
|
|
3657
|
+
shape = 'circular';
|
|
3654
3658
|
text = '0 / 3';
|
|
3655
3659
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3656
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { percentage: "percentage",
|
|
3660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { percentage: "percentage", shape: "shape", text: "text" }, ngImport: i0, template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'circular'\"\n box_space=\"none\"\n class=\"bw-cicle-progress-bar\"\n [style.--bw-cicle-progress-bar-progress-size]=\"percentage\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"percentage\"\n [attr.aria-label]=\"text\"\n>\n <svg>\n <circle class=\"full-bar\" />\n <circle class=\"progress-bar\" />\n </svg>\n <div class=\"bw-cicle-progress-bar__content text-body--micro\">\n <span class=\"bw-cicle-progress-bar__content-text\">{{ text }}</span>\n </div>\n</ui-box>\n\n<!-- Line Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'line'\"\n box_space=\"none\"\n box_fit_mode=\"fit\"\n class=\"bw-line-progress-bar\"\n [style.--bw-line-progress-bar-progress-size]=\"percentage\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"percentage\"\n [attr.aria-label]=\"text\"\n>\n <svg>\n <rect class=\"full-bar\" />\n <rect class=\"progress-bar\" />\n </svg>\n</ui-box>\n", styles: [".bw-cicle-progress-bar{--bw-cicle-progress-bar-progress-size: 0;--bw-cicle-progress-bar-size: 48px;display:block;position:relative;width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bw-cicle-progress-bar svg{--size: 48px;--half-size: calc(var(--size) / 2);--stroke-width: 4px;--radius: calc((var(--size) - var(--stroke-width)) / 2);--circumference: calc(var(--radius) * pi * 2);--dash: calc((var(--bw-cicle-progress-bar-progress-size) * var(--circumference)) / 100);width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none;stroke-linecap:round}.bw-cicle-progress-bar circle.full-bar{stroke:var(--oasys-color-interaction-background-disabled)}.bw-cicle-progress-bar circle.progress-bar{transform:rotate(-90deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));stroke:var(--oasys-color-brand-background-tertiary)}.bw-line-progress-bar{--bw-line-progress-bar-progress-size: 0;--bw-line-progress-bar-svg-height: 4px;--bw-line-progress-bar-width: 160px;display:block;width:var(--bw-line-progress-bar-width);height:auto}.bw-line-progress-bar svg{width:100%;height:var(--bw-line-progress-bar-svg-height)}.bw-line-progress-bar rect{height:100%;rx:calc(var(--bw-line-progress-bar-svg-height) / 2);ry:calc(var(--bw-line-progress-bar-svg-height) / 2)}.bw-line-progress-bar rect.full-bar{width:100%;fill:var(--oasys-color-interaction-background-disabled)}.bw-line-progress-bar rect.progress-bar{width:calc(var(--bw-line-progress-bar-progress-size) * 1%);fill:var(--oasys-color-brand-foreground-primary);transition:width .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
3657
3661
|
}
|
|
3658
3662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
3659
3663
|
type: Component,
|
|
3660
|
-
args: [{ selector: 'ui-progress-bar', standalone: true, imports: [CommonModule, LayoutBoxComponent], template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"
|
|
3664
|
+
args: [{ selector: 'ui-progress-bar', standalone: true, imports: [CommonModule, LayoutBoxComponent], template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'circular'\"\n box_space=\"none\"\n class=\"bw-cicle-progress-bar\"\n [style.--bw-cicle-progress-bar-progress-size]=\"percentage\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"percentage\"\n [attr.aria-label]=\"text\"\n>\n <svg>\n <circle class=\"full-bar\" />\n <circle class=\"progress-bar\" />\n </svg>\n <div class=\"bw-cicle-progress-bar__content text-body--micro\">\n <span class=\"bw-cicle-progress-bar__content-text\">{{ text }}</span>\n </div>\n</ui-box>\n\n<!-- Line Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'line'\"\n box_space=\"none\"\n box_fit_mode=\"fit\"\n class=\"bw-line-progress-bar\"\n [style.--bw-line-progress-bar-progress-size]=\"percentage\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"percentage\"\n [attr.aria-label]=\"text\"\n>\n <svg>\n <rect class=\"full-bar\" />\n <rect class=\"progress-bar\" />\n </svg>\n</ui-box>\n", styles: [".bw-cicle-progress-bar{--bw-cicle-progress-bar-progress-size: 0;--bw-cicle-progress-bar-size: 48px;display:block;position:relative;width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bw-cicle-progress-bar svg{--size: 48px;--half-size: calc(var(--size) / 2);--stroke-width: 4px;--radius: calc((var(--size) - var(--stroke-width)) / 2);--circumference: calc(var(--radius) * pi * 2);--dash: calc((var(--bw-cicle-progress-bar-progress-size) * var(--circumference)) / 100);width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none;stroke-linecap:round}.bw-cicle-progress-bar circle.full-bar{stroke:var(--oasys-color-interaction-background-disabled)}.bw-cicle-progress-bar circle.progress-bar{transform:rotate(-90deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));stroke:var(--oasys-color-brand-background-tertiary)}.bw-line-progress-bar{--bw-line-progress-bar-progress-size: 0;--bw-line-progress-bar-svg-height: 4px;--bw-line-progress-bar-width: 160px;display:block;width:var(--bw-line-progress-bar-width);height:auto}.bw-line-progress-bar svg{width:100%;height:var(--bw-line-progress-bar-svg-height)}.bw-line-progress-bar rect{height:100%;rx:calc(var(--bw-line-progress-bar-svg-height) / 2);ry:calc(var(--bw-line-progress-bar-svg-height) / 2)}.bw-line-progress-bar rect.full-bar{width:100%;fill:var(--oasys-color-interaction-background-disabled)}.bw-line-progress-bar rect.progress-bar{width:calc(var(--bw-line-progress-bar-progress-size) * 1%);fill:var(--oasys-color-brand-foreground-primary);transition:width .3s ease}\n"] }]
|
|
3661
3665
|
}], propDecorators: { percentage: [{
|
|
3662
3666
|
type: Input
|
|
3663
|
-
}],
|
|
3667
|
+
}], shape: [{
|
|
3664
3668
|
type: Input
|
|
3665
3669
|
}], text: [{
|
|
3666
3670
|
type: Input
|