oasys-lib 1.11.0 → 1.12.0

package/bundles/oasys-lib.umd.js

@@ -1,1239 +1,1790 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router')) :
-  typeof define === 'function' && define.amd ? define('oasys-lib', ['exports', '@angular/core', '@angular/common', '@angular/router'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["oasys-lib"] = {}, global.ng.core, global.ng.common, global.ng.router));
-})(this, (function (exports, i0, i3, i2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/layout'), require('@angular/common'), require('@angular/router')) :
+    typeof define === 'function' && define.amd ? define('oasys-lib', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/cdk/layout', '@angular/common', '@angular/router'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["oasys-lib"] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.cdk.layout, global.ng.common, global.ng.router));
+})(this, (function (exports, i0, rxjs, operators, i1, i6, i2) { 'use strict';
 
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        if (k !== 'default') {
-          var d = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d.get ? d : {
-            enumerable: true,
-            get: function () { return e[k]; }
-          });
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
         }
-      });
+        n["default"] = e;
+        return Object.freeze(n);
     }
-    n["default"] = e;
-    return Object.freeze(n);
-  }
 
-  var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-  var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-  var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
-  var TokenService = /** @class */ (function () {
-      function TokenService(document) {
-          this.document = document;
-          this.brandCustomPropertyName = '--utility-brand-name';
-      }
-      /*
-      Get the brand name for the currently enable custom property set (ie. /bloomon/variables.css)
-      Because variables are scoped via a selector (ie: ':root .bloomon {}')
-      we cannot get brand-specific custom properties programatically
-    
-      Important: Ensure that the component requiring the brand name has locally scoped the custom property:
-      |  ui-icon {
-      |    --icon-component-brand: var(--utility-brand-name);
-      |  }
-      */
-      TokenService.prototype.getBrandName = function () {
-          return this.getTokenValue(this.brandCustomPropertyName);
-      };
-      TokenService.prototype.getTokenValue = function (tokenName, element) {
-          var rootElement = element || this.document.querySelector('[class*="brand-tokens"]');
-          if (!rootElement) {
-              return '';
-          }
-          return this.document.defaultView.getComputedStyle(rootElement)
-              .getPropertyValue(tokenName)
-              .trim() || '';
-      };
-      return TokenService;
-  }());
-  TokenService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService, deps: [{ token: i3.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-  TokenService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService, decorators: [{
-              type: i0.Injectable
-          }], ctorParameters: function () {
-          return [{ type: Document, decorators: [{
-                          type: i0.Inject,
-                          args: [i3.DOCUMENT]
-                      }] }];
-      } });
+    var OasysAlertCancelDirective = /** @class */ (function () {
+        function OasysAlertCancelDirective(elem) {
+            this.elem = elem;
+            this.text = '';
+        }
+        OasysAlertCancelDirective.prototype.ngAfterContentChecked = function () {
+            this.text = this.elem.nativeElement.innerText;
+        };
+        return OasysAlertCancelDirective;
+    }());
+    OasysAlertCancelDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertCancelDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OasysAlertCancelDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OasysAlertCancelDirective, selector: "ui-alert-cancel, [ui-alert-cancel]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertCancelDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'ui-alert-cancel, [ui-alert-cancel]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
 
-  var LayoutBoxComponent = /** @class */ (function () {
-      function LayoutBoxComponent(changes, tokenService) {
-          this.changes = changes;
-          this.tokenService = tokenService;
-          this.didFirstInit = false;
-          this.prefix = 'ui-layout-box';
-          this.backgroundIsDark = false;
-          this.box_space = 'default';
-          this.box_align_x = 'start';
-          this.box_align_y = 'start';
-          this.box_fill_mode = 'fill';
-          this.box_background = 'core-primary';
-          this.box_content_fill_width = false;
-      }
-      /**
-       * Check the passed string to see if it contains JSON
-       *
-       * @param string
-       * @returns - boolean
-       */
-      LayoutBoxComponent.prototype.stringContainsJson = function (string) {
-          try {
-              JSON.parse(string);
-          }
-          catch (e) {
-              return false;
-          }
-          return true;
-      };
-      LayoutBoxComponent.prototype.getSizeClasses = function (spaceInput, overrideName) {
-          var _this = this;
-          if (!spaceInput || spaceInput === undefined) {
-              return null;
-          }
-          // Used for responsive spacing, check if the input is either an object or JSON
-          if (typeof spaceInput === 'object' || this.stringContainsJson(spaceInput)) {
-              // If JSON then convert this to an object
-              var spaceInputObject_1 = typeof spaceInput === 'object' ? spaceInput : JSON.parse(spaceInput);
-              return Object.keys(spaceInputObject_1).map(function (key) {
-                  return _this.prefix + "-" + spaceInputObject_1[key] + "-" + key + (overrideName ? "-" + overrideName : "");
-              });
-          }
-          return [
-              this.prefix,
-              this.prefix + "-" + spaceInput + (overrideName ? "-" + overrideName : "")
-          ];
-      };
-      LayoutBoxComponent.prototype.getOverrideClasses = function (spaceOverrides) {
-          var _this = this;
-          var spaceTypes = ['top', 'right', 'bottom', 'left'];
-          return spaceOverrides.map(function (item, index) {
-              return _this.getSizeClasses(item, spaceTypes[index]);
-          }).filter(Boolean);
-      };
-      LayoutBoxComponent.prototype.getAlignmentClasses = function (alignmentOverride) {
-          var _this = this;
-          var spaceTypes = ['align-x', 'distribute-y'];
-          return alignmentOverride.map(function (item, index) {
-              return item ? _this.prefix + "-" + spaceTypes[index] + "-" + item : undefined;
-          }).filter(Boolean);
-      };
-      LayoutBoxComponent.prototype.getBackgroundClass = function () {
-          var value = this.box_background ? this.prefix + "-background-" + this.box_background : "";
-          return value;
-      };
-      LayoutBoxComponent.prototype.ngOnChanges = function () {
-          if (!this.didFirstInit) {
-              return;
-          }
-          this.ngOnInit();
-          this.changes.markForCheck();
-      };
-      LayoutBoxComponent.prototype.ngOnInit = function () {
-          var spaceOverrides = [this.box_space_top, this.box_space_right, this.box_space_bottom, this.box_space_left];
-          var alignmentOverride = [this.box_align_x, this.box_align_y];
-          this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.box_background) === 'on-dark';
-          // Basic basic classes
-          this.boxLayoutClasses = [
-              this.getSizeClasses(this.box_space),
-              this.getOverrideClasses(spaceOverrides),
-              this.getAlignmentClasses(alignmentOverride),
-              this.getBackgroundClass(),
-              this.box_fill_mode === 'fit' ? this.prefix + "-fit-content" : this.prefix + "-fill-container",
-              this.backgroundIsDark ? 'text-color--on-dark' : '',
-              this.box_content_fill_width ? '' : this.prefix + "-content-max-width"
-          ].flat(10).filter(Boolean);
-          this.didFirstInit = true;
-      };
-      return LayoutBoxComponent;
-  }());
-  LayoutBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutBoxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LayoutBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutBoxComponent, selector: "ui-box", inputs: { box_space: "box_space", box_space_top: "box_space_top", box_space_right: "box_space_right", box_space_bottom: "box_space_bottom", box_space_left: "box_space_left", box_align_x: "box_align_x", box_align_y: "box_align_y", box_fill_mode: "box_fill_mode", box_background: "box_background", box_content_fill_width: "box_content_fill_width" }, host: { properties: { "class": "boxLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<div class="ui-box-content"><ng-content></ng-content></div>', isInline: true, styles: ["ui-box{display:flex;justify-self:stretch;flex-direction:column}ui-box.ui-layout-box-none{padding:var(--semantic-spacing-box-none)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-none-mobile{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-mobile-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-mobile-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-mobile-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-mobile-left{padding-left:var(--semantic-spacing-box-none)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-none-tablet{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-tablet-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-tablet-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-tablet-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-tablet-left{padding-left:var(--semantic-spacing-box-none)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-none-laptop{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-laptop-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-laptop-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-laptop-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-laptop-left{padding-left:var(--semantic-spacing-box-none)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-none-desktop{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-desktop-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-desktop-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-desktop-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-desktop-left{padding-left:var(--semantic-spacing-box-none)!important}}ui-box.ui-layout-box-none-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-left{padding-left:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-tight{padding:var(--semantic-spacing-box-tight)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-tight-mobile{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-mobile-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-mobile-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-mobile-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-mobile-left{padding-left:var(--semantic-spacing-box-tight)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-tight-tablet{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-tablet-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-tablet-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-tablet-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-tablet-left{padding-left:var(--semantic-spacing-box-tight)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-tight-laptop{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-laptop-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-laptop-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-laptop-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-laptop-left{padding-left:var(--semantic-spacing-box-tight)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-tight-desktop{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-desktop-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-desktop-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-desktop-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-desktop-left{padding-left:var(--semantic-spacing-box-tight)!important}}ui-box.ui-layout-box-tight-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-left{padding-left:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-near{padding:var(--semantic-spacing-box-near)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-near-mobile{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-mobile-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-mobile-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-mobile-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-mobile-left{padding-left:var(--semantic-spacing-box-near)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-near-tablet{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-tablet-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-tablet-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-tablet-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-tablet-left{padding-left:var(--semantic-spacing-box-near)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-near-laptop{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-laptop-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-laptop-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-laptop-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-laptop-left{padding-left:var(--semantic-spacing-box-near)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-near-desktop{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-desktop-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-desktop-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-desktop-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-desktop-left{padding-left:var(--semantic-spacing-box-near)!important}}ui-box.ui-layout-box-near-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-left{padding-left:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-default{padding:var(--semantic-spacing-box-default)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-default-mobile{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-mobile-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-mobile-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-mobile-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-mobile-left{padding-left:var(--semantic-spacing-box-default)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-default-tablet{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-tablet-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-tablet-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-tablet-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-tablet-left{padding-left:var(--semantic-spacing-box-default)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-default-laptop{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-laptop-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-laptop-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-laptop-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-laptop-left{padding-left:var(--semantic-spacing-box-default)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-default-desktop{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-desktop-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-desktop-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-desktop-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-desktop-left{padding-left:var(--semantic-spacing-box-default)!important}}ui-box.ui-layout-box-default-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-left{padding-left:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-expanded{padding:var(--semantic-spacing-box-expanded)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-expanded-mobile{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-mobile-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-mobile-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-mobile-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-mobile-left{padding-left:var(--semantic-spacing-box-expanded)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-expanded-tablet{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-tablet-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-tablet-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-tablet-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-tablet-left{padding-left:var(--semantic-spacing-box-expanded)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-expanded-laptop{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-laptop-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-laptop-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-laptop-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-laptop-left{padding-left:var(--semantic-spacing-box-expanded)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-expanded-desktop{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-desktop-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-desktop-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-desktop-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-desktop-left{padding-left:var(--semantic-spacing-box-expanded)!important}}ui-box.ui-layout-box-expanded-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-left{padding-left:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-section-inset{padding:var(--semantic-spacing-box-section-inset)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-section-inset-mobile{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-mobile-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-mobile-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-mobile-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-mobile-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-section-inset-tablet{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-tablet-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-tablet-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-tablet-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-tablet-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-section-inset-laptop{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-laptop-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-laptop-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-laptop-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-laptop-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-section-inset-desktop{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-desktop-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-desktop-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-desktop-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-desktop-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}ui-box.ui-layout-box-section-inset-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-left{padding-left:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-background-transparent{background-color:var(--semantic-color-background-transparent)}ui-box.ui-layout-box-background-core-primary{background-color:var(--semantic-color-background-core-primary)}ui-box.ui-layout-box-background-core-secondary{background-color:var(--semantic-color-background-core-secondary)}ui-box.ui-layout-box-background-core-tertiary{background-color:var(--semantic-color-background-core-tertiary)}ui-box.ui-layout-box-background-core-quaternary{background-color:var(--semantic-color-background-core-quaternary)}ui-box.ui-layout-box-background-tint-highlight{background-color:var(--semantic-color-background-tint-highlight)}ui-box.ui-layout-box-align-start{justify-content:flex-start}ui-box.ui-layout-box-align-x-start{align-items:flex-start;align-content:flex-start}ui-box.ui-layout-box-align-center{justify-content:center}ui-box.ui-layout-box-align-x-center{align-items:center;align-content:center}ui-box.ui-layout-box-align-end{justify-content:flex-end}ui-box.ui-layout-box-align-x-end{align-items:flex-end;align-content:flex-end}ui-box.ui-layout-box-distribute-fill{justify-content:unset}ui-box.ui-layout-box-distribute-start{justify-content:flex-start}ui-box.ui-layout-box-distribute-center{justify-content:center}ui-box.ui-layout-box-distribute-end{justify-content:flex-end}ui-box.ui-layout-box-distribute-space-between{justify-content:space-between}ui-box.ui-layout-box-distribute-space-around{justify-content:space-around}ui-box.ui-layout-box-distribute-space-evenly{justify-content:space-evenly}ui-box.ui-layout-box-align-start{align-items:flex-start;align-content:flex-start}ui-box.ui-layout-box-align-center{align-items:center;align-content:center}ui-box.ui-layout-box-align-end{align-items:flex-end;align-content:flex-end}ui-box.ui-layout-box-distribute-y-fill{justify-content:unset}ui-box.ui-layout-box-distribute-y-start{justify-content:flex-start}ui-box.ui-layout-box-distribute-y-center{justify-content:center}ui-box.ui-layout-box-distribute-y-end{justify-content:flex-end}ui-box.ui-layout-box-distribute-y-space-between{justify-content:space-between}ui-box.ui-layout-box-distribute-y-space-around{justify-content:space-around}ui-box.ui-layout-box-distribute-y-space-evenly{justify-content:space-evenly}ui-box.ui-layout-box-fit-content{width:-moz-fit-content;width:fit-content}ui-box.ui-layout-box-fill-container{width:100%;height:100%}ui-box.ui-layout-box .ui-box-content{display:block;width:100%}ui-box.ui-layout-box-content-max-width .ui-box-content{max-width:1440px;margin:0 auto;display:block}\n"], 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: LayoutBoxComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-box',
-                      template: '<div class="ui-box-content"><ng-content></ng-content></div>',
-                      host: {
-                          '[class]': 'boxLayoutClasses'
-                      },
-                      styleUrls: ['./box.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: TokenService }]; }, propDecorators: { box_space: [{
-                  type: i0.Input
-              }], box_space_top: [{
-                  type: i0.Input
-              }], box_space_right: [{
-                  type: i0.Input
-              }], box_space_bottom: [{
-                  type: i0.Input
-              }], box_space_left: [{
-                  type: i0.Input
-              }], box_align_x: [{
-                  type: i0.Input
-              }], box_align_y: [{
-                  type: i0.Input
-              }], box_fill_mode: [{
-                  type: i0.Input
-              }], box_background: [{
-                  type: i0.Input
-              }], box_content_fill_width: [{
-                  type: i0.Input
-              }] } });
+    var OasysAlertConfirmDirective = /** @class */ (function () {
+        function OasysAlertConfirmDirective(elem) {
+            this.elem = elem;
+            this.text = '';
+        }
+        OasysAlertConfirmDirective.prototype.ngAfterContentChecked = function () {
+            this.text = this.elem.nativeElement.innerText;
+        };
+        return OasysAlertConfirmDirective;
+    }());
+    OasysAlertConfirmDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertConfirmDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OasysAlertConfirmDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OasysAlertConfirmDirective, selector: "ui-alert-confirm, [ui-alert-confirm]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertConfirmDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'ui-alert-confirm, [ui-alert-confirm]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
 
-  var LayoutStackComponent = /** @class */ (function () {
-      function LayoutStackComponent(changes) {
-          this.changes = changes;
-          this.didFirstInit = false;
-          this.prefix = 'ui-layout-stack';
-          this.stack_gap = 'default';
-          this.stack_align = 'start';
-          this.stack_direction = 'y';
-          this.stack_distribute = 'start';
-          this.stack_wrap = false;
-      }
-      LayoutStackComponent.prototype.defaultDistribution = function () {
-          if (this.stack_distribute) {
-              return this.stack_distribute;
-          }
-          return this.stack_direction === 'x' ? 'fit' : 'fill';
-      };
-      LayoutStackComponent.prototype.ngOnChanges = function () {
-          if (!this.didFirstInit) {
-              return;
-          }
-          this.ngOnInit();
-          this.changes.markForCheck();
-      };
-      LayoutStackComponent.prototype.ngOnInit = function () {
-          this.stack_distribute = this.defaultDistribution();
-          this.stackLayoutClasses = [
-              this.prefix,
-              this.prefix + "-" + this.stack_gap,
-              this.prefix + "-align-" + this.stack_align,
-              this.prefix + "-distribute-" + this.stack_distribute,
-              this.prefix + "-direction-" + this.stack_direction,
-              this.prefix + "-" + (this.stack_wrap ? 'wrap' : 'no-wrap'),
-          ];
-          this.didFirstInit = true;
-      };
-      return LayoutStackComponent;
-  }());
-  LayoutStackComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutStackComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LayoutStackComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutStackComponent, selector: "ui-stack", inputs: { stack_gap: "stack_gap", stack_align: "stack_align", stack_direction: "stack_direction", stack_distribute: "stack_distribute", stack_wrap: "stack_wrap" }, host: { properties: { "class": "stackLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, styles: [".ui-layout-stack{display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%}.ui-layout-stack-none{grid-gap:var(--semantic-spacing-stack-none);gap:var(--semantic-spacing-stack-none)}.ui-layout-stack-tight{grid-gap:var(--semantic-spacing-stack-tight);gap:var(--semantic-spacing-stack-tight)}.ui-layout-stack-near{grid-gap:var(--semantic-spacing-stack-near);gap:var(--semantic-spacing-stack-near)}.ui-layout-stack-default{grid-gap:var(--semantic-spacing-stack-default);gap:var(--semantic-spacing-stack-default)}.ui-layout-stack-expanded{grid-gap:var(--semantic-spacing-stack-expanded);gap:var(--semantic-spacing-stack-expanded)}.ui-layout-stack-section{grid-gap:var(--semantic-spacing-stack-section);gap:var(--semantic-spacing-stack-section)}.ui-layout-stack-align-start{justify-content:flex-start}.ui-layout-stack-align-x-start{align-items:flex-start;align-content:flex-start}.ui-layout-stack-align-center{justify-content:center}.ui-layout-stack-align-x-center{align-items:center;align-content:center}.ui-layout-stack-align-end{justify-content:flex-end}.ui-layout-stack-align-x-end{align-items:flex-end;align-content:flex-end}.ui-layout-stack-distribute-fill{justify-content:unset}.ui-layout-stack-distribute-start{justify-content:flex-start}.ui-layout-stack-distribute-center{justify-content:center}.ui-layout-stack-distribute-end{justify-content:flex-end}.ui-layout-stack-distribute-space-between{justify-content:space-between}.ui-layout-stack-distribute-space-around{justify-content:space-around}.ui-layout-stack-distribute-space-evenly{justify-content:space-evenly}.ui-layout-stack-align-start{align-items:flex-start;align-content:flex-start}.ui-layout-stack-align-center{align-items:center;align-content:center}.ui-layout-stack-align-end{align-items:flex-end;align-content:flex-end}.ui-layout-stack-distribute-y-fill{justify-content:unset}.ui-layout-stack-distribute-y-start{justify-content:flex-start}.ui-layout-stack-distribute-y-center{justify-content:center}.ui-layout-stack-distribute-y-end{justify-content:flex-end}.ui-layout-stack-distribute-y-space-between{justify-content:space-between}.ui-layout-stack-distribute-y-space-around{justify-content:space-around}.ui-layout-stack-distribute-y-space-evenly{justify-content:space-evenly}.ui-layout-stack-direction-x{flex-direction:row}.ui-layout-stack-direction-y{flex-direction:column}.ui-layout-stack-distribute-fill>*{flex:1 1 auto}.ui-layout-stack-distribute-fit>ui-stack{flex-basis:0%}.ui-layout-stack-wrap{flex-wrap:wrap}.ui-layout-stack-no-wrap{flex-wrap:nowrap}.ui-layout-stack.ui-layout-stack-direction-y.ui-layout-stack-wrap{height:100%}\n"], 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: LayoutStackComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-stack',
-                      template: '<ng-content></ng-content>',
-                      host: {
-                          '[class]': 'stackLayoutClasses'
-                      },
-                      styleUrls: ['./stack.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { stack_gap: [{
-                  type: i0.Input
-              }], stack_align: [{
-                  type: i0.Input
-              }], stack_direction: [{
-                  type: i0.Input
-              }], stack_distribute: [{
-                  type: i0.Input
-              }], stack_wrap: [{
-                  type: i0.Input
-              }] } });
+    var OasysAlertContentDirective = /** @class */ (function () {
+        function OasysAlertContentDirective() {
+        }
+        return OasysAlertContentDirective;
+    }());
+    OasysAlertContentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertContentDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OasysAlertContentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OasysAlertContentDirective, selector: "ui-alert-content, [ui-alert-content]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertContentDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'ui-alert-content, [ui-alert-content]',
+                    }]
+            }] });
 
-  var IconComponent = /** @class */ (function () {
-      function IconComponent(document, tokenService) {
-          this.document = document;
-          this.tokenService = tokenService;
-          this.icon_size = 'large';
-          this.icon_context = 'none';
-      }
-      IconComponent.prototype.convertRemToPixels = function (remString) {
-          var remNumber = parseFloat(remString.replace('rem', ''));
-          return remNumber * parseFloat(getComputedStyle(this.document.documentElement).fontSize);
-      };
-      IconComponent.prototype.ngOnChanges = function () {
-          this.ngOnInit();
-      };
-      IconComponent.prototype.ngOnInit = function () {
-          this.iconBrandPath = "" + this.tokenService.getBrandName();
-          this.size = this.tokenService.getTokenValue("--global-size-icon-" + this.icon_size);
-          this.iconDisplayClasses = [
-              "icon-context-" + this.icon_context,
-              "icon-size-" + this.icon_size
-          ];
-          var sizeInPixels = this.convertRemToPixels(this.size);
-          this.icon_width = sizeInPixels;
-          this.icon_height = sizeInPixels;
-      };
-      return IconComponent;
-  }());
-  IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, deps: [{ token: i3.DOCUMENT }, { token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "ui-icon", inputs: { icon_size: "icon_size", icon_name: "icon_name", icon_context: "icon_context", icon_width: "icon_width", icon_height: "icon_height", icon_class: "icon_class" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"ui-icon\" [ngClass]=\"iconDisplayClasses\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"icon_width\" [attr.height]=\"icon_height\" [attr.class]=\"icon_class\">\n    <use attr.xlink:href=\"./{{iconBrandPath}}/assets/icons/icons.svg#icon-{{icon_name}}\"></use>\n  </svg>\n</div>\n", styles: [".ui-icon{display:flex}\n"], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-icon',
-                      templateUrl: './icon.component.html',
-                      styleUrls: ['./icon.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None
-                  }]
-          }], ctorParameters: function () {
-          return [{ type: Document, decorators: [{
-                          type: i0.Inject,
-                          args: [i3.DOCUMENT]
-                      }] }, { type: TokenService }];
-      }, propDecorators: { icon_size: [{
-                  type: i0.Input
-              }], icon_name: [{
-                  type: i0.Input
-              }], icon_context: [{
-                  type: i0.Input
-              }], icon_width: [{
-                  type: i0.Input
-              }], icon_height: [{
-                  type: i0.Input
-              }], icon_class: [{
-                  type: i0.Input
-              }] } });
+    var OasysAlertTitleDirective = /** @class */ (function () {
+        function OasysAlertTitleDirective() {
+        }
+        return OasysAlertTitleDirective;
+    }());
+    OasysAlertTitleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertTitleDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OasysAlertTitleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OasysAlertTitleDirective, selector: "ui-alert-title, [ui-alert-title]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertTitleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'ui-alert-title, [ui-alert-title]',
+                    }]
+            }] });
 
-  var OasysButtonComponent = /** @class */ (function () {
-      function OasysButtonComponent(changes) {
-          this.changes = changes;
-          this.button_icon_placement = 'leading';
-          // Button Stylings
-          this.button_size = 'large';
-          this.button_full_width = false;
-          this.button_type = 'primary';
-          this.button_disabled = false;
-          // Button Actions
-          this.href = '';
-          this.clicked = new i0.EventEmitter();
-          this.iconContext = 'none';
-          this.outlineButtonTypes = ['secondary', 'secondary-inverse'];
-      }
-      OasysButtonComponent.prototype.onClick = function () {
-          this.clicked.emit();
-      };
-      OasysButtonComponent.prototype.createButton = function () {
-          return {
-              buttonIcon: this.button_icon,
-              buttonIconPlacement: this.button_icon_placement,
-              buttonType: this.button_type,
-              buttonSize: this.button_size,
-              buttonDisabled: this.button_disabled,
-              href: this.href,
-              target: '',
-              buttonDisplayClasses: [
-                  "type-" + this.button_type,
-                  "size-" + this.button_size,
-                  "" + (this.button_icon ? 'button--has-icon' : ''),
-                  "" + (this.button_full_width ? 'button--full-width' : ''),
-                  "" + (this.button_icon ? 'button--icon--' + this.button_icon_placement : ''),
-                  "" + (this.outlineButtonTypes.indexOf(this.button_type) !== -1 ? 'button--outline' : '')
-              ].filter(function (d) { return !!d; })
-          };
-      };
-      OasysButtonComponent.prototype.ngAfterViewInit = function () {
-          var _a, _b;
-          if ((_b = (_a = this.ngContent) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.innerText) {
-              this.accessibleButtonContent = this.ngContent.nativeElement.innerText;
-          }
-          else {
-              throw new Error("\n      No inner text found. All buttons should have text passed via ng-content to enable accessibility for screen readers, this includes icon-only buttons.\n\n      Pass content using the template variable #buttontext eg:\n      ui-button()\n        span(#buttontext) Buy All The Things\n      ");
-          }
-      };
-      OasysButtonComponent.prototype.ngOnChanges = function () {
-          this.button = this.createButton();
-          this.changes.markForCheck();
-      };
-      OasysButtonComponent.prototype.ngOnInit = function () {
-          this.button = this.createButton();
-      };
-      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: "<button (click)=\"onClick()\"\n        [routerLink]=\"button.href || null\"\n        [ngClass]=\"button.buttonDisplayClasses\"\n        [attr.disabled]=\"button.buttonDisabled === true || null\"\n        [attr.aria-label]=\"accessibleButtonContent\"\n        [attr.title]=\"accessibleButtonContent\"\n        role=\"button\">\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</button>\n", styles: ["ui-button button{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{display:flex;align-items:center}ui-button button .button-content .ui-icon{display:flex;align-items:center;max-height:var(--component-button-line-height)}ui-button button .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{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{opacity:var(--component-button-opacity-overlay-hover)}ui-button button:focus .button-overlay{opacity:var(--component-button-opacity-overlay-focus)}ui-button button:focus-visible .button-overlay{opacity:var(--component-button-opacity-overlay-focus-visible)}ui-button button:focus-visible{outline:none}ui-button button: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{outline:none}ui-button button.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{background-color:var(--component-button-color-primary-text)}ui-button button.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{background-color:var(--component-button-color-secondary-text)}ui-button button.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{background-color:var(--component-button-color-tertiary-text)}ui-button button.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{background-color:var(--component-button-color-primary-inverse-text)}ui-button button.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{background-color:var(--component-button-color-secondary-inverse-text)}ui-button button.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{background-color:var(--component-button-color-tertiary-inverse-text)}ui-button button.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{background-color:var(--component-button-color-expressive-text)}ui-button button.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{background-color:var(--component-button-color-danger-text)}ui-button button.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{background-color:var(--component-button-color-facebook-text)}ui-button button.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{background-color:var(--component-button-color-paypal-text)}ui-button button.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{background-color:var(--component-button-color-trustpilot-text)}ui-button button .buttonIcon{fill:currentColor}ui-button button.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{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{margin-left:calc(var(--component-button-size-large-icon-offset-leading) * -1)}ui-button button.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{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{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{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{margin-left:calc(var(--component-button-size-small-icon-offset-leading) * -1)}ui-button button.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{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{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{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{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{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{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{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{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{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{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{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]{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}ui-button button.button--has-icon.button--icon--trailing .button-content{flex-direction:row-reverse}ui-button button.button--full-width{display:flex;width:100%}\n"], components: [{ type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_name", "icon_context", "icon_width", "icon_height", "icon_class"] }], directives: [{ type: i2__namespace.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: [{
-                      selector: 'ui-button',
-                      templateUrl: './button.component.html',
-                      styleUrls: ['./button.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { button_icon: [{
-                  type: i0.Input
-              }], button_icon_placement: [{
-                  type: i0.Input
-              }], ngContent: [{
-                  type: i0.ContentChild,
-                  args: ['buttontext']
-              }], button_size: [{
-                  type: i0.Input
-              }], button_full_width: [{
-                  type: i0.Input
-              }], button_type: [{
-                  type: i0.Input
-              }], button_disabled: [{
-                  type: i0.Input
-              }], href: [{
-                  type: i0.Input
-              }], clicked: [{
-                  type: i0.Output
-              }] } });
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
 
-  var BreadcrumbsComponent = /** @class */ (function () {
-      function BreadcrumbsComponent() {
-      }
-      BreadcrumbsComponent.prototype.ngOnInit = function () {
-          var _a;
-          if (typeof this.breadcrumbs_values === 'string') {
-              this.values = (_a = JSON.parse(this.breadcrumbs_values)) !== null && _a !== void 0 ? _a : [];
-          }
-          else {
-              this.values = this.breadcrumbs_values;
-          }
-      };
-      return BreadcrumbsComponent;
-  }());
-  BreadcrumbsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreadcrumbsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BreadcrumbsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BreadcrumbsComponent, selector: "ui-breadcrumbs", inputs: { breadcrumbs_values: "breadcrumbs_values" }, ngImport: i0__namespace, template: "<ui-box box_fill_mode=\"fill\" box_space=\"near\" box_background=\"core-secondary\" *ngIf=\"values\">\n    <nav aria-label=\"breadcrumbs\">\n        <ui-stack stack_gap=\"none\"  stack_direction=\"x\" stack_align=\"center\" stack_wrap=\"true\">\n            <ng-container *ngFor=\"let item of values; let i = index\">\n                <!-- Link followed by an icon -->\n                <ui-box box_space=\"none\" box_background=\"none\" box_fill_mode=\"fit\">\n                    <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_wrap=\"false\" stack_gap=\"none\">\n                        <ui-button *ngIf=\"i<values.length-1\" button_size=\"small\" button_type=\"tertiary\" button_full_width=\"true\" href=\"{{item.href}}\"> \n                            <span #buttontext> {{item.name}} </span>\n                        </ui-button>   \n                        <ui-icon *ngIf=\"i<values.length-1\"  icon_name=\"chevron-right\" icon_size=\"small\" icon_class=\"buttonIcon\" aria-hidden=\"true\"></ui-icon>\n                    </ui-stack>\n                </ui-box>\n                <!-- Last link and current page -->\n                <ui-button *ngIf=\"i===values.length-1\" button_size=\"small\" button_type=\"tertiary\" button_full_width=\"true\" href=\"{{item.href}}\" [attr.aria-current]=\"item.name\"> \n                    <span #buttontext> {{item.name}} </span>\n                </ui-button>   \n            </ng-container>\n        </ui-stack>\n    </nav>\n</ui-box>\n", styles: ["ui-breadcrumbs{display:contents}ui-breadcrumbs nav{display:block}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }, { type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_name", "icon_context", "icon_width", "icon_height", "icon_class"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreadcrumbsComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-breadcrumbs',
-                      templateUrl: './breadcrumbs.component.html',
-                      styleUrls: ['./breadcrumbs.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                  }]
-          }], ctorParameters: function () { return []; }, propDecorators: { breadcrumbs_values: [{
-                  type: i0.Input
-              }] } });
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-  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: [i3.CommonModule], exports: [IconComponent] });
-  OasysIconModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, providers: [TokenService], imports: [[i3.CommonModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysIconModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [IconComponent],
-                      imports: [i3.CommonModule],
-                      exports: [IconComponent],
-                      providers: [TokenService],
-                  }]
-          }] });
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
 
-  var OasysButtonModule = /** @class */ (function () {
-      function OasysButtonModule() {
-      }
-      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: [i3.CommonModule, i2.RouterModule, OasysIconModule], exports: [OasysButtonComponent] });
-  OasysButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, imports: [[i3.CommonModule, i2.RouterModule, OasysIconModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysButtonModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [OasysButtonComponent],
-                      imports: [i3.CommonModule, i2.RouterModule, OasysIconModule],
-                      exports: [OasysButtonComponent],
-                  }]
-          }] });
+    var Breakpoint;
+    (function (Breakpoint) {
+        Breakpoint["MOBILE"] = "(min-width: 0px)";
+        Breakpoint["TABLET"] = "(min-width: 768px)";
+        Breakpoint["LAPTOP"] = "(min-width: 1080px)";
+        Breakpoint["DESKTOP"] = "(min-width: 1440px)";
+    })(Breakpoint || (Breakpoint = {}));
+    var BreakpointService = /** @class */ (function () {
+        function BreakpointService(breakpointObserver) {
+            var _this = this;
+            this.breakpointObserver = breakpointObserver;
+            this.currentSize = new rxjs.BehaviorSubject(Breakpoint.MOBILE);
+            this.breakpoints = [
+                Breakpoint.DESKTOP,
+                Breakpoint.LAPTOP,
+                Breakpoint.TABLET,
+                Breakpoint.MOBILE,
+            ];
+            this.isDestroyed = new rxjs.Subject();
+            breakpointObserver
+                .observe(this.breakpoints)
+                .pipe(operators.takeUntil(this.isDestroyed))
+                .subscribe(function (result) {
+                var e_1, _a;
+                try {
+                    for (var _b = __values(Object.keys(result.breakpoints)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var match = _c.value;
+                        if (result.breakpoints[match]) {
+                            return _this.currentSize.next(match);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            });
+        }
+        BreakpointService.prototype.ngOnDestroy = function () {
+            this.isDestroyed.next();
+            this.isDestroyed.complete();
+        };
+        return BreakpointService;
+    }());
+    BreakpointService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreakpointService, deps: [{ token: i1__namespace.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    BreakpointService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreakpointService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreakpointService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.BreakpointObserver }]; } });
 
-  var LayoutContainerComponent = /** @class */ (function () {
-      function LayoutContainerComponent(changes) {
-          this.changes = changes;
-          this.container_fluid = false;
-          this.container_gutter = true;
-          this.prefix = 'ui-layout-container';
-      }
-      LayoutContainerComponent.prototype.ngOnChanges = function () {
-          this.ngOnInit();
-          this.changes.markForCheck();
-      };
-      LayoutContainerComponent.prototype.ngOnInit = function () {
-          this.containerLayoutClasses = [
-              this.prefix,
-              this.container_fluid ? this.prefix + "-fluid" : '',
-              this.container_gutter ? '' : this.prefix + "-no-gutter"
-          ].flat(10).filter(Boolean);
-      };
-      return LayoutContainerComponent;
-  }());
-  LayoutContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LayoutContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutContainerComponent, selector: "ui-container", inputs: { container_fluid: "container_fluid", container_gutter: "container_gutter" }, host: { properties: { "class": "containerLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: "\n    <ng-content></ng-content>\n  ", isInline: true, styles: [":host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);display:block;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--container-component-gutter-size)}@media only screen and (max-width: 767px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 768px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 1080px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (min-width: 1440px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}:host.ui-layout-container-no-gutter{padding:0}@media only screen and (max-width: 767px){:host{max-width:100%}}@media only screen and (min-width: 768px){:host{max-width:calc(767px)}}@media only screen and (min-width: 1080px){:host{max-width:calc(1080px)}}@media only screen and (min-width: 1440px){:host{max-width:calc(1440px)}}:host.ui-layout-container-fluid{max-width:100%}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-container',
-                      template: "\n    <ng-content></ng-content>\n  ",
-                      host: {
-                          '[class]': 'containerLayoutClasses'
-                      },
-                      styleUrls: ['./container.component.scss'],
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { container_fluid: [{
-                  type: i0.Input
-              }], container_gutter: [{
-                  type: i0.Input
-              }] } });
+    var TokenService = /** @class */ (function () {
+        function TokenService(document) {
+            this.document = document;
+            this.brandCustomPropertyName = '--utility-brand-name';
+        }
+        /*
+        Get the brand name for the currently enable custom property set (ie. /bloomon/variables.css)
+        Because variables are scoped via a selector (ie: ':root .bloomon {}')
+        we cannot get brand-specific custom properties programatically
+      
+        Important: Ensure that the component requiring the brand name has locally scoped the custom property:
+        |  ui-icon {
+        |    --icon-component-brand: var(--utility-brand-name);
+        |  }
+        */
+        TokenService.prototype.getBrandName = function () {
+            return this.getTokenValue(this.brandCustomPropertyName);
+        };
+        TokenService.prototype.getTokenValue = function (tokenName, element) {
+            var rootElement = element || this.document.querySelector('[class*="brand-tokens"]');
+            if (!rootElement) {
+                return '';
+            }
+            return this.document.defaultView.getComputedStyle(rootElement)
+                .getPropertyValue(tokenName)
+                .trim() || '';
+        };
+        return TokenService;
+    }());
+    TokenService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService, deps: [{ token: i6.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TokenService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [i6.DOCUMENT]
+                        }] }];
+        } });
 
-  var LayoutGridColumnComponent = /** @class */ (function () {
-      function LayoutGridColumnComponent(changes) {
-          this.changes = changes;
-          this.didFirstInit = false;
-          this.prefix = 'ui-layout-column';
-          this.columns = 12;
-      }
-      LayoutGridColumnComponent.prototype.getSizeClasses = function (columns) {
-          var _this = this;
-          if (!columns) {
-              return [''];
-          }
-          if (typeof columns === 'object') {
-              return Object.keys(columns).map(function (key) {
-                  return _this.prefix + "-" + key + "-" + columns[key];
-              });
-          }
-          return [
-              this.prefix,
-              this.prefix + "-col-" + columns
-          ];
-      };
-      LayoutGridColumnComponent.prototype.ngOnChanges = function () {
-          if (!this.didFirstInit) {
-              return;
-          }
-          this.ngOnInit();
-          this.changes.markForCheck();
-      };
-      LayoutGridColumnComponent.prototype.ngOnInit = function () {
-          this.columnLayoutClasses = [
-              this.prefix,
-              this.getSizeClasses(this.columns)
-          ].flat(10).filter(Boolean);
-          this.didFirstInit = true;
-      };
-      return LayoutGridColumnComponent;
-  }());
-  LayoutGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutGridColumnComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LayoutGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutGridColumnComponent, selector: "ui-column", inputs: { columns: "columns" }, host: { properties: { "class": "columnLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, styles: ["ui-grid{width:100%}ui-grid.ui-layout-grid-default{grid-gap:var(--semantic-spacing-grid-default);gap:var(--semantic-spacing-grid-default)}ui-grid.ui-layout-grid-none{grid-gap:var(--semantic-spacing-grid-none);gap:var(--semantic-spacing-grid-none)}ui-grid.ui-layout-grid-width-auto{display:flex;flex-wrap:nowrap}ui-grid.ui-layout-grid-width-auto ui-column{flex:1 1 0}ui-grid:not(.ui-layout-grid-width-auto){display:grid;grid-template-columns:repeat(12,1fr)}ui-grid:not(.ui-layout-grid-width-auto) ui-column{grid-column:span 12}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-12{grid-column:span 12}@media only screen and (max-width: 767px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-12{grid-column:span 12}}@media only screen and (min-width: 768px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-12{grid-column:span 12}}@media only screen and (min-width: 1080px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-12{grid-column:span 12}}@media only screen and (min-width: 1440px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-12{grid-column:span 12}}@media only screen and (max-width: 767px){ui-grid.ui-layout-grid-collapse-below-tablet{display:flex;flex-direction:column}}@media only screen and (max-width: 1079px){ui-grid.ui-layout-grid-collapse-below-laptop{display:flex;flex-direction:column}}@media only screen and (max-width: 1439px){ui-grid.ui-layout-grid-collapse-below-desktop{display:flex;flex-direction:column}}\n"], 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: LayoutGridColumnComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-column',
-                      template: '<ng-content></ng-content>',
-                      host: {
-                          '[class]': 'columnLayoutClasses'
-                      },
-                      styleUrls: ['./grid.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { columns: [{
-                  type: i0.Input
-              }] } });
+    var LayoutBoxComponent = /** @class */ (function () {
+        function LayoutBoxComponent(changes, tokenService) {
+            this.changes = changes;
+            this.tokenService = tokenService;
+            this.didFirstInit = false;
+            this.prefix = 'ui-layout-box';
+            this.backgroundIsDark = false;
+            this.box_space = 'default';
+            this.box_align_x = 'start';
+            this.box_align_y = 'start';
+            this.box_fill_mode = 'fill';
+            this.box_background = 'core-primary';
+            this.box_content_fill_width = false;
+        }
+        /**
+         * Check the passed string to see if it contains JSON
+         *
+         * @param string
+         * @returns - boolean
+         */
+        LayoutBoxComponent.prototype.stringContainsJson = function (string) {
+            try {
+                JSON.parse(string);
+            }
+            catch (e) {
+                return false;
+            }
+            return true;
+        };
+        LayoutBoxComponent.prototype.getSizeClasses = function (spaceInput, overrideName) {
+            var _this = this;
+            if (!spaceInput || spaceInput === undefined) {
+                return null;
+            }
+            // Used for responsive spacing, check if the input is either an object or JSON
+            if (typeof spaceInput === 'object' || this.stringContainsJson(spaceInput)) {
+                // If JSON then convert this to an object
+                var spaceInputObject_1 = typeof spaceInput === 'object' ? spaceInput : JSON.parse(spaceInput);
+                return Object.keys(spaceInputObject_1).map(function (key) {
+                    return _this.prefix + "-" + spaceInputObject_1[key] + "-" + key + (overrideName ? "-" + overrideName : "");
+                });
+            }
+            return [
+                this.prefix,
+                this.prefix + "-" + spaceInput + (overrideName ? "-" + overrideName : "")
+            ];
+        };
+        LayoutBoxComponent.prototype.getOverrideClasses = function (spaceOverrides) {
+            var _this = this;
+            var spaceTypes = ['top', 'right', 'bottom', 'left'];
+            return spaceOverrides.map(function (item, index) {
+                return _this.getSizeClasses(item, spaceTypes[index]);
+            }).filter(Boolean);
+        };
+        LayoutBoxComponent.prototype.getAlignmentClasses = function (alignmentOverride) {
+            var _this = this;
+            var spaceTypes = ['align-x', 'distribute-y'];
+            return alignmentOverride.map(function (item, index) {
+                return item ? _this.prefix + "-" + spaceTypes[index] + "-" + item : undefined;
+            }).filter(Boolean);
+        };
+        LayoutBoxComponent.prototype.getBackgroundClass = function () {
+            var value = this.box_background ? this.prefix + "-background-" + this.box_background : "";
+            return value;
+        };
+        LayoutBoxComponent.prototype.ngOnChanges = function () {
+            if (!this.didFirstInit) {
+                return;
+            }
+            this.ngOnInit();
+            this.changes.markForCheck();
+        };
+        LayoutBoxComponent.prototype.ngOnInit = function () {
+            var spaceOverrides = [this.box_space_top, this.box_space_right, this.box_space_bottom, this.box_space_left];
+            var alignmentOverride = [this.box_align_x, this.box_align_y];
+            this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.box_background) === 'on-dark';
+            // Basic basic classes
+            this.boxLayoutClasses = [
+                this.getSizeClasses(this.box_space),
+                this.getOverrideClasses(spaceOverrides),
+                this.getAlignmentClasses(alignmentOverride),
+                this.getBackgroundClass(),
+                this.box_fill_mode === 'fit' ? this.prefix + "-fit-content" : this.prefix + "-fill-container",
+                this.backgroundIsDark ? 'text-color--on-dark' : '',
+                this.box_content_fill_width ? '' : this.prefix + "-content-max-width"
+            ].flat(10).filter(Boolean);
+            this.didFirstInit = true;
+        };
+        return LayoutBoxComponent;
+    }());
+    LayoutBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutBoxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LayoutBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutBoxComponent, selector: "ui-box", inputs: { box_space: "box_space", box_space_top: "box_space_top", box_space_right: "box_space_right", box_space_bottom: "box_space_bottom", box_space_left: "box_space_left", box_align_x: "box_align_x", box_align_y: "box_align_y", box_fill_mode: "box_fill_mode", box_background: "box_background", box_content_fill_width: "box_content_fill_width" }, host: { properties: { "class": "boxLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<div class="ui-box-content"><ng-content></ng-content></div>', isInline: true, styles: ["ui-box{display:flex;justify-self:stretch;flex-direction:column}ui-box.ui-layout-box-none{padding:var(--semantic-spacing-box-none)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-none-mobile{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-mobile-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-mobile-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-mobile-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-mobile-left{padding-left:var(--semantic-spacing-box-none)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-none-tablet{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-tablet-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-tablet-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-tablet-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-tablet-left{padding-left:var(--semantic-spacing-box-none)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-none-laptop{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-laptop-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-laptop-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-laptop-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-laptop-left{padding-left:var(--semantic-spacing-box-none)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-none-desktop{padding:var(--semantic-spacing-box-none)}ui-box.ui-layout-box-none-desktop-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-desktop-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-desktop-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-desktop-left{padding-left:var(--semantic-spacing-box-none)!important}}ui-box.ui-layout-box-none-top{padding-top:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-right{padding-right:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-bottom{padding-bottom:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-none-left{padding-left:var(--semantic-spacing-box-none)!important}ui-box.ui-layout-box-tight{padding:var(--semantic-spacing-box-tight)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-tight-mobile{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-mobile-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-mobile-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-mobile-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-mobile-left{padding-left:var(--semantic-spacing-box-tight)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-tight-tablet{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-tablet-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-tablet-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-tablet-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-tablet-left{padding-left:var(--semantic-spacing-box-tight)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-tight-laptop{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-laptop-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-laptop-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-laptop-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-laptop-left{padding-left:var(--semantic-spacing-box-tight)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-tight-desktop{padding:var(--semantic-spacing-box-tight)}ui-box.ui-layout-box-tight-desktop-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-desktop-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-desktop-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-desktop-left{padding-left:var(--semantic-spacing-box-tight)!important}}ui-box.ui-layout-box-tight-top{padding-top:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-right{padding-right:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-bottom{padding-bottom:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-tight-left{padding-left:var(--semantic-spacing-box-tight)!important}ui-box.ui-layout-box-near{padding:var(--semantic-spacing-box-near)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-near-mobile{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-mobile-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-mobile-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-mobile-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-mobile-left{padding-left:var(--semantic-spacing-box-near)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-near-tablet{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-tablet-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-tablet-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-tablet-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-tablet-left{padding-left:var(--semantic-spacing-box-near)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-near-laptop{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-laptop-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-laptop-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-laptop-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-laptop-left{padding-left:var(--semantic-spacing-box-near)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-near-desktop{padding:var(--semantic-spacing-box-near)}ui-box.ui-layout-box-near-desktop-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-desktop-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-desktop-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-desktop-left{padding-left:var(--semantic-spacing-box-near)!important}}ui-box.ui-layout-box-near-top{padding-top:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-right{padding-right:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-bottom{padding-bottom:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-near-left{padding-left:var(--semantic-spacing-box-near)!important}ui-box.ui-layout-box-default{padding:var(--semantic-spacing-box-default)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-default-mobile{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-mobile-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-mobile-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-mobile-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-mobile-left{padding-left:var(--semantic-spacing-box-default)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-default-tablet{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-tablet-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-tablet-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-tablet-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-tablet-left{padding-left:var(--semantic-spacing-box-default)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-default-laptop{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-laptop-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-laptop-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-laptop-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-laptop-left{padding-left:var(--semantic-spacing-box-default)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-default-desktop{padding:var(--semantic-spacing-box-default)}ui-box.ui-layout-box-default-desktop-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-desktop-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-desktop-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-desktop-left{padding-left:var(--semantic-spacing-box-default)!important}}ui-box.ui-layout-box-default-top{padding-top:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-right{padding-right:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-bottom{padding-bottom:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-default-left{padding-left:var(--semantic-spacing-box-default)!important}ui-box.ui-layout-box-expanded{padding:var(--semantic-spacing-box-expanded)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-expanded-mobile{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-mobile-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-mobile-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-mobile-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-mobile-left{padding-left:var(--semantic-spacing-box-expanded)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-expanded-tablet{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-tablet-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-tablet-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-tablet-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-tablet-left{padding-left:var(--semantic-spacing-box-expanded)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-expanded-laptop{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-laptop-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-laptop-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-laptop-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-laptop-left{padding-left:var(--semantic-spacing-box-expanded)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-expanded-desktop{padding:var(--semantic-spacing-box-expanded)}ui-box.ui-layout-box-expanded-desktop-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-desktop-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-desktop-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-desktop-left{padding-left:var(--semantic-spacing-box-expanded)!important}}ui-box.ui-layout-box-expanded-top{padding-top:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-right{padding-right:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-bottom{padding-bottom:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-expanded-left{padding-left:var(--semantic-spacing-box-expanded)!important}ui-box.ui-layout-box-section-inset{padding:var(--semantic-spacing-box-section-inset)}@media only screen and (max-width: 767px){ui-box.ui-layout-box-section-inset-mobile{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-mobile-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-mobile-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-mobile-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-mobile-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}@media only screen and (min-width: 768px){ui-box.ui-layout-box-section-inset-tablet{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-tablet-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-tablet-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-tablet-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-tablet-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}@media only screen and (min-width: 1080px){ui-box.ui-layout-box-section-inset-laptop{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-laptop-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-laptop-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-laptop-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-laptop-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}@media only screen and (min-width: 1440px){ui-box.ui-layout-box-section-inset-desktop{padding:var(--semantic-spacing-box-section-inset)}ui-box.ui-layout-box-section-inset-desktop-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-desktop-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-desktop-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-desktop-left{padding-left:var(--semantic-spacing-box-section-inset)!important}}ui-box.ui-layout-box-section-inset-top{padding-top:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-right{padding-right:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-bottom{padding-bottom:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-section-inset-left{padding-left:var(--semantic-spacing-box-section-inset)!important}ui-box.ui-layout-box-background-transparent{background-color:var(--semantic-color-background-transparent)}ui-box.ui-layout-box-background-core-primary{background-color:var(--semantic-color-background-core-primary)}ui-box.ui-layout-box-background-core-secondary{background-color:var(--semantic-color-background-core-secondary)}ui-box.ui-layout-box-background-core-tertiary{background-color:var(--semantic-color-background-core-tertiary)}ui-box.ui-layout-box-background-core-quaternary{background-color:var(--semantic-color-background-core-quaternary)}ui-box.ui-layout-box-background-tint-highlight{background-color:var(--semantic-color-background-tint-highlight)}ui-box.ui-layout-box-align-start{justify-content:flex-start}ui-box.ui-layout-box-align-x-start{align-items:flex-start;align-content:flex-start}ui-box.ui-layout-box-align-center{justify-content:center}ui-box.ui-layout-box-align-x-center{align-items:center;align-content:center}ui-box.ui-layout-box-align-end{justify-content:flex-end}ui-box.ui-layout-box-align-x-end{align-items:flex-end;align-content:flex-end}ui-box.ui-layout-box-distribute-fill{justify-content:unset}ui-box.ui-layout-box-distribute-start{justify-content:flex-start}ui-box.ui-layout-box-distribute-center{justify-content:center}ui-box.ui-layout-box-distribute-end{justify-content:flex-end}ui-box.ui-layout-box-distribute-space-between{justify-content:space-between}ui-box.ui-layout-box-distribute-space-around{justify-content:space-around}ui-box.ui-layout-box-distribute-space-evenly{justify-content:space-evenly}ui-box.ui-layout-box-align-start{align-items:flex-start;align-content:flex-start}ui-box.ui-layout-box-align-center{align-items:center;align-content:center}ui-box.ui-layout-box-align-end{align-items:flex-end;align-content:flex-end}ui-box.ui-layout-box-distribute-y-fill{justify-content:unset}ui-box.ui-layout-box-distribute-y-start{justify-content:flex-start}ui-box.ui-layout-box-distribute-y-center{justify-content:center}ui-box.ui-layout-box-distribute-y-end{justify-content:flex-end}ui-box.ui-layout-box-distribute-y-space-between{justify-content:space-between}ui-box.ui-layout-box-distribute-y-space-around{justify-content:space-around}ui-box.ui-layout-box-distribute-y-space-evenly{justify-content:space-evenly}ui-box.ui-layout-box-fit-content{width:-moz-fit-content;width:fit-content}ui-box.ui-layout-box-fill-container{width:100%;height:100%}ui-box.ui-layout-box .ui-box-content{display:block;width:100%}ui-box.ui-layout-box-content-max-width .ui-box-content{max-width:1440px;margin:0 auto;display:block}\n"], 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: LayoutBoxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-box',
+                        template: '<div class="ui-box-content"><ng-content></ng-content></div>',
+                        host: {
+                            '[class]': 'boxLayoutClasses'
+                        },
+                        styleUrls: ['./box.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: TokenService }]; }, propDecorators: { box_space: [{
+                    type: i0.Input
+                }], box_space_top: [{
+                    type: i0.Input
+                }], box_space_right: [{
+                    type: i0.Input
+                }], box_space_bottom: [{
+                    type: i0.Input
+                }], box_space_left: [{
+                    type: i0.Input
+                }], box_align_x: [{
+                    type: i0.Input
+                }], box_align_y: [{
+                    type: i0.Input
+                }], box_fill_mode: [{
+                    type: i0.Input
+                }], box_background: [{
+                    type: i0.Input
+                }], box_content_fill_width: [{
+                    type: i0.Input
+                }] } });
 
-  var LayoutGridComponent = /** @class */ (function () {
-      function LayoutGridComponent(changes) {
-          this.changes = changes;
-          this.didFirstInit = false;
-          this.prefix = 'ui-layout-grid';
-          this.grid_auto = false;
-          this.grid_collapse_below = 'tablet';
-          this.grid_gap = 'default';
-      }
-      LayoutGridComponent.prototype.ngOnChanges = function () {
-          if (!this.didFirstInit) {
-              return;
-          }
-          this.ngOnInit();
-          this.changes.markForCheck();
-      };
-      LayoutGridComponent.prototype.ngOnInit = function () {
-          this.gridLayoutClasses = [
-              this.prefix,
-              this.prefix + "-" + this.grid_gap,
-              this.prefix + "-" + (this.grid_auto ? 'width-auto' : ''),
-              this.prefix + "-collapse-below-" + this.grid_collapse_below,
-          ];
-          this.didFirstInit = true;
-      };
-      return LayoutGridComponent;
-  }());
-  LayoutGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutGridComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LayoutGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutGridComponent, selector: "ui-grid", inputs: { grid_auto: "grid_auto", grid_collapse_below: "grid_collapse_below", grid_gap: "grid_gap" }, host: { properties: { "class": "gridLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, styles: ["ui-grid{width:100%}ui-grid.ui-layout-grid-default{grid-gap:var(--semantic-spacing-grid-default);gap:var(--semantic-spacing-grid-default)}ui-grid.ui-layout-grid-none{grid-gap:var(--semantic-spacing-grid-none);gap:var(--semantic-spacing-grid-none)}ui-grid.ui-layout-grid-width-auto{display:flex;flex-wrap:nowrap}ui-grid.ui-layout-grid-width-auto ui-column{flex:1 1 0}ui-grid:not(.ui-layout-grid-width-auto){display:grid;grid-template-columns:repeat(12,1fr)}ui-grid:not(.ui-layout-grid-width-auto) ui-column{grid-column:span 12}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-12{grid-column:span 12}@media only screen and (max-width: 767px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-12{grid-column:span 12}}@media only screen and (min-width: 768px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-12{grid-column:span 12}}@media only screen and (min-width: 1080px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-12{grid-column:span 12}}@media only screen and (min-width: 1440px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-12{grid-column:span 12}}@media only screen and (max-width: 767px){ui-grid.ui-layout-grid-collapse-below-tablet{display:flex;flex-direction:column}}@media only screen and (max-width: 1079px){ui-grid.ui-layout-grid-collapse-below-laptop{display:flex;flex-direction:column}}@media only screen and (max-width: 1439px){ui-grid.ui-layout-grid-collapse-below-desktop{display:flex;flex-direction:column}}\n"], 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: LayoutGridComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-grid',
-                      template: '<ng-content></ng-content>',
-                      host: {
-                          '[class]': 'gridLayoutClasses'
-                      },
-                      styleUrls: ['./grid.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { grid_auto: [{
-                  type: i0.Input
-              }], grid_collapse_below: [{
-                  type: i0.Input
-              }], grid_gap: [{
-                  type: i0.Input
-              }] } });
+    var LayoutStackComponent = /** @class */ (function () {
+        function LayoutStackComponent(changes) {
+            this.changes = changes;
+            this.didFirstInit = false;
+            this.prefix = 'ui-layout-stack';
+            this.stack_gap = 'default';
+            this.stack_align = 'start';
+            this.stack_direction = 'y';
+            this.stack_distribute = 'start';
+            this.stack_wrap = false;
+        }
+        LayoutStackComponent.prototype.defaultDistribution = function () {
+            if (this.stack_distribute) {
+                return this.stack_distribute;
+            }
+            return this.stack_direction === 'x' ? 'fit' : 'fill';
+        };
+        LayoutStackComponent.prototype.ngOnChanges = function () {
+            if (!this.didFirstInit) {
+                return;
+            }
+            this.ngOnInit();
+            this.changes.markForCheck();
+        };
+        LayoutStackComponent.prototype.ngOnInit = function () {
+            this.stack_distribute = this.defaultDistribution();
+            this.stackLayoutClasses = [
+                this.prefix,
+                this.prefix + "-" + this.stack_gap,
+                this.prefix + "-align-" + this.stack_align,
+                this.prefix + "-distribute-" + this.stack_distribute,
+                this.prefix + "-direction-" + this.stack_direction,
+                this.prefix + "-" + (this.stack_wrap ? 'wrap' : 'no-wrap'),
+            ];
+            this.didFirstInit = true;
+        };
+        return LayoutStackComponent;
+    }());
+    LayoutStackComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutStackComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LayoutStackComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutStackComponent, selector: "ui-stack", inputs: { stack_gap: "stack_gap", stack_align: "stack_align", stack_direction: "stack_direction", stack_distribute: "stack_distribute", stack_wrap: "stack_wrap" }, host: { properties: { "class": "stackLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, styles: [".ui-layout-stack{display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%}.ui-layout-stack-none{grid-gap:var(--semantic-spacing-stack-none);gap:var(--semantic-spacing-stack-none)}.ui-layout-stack-tight{grid-gap:var(--semantic-spacing-stack-tight);gap:var(--semantic-spacing-stack-tight)}.ui-layout-stack-near{grid-gap:var(--semantic-spacing-stack-near);gap:var(--semantic-spacing-stack-near)}.ui-layout-stack-default{grid-gap:var(--semantic-spacing-stack-default);gap:var(--semantic-spacing-stack-default)}.ui-layout-stack-expanded{grid-gap:var(--semantic-spacing-stack-expanded);gap:var(--semantic-spacing-stack-expanded)}.ui-layout-stack-section{grid-gap:var(--semantic-spacing-stack-section);gap:var(--semantic-spacing-stack-section)}.ui-layout-stack-align-start{justify-content:flex-start}.ui-layout-stack-align-x-start{align-items:flex-start;align-content:flex-start}.ui-layout-stack-align-center{justify-content:center}.ui-layout-stack-align-x-center{align-items:center;align-content:center}.ui-layout-stack-align-end{justify-content:flex-end}.ui-layout-stack-align-x-end{align-items:flex-end;align-content:flex-end}.ui-layout-stack-distribute-fill{justify-content:unset}.ui-layout-stack-distribute-start{justify-content:flex-start}.ui-layout-stack-distribute-center{justify-content:center}.ui-layout-stack-distribute-end{justify-content:flex-end}.ui-layout-stack-distribute-space-between{justify-content:space-between}.ui-layout-stack-distribute-space-around{justify-content:space-around}.ui-layout-stack-distribute-space-evenly{justify-content:space-evenly}.ui-layout-stack-align-start{align-items:flex-start;align-content:flex-start}.ui-layout-stack-align-center{align-items:center;align-content:center}.ui-layout-stack-align-end{align-items:flex-end;align-content:flex-end}.ui-layout-stack-distribute-y-fill{justify-content:unset}.ui-layout-stack-distribute-y-start{justify-content:flex-start}.ui-layout-stack-distribute-y-center{justify-content:center}.ui-layout-stack-distribute-y-end{justify-content:flex-end}.ui-layout-stack-distribute-y-space-between{justify-content:space-between}.ui-layout-stack-distribute-y-space-around{justify-content:space-around}.ui-layout-stack-distribute-y-space-evenly{justify-content:space-evenly}.ui-layout-stack-direction-x{flex-direction:row}.ui-layout-stack-direction-y{flex-direction:column}.ui-layout-stack-distribute-fill>*{flex:1 1 auto}.ui-layout-stack-distribute-fit>ui-stack{flex-basis:0%}.ui-layout-stack-wrap{flex-wrap:wrap}.ui-layout-stack-no-wrap{flex-wrap:nowrap}.ui-layout-stack.ui-layout-stack-direction-y.ui-layout-stack-wrap{height:100%}\n"], 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: LayoutStackComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-stack',
+                        template: '<ng-content></ng-content>',
+                        host: {
+                            '[class]': 'stackLayoutClasses'
+                        },
+                        styleUrls: ['./stack.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { stack_gap: [{
+                    type: i0.Input
+                }], stack_align: [{
+                    type: i0.Input
+                }], stack_direction: [{
+                    type: i0.Input
+                }], stack_distribute: [{
+                    type: i0.Input
+                }], stack_wrap: [{
+                    type: i0.Input
+                }] } });
 
-  var OasysLayoutModule = /** @class */ (function () {
-      function OasysLayoutModule() {
-      }
-      return OasysLayoutModule;
-  }());
-  OasysLayoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  OasysLayoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, declarations: [LayoutBoxComponent,
-          LayoutContainerComponent,
-          LayoutGridComponent,
-          LayoutGridColumnComponent,
-          LayoutStackComponent], 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] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [
-                          LayoutBoxComponent,
-                          LayoutContainerComponent,
-                          LayoutGridComponent,
-                          LayoutGridColumnComponent,
-                          LayoutStackComponent,
-                      ],
-                      exports: [
-                          LayoutBoxComponent,
-                          LayoutContainerComponent,
-                          LayoutGridComponent,
-                          LayoutGridColumnComponent,
-                          LayoutStackComponent,
-                      ],
-                      providers: [TokenService],
-                  }]
-          }] });
+    var IconComponent = /** @class */ (function () {
+        function IconComponent(document, tokenService) {
+            this.document = document;
+            this.tokenService = tokenService;
+            this.icon_size = 'large';
+            this.icon_context = 'none';
+        }
+        IconComponent.prototype.convertRemToPixels = function (remString) {
+            var remNumber = parseFloat(remString.replace('rem', ''));
+            return remNumber * parseFloat(getComputedStyle(this.document.documentElement).fontSize);
+        };
+        IconComponent.prototype.ngOnChanges = function () {
+            this.ngOnInit();
+        };
+        IconComponent.prototype.ngOnInit = function () {
+            this.iconBrandPath = "" + this.tokenService.getBrandName();
+            this.size = this.tokenService.getTokenValue("--global-size-icon-" + this.icon_size);
+            this.iconDisplayClasses = [
+                "icon-context-" + this.icon_context,
+                "icon-size-" + this.icon_size
+            ];
+            var sizeInPixels = this.convertRemToPixels(this.size);
+            this.icon_width = sizeInPixels;
+            this.icon_height = sizeInPixels;
+        };
+        return IconComponent;
+    }());
+    IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, deps: [{ token: i6.DOCUMENT }, { token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "ui-icon", inputs: { icon_size: "icon_size", icon_name: "icon_name", icon_context: "icon_context", icon_width: "icon_width", icon_height: "icon_height", icon_class: "icon_class" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"ui-icon\" [ngClass]=\"iconDisplayClasses\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"icon_width\" [attr.height]=\"icon_height\" [attr.class]=\"icon_class\">\n    <use attr.xlink:href=\"./{{iconBrandPath}}/assets/icons/icons.svg#icon-{{icon_name}}\"></use>\n  </svg>\n</div>\n", styles: [".ui-icon{display:flex}\n"], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-icon',
+                        templateUrl: './icon.component.html',
+                        styleUrls: ['./icon.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [i6.DOCUMENT]
+                        }] }, { type: TokenService }];
+        }, propDecorators: { icon_size: [{
+                    type: i0.Input
+                }], icon_name: [{
+                    type: i0.Input
+                }], icon_context: [{
+                    type: i0.Input
+                }], icon_width: [{
+                    type: i0.Input
+                }], icon_height: [{
+                    type: i0.Input
+                }], icon_class: [{
+                    type: i0.Input
+                }] } });
 
-  var OasysBreadcrumbModule = /** @class */ (function () {
-      function OasysBreadcrumbModule() {
-      }
-      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: [i3.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: [[i3.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysBreadcrumbModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [BreadcrumbsComponent],
-                      imports: [i3.CommonModule, OasysButtonModule, OasysIconModule, OasysLayoutModule],
-                      exports: [BreadcrumbsComponent],
-                  }]
-          }] });
+    var OasysButtonComponent = /** @class */ (function () {
+        function OasysButtonComponent(changes) {
+            this.changes = changes;
+            this.button_icon_placement = 'leading';
+            // Button Stylings
+            this.button_size = 'large';
+            this.button_full_width = false;
+            this.button_type = 'primary';
+            this.button_disabled = false;
+            // Button Actions
+            this.href = '';
+            this.clicked = new i0.EventEmitter();
+            this.iconContext = 'none';
+            this.outlineButtonTypes = ['secondary', 'secondary-inverse'];
+        }
+        OasysButtonComponent.prototype.onClick = function () {
+            this.clicked.emit();
+        };
+        OasysButtonComponent.prototype.createButton = function () {
+            return {
+                buttonIcon: this.button_icon,
+                buttonIconPlacement: this.button_icon_placement,
+                buttonType: this.button_type,
+                buttonSize: this.button_size,
+                buttonDisabled: this.button_disabled,
+                href: this.href,
+                target: '',
+                buttonDisplayClasses: [
+                    "type-" + this.button_type,
+                    "size-" + this.button_size,
+                    "" + (this.button_icon ? 'button--has-icon' : ''),
+                    "" + (this.button_full_width ? 'button--full-width' : ''),
+                    "" + (this.button_icon ? 'button--icon--' + this.button_icon_placement : ''),
+                    "" + (this.outlineButtonTypes.indexOf(this.button_type) !== -1 ? 'button--outline' : '')
+                ].filter(function (d) { return !!d; })
+            };
+        };
+        OasysButtonComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            if ((_b = (_a = this.ngContent) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.innerText) {
+                this.accessibleButtonContent = this.ngContent.nativeElement.innerText;
+            }
+            else {
+                throw new Error("\n      No inner text found. All buttons should have text passed via ng-content to enable accessibility for screen readers, this includes icon-only buttons.\n\n      Pass content using the template variable #buttontext eg:\n      ui-button()\n        span(#buttontext) Buy All The Things\n      ");
+            }
+        };
+        OasysButtonComponent.prototype.ngOnChanges = function () {
+            this.button = this.createButton();
+            this.changes.markForCheck();
+        };
+        OasysButtonComponent.prototype.ngOnInit = function () {
+            this.button = this.createButton();
+        };
+        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: "<button (click)=\"onClick()\"\n        [routerLink]=\"button.href || null\"\n        [ngClass]=\"button.buttonDisplayClasses\"\n        [attr.disabled]=\"button.buttonDisabled === true || null\"\n        [attr.aria-label]=\"accessibleButtonContent\"\n        [attr.title]=\"accessibleButtonContent\"\n        role=\"button\">\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</button>\n", styles: ["ui-button button{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{display:flex;align-items:center}ui-button button .button-content .ui-icon{display:flex;align-items:center;max-height:var(--component-button-line-height)}ui-button button .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{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{opacity:var(--component-button-opacity-overlay-hover)}ui-button button:focus .button-overlay{opacity:var(--component-button-opacity-overlay-focus)}ui-button button:focus-visible .button-overlay{opacity:var(--component-button-opacity-overlay-focus-visible)}ui-button button:focus-visible{outline:none}ui-button button: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{outline:none}ui-button button.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{background-color:var(--component-button-color-primary-text)}ui-button button.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{background-color:var(--component-button-color-secondary-text)}ui-button button.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{background-color:var(--component-button-color-tertiary-text)}ui-button button.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{background-color:var(--component-button-color-primary-inverse-text)}ui-button button.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{background-color:var(--component-button-color-secondary-inverse-text)}ui-button button.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{background-color:var(--component-button-color-tertiary-inverse-text)}ui-button button.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{background-color:var(--component-button-color-expressive-text)}ui-button button.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{background-color:var(--component-button-color-danger-text)}ui-button button.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{background-color:var(--component-button-color-facebook-text)}ui-button button.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{background-color:var(--component-button-color-paypal-text)}ui-button button.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{background-color:var(--component-button-color-trustpilot-text)}ui-button button .buttonIcon{fill:currentColor}ui-button button.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{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{margin-left:calc(var(--component-button-size-large-icon-offset-leading) * -1)}ui-button button.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{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{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{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{margin-left:calc(var(--component-button-size-small-icon-offset-leading) * -1)}ui-button button.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{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{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{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{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{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{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{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{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{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{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{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]{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}ui-button button.button--has-icon.button--icon--trailing .button-content{flex-direction:row-reverse}ui-button button.button--full-width{display:flex;width:100%}\n"], components: [{ type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_name", "icon_context", "icon_width", "icon_height", "icon_class"] }], directives: [{ type: i2__namespace.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: [{
+                        selector: 'ui-button',
+                        templateUrl: './button.component.html',
+                        styleUrls: ['./button.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { button_icon: [{
+                    type: i0.Input
+                }], button_icon_placement: [{
+                    type: i0.Input
+                }], ngContent: [{
+                    type: i0.ContentChild,
+                    args: ['buttontext']
+                }], button_size: [{
+                    type: i0.Input
+                }], button_full_width: [{
+                    type: i0.Input
+                }], button_type: [{
+                    type: i0.Input
+                }], button_disabled: [{
+                    type: i0.Input
+                }], href: [{
+                    type: i0.Input
+                }], clicked: [{
+                    type: i0.Output
+                }] } });
 
-  var CardComponent = /** @class */ (function () {
-      function CardComponent(tokenService) {
-          this.tokenService = tokenService;
-      }
-      CardComponent.prototype.ngOnInit = function () {
-          this.aspectRatio = this.setImageAspectRatio(this.image_format);
-      };
-      /**
-       * This function retrieves the appropriate design token value based on the passed imageFormat choice
-       *
-       * @param format - The format of the image e.g. square, portrait, landscape
-       * @returns - string to be used as the aspect ratio
-       */
-      CardComponent.prototype.setImageAspectRatio = function (format) {
-          switch (format) {
-              case 'square':
-                  return this.tokenService.getTokenValue('--component-card-aspect-ratio-square');
-              case 'portrait':
-                  return this.tokenService.getTokenValue('--component-card-aspect-ratio-portrait');
-              case 'landscape':
-                  return this.tokenService.getTokenValue('--component-card-aspect-ratio-landscape');
-              default:
-                  return this.tokenService.getTokenValue('--component-card-aspect-ratio-portrait');
-          }
-      };
-      return CardComponent;
-  }());
-  CardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CardComponent, selector: "ui-card", inputs: { card_link: "card_link", label_text: "label_text", image: "image", alt_text: "alt_text", image_format: "image_format", small_title_left: "small_title_left", small_sub_title_right: "small_sub_title_right", standard_content: "standard_content", bold_content: "bold_content" }, host: { listeners: { "window:resize": "imageLabel($event)" } }, viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ng-template #content>\n    <ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"near\">\n        <ui-stack stack_align=\"center\" stack_gap=\"none\"> \n            <ui-box \n                class=\"ui-card__image\"\n                [ngStyle]=\"{'aspect-ratio': aspectRatio}\" \n                box_background=\"transparent\" \n                box_align_x=\"center\" \n                box_space=\"none\">\n                    <img [src]=\"image\" [attr.alt]=\"alt_text\">\n            </ui-box>\n            <ui-stack stack_gap=\"tight\" [ngStyle]=\"{'margin-top': '-' + (imageLabel?.nativeElement?.offsetHeight/2) + 'px'}\">\n                <ui-box\n                    #imagelabel \n                    *ngIf=\"label_text\"\n                    class=\"card__image-label center-content\" \n                    box_background=\"tint-highlight\" \n                    box_align_x=\"center\" \n                    box_align_y=\"center\"\n                    box_space_left=\"near\"\n                    box_space_right=\"near\"\n                    box_space_bottom=\"tight\"\n                    box_space_top=\"tight\">\n                    <h5>{{label_text}}</h5>\n                </ui-box>\n                <ui-box *ngIf=\"small_title_left || small_sub_title_right\" [box_space_top]=\"label_text ? 'none' : 'tight'\" box_space=\"none\" box_background=\"transparent\" > \n                    <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n                        <span class=\"text-body--supporting text-color--supporting\">{{small_title_left}}</span>\n                        <span class=\"text-body--supporting text-color--supporting\">{{small_sub_title_right}}</span>\n                    </ui-stack>\n                </ui-box>\n                <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">{{standard_content}}</p>\n                <p *ngIf=\"bold_content\" class=\"text-label--primary text-body--emphasis\">{{bold_content}}</p>\n            </ui-stack> \n        </ui-stack>\n    </ui-box>\n</ng-template>\n\n<!-- Wrap the content in an <a> tag if the card is a link -->\n<a *ngIf=\"card_link\" [routerLink]=\"cardLink || null\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<!-- Display the content as normal if the card is not a link -->\n<ng-container *ngIf=\"!card_link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n", styles: [".ui-card__image{position:relative}.ui-card__image img{position:absolute;height:100%;object-fit:cover;width:100%;left:0}.ui-card .center-content{text-align:center;align-self:center}.ui-card .card__image-label{width:auto;height:auto;border-radius:2px;margin:0 8px;text-align:center;overflow:hidden;z-index:2}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }], directives: [{ type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-card',
-                      templateUrl: './card.component.html',
-                      styleUrls: ['./card.component.scss']
-                  }]
-          }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { imageLabel: [{
-                  type: i0.HostListener,
-                  args: ['window:resize', ['$event']]
-              }, {
-                  type: i0.ViewChild,
-                  args: ["imagelabel", { static: false, read: i0.ElementRef }]
-              }], card_link: [{
-                  type: i0.Input
-              }], label_text: [{
-                  type: i0.Input
-              }], image: [{
-                  type: i0.Input
-              }], alt_text: [{
-                  type: i0.Input
-              }], image_format: [{
-                  type: i0.Input
-              }], small_title_left: [{
-                  type: i0.Input
-              }], small_sub_title_right: [{
-                  type: i0.Input
-              }], standard_content: [{
-                  type: i0.Input
-              }], bold_content: [{
-                  type: i0.Input
-              }] } });
+    var OasysAlertComponent = /** @class */ (function () {
+        function OasysAlertComponent(breakpointService) {
+            this.breakpointService = breakpointService;
+            this.tone = 'neutral';
+            this.cancel = new i0.EventEmitter();
+            this.confirm = new i0.EventEmitter();
+        }
+        Object.defineProperty(OasysAlertComponent.prototype, "isMobile", {
+            get: function () {
+                return this.breakpointService.currentSize.value === Breakpoint.MOBILE;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OasysAlertComponent.prototype.cancelled = function () {
+            this.cancel.emit();
+        };
+        OasysAlertComponent.prototype.confirmed = function () {
+            this.confirm.emit();
+        };
+        return OasysAlertComponent;
+    }());
+    OasysAlertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertComponent, deps: [{ token: BreakpointService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OasysAlertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OasysAlertComponent, selector: "ui-alert", inputs: { tone: "tone" }, outputs: { cancel: "cancel", confirm: "confirm" }, queries: [{ propertyName: "cancelButton", first: true, predicate: OasysAlertCancelDirective, descendants: true }, { propertyName: "confirmButton", first: true, predicate: OasysAlertConfirmDirective, descendants: true }], ngImport: i0__namespace, template: "<ui-box class=\"ui-alert\" box_space=\"near\" box_align_x=\"center\" [ngClass]=\"tone\">\n  <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n    <div class=\"badge\" [ngClass]=\"tone\" [ngSwitch]=\"tone\">\n      <ui-icon *ngSwitchCase=\"'negative'\" icon_name=\"error\"></ui-icon>\n      <ui-icon *ngSwitchCase=\"'positive'\" icon_name=\"tick\"></ui-icon>\n      <ui-icon *ngSwitchDefault icon_name=\"info\"></ui-icon>\n    </div>\n\n    <ui-stack stack_gap=\"near\" [stack_direction]=\"isMobile ? 'y' : 'x'\">\n      <ui-stack class=\"content\" stack_direction=\"y\">\n        <div class=\"text-body--emphasis\">\n          <ng-content select=\"ui-alert-title\"></ng-content>\n        </div>\n        <div>\n          <ng-content select=\"ui-alert-content\"></ng-content>\n        </div>\n      </ui-stack>\n\n      <ui-box\n        box_space=\"none\"\n        box_background=\"transparent\"\n        [box_fill_mode]=\"isMobile ? 'fill' : 'fit'\"\n      >\n        <ui-stack stack_direction=\"x\" stack_gap=\"near\" stack_distribute=\"end\">\n          <ui-button\n            *ngIf=\"cancelButton.text\"\n            button_type=\"tertiary\"\n            (clicked)=\"cancelled()\"\n          >\n            <span #buttontext>\n              <ng-content select=\"ui-alert-cancel\"></ng-content>\n            </span>\n          </ui-button>\n          <ui-button\n            *ngIf=\"confirmButton.text\"\n            button_type=\"secondary\"\n            (clicked)=\"confirmed()\"\n          >\n            <span #buttontext>\n              <ng-content select=\"ui-alert-confirm\"></ng-content>\n            </span>\n          </ui-button>\n        </ui-stack>\n      </ui-box>\n    </ui-stack>\n  </ui-stack>\n</ui-box>\n", styles: [".ui-alert{background-color:var(--component-alert-background-neutral)}.ui-alert.negative{background-color:var(--component-alert-background-negative)}.ui-alert.positive{background-color:var(--component-alert-background-positive)}.ui-alert .badge{padding:2px;border-radius:9999px;color:var(--global-color-black);background-color:var(--component-alert-badge-neutral)}.ui-alert .badge.negative{color:var(--global-color-white);background-color:var(--component-alert-badge-negative)}.ui-alert .badge.positive{color:var(--global-color-white);background-color:var(--component-alert-badge-positive)}.ui-alert .badge ui-icon{fill:currentColor}.ui-alert .content{grid-gap:4px;gap:4px}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_name", "icon_context", "icon_width", "icon_height", "icon_class"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: OasysAlertComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-alert',
+                        templateUrl: './alert.component.html',
+                        styleUrls: ['./alert.component.scss'],
+                    }]
+            }], ctorParameters: function () { return [{ type: BreakpointService }]; }, propDecorators: { tone: [{
+                    type: i0.Input
+                }], cancel: [{
+                    type: i0.Output
+                }], confirm: [{
+                    type: i0.Output
+                }], cancelButton: [{
+                    type: i0.ContentChild,
+                    args: [OasysAlertCancelDirective]
+                }], confirmButton: [{
+                    type: i0.ContentChild,
+                    args: [OasysAlertConfirmDirective]
+                }] } });
 
-  var OasysCardModule = /** @class */ (function () {
-      function OasysCardModule() {
-      }
-      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: [i3.CommonModule, OasysLayoutModule], exports: [CardComponent] });
-  OasysCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, providers: [TokenService], imports: [[i3.CommonModule, OasysLayoutModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysCardModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [CardComponent],
-                      imports: [i3.CommonModule, OasysLayoutModule],
-                      exports: [CardComponent],
-                      providers: [TokenService],
-                  }]
-          }] });
+    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]] });
+    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],
+                        exports: [IconComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
 
-  var DividerComponent = /** @class */ (function () {
-      function DividerComponent() {
-          this.divider_type = 'secondary';
-      }
-      DividerComponent.prototype.getClass = function () {
-          return this.divider_type === 'secondary' ? "ui-divider--type-" + this.divider_type : "ui-divider--type-" + this.divider_type;
-      };
-      return DividerComponent;
-  }());
-  DividerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DividerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DividerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DividerComponent, selector: "ui-divider", inputs: { divider_type: "divider_type" }, ngImport: i0__namespace, template: "<ui-box box_fill_mode=\"fill\" box_space=\"none\" box_background=\"core-secondary\" [ngClass]=\"getClass()\"></ui-box>", styles: ["ui-divider{display:block;width:100%}ui-divider ui-box.ui-divider--type-secondary:after{content:\"\";display:block;height:var(--global-size-unit-01);width:100%}ui-divider ui-box.ui-divider--type-primary:after{content:\"\";display:block;height:var(--global-size-unit-08);width:100%}\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"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DividerComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-divider',
-                      templateUrl: './divider.component.html',
-                      styleUrls: ['./divider.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                  }]
-          }], propDecorators: { divider_type: [{
-                  type: i0.Input
-              }] } });
+    var OasysButtonModule = /** @class */ (function () {
+        function OasysButtonModule() {
+        }
+        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, i2.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, i2.RouterModule, OasysIconModule]] });
+    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, i2.RouterModule, OasysIconModule],
+                        exports: [OasysButtonComponent],
+                    }]
+            }] });
 
-  var OasysDividerModule = /** @class */ (function () {
-      function OasysDividerModule() {
-      }
-      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: [i3.CommonModule, OasysLayoutModule], exports: [DividerComponent] });
-  OasysDividerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, imports: [[i3.CommonModule, OasysLayoutModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysDividerModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [DividerComponent],
-                      imports: [i3.CommonModule, OasysLayoutModule],
-                      exports: [DividerComponent],
-                  }]
-          }] });
+    var LayoutContainerComponent = /** @class */ (function () {
+        function LayoutContainerComponent(changes) {
+            this.changes = changes;
+            this.container_fluid = false;
+            this.container_gutter = true;
+            this.prefix = 'ui-layout-container';
+        }
+        LayoutContainerComponent.prototype.ngOnChanges = function () {
+            this.ngOnInit();
+            this.changes.markForCheck();
+        };
+        LayoutContainerComponent.prototype.ngOnInit = function () {
+            this.containerLayoutClasses = [
+                this.prefix,
+                this.container_fluid ? this.prefix + "-fluid" : '',
+                this.container_gutter ? '' : this.prefix + "-no-gutter"
+            ].flat(10).filter(Boolean);
+        };
+        return LayoutContainerComponent;
+    }());
+    LayoutContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LayoutContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutContainerComponent, selector: "ui-container", inputs: { container_fluid: "container_fluid", container_gutter: "container_gutter" }, host: { properties: { "class": "containerLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: "\n    <ng-content></ng-content>\n  ", isInline: true, styles: [":host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);display:block;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--container-component-gutter-size)}@media only screen and (max-width: 767px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 768px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 1080px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (min-width: 1440px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}:host.ui-layout-container-no-gutter{padding:0}@media only screen and (max-width: 767px){:host{max-width:100%}}@media only screen and (min-width: 768px){:host{max-width:calc(767px)}}@media only screen and (min-width: 1080px){:host{max-width:calc(1080px)}}@media only screen and (min-width: 1440px){:host{max-width:calc(1440px)}}:host.ui-layout-container-fluid{max-width:100%}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-container',
+                        template: "\n    <ng-content></ng-content>\n  ",
+                        host: {
+                            '[class]': 'containerLayoutClasses'
+                        },
+                        styleUrls: ['./container.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { container_fluid: [{
+                    type: i0.Input
+                }], container_gutter: [{
+                    type: i0.Input
+                }] } });
 
-  var OasysHeadingComponent = /** @class */ (function () {
-      function OasysHeadingComponent(tokenService) {
-          this.tokenService = tokenService;
-          this.heading_type = 'primary';
-          this.heading_seo_priority = false;
-          this.heading_subtitle = '';
-          this.heading_surtitle = '';
-      }
-      Object.defineProperty(OasysHeadingComponent.prototype, "class", {
-          get: function () {
-              return "\n      " + (this.heading_on_dark ? 'text-color--on-dark' : '') + "\n      ui-heading-alignment-" + this.headingAlignment + "\n    ";
-          },
-          enumerable: false,
-          configurable: true
-      });
-      OasysHeadingComponent.prototype.headingTypeIsFunctional = function (headingType) {
-          return (headingType || '').indexOf('functional') !== -1;
-      };
-      OasysHeadingComponent.prototype.setupHeadingStackAlignment = function (headingType) {
-          if (this.heading_alignment_override) {
-              this.headingAlignment = this.heading_alignment_override;
-              return;
-          }
-          var alignment = this.tokenService.getTokenValue('--component-heading-alignment-default');
-          var functionalAlignment = this.tokenService.getTokenValue('--component-heading-alignment-functional');
-          this.headingAlignment = this.headingTypeIsFunctional(headingType) ? functionalAlignment : alignment;
-      };
-      OasysHeadingComponent.prototype.setupHeadingStackGap = function (headingType) {
-          if (this.headingTypeIsFunctional(headingType)) {
-              this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-functional');
-              return;
-          }
-          if (this.heading_type === 'secondary') {
-              this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-secondary');
-              return;
-          }
-          if (this.heading_type === 'primary') {
-              this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-primary');
-              return;
-          }
-          // Hero gap
-          this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-default');
-      };
-      OasysHeadingComponent.prototype.ngOnInit = function () {
-          this.setupHeadingStackAlignment(this.heading_type);
-          this.setupHeadingStackGap(this.heading_type);
-          this.heading_priority = this.heading_priority || this.heading_seo_priority ? 1 : 2;
-      };
-      return OasysHeadingComponent;
-  }());
-  OasysHeadingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  OasysHeadingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OasysHeadingComponent, selector: "ui-heading", inputs: { heading_type: "heading_type", heading_on_dark: "heading_on_dark", heading_title: "heading_title", heading_seo_priority: "heading_seo_priority", heading_priority: "heading_priority", heading_alignment_override: "heading_alignment_override", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle" }, host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<div>\n    <ui-stack [stack_align]=\"headingAlignment\" [stack_gap]=\"headingGap\">\n\n        <p *ngIf=\"heading_surtitle && heading_surtitle.length\" class=\"heading-surtitle text-body--supporting text-color--supporting\">\n            {{heading_surtitle}}\n        </p>\n\n        <ng-template #content>\n            <span\n            class=\"heading-title\"\n            [ngClass]=\"{\n                'text-heading': !headingTypeIsFunctional(heading_type),\n                'text-heading--functional': headingTypeIsFunctional(heading_type),\n\n                'text-heading--hero': heading_type === 'hero',\n                'text-heading--primary': heading_type === 'primary',\n                'text-heading--secondary': heading_type === 'secondary',\n                'text-heading--functional--primary': heading_type === 'functional-primary',\n                'text-heading--functional--secondary': heading_type === 'functional-secondary'\n            }\"\n            >{{heading_title}}</span>\n        </ng-template>\n\n        <h1 role=\"heading\" [attr.aria-level]=\"heading_priority\" class=\"seo-h1\" *ngIf=\"heading_seo_priority\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </h1>\n        <span role=\"heading\" [attr.aria-level]=\"heading_priority\" *ngIf=\"!heading_seo_priority\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </span>\n\n        <p\n            *ngIf=\"heading_subtitle && heading_subtitle.length\"\n            class=\"heading-subtitle\"\n            [ngClass]=\"{\n                'text-body--hero': heading_type === 'hero',\n                'text-body--default': heading_type !== 'hero'\n            }\"\n        >{{heading_subtitle}}</p>\n\n    </ui-stack>\n</div>", styles: ["ui-heading.ui-heading-alignment-start{text-align:start}ui-heading.ui-heading-alignment-center{text-align:center}\n"], components: [{ type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-heading',
-                      templateUrl: './heading.component.html',
-                      styleUrls: ['./heading.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None
-                  }]
-          }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { heading_type: [{
-                  type: i0.Input
-              }], heading_on_dark: [{
-                  type: i0.Input
-              }], heading_title: [{
-                  type: i0.Input
-              }], heading_seo_priority: [{
-                  type: i0.Input
-              }], heading_priority: [{
-                  type: i0.Input
-              }], heading_alignment_override: [{
-                  type: i0.Input
-              }], heading_subtitle: [{
-                  type: i0.Input
-              }], heading_surtitle: [{
-                  type: i0.Input
-              }], class: [{
-                  type: i0.HostBinding,
-                  args: ['class']
-              }] } });
+    var LayoutGridColumnComponent = /** @class */ (function () {
+        function LayoutGridColumnComponent(changes) {
+            this.changes = changes;
+            this.didFirstInit = false;
+            this.prefix = 'ui-layout-column';
+            this.columns = 12;
+        }
+        LayoutGridColumnComponent.prototype.getSizeClasses = function (columns) {
+            var _this = this;
+            if (!columns) {
+                return [''];
+            }
+            if (typeof columns === 'object') {
+                return Object.keys(columns).map(function (key) {
+                    return _this.prefix + "-" + key + "-" + columns[key];
+                });
+            }
+            return [
+                this.prefix,
+                this.prefix + "-col-" + columns
+            ];
+        };
+        LayoutGridColumnComponent.prototype.ngOnChanges = function () {
+            if (!this.didFirstInit) {
+                return;
+            }
+            this.ngOnInit();
+            this.changes.markForCheck();
+        };
+        LayoutGridColumnComponent.prototype.ngOnInit = function () {
+            this.columnLayoutClasses = [
+                this.prefix,
+                this.getSizeClasses(this.columns)
+            ].flat(10).filter(Boolean);
+            this.didFirstInit = true;
+        };
+        return LayoutGridColumnComponent;
+    }());
+    LayoutGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutGridColumnComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LayoutGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutGridColumnComponent, selector: "ui-column", inputs: { columns: "columns" }, host: { properties: { "class": "columnLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, styles: ["ui-grid{width:100%}ui-grid.ui-layout-grid-default{grid-gap:var(--semantic-spacing-grid-default);gap:var(--semantic-spacing-grid-default)}ui-grid.ui-layout-grid-none{grid-gap:var(--semantic-spacing-grid-none);gap:var(--semantic-spacing-grid-none)}ui-grid.ui-layout-grid-width-auto{display:flex;flex-wrap:nowrap}ui-grid.ui-layout-grid-width-auto ui-column{flex:1 1 0}ui-grid:not(.ui-layout-grid-width-auto){display:grid;grid-template-columns:repeat(12,1fr)}ui-grid:not(.ui-layout-grid-width-auto) ui-column{grid-column:span 12}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-12{grid-column:span 12}@media only screen and (max-width: 767px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-12{grid-column:span 12}}@media only screen and (min-width: 768px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-12{grid-column:span 12}}@media only screen and (min-width: 1080px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-12{grid-column:span 12}}@media only screen and (min-width: 1440px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-12{grid-column:span 12}}@media only screen and (max-width: 767px){ui-grid.ui-layout-grid-collapse-below-tablet{display:flex;flex-direction:column}}@media only screen and (max-width: 1079px){ui-grid.ui-layout-grid-collapse-below-laptop{display:flex;flex-direction:column}}@media only screen and (max-width: 1439px){ui-grid.ui-layout-grid-collapse-below-desktop{display:flex;flex-direction:column}}\n"], 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: LayoutGridColumnComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-column',
+                        template: '<ng-content></ng-content>',
+                        host: {
+                            '[class]': 'columnLayoutClasses'
+                        },
+                        styleUrls: ['./grid.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+                    type: i0.Input
+                }] } });
 
-  var OasysHeadingModule = /** @class */ (function () {
-      function OasysHeadingModule() {
-      }
-      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: [i3.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: [[i3.CommonModule, OasysLayoutModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [OasysHeadingComponent],
-                      imports: [i3.CommonModule, OasysLayoutModule],
-                      exports: [OasysHeadingComponent],
-                      providers: [TokenService],
-                  }]
-          }] });
+    var LayoutGridComponent = /** @class */ (function () {
+        function LayoutGridComponent(changes) {
+            this.changes = changes;
+            this.didFirstInit = false;
+            this.prefix = 'ui-layout-grid';
+            this.grid_auto = false;
+            this.grid_collapse_below = 'tablet';
+            this.grid_gap = 'default';
+        }
+        LayoutGridComponent.prototype.ngOnChanges = function () {
+            if (!this.didFirstInit) {
+                return;
+            }
+            this.ngOnInit();
+            this.changes.markForCheck();
+        };
+        LayoutGridComponent.prototype.ngOnInit = function () {
+            this.gridLayoutClasses = [
+                this.prefix,
+                this.prefix + "-" + this.grid_gap,
+                this.prefix + "-" + (this.grid_auto ? 'width-auto' : ''),
+                this.prefix + "-collapse-below-" + this.grid_collapse_below,
+            ];
+            this.didFirstInit = true;
+        };
+        return LayoutGridComponent;
+    }());
+    LayoutGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutGridComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LayoutGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutGridComponent, selector: "ui-grid", inputs: { grid_auto: "grid_auto", grid_collapse_below: "grid_collapse_below", grid_gap: "grid_gap" }, host: { properties: { "class": "gridLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, styles: ["ui-grid{width:100%}ui-grid.ui-layout-grid-default{grid-gap:var(--semantic-spacing-grid-default);gap:var(--semantic-spacing-grid-default)}ui-grid.ui-layout-grid-none{grid-gap:var(--semantic-spacing-grid-none);gap:var(--semantic-spacing-grid-none)}ui-grid.ui-layout-grid-width-auto{display:flex;flex-wrap:nowrap}ui-grid.ui-layout-grid-width-auto ui-column{flex:1 1 0}ui-grid:not(.ui-layout-grid-width-auto){display:grid;grid-template-columns:repeat(12,1fr)}ui-grid:not(.ui-layout-grid-width-auto) ui-column{grid-column:span 12}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-col-12{grid-column:span 12}@media only screen and (max-width: 767px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-mobile-12{grid-column:span 12}}@media only screen and (min-width: 768px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-tablet-12{grid-column:span 12}}@media only screen and (min-width: 1080px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-laptop-12{grid-column:span 12}}@media only screen and (min-width: 1440px){ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-1{grid-column:span 1}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-2{grid-column:span 2}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-3{grid-column:span 3}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-4{grid-column:span 4}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-5{grid-column:span 5}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-6{grid-column:span 6}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-7{grid-column:span 7}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-8{grid-column:span 8}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-9{grid-column:span 9}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-10{grid-column:span 10}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-11{grid-column:span 11}ui-grid:not(.ui-layout-grid-width-auto) ui-column.ui-layout-column-desktop-12{grid-column:span 12}}@media only screen and (max-width: 767px){ui-grid.ui-layout-grid-collapse-below-tablet{display:flex;flex-direction:column}}@media only screen and (max-width: 1079px){ui-grid.ui-layout-grid-collapse-below-laptop{display:flex;flex-direction:column}}@media only screen and (max-width: 1439px){ui-grid.ui-layout-grid-collapse-below-desktop{display:flex;flex-direction:column}}\n"], 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: LayoutGridComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-grid',
+                        template: '<ng-content></ng-content>',
+                        host: {
+                            '[class]': 'gridLayoutClasses'
+                        },
+                        styleUrls: ['./grid.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { grid_auto: [{
+                    type: i0.Input
+                }], grid_collapse_below: [{
+                    type: i0.Input
+                }], grid_gap: [{
+                    type: i0.Input
+                }] } });
 
-  var HeroComponent = /** @class */ (function () {
-      function HeroComponent(tokenService) {
-          this.tokenService = tokenService;
-          this.image_left_desktop = false;
-          this.image_top_mobile = true;
-          this.media_type = 'image';
-          // Event input variables
-          this.href_primary_cta = '';
-          this.href_secondary_cta = '';
-      }
-      HeroComponent.prototype.ngOnInit = function () {
-          this.heroCtaAlignment = this.tokenService.getTokenValue('--component-hero-actions-alignment');
-          this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.background_colour);
-          this.heroInsetSpaceSmall = this.tokenService.getTokenValue("--component-hero-inset-spacing-small");
-          this.heroInsetSpaceLarge = this.tokenService.getTokenValue("--component-hero-inset-spacing-large");
-      };
-      return HeroComponent;
-  }());
-  HeroComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HeroComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  HeroComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeroComponent, selector: "ui-hero", inputs: { min_container_height: "min_container_height", image_left_desktop: "image_left_desktop", image_top_mobile: "image_top_mobile", background_colour: "background_colour", heading_title: "heading_title", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", media_type: "media_type", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\">\n    <ui-grid [ngStyle]=\"{'min-height' : min_container_height ? min_container_height + 'px' : 'auto'}\" grid_gap=\"none\" grid_collapse_below=\"tablet\">\n        <ui-column columns=\"5\" [ngClass]=\"{'image-left': image_left_desktop, 'image-top': image_top_mobile}\">\n            <ui-box box_fill_mode=\"fill\" box_align_y=\"center\" box_background=\"transparent\" [box_space]=\"{mobile: heroInsetSpaceSmall, tablet: heroInsetSpaceSmall, laptop: heroInsetSpaceLarge, desktop: heroInsetSpaceLarge}\">\n                <ui-stack stack_direction=\"y\" stack_align=\"center\" stack_distribute=\"center\" stack_gap=\"default\">\n                    <ui-heading\n                        heading_type=\"primary\"\n                        [heading_on_dark]=\"backgroundIsDark  === 'on-dark' ? true : false\"\n                        [heading_title]=\"heading_title\"\n                        [heading_seo_priority]=\"true\"\n                        [heading_subtitle]=\"heading_subtitle\"\n                        [heading_surtitle]=\"heading_surtitle\">\n                    </ui-heading>\n                    <!-- TODO: replace with ui-button-group once built-->\n                    <ui-stack\n                        *ngIf=\"primary_cta_text\"\n                        class=\"cta-container\"\n                        stack_direction=\"x\"\n                        [stack_align]=\"heroCtaAlignment\"\n                        [stack_distribute]=\"heroCtaAlignment\"\n                        stack_wrap=\"true\"\n                        stack_gap=\"near\">\n                        <ui-button\n                            button_size=\"large\"\n                            [button_type]=\"backgroundIsDark  === 'on-dark' ? 'primary-inverse' : 'primary'\"\n                            [href]=\"href_primary_cta\">\n                            <span #buttontext>{{primary_cta_text}}</span>\n                        </ui-button>\n                        <ui-button\n                            *ngIf=\"secondary_cta_text\"\n                            button-size=\"large\"\n                            [button_type]=\"backgroundIsDark === 'on-dark' ? 'secondary-inverse' : 'secondary'\"\n                            [href]=\"href_secondary_cta\">\n                            <span #buttontext>{{secondary_cta_text}}</span>\n                        </ui-button>\n                    </ui-stack>\n                </ui-stack>\n            </ui-box>\n        </ui-column>\n        <ui-column columns=\"7\">\n            <picture  *ngIf=\"media_type === 'image'\">\n                <source [srcset]=\"image + '?w=880&h=880&fm=webp&q=75 1x,' + image + '?w=1760&h=1760&fm=webp&q=40 2x'\" media=\"(min-width: 1440px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=720&h=720&fm=webp&q=75 1x,' + image + '?w=1440&h=1440&fm=webp&q=40 2x'\" media=\"(min-width: 1200px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=580&h=580&fm=webp&q=75 1x,' + image + '?w=1160&h=1160&fm=webp&q=40 2x'\" media=\"(min-width: 992px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=430&h=430&fm=webp&q=75 1x,' + image +  '?w=860&h=860&fm=webp&q=40 2x'\" media=\"(min-width: 768px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=720&h=720&fm=webp&q=40 2x'\" media=\"(min-width: 454px)\" type=\"image/webp\">\n                <img [src]=\"image + '?w=430&h=430&fm=webp&q=75'\" [attr.alt]=\"alt_text\">\n            </picture>\n            <ng-content *ngIf=\"media_type === 'video'\"></ng-content>\n        </ui-column>\n    </ui-grid>\n</ui-box>\n\n", styles: ["ui-grid ui-column{position:relative}ui-grid ui-column img{width:100%}@media only screen and (min-width: 768px){ui-grid ui-column img{position:absolute;height:100%;object-fit:cover}}@media only screen and (max-width: 767px){ui-grid .image-top{order:1}}@media only screen and (min-width: 768px){ui-grid .image-top{order:0}ui-grid .image-left{order:1}}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }], directives: [{ type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HeroComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-hero',
-                      templateUrl: './hero.component.html',
-                      styleUrls: ['./hero.component.scss']
-                  }]
-          }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { min_container_height: [{
-                  type: i0.Input
-              }], image_left_desktop: [{
-                  type: i0.Input
-              }], image_top_mobile: [{
-                  type: i0.Input
-              }], background_colour: [{
-                  type: i0.Input
-              }], heading_title: [{
-                  type: i0.Input
-              }], heading_subtitle: [{
-                  type: i0.Input
-              }], heading_surtitle: [{
-                  type: i0.Input
-              }], primary_cta_text: [{
-                  type: i0.Input
-              }], secondary_cta_text: [{
-                  type: i0.Input
-              }], image: [{
-                  type: i0.Input
-              }], alt_text: [{
-                  type: i0.Input
-              }], media_type: [{
-                  type: i0.Input
-              }], href_primary_cta: [{
-                  type: i0.Input
-              }], href_secondary_cta: [{
-                  type: i0.Input
-              }] } });
+    var OasysLayoutModule = /** @class */ (function () {
+        function OasysLayoutModule() {
+        }
+        return OasysLayoutModule;
+    }());
+    OasysLayoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OasysLayoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, declarations: [LayoutBoxComponent,
+            LayoutContainerComponent,
+            LayoutGridComponent,
+            LayoutGridColumnComponent,
+            LayoutStackComponent], 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] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLayoutModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            LayoutBoxComponent,
+                            LayoutContainerComponent,
+                            LayoutGridComponent,
+                            LayoutGridColumnComponent,
+                            LayoutStackComponent,
+                        ],
+                        exports: [
+                            LayoutBoxComponent,
+                            LayoutContainerComponent,
+                            LayoutGridComponent,
+                            LayoutGridColumnComponent,
+                            LayoutStackComponent,
+                        ],
+                        providers: [TokenService],
+                    }]
+            }] });
 
-  var OasysHeroModule = /** @class */ (function () {
-      function OasysHeroModule() {
-      }
-      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: [i3.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule], exports: [HeroComponent] });
-  OasysHeroModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, providers: [TokenService], imports: [[i3.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeroModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [HeroComponent],
-                      imports: [i3.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule],
-                      exports: [HeroComponent],
-                      providers: [TokenService],
-                  }]
-          }] });
+    var OasysAlertModule = /** @class */ (function () {
+        function OasysAlertModule() {
+        }
+        return OasysAlertModule;
+    }());
+    OasysAlertModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OasysAlertModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertModule, declarations: [OasysAlertCancelDirective,
+            OasysAlertConfirmDirective,
+            OasysAlertContentDirective,
+            OasysAlertTitleDirective,
+            OasysAlertComponent], imports: [i6.CommonModule,
+            OasysLayoutModule,
+            OasysButtonModule,
+            OasysIconModule], exports: [OasysAlertCancelDirective,
+            OasysAlertConfirmDirective,
+            OasysAlertContentDirective,
+            OasysAlertTitleDirective,
+            OasysAlertComponent] });
+    OasysAlertModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertModule, imports: [[
+                i6.CommonModule,
+                OasysLayoutModule,
+                OasysButtonModule,
+                OasysIconModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysAlertModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            OasysAlertCancelDirective,
+                            OasysAlertConfirmDirective,
+                            OasysAlertContentDirective,
+                            OasysAlertTitleDirective,
+                            OasysAlertComponent,
+                        ],
+                        imports: [
+                            i6.CommonModule,
+                            OasysLayoutModule,
+                            OasysButtonModule,
+                            OasysIconModule,
+                        ],
+                        exports: [
+                            OasysAlertCancelDirective,
+                            OasysAlertConfirmDirective,
+                            OasysAlertContentDirective,
+                            OasysAlertTitleDirective,
+                            OasysAlertComponent,
+                        ],
+                    }]
+            }] });
 
-  var SeoBlockComponent = /** @class */ (function () {
-      function SeoBlockComponent() {
-          this.expandedLinksVisible = false;
-          this.expandedContentVisible = false;
-      }
-      SeoBlockComponent.prototype.showMoreLinks = function (flag) {
-          this.expandedLinksVisible = flag;
-      };
-      SeoBlockComponent.prototype.showMoreContent = function (flag) {
-          this.expandedContentVisible = flag;
-      };
-      SeoBlockComponent.prototype.ngOnInit = function () {
-          var _a;
-          // This is to fix a bug in Oasys that threats arrays as string initially
-          if (typeof this.links === 'string') {
-              this.linksValues = (_a = JSON.parse(this.links)) !== null && _a !== void 0 ? _a : [];
-          }
-          else {
-              this.linksValues = this.links;
-          }
-          if (this.linksValues.length <= 10) {
-              this.linksColumnsNumber = 1;
-          }
-          else if (this.linksValues.length <= 20) {
-              this.linksColumnsNumber = 2;
-          }
-          else {
-              this.linksColumnsNumber = 3;
-          }
-      };
-      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", visible_links_on_mobile: "visible_links_on_mobile" }, 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"] }, { 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: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SeoBlockComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-seo-block',
-                      templateUrl: './seo-block.component.html',
-                      styleUrls: ['./seo-block.component.scss'],
-                  }]
-          }], ctorParameters: function () { return []; }, propDecorators: { heading_paragraph: [{
-                  type: i0.Input
-              }], heading_links: [{
-                  type: i0.Input
-              }], main_content: [{
-                  type: i0.Input
-              }], expanded_content: [{
-                  type: i0.Input
-              }], links: [{
-                  type: i0.Input
-              }], read_more_content_text: [{
-                  type: i0.Input
-              }], read_less_content_text: [{
-                  type: i0.Input
-              }], show_more_links_text: [{
-                  type: i0.Input
-              }], show_less_links_text: [{
-                  type: i0.Input
-              }], visible_links_on_mobile: [{
-                  type: i0.Input
-              }] } });
+    var BreadcrumbsComponent = /** @class */ (function () {
+        function BreadcrumbsComponent() {
+        }
+        BreadcrumbsComponent.prototype.ngOnInit = function () {
+            var _a;
+            if (typeof this.breadcrumbs_values === 'string') {
+                this.values = (_a = JSON.parse(this.breadcrumbs_values)) !== null && _a !== void 0 ? _a : [];
+            }
+            else {
+                this.values = this.breadcrumbs_values;
+            }
+        };
+        return BreadcrumbsComponent;
+    }());
+    BreadcrumbsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreadcrumbsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BreadcrumbsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BreadcrumbsComponent, selector: "ui-breadcrumbs", inputs: { breadcrumbs_values: "breadcrumbs_values" }, ngImport: i0__namespace, template: "<ui-box box_fill_mode=\"fill\" box_space=\"near\" box_background=\"core-secondary\" *ngIf=\"values\">\n    <nav aria-label=\"breadcrumbs\">\n        <ui-stack stack_gap=\"none\"  stack_direction=\"x\" stack_align=\"center\" stack_wrap=\"true\">\n            <ng-container *ngFor=\"let item of values; let i = index\">\n                <!-- Link followed by an icon -->\n                <ui-box box_space=\"none\" box_background=\"none\" box_fill_mode=\"fit\">\n                    <ui-stack stack_direction=\"x\" stack_align=\"center\" stack_wrap=\"false\" stack_gap=\"none\">\n                        <ui-button *ngIf=\"i<values.length-1\" button_size=\"small\" button_type=\"tertiary\" button_full_width=\"true\" href=\"{{item.href}}\"> \n                            <span #buttontext> {{item.name}} </span>\n                        </ui-button>   \n                        <ui-icon *ngIf=\"i<values.length-1\"  icon_name=\"chevron-right\" icon_size=\"small\" icon_class=\"buttonIcon\" aria-hidden=\"true\"></ui-icon>\n                    </ui-stack>\n                </ui-box>\n                <!-- Last link and current page -->\n                <ui-button *ngIf=\"i===values.length-1\" button_size=\"small\" button_type=\"tertiary\" button_full_width=\"true\" href=\"{{item.href}}\" [attr.aria-current]=\"item.name\"> \n                    <span #buttontext> {{item.name}} </span>\n                </ui-button>   \n            </ng-container>\n        </ui-stack>\n    </nav>\n</ui-box>\n", styles: ["ui-breadcrumbs{display:contents}ui-breadcrumbs nav{display:block}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BreadcrumbsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-breadcrumbs',
+                        templateUrl: './breadcrumbs.component.html',
+                        styleUrls: ['./breadcrumbs.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { breadcrumbs_values: [{
+                    type: i0.Input
+                }] } });
 
-  var OasysSeoBlockModule = /** @class */ (function () {
-      function OasysSeoBlockModule() {
-      }
-      return OasysSeoBlockModule;
-  }());
-  OasysSeoBlockModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  OasysSeoBlockModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, declarations: [SeoBlockComponent], imports: [i3.CommonModule,
-          OasysButtonModule,
-          OasysHeadingModule,
-          OasysLayoutModule], exports: [SeoBlockComponent] });
-  OasysSeoBlockModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, providers: [TokenService], imports: [[
-              i3.CommonModule,
-              OasysButtonModule,
-              OasysHeadingModule,
-              OasysLayoutModule,
-          ]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [SeoBlockComponent],
-                      imports: [
-                          i3.CommonModule,
-                          OasysButtonModule,
-                          OasysHeadingModule,
-                          OasysLayoutModule,
-                      ],
-                      exports: [SeoBlockComponent],
-                      providers: [TokenService],
-                  }]
-          }] });
+    var OasysBreadcrumbModule = /** @class */ (function () {
+        function OasysBreadcrumbModule() {
+        }
+        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]] });
+    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],
+                        exports: [BreadcrumbsComponent],
+                    }]
+            }] });
 
-  var TextComponent = /** @class */ (function () {
-      function TextComponent() {
-          this.textAlign = 'left';
-          this.textWeight = 'normal';
-          this.textTransform = 'none';
-      }
-      TextComponent.prototype.ngOnInit = function () {
-          this.uiTextClasses = [
-              "ui-text--align-" + this.textAlign,
-              "ui-text--weight-" + this.textWeight,
-              "ui-text--transform-" + this.textTransform,
-          ].join(' ');
-      };
-      return TextComponent;
-  }());
-  TextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextComponent, selector: "ui-text", inputs: { textAlign: "textAlign", textWeight: "textWeight", textTransform: "textTransform" }, ngImport: i0__namespace, template: "<span class=\"ui-text\" [ngClass]=\"uiTextClasses\"><ng-content></ng-content></span>", styles: [".ui-text{font-size:var(--size-font-base);font-family:var(--font-family-body);font-weight:var(--font-weight-normal)}.ui-text.ui-text--weight-medium{font-weight:var(--font-weight-medium)}.ui-text.ui-text--weight-bold{font-weight:var(--font-weight-bold)}.ui-text.ui-text--transform-uppercase{text-transform:uppercase}.ui-text.ui-text--align-left{text-align:left}.ui-text.ui-text--align-center{text-align:center}.ui-text.ui-text--align-right{text-align:right}\n"], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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: TextComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'ui-text',
-                      templateUrl: './text.component.html',
-                      styleUrls: ['./text.component.scss'],
-                      encapsulation: i0.ViewEncapsulation.None,
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
-                  }]
-          }], ctorParameters: function () { return []; }, propDecorators: { textAlign: [{
-                  type: i0.Input
-              }], textWeight: [{
-                  type: i0.Input
-              }], textTransform: [{
-                  type: i0.Input
-              }] } });
+    var CardComponent = /** @class */ (function () {
+        function CardComponent(tokenService) {
+            this.tokenService = tokenService;
+        }
+        CardComponent.prototype.ngOnInit = function () {
+            this.aspectRatio = this.setImageAspectRatio(this.image_format);
+        };
+        /**
+         * This function retrieves the appropriate design token value based on the passed imageFormat choice
+         *
+         * @param format - The format of the image e.g. square, portrait, landscape
+         * @returns - string to be used as the aspect ratio
+         */
+        CardComponent.prototype.setImageAspectRatio = function (format) {
+            switch (format) {
+                case 'square':
+                    return this.tokenService.getTokenValue('--component-card-aspect-ratio-square');
+                case 'portrait':
+                    return this.tokenService.getTokenValue('--component-card-aspect-ratio-portrait');
+                case 'landscape':
+                    return this.tokenService.getTokenValue('--component-card-aspect-ratio-landscape');
+                default:
+                    return this.tokenService.getTokenValue('--component-card-aspect-ratio-portrait');
+            }
+        };
+        return CardComponent;
+    }());
+    CardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CardComponent, selector: "ui-card", inputs: { card_link: "card_link", label_text: "label_text", image: "image", alt_text: "alt_text", image_format: "image_format", small_title_left: "small_title_left", small_sub_title_right: "small_sub_title_right", standard_content: "standard_content", bold_content: "bold_content" }, host: { listeners: { "window:resize": "imageLabel($event)" } }, viewQueries: [{ propertyName: "imageLabel", first: true, predicate: ["imagelabel"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ng-template #content>\n    <ui-box class=\"ui-card\" box_background=\"core-primary\" box_space=\"near\">\n        <ui-stack stack_align=\"center\" stack_gap=\"none\"> \n            <ui-box \n                class=\"ui-card__image\"\n                [ngStyle]=\"{'aspect-ratio': aspectRatio}\" \n                box_background=\"transparent\" \n                box_align_x=\"center\" \n                box_space=\"none\">\n                    <img [src]=\"image\" [attr.alt]=\"alt_text\">\n            </ui-box>\n            <ui-stack stack_gap=\"tight\" [ngStyle]=\"{'margin-top': '-' + (imageLabel?.nativeElement?.offsetHeight/2) + 'px'}\">\n                <ui-box\n                    #imagelabel \n                    *ngIf=\"label_text\"\n                    class=\"card__image-label center-content\" \n                    box_background=\"tint-highlight\" \n                    box_align_x=\"center\" \n                    box_align_y=\"center\"\n                    box_space_left=\"near\"\n                    box_space_right=\"near\"\n                    box_space_bottom=\"tight\"\n                    box_space_top=\"tight\">\n                    <h5>{{label_text}}</h5>\n                </ui-box>\n                <ui-box *ngIf=\"small_title_left || small_sub_title_right\" [box_space_top]=\"label_text ? 'none' : 'tight'\" box_space=\"none\" box_background=\"transparent\" > \n                    <ui-stack stack_direction=\"x\" stack_distribute=\"space-between\" stack_gap=\"tight\">\n                        <span class=\"text-body--supporting text-color--supporting\">{{small_title_left}}</span>\n                        <span class=\"text-body--supporting text-color--supporting\">{{small_sub_title_right}}</span>\n                    </ui-stack>\n                </ui-box>\n                <p *ngIf=\"standard_content\" class=\"text-label--default center-content\">{{standard_content}}</p>\n                <p *ngIf=\"bold_content\" class=\"text-label--primary text-body--emphasis\">{{bold_content}}</p>\n            </ui-stack> \n        </ui-stack>\n    </ui-box>\n</ng-template>\n\n<!-- Wrap the content in an <a> tag if the card is a link -->\n<a *ngIf=\"card_link\" [routerLink]=\"cardLink || null\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<!-- Display the content as normal if the card is not a link -->\n<ng-container *ngIf=\"!card_link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n", styles: [".ui-card__image{position:relative}.ui-card__image img{position:absolute;height:100%;object-fit:cover;width:100%;left:0}.ui-card .center-content{text-align:center;align-self:center}.ui-card .card__image-label{width:auto;height:auto;border-radius:2px;margin:0 8px;text-align:center;overflow:hidden;z-index:2}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CardComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-card',
+                        templateUrl: './card.component.html',
+                        styleUrls: ['./card.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { imageLabel: [{
+                    type: i0.HostListener,
+                    args: ['window:resize', ['$event']]
+                }, {
+                    type: i0.ViewChild,
+                    args: ["imagelabel", { static: false, read: i0.ElementRef }]
+                }], card_link: [{
+                    type: i0.Input
+                }], label_text: [{
+                    type: i0.Input
+                }], image: [{
+                    type: i0.Input
+                }], alt_text: [{
+                    type: i0.Input
+                }], image_format: [{
+                    type: i0.Input
+                }], small_title_left: [{
+                    type: i0.Input
+                }], small_sub_title_right: [{
+                    type: i0.Input
+                }], standard_content: [{
+                    type: i0.Input
+                }], bold_content: [{
+                    type: i0.Input
+                }] } });
 
-  var OasysTextModule = /** @class */ (function () {
-      function OasysTextModule() {
-      }
-      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: [i3.CommonModule], exports: [TextComponent] });
-  OasysTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, imports: [[i3.CommonModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysTextModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [TextComponent],
-                      imports: [i3.CommonModule],
-                      exports: [TextComponent],
-                  }]
-          }] });
+    var OasysCardModule = /** @class */ (function () {
+        function OasysCardModule() {
+        }
+        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], 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]] });
+    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],
+                        exports: [CardComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
 
-  var SectionComponent = /** @class */ (function () {
-      function SectionComponent(tokenService) {
-          this.tokenService = tokenService;
-          this.text_on_dark_override = false; // This is for custom/non-brand BG colours
-          this.image_on_left = false;
-          this.section_type = 'inform';
-          // Event input variables
-          this.href_primary_cta = '';
-          this.href_secondary_cta = '';
-          this.outterContainer = {};
-          this.innerContainer = {};
-      }
-      SectionComponent.prototype.ngAfterViewInit = function () {
-          if (this.non_brand_background_colour) {
-              this.setNonBrandBackgroundColour();
-          }
-          this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.brand_background_colour);
-      };
-      SectionComponent.prototype.ngOnInit = function () {
-          this.containerInsetSpaceSmall = this.tokenService.getTokenValue("--component-section-inset-spacing-container-small");
-          this.containerInsetSpaceLarge = this.tokenService.getTokenValue("--component-section-inset-spacing-container-large");
-          this.contentInsetSpaceSmall = this.tokenService.getTokenValue("--component-section-inset-spacing-content-small-" + this.section_type);
-          this.contentInsetSpaceLarge = this.tokenService.getTokenValue("--component-section-inset-spacing-content-large-" + this.section_type);
-          // Setting a unique ID, this is important & needed to apply
-          // styles to ui-box
-          this.uiBoxId = Date.now() + '-' + Math.random();
-      };
-      /**
-       * Users are able to set custom non brand background colours
-       * If a non brand background colour is provided we ignore branded colours
-       * even if they are provided.
-       */
-      SectionComponent.prototype.setNonBrandBackgroundColour = function () {
-          var box = document.getElementById("ui-box-" + this.uiBoxId);
-          if (box) {
-              this.brand_background_colour = undefined;
-              box.style.background = this.non_brand_background_colour;
-              if (this.text_on_dark_override) {
-                  box.classList.add('text-color--on-dark');
-              }
-          }
-      };
-      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                   \n                    box_space=\"none\"\n                    box_background=\"none\"\n                    box_align_y=\"center\"\n                    >\n                    <img [src]=\"image\" [alt]=\"alt_text\" loading=\"lazy\">\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\">{{primary_cta_text}}</a>\n                            <a *ngIf=\"section_type !== 'spotlight'\" class=\"text-link text-link--standalone\" [href]=\"href_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"] }, { 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: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__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: [{
-                      selector: 'ui-section',
-                      templateUrl: './section.component.html',
-                      styleUrls: ['./section.component.scss']
-                  }]
-          }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { brand_background_colour: [{
-                  type: i0.Input
-              }], non_brand_background_colour: [{
-                  type: i0.Input
-              }], text_on_dark_override: [{
-                  type: i0.Input
-              }], image_on_left: [{
-                  type: i0.Input
-              }], section_type: [{
-                  type: i0.Input
-              }], heading_title: [{
-                  type: i0.Input
-              }], heading_subtitle: [{
-                  type: i0.Input
-              }], primary_cta_text: [{
-                  type: i0.Input
-              }], secondary_cta_text: [{
-                  type: i0.Input
-              }], image: [{
-                  type: i0.Input
-              }], alt_text: [{
-                  type: i0.Input
-              }], href_primary_cta: [{
-                  type: i0.Input
-              }], href_secondary_cta: [{
-                  type: i0.Input
-              }] } });
+    var DividerComponent = /** @class */ (function () {
+        function DividerComponent() {
+            this.divider_type = 'secondary';
+        }
+        DividerComponent.prototype.getClass = function () {
+            return this.divider_type === 'secondary' ? "ui-divider--type-" + this.divider_type : "ui-divider--type-" + this.divider_type;
+        };
+        return DividerComponent;
+    }());
+    DividerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DividerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DividerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DividerComponent, selector: "ui-divider", inputs: { divider_type: "divider_type" }, ngImport: i0__namespace, template: "<ui-box box_fill_mode=\"fill\" box_space=\"none\" box_background=\"core-secondary\" [ngClass]=\"getClass()\"></ui-box>", styles: ["ui-divider{display:block;width:100%}ui-divider ui-box.ui-divider--type-secondary:after{content:\"\";display:block;height:var(--global-size-unit-01);width:100%}ui-divider ui-box.ui-divider--type-primary:after{content:\"\";display:block;height:var(--global-size-unit-08);width:100%}\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"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DividerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-divider',
+                        templateUrl: './divider.component.html',
+                        styleUrls: ['./divider.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], propDecorators: { divider_type: [{
+                    type: i0.Input
+                }] } });
+
+    var OasysDividerModule = /** @class */ (function () {
+        function OasysDividerModule() {
+        }
+        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]] });
+    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],
+                        exports: [DividerComponent],
+                    }]
+            }] });
 
-  var SectionModule = /** @class */ (function () {
-      function SectionModule() {
-      }
-      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: [i3.CommonModule, OasysHeadingModule, OasysLayoutModule], exports: [SectionComponent] });
-  SectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, providers: [TokenService], imports: [[i3.CommonModule, OasysHeadingModule, OasysLayoutModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      declarations: [SectionComponent],
-                      imports: [i3.CommonModule, OasysHeadingModule, OasysLayoutModule],
-                      exports: [SectionComponent],
-                      providers: [TokenService]
-                  }]
-          }] });
+    var OasysHeadingComponent = /** @class */ (function () {
+        function OasysHeadingComponent(tokenService) {
+            this.tokenService = tokenService;
+            this.heading_type = 'primary';
+            this.heading_seo_priority = false;
+            this.heading_subtitle = '';
+            this.heading_surtitle = '';
+        }
+        Object.defineProperty(OasysHeadingComponent.prototype, "class", {
+            get: function () {
+                return "\n      " + (this.heading_on_dark ? 'text-color--on-dark' : '') + "\n      ui-heading-alignment-" + this.headingAlignment + "\n    ";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OasysHeadingComponent.prototype.headingTypeIsFunctional = function (headingType) {
+            return (headingType || '').indexOf('functional') !== -1;
+        };
+        OasysHeadingComponent.prototype.setupHeadingStackAlignment = function (headingType) {
+            if (this.heading_alignment_override) {
+                this.headingAlignment = this.heading_alignment_override;
+                return;
+            }
+            var alignment = this.tokenService.getTokenValue('--component-heading-alignment-default');
+            var functionalAlignment = this.tokenService.getTokenValue('--component-heading-alignment-functional');
+            this.headingAlignment = this.headingTypeIsFunctional(headingType) ? functionalAlignment : alignment;
+        };
+        OasysHeadingComponent.prototype.setupHeadingStackGap = function (headingType) {
+            if (this.headingTypeIsFunctional(headingType)) {
+                this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-functional');
+                return;
+            }
+            if (this.heading_type === 'secondary') {
+                this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-secondary');
+                return;
+            }
+            if (this.heading_type === 'primary') {
+                this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-primary');
+                return;
+            }
+            // Hero gap
+            this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-default');
+        };
+        OasysHeadingComponent.prototype.ngOnInit = function () {
+            this.setupHeadingStackAlignment(this.heading_type);
+            this.setupHeadingStackGap(this.heading_type);
+            this.heading_priority = this.heading_priority || this.heading_seo_priority ? 1 : 2;
+        };
+        return OasysHeadingComponent;
+    }());
+    OasysHeadingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OasysHeadingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OasysHeadingComponent, selector: "ui-heading", inputs: { heading_type: "heading_type", heading_on_dark: "heading_on_dark", heading_title: "heading_title", heading_seo_priority: "heading_seo_priority", heading_priority: "heading_priority", heading_alignment_override: "heading_alignment_override", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle" }, host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<div>\n    <ui-stack [stack_align]=\"headingAlignment\" [stack_gap]=\"headingGap\">\n\n        <p *ngIf=\"heading_surtitle && heading_surtitle.length\" class=\"heading-surtitle text-body--supporting text-color--supporting\">\n            {{heading_surtitle}}\n        </p>\n\n        <ng-template #content>\n            <span\n            class=\"heading-title\"\n            [ngClass]=\"{\n                'text-heading': !headingTypeIsFunctional(heading_type),\n                'text-heading--functional': headingTypeIsFunctional(heading_type),\n\n                'text-heading--hero': heading_type === 'hero',\n                'text-heading--primary': heading_type === 'primary',\n                'text-heading--secondary': heading_type === 'secondary',\n                'text-heading--functional--primary': heading_type === 'functional-primary',\n                'text-heading--functional--secondary': heading_type === 'functional-secondary'\n            }\"\n            >{{heading_title}}</span>\n        </ng-template>\n\n        <h1 role=\"heading\" [attr.aria-level]=\"heading_priority\" class=\"seo-h1\" *ngIf=\"heading_seo_priority\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </h1>\n        <span role=\"heading\" [attr.aria-level]=\"heading_priority\" *ngIf=\"!heading_seo_priority\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </span>\n\n        <p\n            *ngIf=\"heading_subtitle && heading_subtitle.length\"\n            class=\"heading-subtitle\"\n            [ngClass]=\"{\n                'text-body--hero': heading_type === 'hero',\n                'text-body--default': heading_type !== 'hero'\n            }\"\n        >{{heading_subtitle}}</p>\n\n    </ui-stack>\n</div>", styles: ["ui-heading.ui-heading-alignment-start{text-align:start}ui-heading.ui-heading-alignment-center{text-align:center}\n"], components: [{ type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }], 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"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysHeadingComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-heading',
+                        templateUrl: './heading.component.html',
+                        styleUrls: ['./heading.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { heading_type: [{
+                    type: i0.Input
+                }], heading_on_dark: [{
+                    type: i0.Input
+                }], heading_title: [{
+                    type: i0.Input
+                }], heading_seo_priority: [{
+                    type: i0.Input
+                }], heading_priority: [{
+                    type: i0.Input
+                }], heading_alignment_override: [{
+                    type: i0.Input
+                }], heading_subtitle: [{
+                    type: i0.Input
+                }], heading_surtitle: [{
+                    type: i0.Input
+                }], class: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var OasysHeadingModule = /** @class */ (function () {
+        function OasysHeadingModule() {
+        }
+        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]] });
+    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],
+                        exports: [OasysHeadingComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
+
+    var HeroComponent = /** @class */ (function () {
+        function HeroComponent(tokenService) {
+            this.tokenService = tokenService;
+            this.image_left_desktop = false;
+            this.image_top_mobile = true;
+            this.media_type = 'image';
+            // Event input variables
+            this.href_primary_cta = '';
+            this.href_secondary_cta = '';
+        }
+        HeroComponent.prototype.ngOnInit = function () {
+            this.heroCtaAlignment = this.tokenService.getTokenValue('--component-hero-actions-alignment');
+            this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.background_colour);
+            this.heroInsetSpaceSmall = this.tokenService.getTokenValue("--component-hero-inset-spacing-small");
+            this.heroInsetSpaceLarge = this.tokenService.getTokenValue("--component-hero-inset-spacing-large");
+        };
+        return HeroComponent;
+    }());
+    HeroComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HeroComponent, deps: [{ token: TokenService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    HeroComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeroComponent, selector: "ui-hero", inputs: { min_container_height: "min_container_height", image_left_desktop: "image_left_desktop", image_top_mobile: "image_top_mobile", background_colour: "background_colour", heading_title: "heading_title", heading_subtitle: "heading_subtitle", heading_surtitle: "heading_surtitle", primary_cta_text: "primary_cta_text", secondary_cta_text: "secondary_cta_text", image: "image", alt_text: "alt_text", media_type: "media_type", href_primary_cta: "href_primary_cta", href_secondary_cta: "href_secondary_cta" }, ngImport: i0__namespace, template: "<ui-box [box_background]=\"background_colour\" box_space=\"none\">\n    <ui-grid [ngStyle]=\"{'min-height' : min_container_height ? min_container_height + 'px' : 'auto'}\" grid_gap=\"none\" grid_collapse_below=\"tablet\">\n        <ui-column columns=\"5\" [ngClass]=\"{'image-left': image_left_desktop, 'image-top': image_top_mobile}\">\n            <ui-box box_fill_mode=\"fill\" box_align_y=\"center\" box_background=\"transparent\" [box_space]=\"{mobile: heroInsetSpaceSmall, tablet: heroInsetSpaceSmall, laptop: heroInsetSpaceLarge, desktop: heroInsetSpaceLarge}\">\n                <ui-stack stack_direction=\"y\" stack_align=\"center\" stack_distribute=\"center\" stack_gap=\"default\">\n                    <ui-heading\n                        heading_type=\"primary\"\n                        [heading_on_dark]=\"backgroundIsDark  === 'on-dark' ? true : false\"\n                        [heading_title]=\"heading_title\"\n                        [heading_seo_priority]=\"true\"\n                        [heading_subtitle]=\"heading_subtitle\"\n                        [heading_surtitle]=\"heading_surtitle\">\n                    </ui-heading>\n                    <!-- TODO: replace with ui-button-group once built-->\n                    <ui-stack\n                        *ngIf=\"primary_cta_text\"\n                        class=\"cta-container\"\n                        stack_direction=\"x\"\n                        [stack_align]=\"heroCtaAlignment\"\n                        [stack_distribute]=\"heroCtaAlignment\"\n                        stack_wrap=\"true\"\n                        stack_gap=\"near\">\n                        <ui-button\n                            button_size=\"large\"\n                            [button_type]=\"backgroundIsDark  === 'on-dark' ? 'primary-inverse' : 'primary'\"\n                            [href]=\"href_primary_cta\">\n                            <span #buttontext>{{primary_cta_text}}</span>\n                        </ui-button>\n                        <ui-button\n                            *ngIf=\"secondary_cta_text\"\n                            button-size=\"large\"\n                            [button_type]=\"backgroundIsDark === 'on-dark' ? 'secondary-inverse' : 'secondary'\"\n                            [href]=\"href_secondary_cta\">\n                            <span #buttontext>{{secondary_cta_text}}</span>\n                        </ui-button>\n                    </ui-stack>\n                </ui-stack>\n            </ui-box>\n        </ui-column>\n        <ui-column columns=\"7\">\n            <picture  *ngIf=\"media_type === 'image'\">\n                <source [srcset]=\"image + '?w=880&h=880&fm=webp&q=75 1x,' + image + '?w=1760&h=1760&fm=webp&q=40 2x'\" media=\"(min-width: 1440px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=720&h=720&fm=webp&q=75 1x,' + image + '?w=1440&h=1440&fm=webp&q=40 2x'\" media=\"(min-width: 1200px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=580&h=580&fm=webp&q=75 1x,' + image + '?w=1160&h=1160&fm=webp&q=40 2x'\" media=\"(min-width: 992px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=430&h=430&fm=webp&q=75 1x,' + image +  '?w=860&h=860&fm=webp&q=40 2x'\" media=\"(min-width: 768px)\" type=\"image/webp\">\n                <source [srcset]=\"image + '?w=720&h=720&fm=webp&q=40 2x'\" media=\"(min-width: 454px)\" type=\"image/webp\">\n                <img [src]=\"image + '?w=430&h=430&fm=webp&q=75'\" [attr.alt]=\"alt_text\">\n            </picture>\n            <ng-content *ngIf=\"media_type === 'video'\"></ng-content>\n        </ui-column>\n    </ui-grid>\n</ui-box>\n\n", styles: ["ui-grid ui-column{position:relative}ui-grid ui-column img{width:100%}@media only screen and (min-width: 768px){ui-grid ui-column img{position:absolute;height:100%;object-fit:cover}}@media only screen and (max-width: 767px){ui-grid .image-top{order:1}}@media only screen and (min-width: 768px){ui-grid .image-top{order:0}ui-grid .image-left{order:1}}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width"] }, { type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }, { type: OasysButtonComponent, selector: "ui-button", inputs: ["button_icon", "button_icon_placement", "button_size", "button_full_width", "button_type", "button_disabled", "href"], outputs: ["clicked"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: HeroComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-hero',
+                        templateUrl: './hero.component.html',
+                        styleUrls: ['./hero.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { min_container_height: [{
+                    type: i0.Input
+                }], image_left_desktop: [{
+                    type: i0.Input
+                }], image_top_mobile: [{
+                    type: i0.Input
+                }], background_colour: [{
+                    type: i0.Input
+                }], heading_title: [{
+                    type: i0.Input
+                }], heading_subtitle: [{
+                    type: i0.Input
+                }], heading_surtitle: [{
+                    type: i0.Input
+                }], primary_cta_text: [{
+                    type: i0.Input
+                }], secondary_cta_text: [{
+                    type: i0.Input
+                }], image: [{
+                    type: i0.Input
+                }], alt_text: [{
+                    type: i0.Input
+                }], media_type: [{
+                    type: i0.Input
+                }], href_primary_cta: [{
+                    type: i0.Input
+                }], href_secondary_cta: [{
+                    type: i0.Input
+                }] } });
+
+    var OasysHeroModule = /** @class */ (function () {
+        function OasysHeroModule() {
+        }
+        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], 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]] });
+    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],
+                        exports: [HeroComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
+
+    var SeoBlockComponent = /** @class */ (function () {
+        function SeoBlockComponent() {
+            this.expandedLinksVisible = false;
+            this.expandedContentVisible = false;
+        }
+        SeoBlockComponent.prototype.showMoreLinks = function (flag) {
+            this.expandedLinksVisible = flag;
+        };
+        SeoBlockComponent.prototype.showMoreContent = function (flag) {
+            this.expandedContentVisible = flag;
+        };
+        SeoBlockComponent.prototype.ngOnInit = function () {
+            var _a;
+            // This is to fix a bug in Oasys that threats arrays as string initially
+            if (typeof this.links === 'string') {
+                this.linksValues = (_a = JSON.parse(this.links)) !== null && _a !== void 0 ? _a : [];
+            }
+            else {
+                this.linksValues = this.links;
+            }
+            if (this.linksValues.length <= 10) {
+                this.linksColumnsNumber = 1;
+            }
+            else if (this.linksValues.length <= 20) {
+                this.linksColumnsNumber = 2;
+            }
+            else {
+                this.linksColumnsNumber = 3;
+            }
+        };
+        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", visible_links_on_mobile: "visible_links_on_mobile" }, 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"] }, { 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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SeoBlockComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-seo-block',
+                        templateUrl: './seo-block.component.html',
+                        styleUrls: ['./seo-block.component.scss'],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { heading_paragraph: [{
+                    type: i0.Input
+                }], heading_links: [{
+                    type: i0.Input
+                }], main_content: [{
+                    type: i0.Input
+                }], expanded_content: [{
+                    type: i0.Input
+                }], links: [{
+                    type: i0.Input
+                }], read_more_content_text: [{
+                    type: i0.Input
+                }], read_less_content_text: [{
+                    type: i0.Input
+                }], show_more_links_text: [{
+                    type: i0.Input
+                }], show_less_links_text: [{
+                    type: i0.Input
+                }], visible_links_on_mobile: [{
+                    type: i0.Input
+                }] } });
+
+    var OasysSeoBlockModule = /** @class */ (function () {
+        function OasysSeoBlockModule() {
+        }
+        return OasysSeoBlockModule;
+    }());
+    OasysSeoBlockModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    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] });
+    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,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [SeoBlockComponent],
+                        imports: [
+                            i6.CommonModule,
+                            OasysButtonModule,
+                            OasysHeadingModule,
+                            OasysLayoutModule,
+                        ],
+                        exports: [SeoBlockComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
+
+    var TextComponent = /** @class */ (function () {
+        function TextComponent() {
+            this.textAlign = 'left';
+            this.textWeight = 'normal';
+            this.textTransform = 'none';
+        }
+        TextComponent.prototype.ngOnInit = function () {
+            this.uiTextClasses = [
+                "ui-text--align-" + this.textAlign,
+                "ui-text--weight-" + this.textWeight,
+                "ui-text--transform-" + this.textTransform,
+            ].join(' ');
+        };
+        return TextComponent;
+    }());
+    TextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextComponent, selector: "ui-text", inputs: { textAlign: "textAlign", textWeight: "textWeight", textTransform: "textTransform" }, ngImport: i0__namespace, template: "<span class=\"ui-text\" [ngClass]=\"uiTextClasses\"><ng-content></ng-content></span>", styles: [".ui-text{font-size:var(--size-font-base);font-family:var(--font-family-body);font-weight:var(--font-weight-normal)}.ui-text.ui-text--weight-medium{font-weight:var(--font-weight-medium)}.ui-text.ui-text--weight-bold{font-weight:var(--font-weight-bold)}.ui-text.ui-text--transform-uppercase{text-transform:uppercase}.ui-text.ui-text--align-left{text-align:left}.ui-text.ui-text--align-center{text-align:center}.ui-text.ui-text--align-right{text-align:right}\n"], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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: TextComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-text',
+                        templateUrl: './text.component.html',
+                        styleUrls: ['./text.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { textAlign: [{
+                    type: i0.Input
+                }], textWeight: [{
+                    type: i0.Input
+                }], textTransform: [{
+                    type: i0.Input
+                }] } });
+
+    var OasysTextModule = /** @class */ (function () {
+        function OasysTextModule() {
+        }
+        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]] });
+    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],
+                        exports: [TextComponent],
+                    }]
+            }] });
+
+    var SectionComponent = /** @class */ (function () {
+        function SectionComponent(tokenService) {
+            this.tokenService = tokenService;
+            this.text_on_dark_override = false; // This is for custom/non-brand BG colours
+            this.image_on_left = false;
+            this.section_type = 'inform';
+            // Event input variables
+            this.href_primary_cta = '';
+            this.href_secondary_cta = '';
+            this.outterContainer = {};
+            this.innerContainer = {};
+        }
+        SectionComponent.prototype.ngAfterViewInit = function () {
+            if (this.non_brand_background_colour) {
+                this.setNonBrandBackgroundColour();
+            }
+            this.backgroundIsDark = this.tokenService.getTokenValue("--semantic-on-dark-" + this.brand_background_colour);
+        };
+        SectionComponent.prototype.ngOnInit = function () {
+            this.containerInsetSpaceSmall = this.tokenService.getTokenValue("--component-section-inset-spacing-container-small");
+            this.containerInsetSpaceLarge = this.tokenService.getTokenValue("--component-section-inset-spacing-container-large");
+            this.contentInsetSpaceSmall = this.tokenService.getTokenValue("--component-section-inset-spacing-content-small-" + this.section_type);
+            this.contentInsetSpaceLarge = this.tokenService.getTokenValue("--component-section-inset-spacing-content-large-" + this.section_type);
+            // Setting a unique ID, this is important & needed to apply
+            // styles to ui-box
+            this.uiBoxId = Date.now() + '-' + Math.random();
+        };
+        /**
+         * Users are able to set custom non brand background colours
+         * If a non brand background colour is provided we ignore branded colours
+         * even if they are provided.
+         */
+        SectionComponent.prototype.setNonBrandBackgroundColour = function () {
+            var box = document.getElementById("ui-box-" + this.uiBoxId);
+            if (box) {
+                this.brand_background_colour = undefined;
+                box.style.background = this.non_brand_background_colour;
+                if (this.text_on_dark_override) {
+                    box.classList.add('text-color--on-dark');
+                }
+            }
+        };
+        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                   \n                    box_space=\"none\"\n                    box_background=\"none\"\n                    box_align_y=\"center\"\n                    >\n                    <img [src]=\"image\" [alt]=\"alt_text\" loading=\"lazy\">\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\">{{primary_cta_text}}</a>\n                            <a *ngIf=\"section_type !== 'spotlight'\" class=\"text-link text-link--standalone\" [href]=\"href_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"] }, { 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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SectionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-section',
+                        templateUrl: './section.component.html',
+                        styleUrls: ['./section.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: TokenService }]; }, propDecorators: { brand_background_colour: [{
+                    type: i0.Input
+                }], non_brand_background_colour: [{
+                    type: i0.Input
+                }], text_on_dark_override: [{
+                    type: i0.Input
+                }], image_on_left: [{
+                    type: i0.Input
+                }], section_type: [{
+                    type: i0.Input
+                }], heading_title: [{
+                    type: i0.Input
+                }], heading_subtitle: [{
+                    type: i0.Input
+                }], primary_cta_text: [{
+                    type: i0.Input
+                }], secondary_cta_text: [{
+                    type: i0.Input
+                }], image: [{
+                    type: i0.Input
+                }], alt_text: [{
+                    type: i0.Input
+                }], href_primary_cta: [{
+                    type: i0.Input
+                }], href_secondary_cta: [{
+                    type: i0.Input
+                }] } });
+
+    var SectionModule = /** @class */ (function () {
+        function SectionModule() {
+        }
+        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, 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, OasysLayoutModule]] });
+    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, OasysLayoutModule],
+                        exports: [SectionComponent],
+                        providers: [TokenService]
+                    }]
+            }] });
 
-  /*
-   * Public API Surface of oasys-lib
-   */
+    /*
+     * Public API Surface of oasys-lib
+     */
 
-  /**
-   * Generated bundle index. Do not edit.
-   */
+    /**
+     * Generated bundle index. Do not edit.
+     */
 
-  exports.BreadcrumbsComponent = BreadcrumbsComponent;
-  exports.CardComponent = CardComponent;
-  exports.DividerComponent = DividerComponent;
-  exports.HeroComponent = HeroComponent;
-  exports.IconComponent = IconComponent;
-  exports.LayoutBoxComponent = LayoutBoxComponent;
-  exports.LayoutContainerComponent = LayoutContainerComponent;
-  exports.LayoutGridColumnComponent = LayoutGridColumnComponent;
-  exports.LayoutGridComponent = LayoutGridComponent;
-  exports.LayoutStackComponent = LayoutStackComponent;
-  exports.OasysBreadcrumbModule = OasysBreadcrumbModule;
-  exports.OasysButtonComponent = OasysButtonComponent;
-  exports.OasysButtonModule = OasysButtonModule;
-  exports.OasysCardModule = OasysCardModule;
-  exports.OasysDividerModule = OasysDividerModule;
-  exports.OasysHeadingComponent = OasysHeadingComponent;
-  exports.OasysHeadingModule = OasysHeadingModule;
-  exports.OasysHeroModule = OasysHeroModule;
-  exports.OasysIconModule = OasysIconModule;
-  exports.OasysLayoutModule = OasysLayoutModule;
-  exports.OasysSeoBlockModule = OasysSeoBlockModule;
-  exports.OasysTextModule = OasysTextModule;
-  exports.SectionComponent = SectionComponent;
-  exports.SectionModule = SectionModule;
-  exports.SeoBlockComponent = SeoBlockComponent;
-  exports.TextComponent = TextComponent;
+    exports.BreadcrumbsComponent = BreadcrumbsComponent;
+    exports.CardComponent = CardComponent;
+    exports.DividerComponent = DividerComponent;
+    exports.HeroComponent = HeroComponent;
+    exports.IconComponent = IconComponent;
+    exports.LayoutBoxComponent = LayoutBoxComponent;
+    exports.LayoutContainerComponent = LayoutContainerComponent;
+    exports.LayoutGridColumnComponent = LayoutGridColumnComponent;
+    exports.LayoutGridComponent = LayoutGridComponent;
+    exports.LayoutStackComponent = LayoutStackComponent;
+    exports.OasysAlertCancelDirective = OasysAlertCancelDirective;
+    exports.OasysAlertComponent = OasysAlertComponent;
+    exports.OasysAlertConfirmDirective = OasysAlertConfirmDirective;
+    exports.OasysAlertContentDirective = OasysAlertContentDirective;
+    exports.OasysAlertModule = OasysAlertModule;
+    exports.OasysAlertTitleDirective = OasysAlertTitleDirective;
+    exports.OasysBreadcrumbModule = OasysBreadcrumbModule;
+    exports.OasysButtonComponent = OasysButtonComponent;
+    exports.OasysButtonModule = OasysButtonModule;
+    exports.OasysCardModule = OasysCardModule;
+    exports.OasysDividerModule = OasysDividerModule;
+    exports.OasysHeadingComponent = OasysHeadingComponent;
+    exports.OasysHeadingModule = OasysHeadingModule;
+    exports.OasysHeroModule = OasysHeroModule;
+    exports.OasysIconModule = OasysIconModule;
+    exports.OasysLayoutModule = OasysLayoutModule;
+    exports.OasysSeoBlockModule = OasysSeoBlockModule;
+    exports.OasysTextModule = OasysTextModule;
+    exports.SectionComponent = SectionComponent;
+    exports.SectionModule = SectionModule;
+    exports.SeoBlockComponent = SeoBlockComponent;
+    exports.TextComponent = TextComponent;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=oasys-lib.umd.js.map