oasys-lib 2.43.1-rc.1 → 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 +6 -6
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/index.d.ts +2 -2
- 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
|
@@ -2375,7 +2375,7 @@ class BannerComponent {
|
|
|
2375
2375
|
this.cta_clicked.emit();
|
|
2376
2376
|
}
|
|
2377
2377
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BannerComponent, deps: [{ token: TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
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 [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"] }] });
|
|
2379
2379
|
}
|
|
2380
2380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BannerComponent, decorators: [{
|
|
2381
2381
|
type: Component,
|
|
@@ -2387,7 +2387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
|
|
|
2387
2387
|
NgIf,
|
|
2388
2388
|
OasysHeadingComponent,
|
|
2389
2389
|
OasysButtonComponent,
|
|
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 [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"] }]
|
|
2391
2391
|
}], ctorParameters: () => [{ type: TokenService }], propDecorators: { background_colour: [{
|
|
2392
2392
|
type: Input
|
|
2393
2393
|
}], cta_text: [{
|
|
@@ -3654,17 +3654,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
|
|
|
3654
3654
|
|
|
3655
3655
|
class ProgressBarComponent {
|
|
3656
3656
|
percentage = 50;
|
|
3657
|
-
|
|
3657
|
+
shape = 'circular';
|
|
3658
3658
|
text = '0 / 3';
|
|
3659
3659
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3660
|
-
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"] }] });
|
|
3661
3661
|
}
|
|
3662
3662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
3663
3663
|
type: Component,
|
|
3664
|
-
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"] }]
|
|
3665
3665
|
}], propDecorators: { percentage: [{
|
|
3666
3666
|
type: Input
|
|
3667
|
-
}],
|
|
3667
|
+
}], shape: [{
|
|
3668
3668
|
type: Input
|
|
3669
3669
|
}], text: [{
|
|
3670
3670
|
type: Input
|