oasys-lib 1.9.2 → 1.10.0

package/bundles/oasys-lib.umd.js

@@ -57,7 +57,7 @@
             if (!spaceInput || spaceInput === undefined) {
                 return null;
             }
-            // Used for responsive spacing, check if the input is either an object or JSON 
+            // Used for responsive spacing, check if the input is either an object or JSON
             if (typeof spaceInput === 'object' || this.stringContainsJson(spaceInput)) {
                 // If JSON then convert this to an object
                 var spaceInputObject_1 = typeof spaceInput === 'object' ? spaceInput : JSON.parse(spaceInput);
@@ -455,9 +455,8 @@
             }] });
 
     var LayoutContainerComponent = /** @class */ (function () {
-        function LayoutContainerComponent(changes, tokenService) {
+        function LayoutContainerComponent(changes) {
             this.changes = changes;
-            this.tokenService = tokenService;
             this.container_fluid = false;
             this.container_gutter = true;
             this.prefix = 'ui-layout-container';
@@ -467,44 +466,28 @@
             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' : '')
-            ];
+                this.container_fluid ? this.prefix + "-fluid" : '',
+                this.container_gutter ? '' : this.prefix + "-no-gutter"
+            ].flat(10).filter(Boolean);
         };
         return LayoutContainerComponent;
     }());
-    LayoutContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { 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 });
+    LayoutContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LayoutContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LayoutContainerComponent, selector: "ui-container", inputs: { container_fluid: "container_fluid", container_gutter: "container_gutter" }, host: { properties: { "class": "containerLayoutClasses" } }, usesOnChanges: true, ngImport: i0__namespace, template: "\n    <ng-content></ng-content>\n  ", isInline: true, styles: [":host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);display:block;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--container-component-gutter-size)}@media only screen and (max-width: 767px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 768px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small)}}@media only screen and (min-width: 1080px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}@media only screen and (min-width: 1440px){:host{--container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large)}}:host.ui-layout-container-no-gutter{padding:0}@media only screen and (max-width: 767px){:host{max-width:100%}}@media only screen and (min-width: 768px){:host{max-width:calc(767px)}}@media only screen and (min-width: 1080px){:host{max-width:calc(1080px)}}@media only screen and (min-width: 1440px){:host{max-width:calc(1440px)}}:host.ui-layout-container-fluid{max-width:100%}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LayoutContainerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ui-container',
-                        template: "\n    <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  ",
+                        template: "\n    <ng-content></ng-content>\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: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { container_fluid: [{
                     type: i0.Input
                 }], container_gutter: [{
                     type: i0.Input
@@ -957,6 +940,100 @@
                     }]
             }] });
 
+    var SeoBlockComponent = /** @class */ (function () {
+        function SeoBlockComponent() {
+            this.expandedLinksVisible = false;
+            this.expandedContentVisible = false;
+        }
+        SeoBlockComponent.prototype.showMoreLinks = function (flag) {
+            this.expandedLinksVisible = flag;
+        };
+        SeoBlockComponent.prototype.showMoreContent = function (flag) {
+            this.expandedContentVisible = flag;
+        };
+        SeoBlockComponent.prototype.ngOnInit = function () {
+            var _a;
+            // This is to fix a bug in Oasys that threats arrays as string initially
+            if (typeof this.links === 'string') {
+                this.linksValues = (_a = JSON.parse(this.links)) !== null && _a !== void 0 ? _a : [];
+            }
+            else {
+                this.linksValues = this.links;
+            }
+            if (this.linksValues.length <= 10) {
+                this.linksColumnsNumber = 1;
+            }
+            else if (this.linksValues.length <= 20) {
+                this.linksColumnsNumber = 2;
+            }
+            else {
+                this.linksColumnsNumber = 3;
+            }
+        };
+        return SeoBlockComponent;
+    }());
+    SeoBlockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SeoBlockComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SeoBlockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SeoBlockComponent, selector: "ui-seo-block", inputs: { heading_paragraph: "heading_paragraph", heading_links: "heading_links", main_content: "main_content", expanded_content: "expanded_content", links: "links", read_more_content_text: "read_more_content_text", read_less_content_text: "read_less_content_text", show_more_links_text: "show_more_links_text", show_less_links_text: "show_less_links_text", visible_links_on_mobile: "visible_links_on_mobile" }, ngImport: i0__namespace, template: "<ui-box>\n  <ui-grid>\n    <ui-column columns=\"6\">\n      <ui-box box_space=\"none\" [box_space_right]=\"{\n          mobile: 'none',\n          tablet: 'expanded',\n          laptop: 'expanded',\n          desktop: 'expanded'\n        }\">\n        <ui-stack stack_gap=\"near\">\n          <ui-box box_space=\"none\">\n            <ui-heading heading_type=\"functional-primary\" heading_title=\"{{ heading_paragraph }}\"></ui-heading>\n          </ui-box>\n          <ui-box box_space=\"none\">\n            <span class=\"text-body--default\" class=\"ui-prose\" [innerHTML]=\"main_content\"></span>\n            <span class=\"text-body--default\" class=\"ui-prose\" *ngIf=\"expandedContentVisible\"\n              [innerHTML]=\"expanded_content\"></span>\n          </ui-box>\n          <ui-box box_space=\"none\" *ngIf=\"expanded_content\">\n            <span *ngIf=\"!expandedContentVisible\" role=\"button\" (click)=\"showMoreContent(true)\"\n              class=\"text-link text-link--standalone\">\n              {{read_more_content_text}}\n            </span>\n            <span *ngIf=\"expandedContentVisible\" role=\"button\" (click)=\"showMoreContent(false)\"\n              class=\"text-link text-link--standalone\">\n              {{read_less_content_text}}\n            </span>\n          </ui-box>\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n    <ui-column columns=\"6\">\n      <ui-box box_space=\"none\">\n        <ui-stack stack_gap=\"near\">\n          <ui-box box_space=\"none\">\n            <ui-heading heading_type=\"functional-secondary\" heading_title=\"{{ heading_links }}\"></ui-heading>\n          </ui-box>\n          <ui-stack stack_gap=\"tight\">\n            <ui-box box_space=\"none\" box_fill_mode=\"fit\" [ngStyle]=\"{'column-count': linksColumnsNumber}\"\n              class=\"links-container text-body--supporting\">\n              <ng-container *ngFor=\"let link of linksValues; index as i\">\n                <ui-box box_space=\"none\" box_space_bottom=\"tight\" box_fill_mode=\"fit\" class=\"link-container\"\n                  [ngClass]=\"{ 'hidden-mobile': i > 4 && !expandedLinksVisible }\">\n                  <a href=\"{{ link.href }}\">\n                    {{ link.name }}\n                  </a>\n                </ui-box>\n              </ng-container>\n            </ui-box>\n            <ui-box box_space=\"none\" class=\"hidden-desktop hidden-tablet\" *ngIf=\"linksValues.length > 4\">\n              <span *ngIf=\"!expandedLinksVisible\" (click)=\"showMoreLinks(true)\" class=\"text-link text-link--standalone\">\n                {{show_more_links_text}}\n              </span>\n              <span *ngIf=\"expandedLinksVisible\" (click)=\"showMoreLinks(false)\" class=\"text-link text-link--standalone\">\n                {{show_less_links_text}}\n              </span>\n            </ui-box>\n          </ui-stack>\n\n        </ui-stack>\n      </ui-box>\n    </ui-column>\n  </ui-grid>\n</ui-box>\n", styles: [".links-container{display:block}@media only screen and (max-width: 767px){.links-container{display:flex}}.links-container .link-container{page-break-inside:avoid;break-inside:avoid-column}\n"], components: [{ type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background"] }, { type: LayoutGridComponent, selector: "ui-grid", inputs: ["grid_auto", "grid_collapse_below", "grid_gap"] }, { type: LayoutGridColumnComponent, selector: "ui-column", inputs: ["columns"] }, { type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap"] }, { type: OasysHeadingComponent, selector: "ui-heading", inputs: ["heading_type", "heading_on_dark", "heading_title", "heading_seo_priority", "heading_priority", "heading_alignment_override", "heading_subtitle", "heading_surtitle"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SeoBlockComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ui-seo-block',
+                        templateUrl: './seo-block.component.html',
+                        styleUrls: ['./seo-block.component.scss'],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { heading_paragraph: [{
+                    type: i0.Input
+                }], heading_links: [{
+                    type: i0.Input
+                }], main_content: [{
+                    type: i0.Input
+                }], expanded_content: [{
+                    type: i0.Input
+                }], links: [{
+                    type: i0.Input
+                }], read_more_content_text: [{
+                    type: i0.Input
+                }], read_less_content_text: [{
+                    type: i0.Input
+                }], show_more_links_text: [{
+                    type: i0.Input
+                }], show_less_links_text: [{
+                    type: i0.Input
+                }], visible_links_on_mobile: [{
+                    type: i0.Input
+                }] } });
+
+    var OasysSeoBlockModule = /** @class */ (function () {
+        function OasysSeoBlockModule() {
+        }
+        return OasysSeoBlockModule;
+    }());
+    OasysSeoBlockModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OasysSeoBlockModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, declarations: [SeoBlockComponent], imports: [i3.CommonModule,
+            OasysButtonModule,
+            OasysHeadingModule,
+            OasysLayoutModule], exports: [SeoBlockComponent] });
+    OasysSeoBlockModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, providers: [TokenService], imports: [[
+                i3.CommonModule,
+                OasysButtonModule,
+                OasysHeadingModule,
+                OasysLayoutModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OasysSeoBlockModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [SeoBlockComponent],
+                        imports: [
+                            i3.CommonModule,
+                            OasysButtonModule,
+                            OasysHeadingModule,
+                            OasysLayoutModule,
+                        ],
+                        exports: [SeoBlockComponent],
+                        providers: [TokenService],
+                    }]
+            }] });
+
     var TextComponent = /** @class */ (function () {
         function TextComponent() {
             this.textAlign = 'left';
@@ -1036,7 +1113,9 @@
     exports.OasysHeroModule = OasysHeroModule;
     exports.OasysIconModule = OasysIconModule;
     exports.OasysLayoutModule = OasysLayoutModule;
+    exports.OasysSeoBlockModule = OasysSeoBlockModule;
     exports.OasysTextModule = OasysTextModule;
+    exports.SeoBlockComponent = SeoBlockComponent;
     exports.TextComponent = TextComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });