oasys-lib 1.14.6 → 1.15.1

package/bundles/oasys-lib.umd.js

@@ -1227,7 +1227,7 @@
          */
         CardComponent.prototype.setStackPlacement = function () {
             var _a, _b;
-            this.stackOffset = "-" + (((_b = (_a = this.imageLabel) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) / 2) + "px";
+            this.stackOffset = "calc(-" + ((_b = (_a = this.imageLabel) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) / 2 + "px - " + this.tokenService.getTokenValue('--semantic-spacing-box-tight');
         };
         /**
          * This function retrieves the appropriate design token value based on the passed imageFormat choice
@@ -1250,7 +1250,7 @@
         return CardComponent;
     }());
     CardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CardComponent, selector: "ui-card", inputs: { label_text: "label_text", image: "image", alt_text: "alt_text", image_format: "image_format", small_title_left: "small_title_left", small_sub_title_right: "small_sub_title_right", standard_content: "standard_content", bold_content: "bold_content" }, host: { listeners: { "window:resize": "setStackPlacement($event)" } }, viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"none\">\n    <ui-stack stack_align=\"center\" stack_gap=\"none\">\n        <ui-box\n            class=\"ui-card__image\"\n            [ngStyle]=\"{'aspect-ratio': aspectRatio}\"\n            box_background=\"transparent\"\n            box_align_x=\"center\"\n            box_space=\"none\">\n                <img [src]=\"image\" [attr.alt]=\"alt_text\">\n        </ui-box>\n        <ui-stack stack_gap=\"tight\" [ngStyle]=\"{'margin-top': stackOffset}\">\n            <ui-box\n                #imagelabel\n                *ngIf=\"label_text\"\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                <h5>{{label_text}}</h5>\n            </ui-box>\n            <ui-box *ngIf=\"small_title_left || small_sub_title_right\" [box_space_top]=\"label_text ? 'none' : 'tight'\" box_space=\"none\" box_background=\"transparent\" >\n                <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_title_left}}</span>\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_sub_title_right}}</span>\n                </ui-stack>\n            </ui-box>\n            <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">{{standard_content}}</p>\n            <p *ngIf=\"bold_content\" class=\"text-label--primary text-body--emphasis\">{{bold_content}}</p>\n        </ui-stack>\n    </ui-stack>\n</ui-box>\n", styles: [".ui-card__image{position:relative}.ui-card__image img{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:2px;margin:0 8px;text-align:center;overflow:hidden;z-index:2}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "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"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    CardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CardComponent, selector: "ui-card", inputs: { label_text: "label_text", image: "image", alt_text: "alt_text", image_format: "image_format", small_title_left: "small_title_left", small_sub_title_right: "small_sub_title_right", standard_content: "standard_content", bold_content: "bold_content" }, host: { listeners: { "window:resize": "setStackPlacement($event)" } }, viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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            [ngStyle]=\"{'aspect-ratio': aspectRatio}\"\n            box_background=\"transparent\"\n            box_align_x=\"center\"\n            box_space=\"none\">\n                <img [src]=\"image\" [attr.alt]=\"alt_text\">\n        </ui-box>\n        <ui-stack stack_gap=\"tight\" [ngStyle]=\"{'margin-top': stackOffset}\">\n            <ui-box\n                #imagelabel\n                *ngIf=\"label_text\"\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                <h5>{{label_text}}</h5>\n            </ui-box>\n            <ui-box *ngIf=\"small_title_left || small_sub_title_right\" [box_space_top]=\"label_text ? 'none' : 'tight'\" box_space=\"none\" box_background=\"transparent\" >\n                <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_title_left}}</span>\n                    <span class=\"text-body--supporting text-color--supporting\">{{small_sub_title_right}}</span>\n                </ui-stack>\n            </ui-box>\n            <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">{{standard_content}}</p>\n            <p *ngIf=\"bold_content\" class=\"text-label--primary text-body--emphasis\">{{bold_content}}</p>\n        </ui-stack>\n    </ui-stack>\n</ui-box>\n", styles: [".ui-card__image{position:relative}.ui-card__image img{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:2px;margin:0 8px;text-align:center;overflow:hidden;z-index:2}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "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"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1938,6 +1938,55 @@
                     }]
             }] });
 
+    var BannerComponent = /** @class */ (function () {
+        function BannerComponent(tokenService) {
+            this.tokenService = tokenService;
+            this.background_colour = 'tint-highlight';
+        }
+        BannerComponent.prototype.ngOnInit = function () {
+            this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.background_colour);
+        };
+        return BannerComponent;
+    }());
+    BannerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BannerComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BannerComponent, selector: "ui-banner", inputs: { background_colour: "background_colour", cta_text: "cta_text", banner_title: "banner_title", banner_surtitle: "banner_surtitle", banner_subtitle: "banner_subtitle" }, ngImport: i0__namespace, 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    <ui-grid grid_collapse_below=\"tablet\">\n        <ui-column class=\"ui-banner__content\">\n            <ui-stack class=\"content__stack\" stack_direction=\"x\" stack_distribute=\"space-between\" stack_align=\"center\" stack_gap=\"near\">\n                <ui-stack class=\"content__stack\" stack_direction=\"x\" stack_align=\"center\" stack_gap=\"near\">\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                    </ui-heading>\n                </ui-stack>\n                <ui-button\n                    *ngIf=\"cta_text\"\n                    button_size=\"large\"\n                    [button_type]=\"backgroundIsDark  === 'on-dark' ? 'primary-inverse' : 'primary'\">\n                    <span #buttontext>{{cta_text}}</span>\n                </ui-button>\n            </ui-stack>\n        </ui-column>\n    </ui-grid>\n</ui-box>\n", styles: ["@media only screen and (min-width: 768px){.ui-banner__content{grid-column:2/span 10!important}}@media only screen and (min-width: 1080px){.ui-banner__content{grid-column:3/span 8!important}}@media only screen and (max-width: 767px){.ui-banner__content{padding:0 var(--semantic-spacing-stack-default)}}.ui-banner__content .content__stack{flex-direction:column;align-items:flex-start}@media only screen and (min-width: 768px){.ui-banner__content .content__stack{flex-direction:row;align-items:center}.ui-banner__content .content__stack ui-button{white-space:nowrap}}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "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"] }, { type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { 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"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BannerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-banner',
+                        templateUrl: './banner.component.html',
+                        styleUrls: ['./banner.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { background_colour: [{
+                    type: i0.Input
+                }], cta_text: [{
+                    type: i0.Input
+                }], banner_title: [{
+                    type: i0.Input
+                }], banner_surtitle: [{
+                    type: i0.Input
+                }], banner_subtitle: [{
+                    type: i0.Input
+                }] } });
+
+    var OasysBannerModule = /** @class */ (function () {
+        function OasysBannerModule() {
+        }
+        return OasysBannerModule;
+    }());
+    OasysBannerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBannerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OasysBannerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBannerModule, declarations: [BannerComponent], imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysIconModule], exports: [BannerComponent] });
+    OasysBannerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBannerModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysIconModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBannerModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [BannerComponent],
+                        imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysIconModule],
+                        exports: [BannerComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
+
     /*
      * Public API Surface of oasys-lib
      */
@@ -1946,6 +1995,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.BannerComponent = BannerComponent;
     exports.BreadcrumbsComponent = BreadcrumbsComponent;
     exports.CardComponent = CardComponent;
     exports.CarouselComponent = CarouselComponent;
@@ -1963,6 +2013,7 @@
     exports.OasysAlertContentDirective = OasysAlertContentDirective;
     exports.OasysAlertModule = OasysAlertModule;
     exports.OasysAlertTitleDirective = OasysAlertTitleDirective;
+    exports.OasysBannerModule = OasysBannerModule;
     exports.OasysBreadcrumbModule = OasysBreadcrumbModule;
     exports.OasysButtonComponent = OasysButtonComponent;
     exports.OasysButtonModule = OasysButtonModule;