@skyux/layout 5.5.0 → 5.6.0

package/fesm2015/skyux-layout.js

@@ -12,8 +12,8 @@ import * as i3$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i1 from '@skyux/core';
 import { SkyMediaBreakpoints, SkyDockModule, SkyCoreAdapterService } from '@skyux/core';
-import { takeUntil, map, take } from 'rxjs/operators';
 import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
+import { takeUntil, map, take } from 'rxjs/operators';
 import * as i1$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i3$2 from '@angular/forms';
@@ -351,6 +351,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-layout' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_back_to_top: { message: 'Back to top' },
+        skyux_card_checkbox_label: { message: 'Select card' },
+        skyux_definition_list_none_found: { message: 'None found.' },
+        skyux_description_list_none_found: { message: 'None found.' },
+        skyux_inline_delete_assistive_text: {
+            message: 'Are you sure you want to delete this item?',
+        },
+        skyux_inline_delete_cancel: { message: 'Cancel' },
+        skyux_inline_delete_confirm_deletion: { message: 'Confirm deletion' },
+        skyux_inline_delete_delete: { message: 'Delete' },
+        skyux_text_expand_close_text: { message: 'Close' },
+        skyux_text_expand_modal_title: { message: 'Expanded view' },
+        skyux_text_expand_see_less: { message: 'See less' },
+        skyux_text_expand_see_more: { message: 'See more' },
+    },
+};
+class SkyLayoutResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyLayoutResourcesModule {
+}
+SkyLayoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLayoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, exports: [SkyI18nModule] });
+SkyLayoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyLayoutResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyLayoutResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyBackToTopComponent {
+    constructor() {
+        this._scrollToTopClick = new Subject();
+    }
+    get scrollToTopClick() {
+        return this._scrollToTopClick.asObservable();
+    }
+    onScrollToTopClick() {
+        this._scrollToTopClick.next();
+        this._scrollToTopClick.complete();
+    }
+}
+SkyBackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyBackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyBackToTopComponent, selector: "sky-back-to-top", ngImport: i0, template: "<div class=\"sky-back-to-top sky-padding-squish-large\">\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top{display:flex;align-items:center;width:100%;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}\n"], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-back-to-top',
+                    templateUrl: './back-to-top.component.html',
+                    styleUrls: ['./back-to-top.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 /**
  * @internal
  */
@@ -434,33 +518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyAppWindowRef }]; } });
 
-/**
- * @internal
- */
-class SkyBackToTopComponent {
-    constructor() {
-        this._scrollToTopClick = new Subject();
-    }
-    get scrollToTopClick() {
-        return this._scrollToTopClick.asObservable();
-    }
-    onScrollToTopClick() {
-        this._scrollToTopClick.next();
-        this._scrollToTopClick.complete();
-    }
-}
-SkyBackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyBackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyBackToTopComponent, selector: "sky-back-to-top", ngImport: i0, template: "<div class=\"sky-back-to-top sky-padding-squish-large\">\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top{display:flex;align-items:center;width:100%;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}\n"], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-back-to-top',
-                    templateUrl: './back-to-top.component.html',
-                    styleUrls: ['./back-to-top.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
 /**
  * Specifies the type of message to send to the back to top component.
  */
@@ -577,63 +634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/**
- * NOTICE: DO NOT MODIFY THIS FILE!
- * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-layout' schematic.
- * To update this file, simply rerun the command.
- */
-const RESOURCES = {
-    'EN-US': {
-        skyux_back_to_top: { message: 'Back to top' },
-        skyux_card_checkbox_label: { message: 'Select card' },
-        skyux_definition_list_none_found: { message: 'None found.' },
-        skyux_description_list_none_found: { message: 'None found.' },
-        skyux_inline_delete_assistive_text: {
-            message: 'Are you sure you want to delete this item?',
-        },
-        skyux_inline_delete_cancel: { message: 'Cancel' },
-        skyux_inline_delete_confirm_deletion: { message: 'Confirm deletion' },
-        skyux_inline_delete_delete: { message: 'Delete' },
-        skyux_text_expand_close_text: { message: 'Close' },
-        skyux_text_expand_modal_title: { message: 'Expanded view' },
-        skyux_text_expand_see_less: { message: 'See less' },
-        skyux_text_expand_see_more: { message: 'See more' },
-    },
-};
-class SkyLayoutResourcesProvider {
-    getString(localeInfo, name) {
-        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-    }
-}
-/**
- * Import into any component library module that needs to use resource strings.
- */
-class SkyLayoutResourcesModule {
-}
-SkyLayoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyLayoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, exports: [SkyI18nModule] });
-SkyLayoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, providers: [
-        {
-            provide: SKY_LIB_RESOURCES_PROVIDERS,
-            useClass: SkyLayoutResourcesProvider,
-            multi: true,
-        },
-    ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLayoutResourcesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyLayoutResourcesProvider,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
 class SkyBackToTopModule {
 }
 SkyBackToTopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1237,61 +1237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/**
- * @internal
- */
-class SkyDefinitionListService {
-    constructor() {
-        this.labelWidth = new BehaviorSubject('');
-        this.defaultValue = new BehaviorSubject('');
-    }
-}
-SkyDefinitionListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDefinitionListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Creates a definition list to display label-value pairs.
- */
-class SkyDefinitionListComponent {
-    constructor(service) {
-        this.service = service;
-    }
-    /**
-     * Specifies the width of the label portion of the definition list.
-     * @default "90px"
-     */
-    set labelWidth(value) {
-        this.service.labelWidth.next(value);
-    }
-    /**
-     * Specifies a default value to display when no value is provided
-     * for a label-value pair.
-     * @default "None found"
-     */
-    set defaultValue(value) {
-        this.service.defaultValue.next(value);
-    }
-}
-SkyDefinitionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDefinitionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDefinitionListComponent, selector: "sky-definition-list", inputs: { labelWidth: "labelWidth", defaultValue: "defaultValue" }, providers: [SkyDefinitionListService], ngImport: i0, template: "<div class=\"sky-definition-list\">\n  <ng-content select=\"sky-definition-list-heading\"></ng-content>\n  <ng-content select=\"sky-definition-list-content\"></ng-content>\n</div>\n", styles: [".sky-definition-list{margin-right:50px;margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-definition-list',
-                    templateUrl: './definition-list.component.html',
-                    styleUrls: ['./definition-list.component.scss'],
-                    providers: [SkyDefinitionListService],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: SkyDefinitionListService }]; }, propDecorators: { labelWidth: [{
-                type: Input
-            }], defaultValue: [{
-                type: Input
-            }] } });
-
 /**
  * Wraps the label-value pairs in the definition list.
  */
@@ -1326,6 +1271,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * @internal
+ */
+class SkyDefinitionListService {
+    constructor() {
+        this.labelWidth = new BehaviorSubject('');
+        this.defaultValue = new BehaviorSubject('');
+    }
+}
+SkyDefinitionListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDefinitionListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Specifies the label in a label-value pair.
  */
@@ -1365,6 +1325,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SkyDefinitionListService }]; } });
 
+/**
+ * Creates a definition list to display label-value pairs.
+ */
+class SkyDefinitionListComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    /**
+     * Specifies the width of the label portion of the definition list.
+     * @default "90px"
+     */
+    set labelWidth(value) {
+        this.service.labelWidth.next(value);
+    }
+    /**
+     * Specifies a default value to display when no value is provided
+     * for a label-value pair.
+     * @default "None found"
+     */
+    set defaultValue(value) {
+        this.service.defaultValue.next(value);
+    }
+}
+SkyDefinitionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDefinitionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDefinitionListComponent, selector: "sky-definition-list", inputs: { labelWidth: "labelWidth", defaultValue: "defaultValue" }, providers: [SkyDefinitionListService], ngImport: i0, template: "<div class=\"sky-definition-list\">\n  <ng-content select=\"sky-definition-list-heading\"></ng-content>\n  <ng-content select=\"sky-definition-list-content\"></ng-content>\n</div>\n", styles: [".sky-definition-list{margin-right:50px;margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-definition-list',
+                    templateUrl: './definition-list.component.html',
+                    styleUrls: ['./definition-list.component.scss'],
+                    providers: [SkyDefinitionListService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDefinitionListService }]; }, propDecorators: { labelWidth: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }] } });
+
 class SkyDefinitionListModule {
 }
 SkyDefinitionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDefinitionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1389,78 +1389,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         SkyDefinitionListValueComponent,
                     ],
                     imports: [CommonModule, SkyI18nModule, SkyLayoutResourcesModule],
-                    exports: [
-                        SkyDefinitionListComponent,
-                        SkyDefinitionListContentComponent,
-                        SkyDefinitionListHeadingComponent,
-                        SkyDefinitionListLabelComponent,
-                        SkyDefinitionListValueComponent,
-                    ],
-                }]
-        }] });
-
-/**
- * @internal
- */
-class SkyDescriptionListAdapterService {
-    constructor(rendererFactory) {
-        this.renderer = rendererFactory.createRenderer(undefined, undefined);
-    }
-    getWidth(elementRef) {
-        return elementRef.nativeElement.clientWidth;
-    }
-    setResponsiveClass(element) {
-        const nativeEl = element.nativeElement;
-        const width = this.getWidth(element);
-        const className = this.getResponsiveClassName(width);
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-        this.renderer.addClass(nativeEl, className);
-    }
-    getResponsiveClassName(width) {
-        const xsBreakpointMaxPixels = 479;
-        const smBreakpointMinPixels = 480;
-        const smBreakpointMaxPixels = 767;
-        if (width <= xsBreakpointMaxPixels) {
-            return 'sky-responsive-container-xs';
-        }
-        else if (width >= smBreakpointMinPixels &&
-            width <= smBreakpointMaxPixels) {
-            return 'sky-responsive-container-sm';
-        }
-        else {
-            return 'sky-responsive-container-md';
-        }
-    }
-}
-SkyDescriptionListAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDescriptionListAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
-
-/**
- * Specifies the term in a term-description pair.
- */
-class SkyDescriptionListTermComponent {
-}
-SkyDescriptionListTermComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDescriptionListTermComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-description-list-term',
-                    templateUrl: './description-list-term.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exports: [
+                        SkyDefinitionListComponent,
+                        SkyDefinitionListContentComponent,
+                        SkyDefinitionListHeadingComponent,
+                        SkyDefinitionListLabelComponent,
+                        SkyDefinitionListValueComponent,
+                    ],
                 }]
-        }], propDecorators: { templateRef: [{
-                type: ViewChild,
-                args: ['termTemplateRef', {
-                        read: TemplateRef,
-                        static: true,
-                    }]
-            }] } });
+        }] });
 
 /**
  * @internal
@@ -1528,6 +1465,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     }]
             }] } });
 
+/**
+ * Specifies the term in a term-description pair.
+ */
+class SkyDescriptionListTermComponent {
+}
+SkyDescriptionListTermComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDescriptionListTermComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-description-list-term',
+                    templateUrl: './description-list-term.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['termTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
 /**
  * Wraps the term-description pairs in the description list.
  */
@@ -1549,6 +1508,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [SkyDescriptionListDescriptionComponent]
             }] } });
 
+/**
+ * @internal
+ */
+class SkyDescriptionListAdapterService {
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    getWidth(elementRef) {
+        return elementRef.nativeElement.clientWidth;
+    }
+    setResponsiveClass(element) {
+        const nativeEl = element.nativeElement;
+        const width = this.getWidth(element);
+        const className = this.getResponsiveClassName(width);
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+        this.renderer.addClass(nativeEl, className);
+    }
+    getResponsiveClassName(width) {
+        const xsBreakpointMaxPixels = 479;
+        const smBreakpointMinPixels = 480;
+        const smBreakpointMaxPixels = 767;
+        if (width <= xsBreakpointMaxPixels) {
+            return 'sky-responsive-container-xs';
+        }
+        else if (width >= smBreakpointMinPixels &&
+            width <= smBreakpointMaxPixels) {
+            return 'sky-responsive-container-sm';
+        }
+        else {
+            return 'sky-responsive-container-md';
+        }
+    }
+}
+SkyDescriptionListAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDescriptionListAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDescriptionListAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
 /**
  * Creates a description list to display term-description pairs.
  */
@@ -1731,32 +1731,6 @@ var SkyFluidGridGutterSize;
     SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
 })(SkyFluidGridGutterSize || (SkyFluidGridGutterSize = {}));
 
-/**
- * Displays a row within the `sky-fluid-grid` wrapper. Previously, you could display a row
- * without a wrapper, but we no longer officially support that option.
- */
-class SkyRowComponent {
-    constructor() {
-        /**
-         * Indicates whether to reverse the display order for columns in the row.
-         * @default false
-         */
-        this.reverseColumnOrder = false;
-    }
-}
-SkyRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRowComponent, selector: "sky-row", inputs: { reverseColumnOrder: "reverseColumnOrder" }, ngImport: i0, template: "<div class=\"sky-row\" [ngClass]=\"{ 'sky-row-reverse': reverseColumnOrder }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-60px;margin-right:-60px}:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width: 768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row-reverse}:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}.sky-theme-modern .sky-row{margin-left:-30px;margin-right:-30px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-row',
-                    templateUrl: './row.component.html',
-                    styleUrls: ['./row.component.scss'],
-                }]
-        }], propDecorators: { reverseColumnOrder: [{
-                type: Input
-            }] } });
-
 class SkyColumnComponent {
     ngOnChanges(changes) {
         /* istanbul ignore else */
@@ -1768,7 +1742,7 @@ class SkyColumnComponent {
         }
     }
     getClassNames() {
-        let classnames = ['sky-column'];
+        const classnames = ['sky-column'];
         if (this.screenXSmall) {
             classnames.push(`sky-column-xs-${this.screenXSmall}`);
         }
@@ -1872,6 +1846,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Displays a row within the `sky-fluid-grid` wrapper. Previously, you could display a row
+ * without a wrapper, but we no longer officially support that option.
+ */
+class SkyRowComponent {
+    constructor() {
+        /**
+         * Indicates whether to reverse the display order for columns in the row.
+         * @default false
+         */
+        this.reverseColumnOrder = false;
+    }
+}
+SkyRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRowComponent, selector: "sky-row", inputs: { reverseColumnOrder: "reverseColumnOrder" }, ngImport: i0, template: "<div class=\"sky-row\" [ngClass]=\"{ 'sky-row-reverse': reverseColumnOrder }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-60px;margin-right:-60px}:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width: 768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row-reverse}:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}.sky-theme-modern .sky-row{margin-left:-30px;margin-right:-30px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-row',
+                    templateUrl: './row.component.html',
+                    styleUrls: ['./row.component.scss'],
+                }]
+        }], propDecorators: { reverseColumnOrder: [{
+                type: Input
+            }] } });
+
 class SkyFluidGridModule {
 }
 SkyFluidGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFluidGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2157,8 +2157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SkyPageSummaryAdapterService {
     updateKeyInfoLocation(elRef, isXS) {
-        let el = elRef.nativeElement;
-        let keyInfoContainerEl = el.querySelector('.sky-page-summary-key-info-container');
+        const el = elRef.nativeElement;
+        const keyInfoContainerEl = el.querySelector('.sky-page-summary-key-info-container');
         if (isXS) {
             el.querySelector('.sky-page-summary-key-info-xs').appendChild(keyInfoContainerEl);
         }
@@ -2261,35 +2261,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/**
- * @internal
- */
-class SkyTextExpandAdapterService {
-    constructor(rendererFactory) {
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-    }
-    getContainerHeight(containerEl) {
-        return containerEl.nativeElement.offsetHeight;
-    }
-    setContainerHeight(containerEl, height) {
-        if (height === undefined) {
-            this.renderer.removeStyle(containerEl.nativeElement, 'max-height');
-        }
-        else {
-            this.renderer.setStyle(containerEl.nativeElement, 'max-height', height);
-        }
-    }
-    setText(textEl, text) {
-        textEl.nativeElement.textContent = text;
-    }
-}
-SkyTextExpandAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextExpandAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTextExpandAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextExpandAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextExpandAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
-
 /**
  * @internal
  */
@@ -2319,6 +2290,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SkyTextExpandModalContext }, { type: i2$2.SkyModalInstance }]; } });
 
+/**
+ * @internal
+ */
+class SkyTextExpandAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    getContainerHeight(containerEl) {
+        return containerEl.nativeElement.offsetHeight;
+    }
+    setContainerHeight(containerEl, height) {
+        if (height === undefined) {
+            this.renderer.removeStyle(containerEl.nativeElement, 'max-height');
+        }
+        else {
+            this.renderer.setStyle(containerEl.nativeElement, 'max-height', height);
+        }
+    }
+    setText(textEl, text) {
+        textEl.nativeElement.textContent = text;
+    }
+}
+SkyTextExpandAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextExpandAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextExpandAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextExpandAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextExpandAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
 /**
  * Auto-incrementing integer used to generate unique ids for text expand components.
  */
@@ -2440,7 +2440,7 @@ class SkyTextExpandComponent {
         this.animationEnd();
         /* Before animation is kicked off, ensure that a maxHeight exists */
         /* Once we have support for angular v4 animations with parameters we can use that instead */
-        let currentHeight = this.textExpandAdapter.getContainerHeight(this.containerEl);
+        const currentHeight = this.textExpandAdapter.getContainerHeight(this.containerEl);
         this.textExpandAdapter.setContainerHeight(this.containerEl, `${currentHeight}px`);
     }
     setup(value) {
@@ -2468,7 +2468,7 @@ class SkyTextExpandComponent {
         this.textExpandAdapter.setText(this.textEl, this.textToShow);
     }
     getNewlineCount(value) {
-        let matches = value.match(/\n/gi);
+        const matches = value.match(/\n/gi);
         if (matches) {
             return matches.length;
         }
@@ -2493,17 +2493,17 @@ class SkyTextExpandComponent {
         return value.substr(0, length);
     }
     animateText(previousText, newText, expanding) {
-        let adapter = this.textExpandAdapter;
-        let container = this.containerEl;
+        const adapter = this.textExpandAdapter;
+        const container = this.containerEl;
         // Reset max height
         adapter.setContainerHeight(container, undefined);
         // Measure the current height so we can animate from it.
-        let currentHeight = adapter.getContainerHeight(container);
+        const currentHeight = adapter.getContainerHeight(container);
         this.textToShow = newText;
         adapter.setText(this.textEl, this.textToShow);
         this.buttonText = expanding ? this.seeLessText : this.seeMoreText;
         // Measure the new height so we can animate to it.
-        let newHeight = adapter.getContainerHeight(container);
+        const newHeight = adapter.getContainerHeight(container);
         /* istanbul ignore if */
         if (newHeight < currentHeight) {
             // The new text is smaller than the old text, so put the old text back before doing
@@ -2702,14 +2702,14 @@ class SkyTextExpandRepeaterComponent {
         this.animationEnd();
         /* Before animation is kicked off, ensure that a maxHeight exists */
         /* Once we have support for angular v4 animations with parameters we can use that instead */
-        let currentHeight = this.textExpandRepeaterAdapter.getContainerHeight(this.containerEl);
+        const currentHeight = this.textExpandRepeaterAdapter.getContainerHeight(this.containerEl);
         this.textExpandRepeaterAdapter.setContainerHeight(this.containerEl, `${currentHeight}px`);
     }
     animateRepeater(expanding) {
-        let adapter = this.textExpandRepeaterAdapter;
-        let container = this.containerEl;
+        const adapter = this.textExpandRepeaterAdapter;
+        const container = this.containerEl;
         adapter.setContainerHeight(container, undefined);
-        let currentHeight = adapter.getContainerHeight(container);
+        const currentHeight = adapter.getContainerHeight(container);
         for (let i = this.maxItems; i < this.contentItems.length; i++) {
             if (!expanding) {
                 adapter.hideItem(this.items[i]);
@@ -2718,7 +2718,7 @@ class SkyTextExpandRepeaterComponent {
                 adapter.showItem(this.items[i]);
             }
         }
-        let newHeight = adapter.getContainerHeight(container);
+        const newHeight = adapter.getContainerHeight(container);
         if (!expanding) {
             this.buttonText = this.seeMoreText;
         }
@@ -2745,7 +2745,7 @@ class SkyTextExpandRepeaterComponent {
     }
     setup(value) {
         if (value) {
-            let length = value.length;
+            const length = value.length;
             if (length > this.maxItems) {
                 this.expandable = true;
                 this.buttonText = this.seeMoreText;
@@ -2802,6 +2802,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * Specifies a container for an item in the toolbar.
+ */
+class SkyToolbarItemComponent {
+}
+SkyToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToolbarItemComponent, selector: "sky-toolbar-item", ngImport: i0, template: "<div class=\"sky-toolbar-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-toolbar-item',
+                    styleUrls: ['./toolbar-item.component.scss'],
+                    templateUrl: './toolbar-item.component.html',
+                }]
+        }] });
+
 /**
  * Specifies a section to group items within the toolbar. The section displays items in a separate horizontal row.
  */
@@ -2818,6 +2834,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * Adds a section on the right side of the toolbar for items that substantially alter
+ * the view of the content container. This includes simple filters and view switchers.
+ */
+class SkyToolbarViewActionsComponent {
+}
+SkyToolbarViewActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToolbarViewActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToolbarViewActionsComponent, selector: "sky-toolbar-view-actions", ngImport: i0, template: "<div class=\"sky-toolbar-view-actions\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarViewActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-toolbar-view-actions',
+                    templateUrl: './toolbar-view-actions.component.html',
+                    styleUrls: ['./toolbar-view-actions.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 /**
  * Displays actions for lists, records, and tiles.
  */
@@ -2843,40 +2877,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [SkyToolbarSectionComponent, { descendants: true }]
             }] } });
 
-/**
- * Specifies a container for an item in the toolbar.
- */
-class SkyToolbarItemComponent {
-}
-SkyToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToolbarItemComponent, selector: "sky-toolbar-item", ngImport: i0, template: "<div class=\"sky-toolbar-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-toolbar-item',
-                    styleUrls: ['./toolbar-item.component.scss'],
-                    templateUrl: './toolbar-item.component.html',
-                }]
-        }] });
-
-/**
- * Adds a section on the right side of the toolbar for items that substantially alter
- * the view of the content container. This includes simple filters and view switchers.
- */
-class SkyToolbarViewActionsComponent {
-}
-SkyToolbarViewActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyToolbarViewActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyToolbarViewActionsComponent, selector: "sky-toolbar-view-actions", ngImport: i0, template: "<div class=\"sky-toolbar-view-actions\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarViewActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-toolbar-view-actions',
-                    templateUrl: './toolbar-view-actions.component.html',
-                    styleUrls: ['./toolbar-view-actions.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
 class SkyToolbarModule {
 }
 SkyToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });