oasys-lib 1.8.1 → 1.9.2

package/bundles/oasys-lib.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/router')) :
-    typeof define === 'function' && define.amd ? define('oasys-lib', ['exports', '@angular/common', '@angular/core', '@angular/router'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["oasys-lib"] = {}, global.ng.common, global.ng.core, global.ng.router));
-})(this, (function (exports, i3, i0, i2) { 'use strict';
+    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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,211 +22,10 @@
         return Object.freeze(n);
     }
 
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
-    function _window() {
-        return window;
-    }
-    var WindowService = /** @class */ (function () {
-        function WindowService() {
-        }
-        Object.defineProperty(WindowService.prototype, "nativeWindow", {
-            get: function () {
-                return _window();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return WindowService;
-    }());
-    WindowService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WindowService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    WindowService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WindowService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WindowService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
-            }] });
-
-    var TokenService = /** @class */ (function () {
-        function TokenService(windowRef) {
-            this.windowRef = windowRef;
-            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.windowRef.nativeWindow.document.querySelector('[class*="brand-tokens"]');
-            if (!rootElement) {
-                return '';
-            }
-            return this.windowRef.nativeWindow.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: WindowService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TokenService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TokenService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
-            }], ctorParameters: function () { return [{ type: WindowService }]; } });
-
-    var IconComponent = /** @class */ (function () {
-        function IconComponent(tokenService, windowRef, elementRef) {
-            this.tokenService = tokenService;
-            this.windowRef = windowRef;
-            this.elementRef = elementRef;
-            this.icon_size = 'large';
-            this.icon_context = 'none';
-        }
-        IconComponent.prototype.convertRemToPixels = function (remString) {
-            var remNumber = parseFloat(remString.replace('rem', ''));
-            return remNumber * parseFloat(getComputedStyle(this.windowRef.nativeWindow.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: TokenService }, { token: WindowService }, { token: i0__namespace.ElementRef }], 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}}px\" attr.height=\"{{icon_height}}px\" 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: TokenService }, { type: WindowService }, { type: i0__namespace.ElementRef }]; }, 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 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
-                }] } });
-
     var LayoutBoxComponent = /** @class */ (function () {
         function LayoutBoxComponent(changes) {
             this.changes = changes;
@@ -409,54 +208,308 @@
                     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';
+    var TokenService = /** @class */ (function () {
+        function TokenService(document) {
+            this.document = document;
+            this.brandCustomPropertyName = '--utility-brand-name';
         }
-        LayoutGridComponent.prototype.ngOnChanges = function () {
-            if (!this.didFirstInit) {
-                return;
+        /*
+        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 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();
-            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,
+        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
             ];
-            this.didFirstInit = true;
+            var sizeInPixels = this.convertRemToPixels(this.size);
+            this.icon_width = sizeInPixels;
+            this.icon_height = sizeInPixels;
         };
-        return LayoutGridComponent;
+        return IconComponent;
     }());
-    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: [{
+    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-grid',
-                        template: '<ng-content></ng-content>',
-                        host: {
-                            '[class]': 'gridLayoutClasses'
-                        },
-                        styleUrls: ['./grid.component.scss'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        selector: 'ui-icon',
+                        templateUrl: './icon.component.html',
+                        styleUrls: ['./icon.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { grid_auto: [{
+            }], ctorParameters: function () {
+            return [{ type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.DOCUMENT]
+                        }] }, { type: TokenService }];
+        }, propDecorators: { icon_size: [{
                     type: i0.Input
-                }], grid_collapse_below: [{
+                }], icon_name: [{
                     type: i0.Input
-                }], grid_gap: [{
+                }], icon_context: [{
+                    type: i0.Input
+                }], icon_width: [{
+                    type: i0.Input
+                }], icon_height: [{
+                    type: i0.Input
+                }], icon_class: [{
+                    type: i0.Input
+                }] } });
+
+    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
+                }] } });
+
+    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"] }, { 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
+                }] } });
+
+    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],
+                    }]
+            }] });
+
+    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 LayoutContainerComponent = /** @class */ (function () {
+        function LayoutContainerComponent(changes, tokenService) {
+            this.changes = changes;
+            this.tokenService = tokenService;
+            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 () {
+            if (this.container_gutter) {
+                this.containerGutterNameSmall = this.tokenService.getTokenValue('--semantic-spacing-container-gutter-box-name-small');
+                this.containerGutterNameLarge = this.tokenService.getTokenValue('--semantic-spacing-container-gutter-box-name-large');
+                this.containerHorizontalSizes = {
+                    desktop: this.containerGutterNameLarge,
+                    tablet: this.containerGutterNameLarge,
+                    mobile: this.containerGutterNameSmall
+                };
+            }
+            else {
+                this.containerHorizontalSizes = {
+                    desktop: 'none',
+                    tablet: 'none',
+                    mobile: 'none'
+                };
+            }
+            this.containerLayoutClasses = [
+                this.prefix,
+                this.prefix + "-" + (this.container_fluid ? 'fluid' : '')
+            ];
+        };
+        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 }, { token: TokenService }], 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    <ui-box\n      [box_space_right]=\"containerHorizontalSizes\"\n      [box_space_left]=\"containerHorizontalSizes\"\n      box_space_top=\"none\"\n      box_space_bottom=\"none\"\n      box_background=\"none\">\n\n      <ng-content></ng-content>\n\n    </ui-box>\n  ", isInline: true, styles: ["ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);display:block;width:100%;max-width:1440px;margin:0 auto}@media only screen and (max-width: 767px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 768px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 1080px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (min-width: 1440px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (max-width: 767px){ui-container{max-width:100%}}@media only screen and (min-width: 768px){ui-container{max-width:calc(767px - var(--container-component-gutter-size))}}@media only screen and (min-width: 1080px){ui-container{max-width:calc(1080px - var(--container-component-gutter-size))}}@media only screen and (min-width: 1440px){ui-container{max-width:calc(1440px - var(--container-component-gutter-size))}}ui-container.ui-layout-container-fluid{max-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"] }], 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: LayoutContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-container',
+                        template: "\n    <ui-box\n      [box_space_right]=\"containerHorizontalSizes\"\n      [box_space_left]=\"containerHorizontalSizes\"\n      box_space_top=\"none\"\n      box_space_bottom=\"none\"\n      box_background=\"none\">\n\n      <ng-content></ng-content>\n\n    </ui-box>\n  ",
+                        host: {
+                            '[class]': 'containerLayoutClasses'
+                        },
+                        styleUrls: ['./container.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: TokenService }]; }, propDecorators: { container_fluid: [{
+                    type: i0.Input
+                }], container_gutter: [{
                     type: i0.Input
                 }] } });
+
     var LayoutGridColumnComponent = /** @class */ (function () {
         function LayoutGridColumnComponent(changes) {
             this.changes = changes;
@@ -483,92 +536,259 @@
             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;
+            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 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 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 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 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 LayoutGridColumnComponent;
+        return CardComponent;
     }());
-    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: [{
+    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"] }, { 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-column',
-                        template: '<ng-content></ng-content>',
-                        host: {
-                            '[class]': 'columnLayoutClasses'
-                        },
-                        styleUrls: ['./grid.component.scss'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        selector: 'ui-card',
+                        templateUrl: './card.component.html',
+                        styleUrls: ['./card.component.scss']
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+            }], 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 LayoutContainerComponent = /** @class */ (function () {
-        function LayoutContainerComponent(changes, tokenService) {
-            this.changes = changes;
-            this.tokenService = tokenService;
-            this.container_fluid = false;
-            this.container_gutter = true;
-            this.prefix = 'ui-layout-container';
+    var OasysCardModule = /** @class */ (function () {
+        function OasysCardModule() {
         }
-        LayoutContainerComponent.prototype.ngOnChanges = function () {
-            this.ngOnInit();
-            this.changes.markForCheck();
-        };
-        LayoutContainerComponent.prototype.ngOnInit = function () {
-            if (this.container_gutter) {
-                this.containerGutterNameSmall = this.tokenService.getTokenValue('--semantic-spacing-container-gutter-box-name-small');
-                this.containerGutterNameLarge = this.tokenService.getTokenValue('--semantic-spacing-container-gutter-box-name-large');
-                this.containerHorizontalSizes = {
-                    desktop: this.containerGutterNameLarge,
-                    tablet: this.containerGutterNameLarge,
-                    mobile: this.containerGutterNameSmall
-                };
-            }
-            else {
-                this.containerHorizontalSizes = {
-                    desktop: 'none',
-                    tablet: 'none',
-                    mobile: 'none'
-                };
-            }
-            this.containerLayoutClasses = [
-                this.prefix,
-                this.prefix + "-" + (this.container_fluid ? 'fluid' : '')
-            ];
+        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 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 LayoutContainerComponent;
+        return DividerComponent;
     }());
-    LayoutContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: TokenService }], 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    <ui-box\n      [box_space_right]=\"containerHorizontalSizes\"\n      [box_space_left]=\"containerHorizontalSizes\"\n      box_space_top=\"none\"\n      box_space_bottom=\"none\"\n      box_background=\"none\">\n\n      <ng-content></ng-content>\n\n    </ui-box>\n  ", isInline: true, styles: ["ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);display:block;width:100%;max-width:1440px;margin:0 auto}@media only screen and (max-width: 767px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 768px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 1080px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (min-width: 1440px){ui-container{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (max-width: 767px){ui-container{max-width:100%}}@media only screen and (min-width: 768px){ui-container{max-width:calc(767px - var(--container-component-gutter-size))}}@media only screen and (min-width: 1080px){ui-container{max-width:calc(1080px - var(--container-component-gutter-size))}}@media only screen and (min-width: 1440px){ui-container{max-width:calc(1440px - var(--container-component-gutter-size))}}ui-container.ui-layout-container-fluid{max-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"] }], 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: LayoutContainerComponent, decorators: [{
+    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"] }], 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-container',
-                        template: "\n    <ui-box\n      [box_space_right]=\"containerHorizontalSizes\"\n      [box_space_left]=\"containerHorizontalSizes\"\n      box_space_top=\"none\"\n      box_space_bottom=\"none\"\n      box_background=\"none\">\n\n      <ng-content></ng-content>\n\n    </ui-box>\n  ",
-                        host: {
-                            '[class]': 'containerLayoutClasses'
-                        },
-                        styleUrls: ['./container.component.scss'],
+                        selector: 'ui-divider',
+                        templateUrl: './divider.component.html',
+                        styleUrls: ['./divider.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: TokenService }]; }, propDecorators: { container_fluid: [{
-                    type: i0.Input
-                }], container_gutter: [{
+            }], 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: [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 OasysHeadingComponent = /** @class */ (function () {
         function OasysHeadingComponent(tokenService) {
             this.tokenService = tokenService;
@@ -615,7 +835,7 @@
         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: "<hgroup>\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</hgroup>", 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 });
+    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: [{
@@ -645,6 +865,24 @@
                     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: [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 HeroComponent = /** @class */ (function () {
         function HeroComponent(tokenService) {
             this.tokenService = tokenService;
@@ -701,195 +939,72 @@
                     type: i0.Input
                 }] } });
 
-    var CardComponent = /** @class */ (function () {
-        function CardComponent(tokenService) {
-            this.tokenService = tokenService;
+    var OasysHeroModule = /** @class */ (function () {
+        function OasysHeroModule() {
         }
-        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;
+        return OasysHeroModule;
     }());
-    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"] }, { 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: i2__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { 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,
+    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: [{
-                        selector: 'ui-card',
-                        templateUrl: './card.component.html',
-                        styleUrls: ['./card.component.scss']
+                        declarations: [HeroComponent],
+                        imports: [i3.CommonModule, OasysButtonModule, OasysHeadingModule, OasysLayoutModule],
+                        exports: [HeroComponent],
+                        providers: [TokenService],
                     }]
-            }], 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 BreadcrumbsComponent = /** @class */ (function () {
-        function BreadcrumbsComponent() {
+    var TextComponent = /** @class */ (function () {
+        function TextComponent() {
+            this.textAlign = 'left';
+            this.textWeight = 'normal';
+            this.textTransform = 'none';
         }
-        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;
-            }
+        TextComponent.prototype.ngOnInit = function () {
+            this.uiTextClasses = [
+                "ui-text--align-" + this.textAlign,
+                "ui-text--weight-" + this.textWeight,
+                "ui-text--transform-" + this.textTransform,
+            ].join(' ');
         };
-        return BreadcrumbsComponent;
+        return TextComponent;
     }());
-    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}}\" 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"] }, { 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: [{
+    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-breadcrumbs',
-                        templateUrl: './breadcrumbs.component.html',
-                        styleUrls: ['./breadcrumbs.component.scss'],
+                        selector: 'ui-text',
+                        templateUrl: './text.component.html',
+                        styleUrls: ['./text.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { breadcrumbs_values: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { textAlign: [{
                     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"] }], 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: [{
+                }], textWeight: [{
+                    type: i0.Input
+                }], textTransform: [{
                     type: i0.Input
                 }] } });
 
-    var OasysLibModule = /** @class */ (function () {
-        function OasysLibModule() {
+    var OasysTextModule = /** @class */ (function () {
+        function OasysTextModule() {
         }
-        return OasysLibModule;
+        return OasysTextModule;
     }());
-    OasysLibModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLibModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OasysLibModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLibModule, declarations: [OasysButtonComponent,
-            IconComponent,
-            LayoutBoxComponent,
-            LayoutStackComponent,
-            LayoutGridComponent,
-            LayoutGridColumnComponent,
-            LayoutContainerComponent,
-            OasysHeadingComponent,
-            BreadcrumbsComponent,
-            DividerComponent,
-            HeroComponent,
-            CardComponent], imports: [i3.CommonModule, i2__namespace.RouterModule], exports: [OasysButtonComponent,
-            IconComponent,
-            LayoutBoxComponent,
-            LayoutStackComponent,
-            LayoutGridComponent,
-            LayoutGridColumnComponent,
-            LayoutContainerComponent,
-            OasysHeadingComponent,
-            BreadcrumbsComponent,
-            DividerComponent,
-            HeroComponent] });
-    OasysLibModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLibModule, providers: [
-            WindowService,
-            TokenService
-        ], imports: [[
-                i3.CommonModule,
-                i2.RouterModule.forChild([])
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysLibModule, decorators: [{
+    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: [
-                            OasysButtonComponent,
-                            IconComponent,
-                            LayoutBoxComponent,
-                            LayoutStackComponent,
-                            LayoutGridComponent,
-                            LayoutGridColumnComponent,
-                            LayoutContainerComponent,
-                            OasysHeadingComponent,
-                            BreadcrumbsComponent,
-                            DividerComponent,
-                            HeroComponent,
-                            CardComponent
-                        ],
-                        imports: [
-                            i3.CommonModule,
-                            i2.RouterModule.forChild([])
-                        ],
-                        exports: [
-                            OasysButtonComponent,
-                            IconComponent,
-                            LayoutBoxComponent,
-                            LayoutStackComponent,
-                            LayoutGridComponent,
-                            LayoutGridColumnComponent,
-                            LayoutContainerComponent,
-                            OasysHeadingComponent,
-                            BreadcrumbsComponent,
-                            DividerComponent,
-                            HeroComponent
-                        ],
-                        providers: [
-                            WindowService,
-                            TokenService
-                        ],
-                        schemas: [
-                            i0.NO_ERRORS_SCHEMA
-                        ]
+                        declarations: [TextComponent],
+                        imports: [i3.CommonModule],
+                        exports: [TextComponent],
                     }]
             }] });
 
@@ -902,6 +1017,7 @@
      */
 
     exports.BreadcrumbsComponent = BreadcrumbsComponent;
+    exports.CardComponent = CardComponent;
     exports.DividerComponent = DividerComponent;
     exports.HeroComponent = HeroComponent;
     exports.IconComponent = IconComponent;
@@ -910,9 +1026,18 @@
     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.OasysLibModule = OasysLibModule;
+    exports.OasysHeadingModule = OasysHeadingModule;
+    exports.OasysHeroModule = OasysHeroModule;
+    exports.OasysIconModule = OasysIconModule;
+    exports.OasysLayoutModule = OasysLayoutModule;
+    exports.OasysTextModule = OasysTextModule;
+    exports.TextComponent = TextComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });