npm - oasys-lib - Versions diffs - 1.21.1 → 1.21.3 - Mend

oasys-lib 1.21.1 → 1.21.3

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.

Files changed (76) hide show

package/bundles/oasys-lib.umd.js CHANGED Viewed

@@ -761,6 +761,39 @@
                     type: i0.Input
                 }] } });
+    var ROUTING_HANDLER = new i0.InjectionToken('ROUTING_HANDLER');
+    var OasysHrefDirective = /** @class */ (function () {
+        function OasysHrefDirective(el, routingHandler) {
+            this.routingHandler = routingHandler;
+            this.element = el;
+        }
+        OasysHrefDirective.prototype.onClick = function (event) {
+            this.routingHandler.handleRoutingOnClick(this.element.nativeElement, event);
+        };
+        OasysHrefDirective.prototype.ngAfterViewInit = function () {
+            this.routingHandler.handleHrefDomains(this.element.nativeElement);
+        };
+        return OasysHrefDirective;
+    }());
+    OasysHrefDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHrefDirective, deps: [{ token: i0__namespace.ElementRef }, { token: ROUTING_HANDLER }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OasysHrefDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OasysHrefDirective, selector: "a, uiHref, [uiHref]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHrefDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'a, uiHref, [uiHref]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [ROUTING_HANDLER]
+                        }] }];
+        }, propDecorators: { onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+    ;
     var OasysButtonComponent = /** @class */ (function () {
         function OasysButtonComponent(changes) {
             this.changes = changes;
@@ -815,7 +848,7 @@
         return OasysButtonComponent;
     }());
     OasysButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OasysButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OasysButtonComponent, selector: "ui-button", inputs: { button_icon: "button_icon", button_icon_placement: "button_icon_placement", button_size: "button_size", button_full_width: "button_full_width", button_type: "button_type", button_disabled: "button_disabled", href: "href" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "ngContent", first: true, predicate: ["buttontext"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #content>\n    <div class=\"button-content\">\n        <ui-icon *ngIf=\"button.buttonIcon && button.buttonIconPlacement !== 'none'\" [icon_name]=\"button.buttonIcon\" [icon_size]=\"button.buttonSize\" [icon_class]=\"'buttonIcon'\" [icon_context]=\"button.buttonIconPlacement\"></ui-icon>\n        <span class=\"ui-text\" [ngClass]=\"{'visuallyhidden': button.buttonIconPlacement === 'iconOnly'}\">\n            <ng-content></ng-content>\n        </span>\n    </div>\n    <div class=\"button-overlay\"></div>\n    <div class=\"button-overlay-focus\"></div>\n</ng-template>\n\n<button \n    *ngIf=\"!button.href\" \n    (click)=\"onClick()\"\n    [ngClass]=\"button.buttonDisplayClasses\"\n    [attr.disabled]=\"button.buttonDisabled === true || null\"\n    [attr.aria-label]=\"accessibleButtonContent\"\n    [attr.title]=\"accessibleButtonContent\"\n    role=\"button\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<a \n    *ngIf=\"button.href\"\n    [href]=\"button.href\"\n    [attr.disabled]=\"button.buttonDisabled === true || null\"\n    [attr.aria-label]=\"accessibleButtonContent\"\n    [attr.title]=\"accessibleButtonContent\"\n    [ngClass]=\"button.buttonDisplayClasses\">\n     <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n", styles: ["ui-button button,ui-button a{border:0;padding:0;position:relative;display:inline-flex;text-align:center;justify-content:center;align-items:center;border-style:solid;cursor:pointer;user-select:none;appearance:none;-webkit-appearance:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;border-radius:var(--component-button-border-radius);font-family:var(--semantic-font-family-body)}ui-button button .button-content,ui-button a .button-content{display:flex;align-items:center}ui-button button .button-content .ui-icon,ui-button a .button-content .ui-icon{display:flex;align-items:center;max-height:var(--component-button-line-height)}ui-button button .button-content .ui-text,ui-button a .button-content .ui-text{text-transform:var(--component-button-text-transform);letter-spacing:var(--component-button-letter-spacing);font-weight:var(--component-button-font-weight);line-height:var(--component-button-line-height)}ui-button button .button-overlay,ui-button button .button-overlay-focus,ui-button a .button-overlay,ui-button a .button-overlay-focus{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;pointer-events:none;border-radius:var(--component-button-border-radius);opacity:0}ui-button button:hover .button-overlay,ui-button a:hover .button-overlay{opacity:var(--component-button-opacity-overlay-hover)}ui-button button:focus .button-overlay,ui-button a:focus .button-overlay{opacity:var(--component-button-opacity-overlay-focus)}ui-button button:focus-visible .button-overlay,ui-button a:focus-visible .button-overlay{opacity:var(--component-button-opacity-overlay-focus-visible)}ui-button button:focus-visible,ui-button a:focus-visible{outline:none}ui-button button:focus-visible .button-overlay-focus,ui-button a:focus-visible .button-overlay-focus{top:calc(var(--component-button-outline-gap) * -1);right:calc(var(--component-button-outline-gap) * -1);bottom:calc(var(--component-button-outline-gap) * -1);left:calc(var(--component-button-outline-gap) * -1);box-shadow:0 0 0 var(--component-button-outline-width) var(--component-button-color-focus-visible);opacity:1;border-radius:calc(var(--component-button-border-radius) + var(--component-button-outline-width))}ui-button button:focus,ui-button a:focus{outline:none}ui-button button.type-primary,ui-button a.type-primary{background-color:var(--component-button-color-primary-background);border-color:var(--component-button-color-primary-border);color:var(--component-button-color-primary-text)}ui-button button.type-primary .button-overlay,ui-button a.type-primary .button-overlay{background-color:var(--component-button-color-primary-text)}ui-button button.type-secondary,ui-button a.type-secondary{background-color:var(--component-button-color-secondary-background);border-color:var(--component-button-color-secondary-border);color:var(--component-button-color-secondary-text)}ui-button button.type-secondary .button-overlay,ui-button a.type-secondary .button-overlay{background-color:var(--component-button-color-secondary-text)}ui-button button.type-tertiary,ui-button a.type-tertiary{background-color:var(--component-button-color-tertiary-background);border-color:var(--component-button-color-tertiary-border);color:var(--component-button-color-tertiary-text)}ui-button button.type-tertiary .button-overlay,ui-button a.type-tertiary .button-overlay{background-color:var(--component-button-color-tertiary-text)}ui-button button.type-primary-inverse,ui-button a.type-primary-inverse{background-color:var(--component-button-color-primary-inverse-background);border-color:var(--component-button-color-primary-inverse-border);color:var(--component-button-color-primary-inverse-text)}ui-button button.type-primary-inverse .button-overlay,ui-button a.type-primary-inverse .button-overlay{background-color:var(--component-button-color-primary-inverse-text)}ui-button button.type-secondary-inverse,ui-button a.type-secondary-inverse{background-color:var(--component-button-color-secondary-inverse-background);border-color:var(--component-button-color-secondary-inverse-border);color:var(--component-button-color-secondary-inverse-text)}ui-button button.type-secondary-inverse .button-overlay,ui-button a.type-secondary-inverse .button-overlay{background-color:var(--component-button-color-secondary-inverse-text)}ui-button button.type-tertiary-inverse,ui-button a.type-tertiary-inverse{background-color:var(--component-button-color-tertiary-inverse-background);border-color:var(--component-button-color-tertiary-inverse-border);color:var(--component-button-color-tertiary-inverse-text)}ui-button button.type-tertiary-inverse .button-overlay,ui-button a.type-tertiary-inverse .button-overlay{background-color:var(--component-button-color-tertiary-inverse-text)}ui-button button.type-expressive,ui-button a.type-expressive{background-color:var(--component-button-color-expressive-background);border-color:var(--component-button-color-expressive-border);color:var(--component-button-color-expressive-text)}ui-button button.type-expressive .button-overlay,ui-button a.type-expressive .button-overlay{background-color:var(--component-button-color-expressive-text)}ui-button button.type-danger,ui-button a.type-danger{background-color:var(--component-button-color-danger-background);border-color:var(--component-button-color-danger-border);color:var(--component-button-color-danger-text)}ui-button button.type-danger .button-overlay,ui-button a.type-danger .button-overlay{background-color:var(--component-button-color-danger-text)}ui-button button.type-facebook,ui-button a.type-facebook{background-color:var(--component-button-color-facebook-background);border-color:var(--component-button-color-facebook-border);color:var(--component-button-color-facebook-text)}ui-button button.type-facebook .button-overlay,ui-button a.type-facebook .button-overlay{background-color:var(--component-button-color-facebook-text)}ui-button button.type-paypal,ui-button a.type-paypal{background-color:var(--component-button-color-paypal-background);border-color:var(--component-button-color-paypal-border);color:var(--component-button-color-paypal-text)}ui-button button.type-paypal .button-overlay,ui-button a.type-paypal .button-overlay{background-color:var(--component-button-color-paypal-text)}ui-button button.type-trustpilot,ui-button a.type-trustpilot{background-color:var(--component-button-color-trustpilot-background);border-color:var(--component-button-color-trustpilot-border);color:var(--component-button-color-trustpilot-text)}ui-button button.type-trustpilot .button-overlay,ui-button a.type-trustpilot .button-overlay{background-color:var(--component-button-color-trustpilot-text)}ui-button button .buttonIcon,ui-button a .buttonIcon{fill:currentColor}ui-button button.size-large,ui-button a.size-large{padding:var(--component-button-size-large-padding-y) var(--component-button-size-large-padding-x);border-width:var(--component-button-size-large-border-width);font-size:var(--component-button-size-large-font-size)}ui-button button.size-large .button-content,ui-button a.size-large .button-content{grid-gap:var(--component-button-size-large-stack-spacing);gap:var(--component-button-size-large-stack-spacing)}ui-button button.size-large .ui-icon.icon-context-leading,ui-button a.size-large .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-large-icon-offset-leading) * -1)}ui-button button.size-large .ui-icon.icon-context-trailing,ui-button a.size-large .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-large-icon-offset-trailing) * -1)}ui-button button.size-large .ui-icon.icon-context-iconOnly,ui-button a.size-large .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-large-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-large-icon-offset-icon-only) * -1)}ui-button button.size-small,ui-button a.size-small{padding:var(--component-button-size-small-padding-y) var(--component-button-size-small-padding-x);border-width:var(--component-button-size-small-border-width);font-size:var(--component-button-size-small-font-size)}ui-button button.size-small .button-content,ui-button a.size-small .button-content{grid-gap:var(--component-button-size-small-stack-spacing);gap:var(--component-button-size-small-stack-spacing)}ui-button button.size-small .ui-icon.icon-context-leading,ui-button a.size-small .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-small-icon-offset-leading) * -1)}ui-button button.size-small .ui-icon.icon-context-trailing,ui-button a.size-small .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-small-icon-offset-trailing) * -1)}ui-button button.size-small .ui-icon.icon-context-iconOnly,ui-button a.size-small .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-small-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-small-icon-offset-icon-only) * -1)}ui-button button.button--outline.size-large,ui-button a.button--outline.size-large{padding:var(--component-button-size-large-with-outline-padding-y) var(--component-button-size-large-with-outline-padding-x);border-width:var(--component-button-size-large-with-outline-border-width);font-size:var(--component-button-size-large-font-size)}ui-button button.button--outline.size-large .button-content,ui-button a.button--outline.size-large .button-content{grid-gap:var(--component-button-size-large-stack-spacing);gap:var(--component-button-size-large-stack-spacing)}ui-button button.button--outline.size-large .ui-icon.icon-context-leading,ui-button a.button--outline.size-large .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-large-with-outline-icon-offset-leading) * -1)}ui-button button.button--outline.size-large .ui-icon.icon-context-trailing,ui-button a.button--outline.size-large .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-large-with-outline-icon-offset-trailing) * -1)}ui-button button.button--outline.size-large .ui-icon.icon-context-iconOnly,ui-button a.button--outline.size-large .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-large-with-outline-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-large-with-outline-icon-offset-icon-only) * -1)}ui-button button.button--outline.size-small,ui-button a.button--outline.size-small{padding:var(--component-button-size-small-with-outline-padding-y) var(--component-button-size-small-with-outline-padding-x);border-width:var(--component-button-size-small-with-outline-border-width);font-size:var(--component-button-size-small-font-size)}ui-button button.button--outline.size-small .button-content,ui-button a.button--outline.size-small .button-content{grid-gap:var(--component-button-size-small-stack-spacing);gap:var(--component-button-size-small-stack-spacing)}ui-button button.button--outline.size-small .ui-icon.icon-context-leading,ui-button a.button--outline.size-small .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-small-with-outline-icon-offset-leading) * -1)}ui-button button.button--outline.size-small .ui-icon.icon-context-trailing,ui-button a.button--outline.size-small .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-small-with-outline-icon-offset-trailing) * -1)}ui-button button.button--outline.size-small .ui-icon.icon-context-iconOnly,ui-button a.button--outline.size-small .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-small-with-outline-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-small-with-outline-icon-offset-icon-only) * -1)}ui-button button[disabled],ui-button a[disabled]{background-color:var(--component-button-color-disabled-background);border-color:var(--component-button-color-disabled-border);color:var(--component-button-color-disabled-text);cursor:default;pointer-events:none}ui-button button.button--has-icon.button--icon--trailing .button-content,ui-button a.button--has-icon.button--icon--trailing .button-content{flex-direction:row-reverse}ui-button button.button--full-width,ui-button a.button--full-width{display:contents;width:100%}\n"], components: [{ type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_name", "icon_context", "icon_width", "icon_height", "icon_class"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    OasysButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OasysButtonComponent, selector: "ui-button", inputs: { button_icon: "button_icon", button_icon_placement: "button_icon_placement", button_size: "button_size", button_full_width: "button_full_width", button_type: "button_type", button_disabled: "button_disabled", href: "href" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "ngContent", first: true, predicate: ["buttontext"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #content>\n    <div class=\"button-content\">\n        <ui-icon *ngIf=\"button.buttonIcon && button.buttonIconPlacement !== 'none'\" [icon_name]=\"button.buttonIcon\" [icon_size]=\"button.buttonSize\" [icon_class]=\"'buttonIcon'\" [icon_context]=\"button.buttonIconPlacement\"></ui-icon>\n        <span class=\"ui-text\" [ngClass]=\"{'visuallyhidden': button.buttonIconPlacement === 'iconOnly'}\">\n            <ng-content></ng-content>\n        </span>\n    </div>\n    <div class=\"button-overlay\"></div>\n    <div class=\"button-overlay-focus\"></div>\n</ng-template>\n\n<button \n    *ngIf=\"!button.href\" \n    (click)=\"onClick()\"\n    [ngClass]=\"button.buttonDisplayClasses\"\n    [attr.disabled]=\"button.buttonDisabled === true || null\"\n    [attr.aria-label]=\"accessibleButtonContent\"\n    [attr.title]=\"accessibleButtonContent\"\n    role=\"button\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<a \n    *ngIf=\"button.href\"\n    [href]=\"button.href\"\n    [attr.disabled]=\"button.buttonDisabled === true || null\"\n    [attr.aria-label]=\"accessibleButtonContent\"\n    [attr.title]=\"accessibleButtonContent\"\n    [ngClass]=\"button.buttonDisplayClasses\">\n     <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n", styles: ["ui-button button,ui-button a{border:0;padding:0;position:relative;display:inline-flex;text-align:center;justify-content:center;align-items:center;border-style:solid;cursor:pointer;user-select:none;appearance:none;-webkit-appearance:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;border-radius:var(--component-button-border-radius);font-family:var(--semantic-font-family-body)}ui-button button .button-content,ui-button a .button-content{display:flex;align-items:center}ui-button button .button-content .ui-icon,ui-button a .button-content .ui-icon{display:flex;align-items:center;max-height:var(--component-button-line-height)}ui-button button .button-content .ui-text,ui-button a .button-content .ui-text{text-transform:var(--component-button-text-transform);letter-spacing:var(--component-button-letter-spacing);font-weight:var(--component-button-font-weight);line-height:var(--component-button-line-height)}ui-button button .button-overlay,ui-button button .button-overlay-focus,ui-button a .button-overlay,ui-button a .button-overlay-focus{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;pointer-events:none;border-radius:var(--component-button-border-radius);opacity:0}ui-button button:hover .button-overlay,ui-button a:hover .button-overlay{opacity:var(--component-button-opacity-overlay-hover)}ui-button button:focus .button-overlay,ui-button a:focus .button-overlay{opacity:var(--component-button-opacity-overlay-focus)}ui-button button:focus-visible .button-overlay,ui-button a:focus-visible .button-overlay{opacity:var(--component-button-opacity-overlay-focus-visible)}ui-button button:focus-visible,ui-button a:focus-visible{outline:none}ui-button button:focus-visible .button-overlay-focus,ui-button a:focus-visible .button-overlay-focus{top:calc(var(--component-button-outline-gap) * -1);right:calc(var(--component-button-outline-gap) * -1);bottom:calc(var(--component-button-outline-gap) * -1);left:calc(var(--component-button-outline-gap) * -1);box-shadow:0 0 0 var(--component-button-outline-width) var(--component-button-color-focus-visible);opacity:1;border-radius:calc(var(--component-button-border-radius) + var(--component-button-outline-width))}ui-button button:focus,ui-button a:focus{outline:none}ui-button button.type-primary,ui-button a.type-primary{background-color:var(--component-button-color-primary-background);border-color:var(--component-button-color-primary-border);color:var(--component-button-color-primary-text)}ui-button button.type-primary .button-overlay,ui-button a.type-primary .button-overlay{background-color:var(--component-button-color-primary-text)}ui-button button.type-secondary,ui-button a.type-secondary{background-color:var(--component-button-color-secondary-background);border-color:var(--component-button-color-secondary-border);color:var(--component-button-color-secondary-text)}ui-button button.type-secondary .button-overlay,ui-button a.type-secondary .button-overlay{background-color:var(--component-button-color-secondary-text)}ui-button button.type-tertiary,ui-button a.type-tertiary{background-color:var(--component-button-color-tertiary-background);border-color:var(--component-button-color-tertiary-border);color:var(--component-button-color-tertiary-text)}ui-button button.type-tertiary .button-overlay,ui-button a.type-tertiary .button-overlay{background-color:var(--component-button-color-tertiary-text)}ui-button button.type-primary-inverse,ui-button a.type-primary-inverse{background-color:var(--component-button-color-primary-inverse-background);border-color:var(--component-button-color-primary-inverse-border);color:var(--component-button-color-primary-inverse-text)}ui-button button.type-primary-inverse .button-overlay,ui-button a.type-primary-inverse .button-overlay{background-color:var(--component-button-color-primary-inverse-text)}ui-button button.type-secondary-inverse,ui-button a.type-secondary-inverse{background-color:var(--component-button-color-secondary-inverse-background);border-color:var(--component-button-color-secondary-inverse-border);color:var(--component-button-color-secondary-inverse-text)}ui-button button.type-secondary-inverse .button-overlay,ui-button a.type-secondary-inverse .button-overlay{background-color:var(--component-button-color-secondary-inverse-text)}ui-button button.type-tertiary-inverse,ui-button a.type-tertiary-inverse{background-color:var(--component-button-color-tertiary-inverse-background);border-color:var(--component-button-color-tertiary-inverse-border);color:var(--component-button-color-tertiary-inverse-text)}ui-button button.type-tertiary-inverse .button-overlay,ui-button a.type-tertiary-inverse .button-overlay{background-color:var(--component-button-color-tertiary-inverse-text)}ui-button button.type-expressive,ui-button a.type-expressive{background-color:var(--component-button-color-expressive-background);border-color:var(--component-button-color-expressive-border);color:var(--component-button-color-expressive-text)}ui-button button.type-expressive .button-overlay,ui-button a.type-expressive .button-overlay{background-color:var(--component-button-color-expressive-text)}ui-button button.type-danger,ui-button a.type-danger{background-color:var(--component-button-color-danger-background);border-color:var(--component-button-color-danger-border);color:var(--component-button-color-danger-text)}ui-button button.type-danger .button-overlay,ui-button a.type-danger .button-overlay{background-color:var(--component-button-color-danger-text)}ui-button button.type-facebook,ui-button a.type-facebook{background-color:var(--component-button-color-facebook-background);border-color:var(--component-button-color-facebook-border);color:var(--component-button-color-facebook-text)}ui-button button.type-facebook .button-overlay,ui-button a.type-facebook .button-overlay{background-color:var(--component-button-color-facebook-text)}ui-button button.type-paypal,ui-button a.type-paypal{background-color:var(--component-button-color-paypal-background);border-color:var(--component-button-color-paypal-border);color:var(--component-button-color-paypal-text)}ui-button button.type-paypal .button-overlay,ui-button a.type-paypal .button-overlay{background-color:var(--component-button-color-paypal-text)}ui-button button.type-trustpilot,ui-button a.type-trustpilot{background-color:var(--component-button-color-trustpilot-background);border-color:var(--component-button-color-trustpilot-border);color:var(--component-button-color-trustpilot-text)}ui-button button.type-trustpilot .button-overlay,ui-button a.type-trustpilot .button-overlay{background-color:var(--component-button-color-trustpilot-text)}ui-button button .buttonIcon,ui-button a .buttonIcon{fill:currentColor}ui-button button.size-large,ui-button a.size-large{padding:var(--component-button-size-large-padding-y) var(--component-button-size-large-padding-x);border-width:var(--component-button-size-large-border-width);font-size:var(--component-button-size-large-font-size)}ui-button button.size-large .button-content,ui-button a.size-large .button-content{grid-gap:var(--component-button-size-large-stack-spacing);gap:var(--component-button-size-large-stack-spacing)}ui-button button.size-large .ui-icon.icon-context-leading,ui-button a.size-large .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-large-icon-offset-leading) * -1)}ui-button button.size-large .ui-icon.icon-context-trailing,ui-button a.size-large .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-large-icon-offset-trailing) * -1)}ui-button button.size-large .ui-icon.icon-context-iconOnly,ui-button a.size-large .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-large-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-large-icon-offset-icon-only) * -1)}ui-button button.size-small,ui-button a.size-small{padding:var(--component-button-size-small-padding-y) var(--component-button-size-small-padding-x);border-width:var(--component-button-size-small-border-width);font-size:var(--component-button-size-small-font-size)}ui-button button.size-small .button-content,ui-button a.size-small .button-content{grid-gap:var(--component-button-size-small-stack-spacing);gap:var(--component-button-size-small-stack-spacing)}ui-button button.size-small .ui-icon.icon-context-leading,ui-button a.size-small .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-small-icon-offset-leading) * -1)}ui-button button.size-small .ui-icon.icon-context-trailing,ui-button a.size-small .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-small-icon-offset-trailing) * -1)}ui-button button.size-small .ui-icon.icon-context-iconOnly,ui-button a.size-small .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-small-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-small-icon-offset-icon-only) * -1)}ui-button button.button--outline.size-large,ui-button a.button--outline.size-large{padding:var(--component-button-size-large-with-outline-padding-y) var(--component-button-size-large-with-outline-padding-x);border-width:var(--component-button-size-large-with-outline-border-width);font-size:var(--component-button-size-large-font-size)}ui-button button.button--outline.size-large .button-content,ui-button a.button--outline.size-large .button-content{grid-gap:var(--component-button-size-large-stack-spacing);gap:var(--component-button-size-large-stack-spacing)}ui-button button.button--outline.size-large .ui-icon.icon-context-leading,ui-button a.button--outline.size-large .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-large-with-outline-icon-offset-leading) * -1)}ui-button button.button--outline.size-large .ui-icon.icon-context-trailing,ui-button a.button--outline.size-large .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-large-with-outline-icon-offset-trailing) * -1)}ui-button button.button--outline.size-large .ui-icon.icon-context-iconOnly,ui-button a.button--outline.size-large .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-large-with-outline-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-large-with-outline-icon-offset-icon-only) * -1)}ui-button button.button--outline.size-small,ui-button a.button--outline.size-small{padding:var(--component-button-size-small-with-outline-padding-y) var(--component-button-size-small-with-outline-padding-x);border-width:var(--component-button-size-small-with-outline-border-width);font-size:var(--component-button-size-small-font-size)}ui-button button.button--outline.size-small .button-content,ui-button a.button--outline.size-small .button-content{grid-gap:var(--component-button-size-small-stack-spacing);gap:var(--component-button-size-small-stack-spacing)}ui-button button.button--outline.size-small .ui-icon.icon-context-leading,ui-button a.button--outline.size-small .ui-icon.icon-context-leading{margin-left:calc(var(--component-button-size-small-with-outline-icon-offset-leading) * -1)}ui-button button.button--outline.size-small .ui-icon.icon-context-trailing,ui-button a.button--outline.size-small .ui-icon.icon-context-trailing{margin-right:calc(var(--component-button-size-small-with-outline-icon-offset-trailing) * -1)}ui-button button.button--outline.size-small .ui-icon.icon-context-iconOnly,ui-button a.button--outline.size-small .ui-icon.icon-context-iconOnly{margin-left:calc(var(--component-button-size-small-with-outline-icon-offset-icon-only) * -1);margin-right:calc(var(--component-button-size-small-with-outline-icon-offset-icon-only) * -1)}ui-button button[disabled],ui-button a[disabled]{background-color:var(--component-button-color-disabled-background);border-color:var(--component-button-color-disabled-border);color:var(--component-button-color-disabled-text);cursor:default;pointer-events:none}ui-button button.button--has-icon.button--icon--trailing .button-content,ui-button a.button--has-icon.button--icon--trailing .button-content{flex-direction:row-reverse}ui-button button.button--full-width,ui-button a.button--full-width{display:contents;width:100%}\n"], components: [{ type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_name", "icon_context", "icon_width", "icon_height", "icon_class"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -901,19 +934,55 @@
                     args: [OasysAlertConfirmDirective]
                 }] } });
+    var HrefService = /** @class */ (function () {
+        function HrefService() {
+        }
+        HrefService.prototype.handleRoutingOnClick = function () {
+            // throw new Error('handleRoutingOnClick has not been implemented');
+        };
+        HrefService.prototype.handleHrefDomains = function () {
+            // throw new Error('handleHrefDomains has not been implemented');
+        };
+        return HrefService;
+    }());
+    HrefService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HrefService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    HrefService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HrefService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HrefService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }] });
+    var OasysDirectivesModule = /** @class */ (function () {
+        function OasysDirectivesModule() {
+        }
+        return OasysDirectivesModule;
+    }());
+    OasysDirectivesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDirectivesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OasysDirectivesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDirectivesModule, declarations: [OasysHrefDirective], imports: [i6.CommonModule, router.RouterModule], exports: [OasysHrefDirective] });
+    OasysDirectivesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDirectivesModule, providers: [{ provide: ROUTING_HANDLER, useClass: HrefService }], imports: [[i6.CommonModule, router.RouterModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDirectivesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [OasysHrefDirective],
+                        imports: [i6.CommonModule, router.RouterModule],
+                        exports: [OasysHrefDirective],
+                        providers: [{ provide: ROUTING_HANDLER, useClass: HrefService }],
+                    }]
+            }] });
     var OasysIconModule = /** @class */ (function () {
         function OasysIconModule() {
         }
         return OasysIconModule;
     }());
     OasysIconModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysIconModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, declarations: [IconComponent], imports: [i6.CommonModule], exports: [IconComponent] });
-    OasysIconModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, providers: [TokenService], imports: [[i6.CommonModule]] });
+    OasysIconModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, declarations: [IconComponent], imports: [i6.CommonModule, OasysDirectivesModule], exports: [IconComponent] });
+    OasysIconModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, providers: [TokenService], imports: [[i6.CommonModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [IconComponent],
-                        imports: [i6.CommonModule],
+                        imports: [i6.CommonModule, OasysDirectivesModule],
                         exports: [IconComponent],
                         providers: [TokenService],
                     }]
@@ -925,13 +994,13 @@
         return OasysButtonModule;
     }());
     OasysButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, declarations: [OasysButtonComponent], imports: [i6.CommonModule, router.RouterModule, OasysIconModule], exports: [OasysButtonComponent] });
-    OasysButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, imports: [[i6.CommonModule, router.RouterModule, OasysIconModule]] });
+    OasysButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, declarations: [OasysButtonComponent], imports: [i6.CommonModule, router.RouterModule, OasysIconModule, OasysDirectivesModule], exports: [OasysButtonComponent] });
+    OasysButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, imports: [[i6.CommonModule, router.RouterModule, OasysIconModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [OasysButtonComponent],
-                        imports: [i6.CommonModule, router.RouterModule, OasysIconModule],
+                        imports: [i6.CommonModule, router.RouterModule, OasysIconModule, OasysDirectivesModule],
                         exports: [OasysButtonComponent],
                     }]
             }] });
@@ -951,7 +1020,7 @@
             this.containerLayoutClasses = [
                 this.prefix,
                 this.container_fluid ? this.prefix + "-fluid" : '',
-                this.container_gutter ? '' : this.prefix + "-no-gutter"
+                this.container_gutter === true || this.container_gutter === 'true' ? '' : this.prefix + "-no-gutter"
             ].flat(10).filter(Boolean);
         };
         return LayoutContainerComponent;
@@ -1093,12 +1162,12 @@
             LayoutContainerComponent,
             LayoutGridComponent,
             LayoutGridColumnComponent,
-            LayoutStackComponent], exports: [LayoutBoxComponent,
+            LayoutStackComponent], imports: [OasysDirectivesModule], exports: [LayoutBoxComponent,
             LayoutContainerComponent,
             LayoutGridComponent,
             LayoutGridColumnComponent,
             LayoutStackComponent] });
-    OasysLayoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, providers: [TokenService] });
+    OasysLayoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, providers: [TokenService], imports: [[OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -1109,6 +1178,7 @@
                             LayoutGridColumnComponent,
                             LayoutStackComponent,
                         ],
+                        imports: [OasysDirectivesModule],
                         exports: [
                             LayoutBoxComponent,
                             LayoutContainerComponent,
@@ -1133,7 +1203,8 @@
             OasysAlertComponent], imports: [i6.CommonModule,
             OasysLayoutModule,
             OasysButtonModule,
-            OasysIconModule], exports: [OasysAlertCancelDirective,
+            OasysIconModule,
+            OasysDirectivesModule], exports: [OasysAlertCancelDirective,
             OasysAlertConfirmDirective,
             OasysAlertContentDirective,
             OasysAlertTitleDirective,
@@ -1143,6 +1214,7 @@
                 OasysLayoutModule,
                 OasysButtonModule,
                 OasysIconModule,
+                OasysDirectivesModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertModule, decorators: [{
                 type: i0.NgModule,
@@ -1159,6 +1231,7 @@
                             OasysLayoutModule,
                             OasysButtonModule,
                             OasysIconModule,
+                            OasysDirectivesModule
                         ],
                         exports: [
                             OasysAlertCancelDirective,
@@ -1204,13 +1277,13 @@
         return OasysBreadcrumbModule;
     }());
     OasysBreadcrumbModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysBreadcrumbModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, declarations: [BreadcrumbsComponent], imports: [i6.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule], exports: [BreadcrumbsComponent] });
-    OasysBreadcrumbModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, imports: [[i6.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule]] });
+    OasysBreadcrumbModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, declarations: [BreadcrumbsComponent], imports: [i6.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule, OasysDirectivesModule], exports: [BreadcrumbsComponent] });
+    OasysBreadcrumbModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, imports: [[i6.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [BreadcrumbsComponent],
-                        imports: [i6.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule, OasysDirectivesModule],
                         exports: [BreadcrumbsComponent],
                     }]
             }] });
@@ -1429,13 +1502,13 @@
         return OasysImageModule;
     }());
     OasysImageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysImageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, declarations: [ImageComponent], imports: [i6.CommonModule], exports: [ImageComponent] });
-    OasysImageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, providers: [ImageService], imports: [[i6.CommonModule]] });
+    OasysImageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, declarations: [ImageComponent], imports: [i6.CommonModule, OasysDirectivesModule], exports: [ImageComponent] });
+    OasysImageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, providers: [ImageService], imports: [[i6.CommonModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysImageModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [ImageComponent],
-                        imports: [i6.CommonModule],
+                        imports: [i6.CommonModule, OasysDirectivesModule],
                         exports: [ImageComponent],
                         providers: [ImageService]
                     }]
@@ -1447,13 +1520,13 @@
         return OasysCardModule;
     }());
     OasysCardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, declarations: [CardComponent], imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule], exports: [CardComponent] });
-    OasysCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, providers: [TokenService], imports: [[i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule]] });
+    OasysCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, declarations: [CardComponent], imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule, OasysDirectivesModule], exports: [CardComponent] });
+    OasysCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, providers: [TokenService], imports: [[i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [CardComponent],
-                        imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule],
+                        imports: [i6.CommonModule, OasysLayoutModule, router.RouterModule, OasysImageModule, OasysDirectivesModule],
                         exports: [CardComponent],
                         providers: [TokenService],
                     }]
@@ -1488,13 +1561,13 @@
         return OasysDividerModule;
     }());
     OasysDividerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysDividerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, declarations: [DividerComponent], imports: [i6.CommonModule, OasysLayoutModule], exports: [DividerComponent] });
-    OasysDividerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, imports: [[i6.CommonModule, OasysLayoutModule]] });
+    OasysDividerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, declarations: [DividerComponent], imports: [i6.CommonModule, OasysLayoutModule, OasysDirectivesModule], exports: [DividerComponent] });
+    OasysDividerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, imports: [[i6.CommonModule, OasysLayoutModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [DividerComponent],
-                        imports: [i6.CommonModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysLayoutModule, OasysDirectivesModule],
                         exports: [DividerComponent],
                     }]
             }] });
@@ -1586,13 +1659,13 @@
         return OasysHeadingModule;
     }());
     OasysHeadingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysHeadingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, declarations: [OasysHeadingComponent], imports: [i6.CommonModule, OasysLayoutModule], exports: [OasysHeadingComponent] });
-    OasysHeadingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, providers: [TokenService], imports: [[i6.CommonModule, OasysLayoutModule]] });
+    OasysHeadingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, declarations: [OasysHeadingComponent], imports: [i6.CommonModule, OasysLayoutModule, OasysDirectivesModule], exports: [OasysHeadingComponent] });
+    OasysHeadingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, providers: [TokenService], imports: [[i6.CommonModule, OasysLayoutModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [OasysHeadingComponent],
-                        imports: [i6.CommonModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysLayoutModule, OasysDirectivesModule],
                         exports: [OasysHeadingComponent],
                         providers: [TokenService],
                     }]
@@ -1661,13 +1734,13 @@
         return OasysHeroModule;
     }());
     OasysHeroModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysHeroModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, declarations: [HeroComponent], imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule], exports: [HeroComponent] });
-    OasysHeroModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule]] });
+    OasysHeroModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, declarations: [HeroComponent], imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule, OasysDirectivesModule], exports: [HeroComponent] });
+    OasysHeroModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [HeroComponent],
-                        imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule],
+                        imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysImageModule, OasysDirectivesModule],
                         exports: [HeroComponent],
                         providers: [TokenService],
                     }]
@@ -1706,7 +1779,7 @@
         return SeoBlockComponent;
     }());
     SeoBlockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SeoBlockComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SeoBlockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SeoBlockComponent, selector: "ui-seo-block", inputs: { heading_paragraph: "heading_paragraph", heading_links: "heading_links", main_content: "main_content", expanded_content: "expanded_content", links: "links", read_more_content_text: "read_more_content_text", read_less_content_text: "read_less_content_text", show_more_links_text: "show_more_links_text", show_less_links_text: "show_less_links_text" }, ngImport: i0__namespace, template: "<ui-box>\n  <ui-grid>\n    <ui-column columns=\"6\">\n      <ui-box box_space=\"none\" [box_space_right]=\"{\n          mobile: 'none',\n          tablet: 'expanded',\n          laptop: 'expanded',\n          desktop: 'expanded'\n        }\">\n        <ui-stack stack_gap=\"near\">\n          <ui-box box_space=\"none\">\n            <ui-heading heading_type=\"functional-primary\" heading_title=\"{{ heading_paragraph }}\"></ui-heading>\n          </ui-box>\n          <ui-box box_space=\"none\">\n            <span class=\"text-body--default\" class=\"ui-prose\" [innerHTML]=\"main_content\"></span>\n            <span class=\"text-body--default\" class=\"ui-prose\" *ngIf=\"expandedContentVisible\"\n              [innerHTML]=\"expanded_content\"></span>\n          </ui-box>\n          <ui-box box_space=\"none\" *ngIf=\"expanded_content\">\n            <span *ngIf=\"!expandedContentVisible\" role=\"button\" (click)=\"showMoreContent(true)\"\n              class=\"text-link text-link--standalone\">\n              {{read_more_content_text}}\n            </span>\n            <span *ngIf=\"expandedContentVisible\" role=\"button\" (click)=\"showMoreContent(false)\"\n              class=\"text-link text-link--standalone\">\n              {{read_less_content_text}}\n            </span>\n          </ui-box>\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n    <ui-column columns=\"6\">\n      <ui-box box_space=\"none\">\n        <ui-stack stack_gap=\"near\">\n          <ui-box box_space=\"none\">\n            <ui-heading heading_type=\"functional-secondary\" heading_title=\"{{ heading_links }}\"></ui-heading>\n          </ui-box>\n          <ui-stack stack_gap=\"tight\">\n            <ui-box box_space=\"none\" box_fill_mode=\"fit\" [ngStyle]=\"{'column-count': linksColumnsNumber}\"\n              class=\"links-container text-body--supporting\">\n              <ng-container *ngFor=\"let link of linksValues; index as i\">\n                <ui-box box_space=\"none\" box_space_bottom=\"tight\" box_fill_mode=\"fit\" class=\"link-container\"\n                  [ngClass]=\"{ 'hidden-mobile': i > 4 && !expandedLinksVisible }\">\n                  <a href=\"{{ link.href }}\">\n                    {{ link.name }}\n                  </a>\n                </ui-box>\n              </ng-container>\n            </ui-box>\n            <ui-box box_space=\"none\" class=\"hidden-desktop hidden-tablet\" *ngIf=\"linksValues.length > 4\">\n              <span *ngIf=\"!expandedLinksVisible\" (click)=\"showMoreLinks(true)\" class=\"text-link text-link--standalone\">\n                {{show_more_links_text}}\n              </span>\n              <span *ngIf=\"expandedLinksVisible\" (click)=\"showMoreLinks(false)\" class=\"text-link text-link--standalone\">\n                {{show_less_links_text}}\n              </span>\n            </ui-box>\n          </ui-stack>\n\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: [".links-container{display:block}@media only screen and (max-width: 767px){.links-container{display:flex}}.links-container .link-container{page-break-inside:avoid;break-inside:avoid-column}\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", "column_inset"] }, { 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"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    SeoBlockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SeoBlockComponent, selector: "ui-seo-block", inputs: { heading_paragraph: "heading_paragraph", heading_links: "heading_links", main_content: "main_content", expanded_content: "expanded_content", links: "links", read_more_content_text: "read_more_content_text", read_less_content_text: "read_less_content_text", show_more_links_text: "show_more_links_text", show_less_links_text: "show_less_links_text" }, ngImport: i0__namespace, template: "<ui-box>\n  <ui-grid>\n    <ui-column columns=\"6\">\n      <ui-box box_space=\"none\" [box_space_right]=\"{\n          mobile: 'none',\n          tablet: 'expanded',\n          laptop: 'expanded',\n          desktop: 'expanded'\n        }\">\n        <ui-stack stack_gap=\"near\">\n          <ui-box box_space=\"none\">\n            <ui-heading heading_type=\"functional-primary\" heading_title=\"{{ heading_paragraph }}\"></ui-heading>\n          </ui-box>\n          <ui-box box_space=\"none\">\n            <span class=\"text-body--default\" class=\"ui-prose\" [innerHTML]=\"main_content\"></span>\n            <span class=\"text-body--default\" class=\"ui-prose\" *ngIf=\"expandedContentVisible\"\n              [innerHTML]=\"expanded_content\"></span>\n          </ui-box>\n          <ui-box box_space=\"none\" *ngIf=\"expanded_content\">\n            <span *ngIf=\"!expandedContentVisible\" role=\"button\" (click)=\"showMoreContent(true)\"\n              class=\"text-link text-link--standalone\">\n              {{read_more_content_text}}\n            </span>\n            <span *ngIf=\"expandedContentVisible\" role=\"button\" (click)=\"showMoreContent(false)\"\n              class=\"text-link text-link--standalone\">\n              {{read_less_content_text}}\n            </span>\n          </ui-box>\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n    <ui-column columns=\"6\">\n      <ui-box box_space=\"none\">\n        <ui-stack stack_gap=\"near\">\n          <ui-box box_space=\"none\">\n            <ui-heading heading_type=\"functional-secondary\" heading_title=\"{{ heading_links }}\"></ui-heading>\n          </ui-box>\n          <ui-stack stack_gap=\"tight\">\n            <ui-box box_space=\"none\" box_fill_mode=\"fit\" [ngStyle]=\"{'column-count': linksColumnsNumber}\"\n              class=\"links-container text-body--supporting\">\n              <ng-container *ngFor=\"let link of linksValues; index as i\">\n                <ui-box box_space=\"none\" box_space_bottom=\"tight\" box_fill_mode=\"fit\" class=\"link-container\"\n                  [ngClass]=\"{ 'hidden-mobile': i > 4 && !expandedLinksVisible }\">\n                  <a href=\"{{ link.href }}\">\n                    {{ link.name }}\n                  </a>\n                </ui-box>\n              </ng-container>\n            </ui-box>\n            <ui-box box_space=\"none\" class=\"hidden-desktop hidden-tablet\" *ngIf=\"linksValues.length > 4\">\n              <span *ngIf=\"!expandedLinksVisible\" (click)=\"showMoreLinks(true)\" class=\"text-link text-link--standalone\">\n                {{show_more_links_text}}\n              </span>\n              <span *ngIf=\"expandedLinksVisible\" (click)=\"showMoreLinks(false)\" class=\"text-link text-link--standalone\">\n                {{show_less_links_text}}\n              </span>\n            </ui-box>\n          </ui-stack>\n\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: [".links-container{display:block}@media only screen and (max-width: 767px){.links-container{display:flex}}.links-container .link-container{page-break-inside:avoid;break-inside:avoid-column}\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", "column_inset"] }, { 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"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SeoBlockComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1743,12 +1816,14 @@
     OasysSeoBlockModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, declarations: [SeoBlockComponent], imports: [i6.CommonModule,
             OasysButtonModule,
             OasysHeadingModule,
-            OasysLayoutModule], exports: [SeoBlockComponent] });
+            OasysLayoutModule,
+            OasysDirectivesModule], exports: [SeoBlockComponent] });
     OasysSeoBlockModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, providers: [TokenService], imports: [[
                 i6.CommonModule,
                 OasysButtonModule,
                 OasysHeadingModule,
                 OasysLayoutModule,
+                OasysDirectivesModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, decorators: [{
                 type: i0.NgModule,
@@ -1759,6 +1834,7 @@
                             OasysButtonModule,
                             OasysHeadingModule,
                             OasysLayoutModule,
+                            OasysDirectivesModule
                         ],
                         exports: [SeoBlockComponent],
                         providers: [TokenService],
@@ -1805,13 +1881,13 @@
         return OasysTextModule;
     }());
     OasysTextModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, declarations: [TextComponent], imports: [i6.CommonModule], exports: [TextComponent] });
-    OasysTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, imports: [[i6.CommonModule]] });
+    OasysTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, declarations: [TextComponent], imports: [i6.CommonModule, OasysDirectivesModule], exports: [TextComponent] });
+    OasysTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, imports: [[i6.CommonModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TextComponent],
-                        imports: [i6.CommonModule],
+                        imports: [i6.CommonModule, OasysDirectivesModule],
                         exports: [TextComponent],
                     }]
             }] });
@@ -1862,7 +1938,7 @@
         return SectionComponent;
     }());
     SectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SectionComponent, selector: "ui-section", inputs: { brand_background_colour: "brand_background_colour", non_brand_background_colour: "non_brand_background_colour", text_on_dark_override: "text_on_dark_override", image_on_left: "image_on_left", section_type: "section_type", heading_title: "heading_title", heading_subtitle: "heading_subtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box\nid=\"ui-box-{{uiBoxId}}\"\n[box_background]=\"brand_background_colour\"\n[box_space_left]=\"section_type  === 'spotlight' && !image_on_left ? 'none' : ''\"\n[box_space_right]=\"section_type  === 'spotlight' && image_on_left ? 'none' : ''\"\n[box_space]=\"section_type === 'spotlight' ? 'none' : {mobile: containerInsetSpaceSmall, tablet: containerInsetSpaceLarge, laptop: containerInsetSpaceLarge, desktop: containerInsetSpaceLarge}\">\n\n    <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n            <ui-column  columns=\"6\" [ngClass]=\"{'image-left': image_on_left, 'image-top-mobile': image_on_left}\">\n                <ui-box\n                    box_space=\"none\"\n                    box_background=\"none\"\n                    box_align_y=\"center\"\n                    >\n                    <ui-image [image_src]=\"image\" [image_alt_text]=\"alt_text\" [preload_aspect_ratio]=\"imageAspectRatio\"></ui-image>\n                </ui-box>\n            </ui-column>\n\n            <ui-column columns=\"6\">\n                <ui-box\n                [box_background]=\"brand_background_colour\"\n                box_align_y=\"center\"\n                [box_space]=\"section_type === 'spotlight' ?  {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceLarge, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge} : {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceSmall, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge}\">\n                    <ui-stack\n                        stack_direction=\"y\"\n                        stack_align=\"center\"\n                        stack_distribute=\"center\"\n                        stack_wrap=\"true\"\n                        >\n                        <ui-heading\n                            [heading_type]=\"section_type === 'spotlight' ? 'primary' : 'functional-primary'\"\n                            [heading_title]=\"heading_title\"\n                            [heading_subtitle]=\"heading_subtitle\">\n                        </ui-heading>\n\n                        <ui-stack\n                            stack_direction=\"x\"\n                            stack_align=\"start\"\n                            [stack_distribute]=\"section_type === 'spotlight' ? 'center' : 'start'\"\n                            stack_wrap=\"true\"\n                            stack_gap=\"near\">\n\n                            <a class=\"text-link text-link--standalone\" [href]=\"href_primary_cta\" bwtrackas=\"oasys.story-block.primary-cta\">{{primary_cta_text}}</a>\n                            <a *ngIf=\"section_type !== 'spotlight'\" class=\"text-link text-link--standalone\" [href]=\"href_secondary_cta\" bwtrackas=\"oasys.story-block.secondary-cta\">{{secondary_cta_text}}</a>\n\n                        </ui-stack>\n                    </ui-stack>\n                </ui-box>\n            </ui-column>\n    </ui-grid>\n</ui-box>", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width: 767px){ui-grid .image-top-mobile{order:0}}\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", "column_inset"] }, { type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio"] }, { 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"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    SectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SectionComponent, selector: "ui-section", inputs: { brand_background_colour: "brand_background_colour", non_brand_background_colour: "non_brand_background_colour", text_on_dark_override: "text_on_dark_override", image_on_left: "image_on_left", section_type: "section_type", heading_title: "heading_title", heading_subtitle: "heading_subtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box\nid=\"ui-box-{{uiBoxId}}\"\n[box_background]=\"brand_background_colour\"\n[box_space_left]=\"section_type  === 'spotlight' && !image_on_left ? 'none' : ''\"\n[box_space_right]=\"section_type  === 'spotlight' && image_on_left ? 'none' : ''\"\n[box_space]=\"section_type === 'spotlight' ? 'none' : {mobile: containerInsetSpaceSmall, tablet: containerInsetSpaceLarge, laptop: containerInsetSpaceLarge, desktop: containerInsetSpaceLarge}\">\n\n    <ui-grid [grid_gap]=\"section_type === 'spotlight' ? 'none' : 'default'\">\n            <ui-column  columns=\"6\" [ngClass]=\"{'image-left': image_on_left, 'image-top-mobile': image_on_left}\">\n                <ui-box\n                    box_space=\"none\"\n                    box_background=\"none\"\n                    box_align_y=\"center\"\n                    >\n                    <ui-image [image_src]=\"image\" [image_alt_text]=\"alt_text\" [preload_aspect_ratio]=\"imageAspectRatio\"></ui-image>\n                </ui-box>\n            </ui-column>\n\n            <ui-column columns=\"6\">\n                <ui-box\n                [box_background]=\"brand_background_colour\"\n                box_align_y=\"center\"\n                [box_space]=\"section_type === 'spotlight' ?  {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceLarge, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge} : {mobile: contentInsetSpaceSmall, tablet: contentInsetSpaceSmall, laptop: contentInsetSpaceLarge, desktop: contentInsetSpaceLarge}\">\n                    <ui-stack\n                        stack_direction=\"y\"\n                        stack_align=\"center\"\n                        stack_distribute=\"center\"\n                        stack_wrap=\"true\"\n                        >\n                        <ui-heading\n                            [heading_type]=\"section_type === 'spotlight' ? 'primary' : 'functional-primary'\"\n                            [heading_title]=\"heading_title\"\n                            [heading_subtitle]=\"heading_subtitle\">\n                        </ui-heading>\n\n                        <ui-stack\n                            stack_direction=\"x\"\n                            stack_align=\"start\"\n                            [stack_distribute]=\"section_type === 'spotlight' ? 'center' : 'start'\"\n                            stack_wrap=\"true\"\n                            stack_gap=\"near\">\n\n                            <a class=\"text-link text-link--standalone\" [href]=\"href_primary_cta\" bwtrackas=\"oasys.story-block.primary-cta\">{{primary_cta_text}}</a>\n                            <a *ngIf=\"section_type !== 'spotlight'\" class=\"text-link text-link--standalone\" [href]=\"href_secondary_cta\" bwtrackas=\"oasys.story-block.secondary-cta\">{{secondary_cta_text}}</a>\n\n                        </ui-stack>\n                    </ui-stack>\n                </ui-box>\n            </ui-column>\n    </ui-grid>\n</ui-box>", styles: ["ui-grid ui-column img{width:100%;display:block}ui-grid .image-left{order:1}@media only screen and (max-width: 767px){ui-grid .image-top-mobile{order:0}}\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", "column_inset"] }, { type: ImageComponent, selector: "ui-image", inputs: ["image_src", "image_alt_text", "image_fill", "fetchpriority", "loading", "preload_aspect_ratio"] }, { 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"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OasysHrefDirective, selector: "a, uiHref, [uiHref]" }, { 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: SectionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1904,13 +1980,13 @@
         return SectionModule;
     }());
     SectionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, declarations: [SectionComponent], imports: [i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule], exports: [SectionComponent] });
-    SectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, providers: [TokenService], imports: [[i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule]] });
+    SectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, declarations: [SectionComponent], imports: [i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule, OasysDirectivesModule], exports: [SectionComponent] });
+    SectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, providers: [TokenService], imports: [[i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SectionComponent],
-                        imports: [i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysHeadingModule, OasysImageModule, OasysLayoutModule, OasysDirectivesModule],
                         exports: [SectionComponent],
                         providers: [TokenService]
                     }]
@@ -2085,13 +2161,13 @@
         return OasysCarouselModule;
     }());
     OasysCarouselModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCarouselModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysCarouselModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCarouselModule, declarations: [CarouselComponent], imports: [i6.CommonModule, OasysButtonModule, OasysLayoutModule], exports: [CarouselComponent] });
-    OasysCarouselModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCarouselModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysLayoutModule]] });
+    OasysCarouselModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCarouselModule, declarations: [CarouselComponent], imports: [i6.CommonModule, OasysButtonModule, OasysLayoutModule, OasysDirectivesModule], exports: [CarouselComponent] });
+    OasysCarouselModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCarouselModule, providers: [TokenService], imports: [[i6.CommonModule, OasysButtonModule, OasysLayoutModule, OasysDirectivesModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCarouselModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [CarouselComponent],
-                        imports: [i6.CommonModule, OasysButtonModule, OasysLayoutModule],
+                        imports: [i6.CommonModule, OasysButtonModule, OasysLayoutModule, OasysDirectivesModule],
                         exports: [CarouselComponent],
                         providers: [TokenService],
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
@@ -2113,7 +2189,7 @@
         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", cta_link: "cta_link" }, outputs: { cta_clicked: "cta_clicked" }, 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\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            <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                    [href]=\"cta_link\"\n                    (clicked)=\"onCtaClicked()\">\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 (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", "column_inset"] }, { 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"] }] });
+    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", cta_link: "cta_link" }, outputs: { cta_clicked: "cta_clicked" }, 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\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            <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                    bwtrackas=\"oasys.hva-banner.cta\"\n                    button_size=\"large\"\n                    [button_type]=\"backgroundIsDark  === 'on-dark' ? 'primary-inverse' : 'primary'\"\n                    [href]=\"cta_link\"\n                    (clicked)=\"onCtaClicked()\">\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 (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", "column_inset"] }, { 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: [{
@@ -2143,13 +2219,13 @@
         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]] });
+    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, OasysDirectivesModule], 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, OasysDirectivesModule]] });
     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],
+                        imports: [i6.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule, OasysIconModule, OasysDirectivesModule],
                         exports: [BannerComponent],
                         providers: [TokenService],
                     }]
@@ -2197,6 +2273,7 @@
     exports.OasysLayoutModule = OasysLayoutModule;
     exports.OasysSeoBlockModule = OasysSeoBlockModule;
     exports.OasysTextModule = OasysTextModule;
+    exports.ROUTING_HANDLER = ROUTING_HANDLER;
     exports.SectionComponent = SectionComponent;
     exports.SectionModule = SectionModule;
     exports.SeoBlockComponent = SeoBlockComponent;