@skyux/inline-form 5.0.1 → 5.5.0-alpha.0

package/README.md

@@ -1,5 +1,7 @@
-# @skyux/inline-form
+# inline-form
 
-[![npm](https://img.shields.io/npm/v/@skyux/inline-form.svg)](https://www.npmjs.com/package/@skyux/inline-form)
-![SKY UX CI](https://github.com/blackbaud/skyux-inline-form/workflows/SKY%20UX%20CI/badge.svg)
-[![coverage](https://codecov.io/gh/blackbaud/skyux-inline-form/branch/master/graphs/badge.svg?branch=master)](https://codecov.io/gh/blackbaud/skyux-inline-form/branch/master)
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test inline-form` to execute the unit tests.

package/bundles/skyux-inline-form.umd.js

@@ -119,9 +119,9 @@
         };
         return SkyInlineFormAdapterService;
     }());
-    SkyInlineFormAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyInlineFormAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormAdapterService, decorators: [{
+    SkyInlineFormAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyInlineFormAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormAdapterService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -328,9 +328,9 @@
         };
         return SkyInlineFormComponent;
     }());
-    SkyInlineFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormComponent, deps: [{ token: SkyInlineFormAdapterService }, { token: i0__namespace.ElementRef }, { token: i2__namespace.SkyLibResourcesService }, { token: i3__namespace.SkyAppWindowRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyInlineFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyInlineFormComponent, selector: "sky-inline-form", inputs: { config: "config", template: "template", showForm: "showForm" }, outputs: { close: "close" }, providers: [SkyInlineFormAdapterService], ngImport: i0__namespace, template: "<div [@skySlideDissolve]=\"showForm\">\n  <div *ngIf=\"!showForm\" class=\"sky-slide-dissolve-first\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"template && showForm\" class=\"sky-slide-dissolve-last\">\n    <div class=\"sky-inline-form sky-shadow sky-box sky-elevation-3\">\n      <div class=\"sky-inline-form-content\">\n        <ng-container [ngTemplateOutlet]=\"template\"> </ng-container>\n      </div>\n      <div class=\"sky-inline-form-footer\">\n        <button\n          *ngFor=\"let button of buttons\"\n          class=\"sky-btn {{ 'sky-btn-' + button.styleType }}\"\n          type=\"button\"\n          [disabled]=\"button.disabled ? true : null\"\n          [ngClass]=\"{ 'sky-btn-disabled': button.disabled }\"\n          (click)=\"closeInlineForm(button)\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-form{background:#eeeeef;border:1px solid #cdcfd2;padding:10px;width:100%}.sky-inline-form .sky-inline-form-footer{margin-top:20px}.sky-inline-form .sky-inline-form-footer button{margin:0 5px 0 0}:host-context(.sky-theme-modern) .sky-inline-form{background-color:#fff;border:none;padding:15px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer{margin-top:30px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer button{margin-right:10px}.sky-theme-modern .sky-inline-form{background-color:#fff;border:none;padding:15px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer{margin-top:30px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer button{margin-right:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-inline-form{background-color:#232427}.sky-theme-modern.sky-theme-mode-dark .sky-inline-form{background-color:#232427}\n"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [skySlideDissolve], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormComponent, decorators: [{
+    SkyInlineFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormComponent, deps: [{ token: SkyInlineFormAdapterService }, { token: i0__namespace.ElementRef }, { token: i2__namespace.SkyLibResourcesService }, { token: i3__namespace.SkyAppWindowRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyInlineFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInlineFormComponent, selector: "sky-inline-form", inputs: { config: "config", template: "template", showForm: "showForm" }, outputs: { close: "close" }, providers: [SkyInlineFormAdapterService], ngImport: i0__namespace, template: "<div [@skySlideDissolve]=\"showForm\">\n  <div *ngIf=\"!showForm\" class=\"sky-slide-dissolve-first\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"template && showForm\" class=\"sky-slide-dissolve-last\">\n    <div class=\"sky-inline-form sky-shadow sky-box sky-elevation-3\">\n      <div class=\"sky-inline-form-content\">\n        <ng-container [ngTemplateOutlet]=\"template\"> </ng-container>\n      </div>\n      <div class=\"sky-inline-form-footer\">\n        <button\n          *ngFor=\"let button of buttons\"\n          class=\"sky-btn {{ 'sky-btn-' + button.styleType }}\"\n          type=\"button\"\n          [disabled]=\"button.disabled ? true : null\"\n          [ngClass]=\"{ 'sky-btn-disabled': button.disabled }\"\n          (click)=\"closeInlineForm(button)\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-form{background:#eeeeef;border:1px solid #cdcfd2;padding:10px;width:100%}.sky-inline-form .sky-inline-form-footer{margin-top:20px}.sky-inline-form .sky-inline-form-footer button{margin:0 5px 0 0}:host-context(.sky-theme-modern) .sky-inline-form{background-color:#fff;border:none;padding:15px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer{margin-top:30px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer button{margin-right:10px}.sky-theme-modern .sky-inline-form{background-color:#fff;border:none;padding:15px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer{margin-top:30px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer button{margin-right:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-inline-form{background-color:#232427}.sky-theme-modern.sky-theme-mode-dark .sky-inline-form{background-color:#232427}\n"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [skySlideDissolve], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-inline-form',
@@ -380,16 +380,16 @@
         }
         return SkyInlineFormResourcesModule;
     }());
-    SkyInlineFormResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyInlineFormResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, exports: [i2.SkyI18nModule] });
-    SkyInlineFormResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, providers: [
+    SkyInlineFormResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyInlineFormResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, exports: [i2.SkyI18nModule] });
+    SkyInlineFormResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, providers: [
             {
                 provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyInlineFormResourcesProvider,
                 multi: true,
             },
         ], imports: [i2.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i2.SkyI18nModule],
@@ -408,10 +408,10 @@
         }
         return SkyInlineFormModule;
     }());
-    SkyInlineFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyInlineFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormModule, declarations: [SkyInlineFormComponent], imports: [i4.CommonModule, SkyInlineFormResourcesModule], exports: [SkyInlineFormComponent] });
-    SkyInlineFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormModule, imports: [[i4.CommonModule, SkyInlineFormResourcesModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyInlineFormModule, decorators: [{
+    SkyInlineFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyInlineFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, declarations: [SkyInlineFormComponent], imports: [i4.CommonModule, SkyInlineFormResourcesModule], exports: [SkyInlineFormComponent] });
+    SkyInlineFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, imports: [[i4.CommonModule, SkyInlineFormResourcesModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SkyInlineFormComponent],

package/documentation.json

@@ -130,6 +130,8 @@
             "name": "NgModule",
             "type": {
               "type": "reference",
+              "qualifiedName": "NgModuleDecorator",
+              "package": "@angular/core",
               "name": "NgModule"
             },
             "arguments": {
@@ -191,6 +193,8 @@
             "name": "Component",
             "type": {
               "type": "reference",
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
               "name": "Component"
             },
             "arguments": {
@@ -245,6 +249,8 @@
                           "name": "any"
                         }
                       ],
+                      "qualifiedName": "ElementRef",
+                      "package": "@angular/core",
                       "name": "ElementRef"
                     }
                   },
@@ -278,6 +284,8 @@
                     "flags": {},
                     "type": {
                       "type": "reference",
+                      "qualifiedName": "ChangeDetectorRef",
+                      "package": "@angular/core",
                       "name": "ChangeDetectorRef"
                     }
                   }
@@ -330,6 +338,8 @@
                 "name": "Output",
                 "type": {
                   "type": "reference",
+                  "qualifiedName": "OutputDecorator",
+                  "package": "@angular/core",
                   "name": "Output"
                 },
                 "arguments": {}
@@ -351,6 +361,8 @@
                   "name": "SkyInlineFormCloseArgs"
                 }
               ],
+              "qualifiedName": "EventEmitter",
+              "package": "@angular/core",
               "name": "EventEmitter"
             },
             "defaultValue": "..."
@@ -377,6 +389,8 @@
                 "name": "Input",
                 "type": {
                   "type": "reference",
+                  "qualifiedName": "InputDecorator",
+                  "package": "@angular/core",
                   "name": "Input"
                 },
                 "arguments": {}
@@ -397,6 +411,8 @@
                   "name": "any"
                 }
               ],
+              "qualifiedName": "TemplateRef",
+              "package": "@angular/core",
               "name": "TemplateRef"
             }
           },
@@ -413,6 +429,8 @@
                 "name": "Input",
                 "type": {
                   "type": "reference",
+                  "qualifiedName": "InputDecorator",
+                  "package": "@angular/core",
                   "name": "Input"
                 },
                 "arguments": {}
@@ -433,7 +451,13 @@
                 "kindString": "Get signature",
                 "flags": {},
                 "comment": {
-                  "shortText": "Specifies configuration options for the buttons to display with the inline form."
+                  "shortText": "Specifies configuration options for the buttons to display with the inline form.",
+                  "tags": [
+                    {
+                      "tag": "required",
+                      "text": "\n"
+                    }
+                  ]
                 },
                 "type": {
                   "type": "reference",
@@ -492,6 +516,8 @@
                 "name": "Input",
                 "type": {
                   "type": "reference",
+                  "qualifiedName": "InputDecorator",
+                  "package": "@angular/core",
                   "name": "Input"
                 },
                 "arguments": {}
@@ -512,7 +538,13 @@
                 "kindString": "Get signature",
                 "flags": {},
                 "comment": {
-                  "shortText": "Indicates whether to display the inline form. Users can toggle between displaying\nand hiding the inline form."
+                  "shortText": "Indicates whether to display the inline form. Users can toggle between displaying\nand hiding the inline form.",
+                  "tags": [
+                    {
+                      "tag": "default",
+                      "text": "false\n"
+                    }
+                  ]
                 },
                 "type": {
                   "type": "intrinsic",
@@ -719,10 +751,14 @@
         "implementedTypes": [
           {
             "type": "reference",
+            "qualifiedName": "OnInit",
+            "package": "@angular/core",
             "name": "OnInit"
           },
           {
             "type": "reference",
+            "qualifiedName": "OnDestroy",
+            "package": "@angular/core",
             "name": "OnDestroy"
           }
         ]
@@ -1023,18 +1059,13 @@
     ],
     "sources": [
       {
-        "fileName": "projects/inline-form/src/public-api.ts",
+        "fileName": "index.ts",
         "line": 1,
         "character": 0
       }
     ]
   },
   "codeExamples": [
-    {
-      "fileName": ".eslintrc.json",
-      "filePath": "/projects/inline-form/documentation/code-examples/.eslintrc.json",
-      "rawContents": "{\n  \"extends\": [\"../../.eslintrc.json\"],\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\"],\n      \"rules\": {\n        \"@angular-eslint/directive-selector\": [\n          \"error\",\n          {\n            \"type\": \"attribute\",\n            \"prefix\": \"app\",\n            \"style\": \"camelCase\"\n          }\n        ],\n        \"@angular-eslint/component-selector\": [\n          \"error\",\n          {\n            \"type\": \"element\",\n            \"prefix\": \"app\",\n            \"style\": \"kebab-case\"\n          }\n        ]\n      }\n    }\n  ]\n}\n"
-    },
     {
       "fileName": "inline-form-demo.component.html",
       "filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.component.html",
@@ -1043,7 +1074,7 @@
     {
       "fileName": "inline-form-demo.component.ts",
       "filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\n\nimport {\n  SkyInlineFormButtonLayout,\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n  selector: 'app-inline-form-demo',\n  templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent implements OnInit {\n  public firstName: string = 'Jane';\n\n  public myForm: FormGroup;\n\n  public inlineFormConfig: SkyInlineFormConfig = {\n    buttonLayout: SkyInlineFormButtonLayout.SaveCancel,\n  };\n\n  public showForm: boolean = false;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      myFirstName: new FormControl(),\n    });\n  }\n\n  public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n    if (args.reason === 'save') {\n      this.firstName = this.myForm.get('myFirstName').value;\n    }\n\n    this.showForm = false;\n    this.myForm.patchValue({\n      myFirstName: undefined,\n    });\n  }\n\n  public onInlineFormOpen(): void {\n    this.showForm = true;\n    this.myForm.patchValue({\n      myFirstName: this.firstName,\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\n\nimport {\n  SkyInlineFormButtonLayout,\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n  selector: 'app-inline-form-demo',\n  templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent implements OnInit {\n  public firstName = 'Jane';\n\n  public myForm: FormGroup;\n\n  public inlineFormConfig: SkyInlineFormConfig = {\n    buttonLayout: SkyInlineFormButtonLayout.SaveCancel,\n  };\n\n  public showForm = false;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      myFirstName: new FormControl(),\n    });\n  }\n\n  public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n    if (args.reason === 'save') {\n      this.firstName = this.myForm.get('myFirstName').value;\n    }\n\n    this.showForm = false;\n    this.myForm.patchValue({\n      myFirstName: undefined,\n    });\n  }\n\n  public onInlineFormOpen(): void {\n    this.showForm = true;\n    this.myForm.patchValue({\n      myFirstName: this.firstName,\n    });\n  }\n}\n"
     },
     {
       "fileName": "inline-form-demo.module.ts",
@@ -1058,7 +1089,7 @@
     {
       "fileName": "inline-form-demo.component.ts",
       "filePath": "/projects/inline-form/documentation/code-examples/inline-form/custom-buttons/inline-form-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\n\nimport {\n  SkyInlineFormButtonLayout,\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n  selector: 'app-inline-form-demo',\n  templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent implements OnInit {\n  public firstName: string = 'Jane';\n\n  public myForm: FormGroup;\n\n  public inlineFormConfig: SkyInlineFormConfig = {\n    buttonLayout: SkyInlineFormButtonLayout.Custom,\n    buttons: [\n      {\n        action: 'save',\n        text: 'Save',\n        styleType: 'primary',\n      },\n      {\n        action: 'delete',\n        text: 'Delete',\n        styleType: 'default',\n      },\n      {\n        action: 'reset',\n        text: 'Reset',\n        styleType: 'default',\n      },\n      {\n        action: 'cancel',\n        text: 'Cancel',\n        styleType: 'link',\n      },\n    ],\n  };\n\n  public showForm: boolean = false;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      myFirstName: new FormControl(),\n    });\n\n    this.myForm.valueChanges.subscribe(() => {\n      if (this.inlineFormConfig.buttons[0].disabled !== this.myForm.invalid) {\n        this.inlineFormConfig.buttons[0].disabled = this.myForm.invalid;\n        this.inlineFormConfig = { ...{}, ...this.inlineFormConfig };\n      }\n    });\n  }\n\n  public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n    if (args.reason === 'save') {\n      this.firstName = this.myForm.get('myFirstName').value;\n    }\n\n    this.showForm = false;\n    this.myForm.patchValue({\n      myFirstName: undefined,\n    });\n  }\n\n  public onInlineFormOpen(): void {\n    this.showForm = true;\n    this.myForm.patchValue({\n      myFirstName: this.firstName,\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\n\nimport {\n  SkyInlineFormButtonLayout,\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n  selector: 'app-inline-form-demo',\n  templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent implements OnInit {\n  public firstName = 'Jane';\n\n  public myForm: FormGroup;\n\n  public inlineFormConfig: SkyInlineFormConfig = {\n    buttonLayout: SkyInlineFormButtonLayout.Custom,\n    buttons: [\n      {\n        action: 'save',\n        text: 'Save',\n        styleType: 'primary',\n      },\n      {\n        action: 'delete',\n        text: 'Delete',\n        styleType: 'default',\n      },\n      {\n        action: 'reset',\n        text: 'Reset',\n        styleType: 'default',\n      },\n      {\n        action: 'cancel',\n        text: 'Cancel',\n        styleType: 'link',\n      },\n    ],\n  };\n\n  public showForm = false;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      myFirstName: new FormControl(),\n    });\n\n    this.myForm.valueChanges.subscribe(() => {\n      if (this.inlineFormConfig.buttons[0].disabled !== this.myForm.invalid) {\n        this.inlineFormConfig.buttons[0].disabled = this.myForm.invalid;\n        this.inlineFormConfig = { ...{}, ...this.inlineFormConfig };\n      }\n    });\n  }\n\n  public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n    if (args.reason === 'save') {\n      this.firstName = this.myForm.get('myFirstName').value;\n    }\n\n    this.showForm = false;\n    this.myForm.patchValue({\n      myFirstName: undefined,\n    });\n  }\n\n  public onInlineFormOpen(): void {\n    this.showForm = true;\n    this.myForm.patchValue({\n      myFirstName: this.firstName,\n    });\n  }\n}\n"
     },
     {
       "fileName": "inline-form-demo.module.ts",
@@ -1086,4 +1117,4 @@
       "rawContents": "import { CommonModule } from '@angular/common';\n\nimport { NgModule } from '@angular/core';\n\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { SkyIdModule } from '@skyux/core';\n\nimport { SkyInputBoxModule } from '@skyux/forms';\n\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { SkyInlineFormModule } from '@skyux/inline-form';\n\nimport { SkyRepeaterModule } from '@skyux/lists';\n\nimport { InlineFormDemoComponent } from './inline-form-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIconModule,\n    SkyIdModule,\n    SkyInlineFormModule,\n    SkyInputBoxModule,\n    SkyRepeaterModule,\n  ],\n  exports: [InlineFormDemoComponent],\n  declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
     }
   ]
-}
+}

package/esm2015/index.js

@@ -0,0 +1,10 @@
+export * from './lib/modules/inline-form/inline-form.module';
+export * from './lib/modules/inline-form/types/inline-form-button-action';
+export * from './lib/modules/inline-form/types/inline-form-button-config';
+export * from './lib/modules/inline-form/types/inline-form-close-args';
+export * from './lib/modules/inline-form/types/inline-form-config';
+export * from './lib/modules/inline-form/types/inline-form-button-layout';
+// Components and directives must be exported to support Angular’s “partial” Ivy compiler.
+// Obscure names are used to indicate types are not part of the public API.
+export { SkyInlineFormComponent as λ1 } from './lib/modules/inline-form/inline-form.component';
+//# sourceMappingURL=index.js.map

package/esm2015/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/inline-form/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC;AAC7D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2DAA2D,CAAC;AAE1E,0FAA0F;AAC1F,2EAA2E;AAC3E,OAAO,EAAE,sBAAsB,IAAI,EAAE,EAAE,MAAM,iDAAiD,CAAC","sourcesContent":["export * from './lib/modules/inline-form/inline-form.module';\nexport * from './lib/modules/inline-form/types/inline-form-button-action';\nexport * from './lib/modules/inline-form/types/inline-form-button-config';\nexport * from './lib/modules/inline-form/types/inline-form-close-args';\nexport * from './lib/modules/inline-form/types/inline-form-config';\nexport * from './lib/modules/inline-form/types/inline-form-button-layout';\n\n// Components and directives must be exported to support Angular’s “partial” Ivy compiler.\n// Obscure names are used to indicate types are not part of the public API.\nexport { SkyInlineFormComponent as λ1 } from './lib/modules/inline-form/inline-form.component';\n"]}

package/esm2015/lib/modules/inline-form/animations/slide-dissolve.js

@@ -0,0 +1,26 @@
+import { animate, group, query, style, transition, trigger, } from '@angular/animations';
+export const skySlideDissolve = trigger('skySlideDissolve', [
+    transition('* <=> *', [
+        // Expand animations
+        query('.sky-slide-dissolve-last:enter', [
+            style({ height: 0, opacity: 0 }),
+            animate('200ms ease-in', style({ height: '*', opacity: 0 })),
+        ], { optional: true }),
+        query('.sky-slide-dissolve-last:enter', [
+            style({ opacity: 0 }),
+            animate('200ms ease-in', style({ opacity: 1 })),
+        ], { optional: true }),
+        // Collapse animations
+        // The expanded content should fade out immediately to prevent
+        // any overlap with the read-only content that's returning to the screen.
+        query('.sky-slide-dissolve-last:leave', [animate('0ms', style({ opacity: 0 }))], { optional: true }),
+        group([
+            query('.sky-slide-dissolve-first:enter', [
+                style({ opacity: 0, height: 0 }),
+                animate('100ms ease-in', style({ opacity: 1, height: '*' })),
+            ], { optional: true }),
+            query('.sky-slide-dissolve-last:leave', [animate('200ms ease-in', style({ height: 0 }))], { optional: true }),
+        ]),
+    ]),
+]);
+//# sourceMappingURL=slide-dissolve.js.map

package/esm2015/lib/modules/inline-form/animations/slide-dissolve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-dissolve.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/inline-form/src/lib/modules/inline-form/animations/slide-dissolve.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EAEP,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,OAAO,GACR,MAAM,qBAAqB,CAAC;AAE7B,MAAM,CAAC,MAAM,gBAAgB,GAA6B,OAAO,CAC/D,kBAAkB,EAClB;IACE,UAAU,CAAC,SAAS,EAAE;QACpB,oBAAoB;QACpB,KAAK,CACH,gCAAgC,EAChC;YACE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;SAC7D,EACD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;QACD,KAAK,CACH,gCAAgC,EAChC;YACE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACrB,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;SAChD,EACD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;QAED,sBAAsB;QACtB,8DAA8D;QAC9D,yEAAyE;QACzE,KAAK,CACH,gCAAgC,EAChC,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EACvC,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;QAED,KAAK,CAAC;YACJ,KAAK,CACH,iCAAiC,EACjC;gBACE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;gBAChC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;aAC7D,EACD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;YACD,KAAK,CACH,gCAAgC,EAChC,CAAC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAChD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;SACF,CAAC;KACH,CAAC;CACH,CACF,CAAC","sourcesContent":["import {\n  animate,\n  AnimationTriggerMetadata,\n  group,\n  query,\n  style,\n  transition,\n  trigger,\n} from '@angular/animations';\n\nexport const skySlideDissolve: AnimationTriggerMetadata = trigger(\n  'skySlideDissolve',\n  [\n    transition('* <=> *', [\n      // Expand animations\n      query(\n        '.sky-slide-dissolve-last:enter',\n        [\n          style({ height: 0, opacity: 0 }),\n          animate('200ms ease-in', style({ height: '*', opacity: 0 })),\n        ],\n        { optional: true }\n      ),\n      query(\n        '.sky-slide-dissolve-last:enter',\n        [\n          style({ opacity: 0 }),\n          animate('200ms ease-in', style({ opacity: 1 })),\n        ],\n        { optional: true }\n      ),\n\n      // Collapse animations\n      // The expanded content should fade out immediately to prevent\n      // any overlap with the read-only content that's returning to the screen.\n      query(\n        '.sky-slide-dissolve-last:leave',\n        [animate('0ms', style({ opacity: 0 }))],\n        { optional: true }\n      ),\n\n      group([\n        query(\n          '.sky-slide-dissolve-first:enter',\n          [\n            style({ opacity: 0, height: 0 }),\n            animate('100ms ease-in', style({ opacity: 1, height: '*' })),\n          ],\n          { optional: true }\n        ),\n        query(\n          '.sky-slide-dissolve-last:leave',\n          [animate('200ms ease-in', style({ height: 0 }))],\n          { optional: true }\n        ),\n      ]),\n    ]),\n  ]\n);\n"]}

package/esm2015/lib/modules/inline-form/inline-form-adapter.service.js

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+/* tslint:disable */
+const SKY_TABBABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    "input:not([disabled]):not([tabindex='-1'])",
+    "button:not([disabled]):not([tabindex='-1'])",
+    "select:not([disabled]):not([tabindex='-1'])",
+    "textarea:not([disabled]):not([tabindex='-1'])",
+    'iframe',
+    'object',
+    'embed',
+    "*[tabindex]:not([tabindex='-1'])",
+    '*[contenteditable=true]',
+].join(', ');
+/* tslint:enable */
+/**
+ * @internal
+ */
+export class SkyInlineFormAdapterService {
+    applyAutofocus(inlineFormElementRef) {
+        const inputWithAutofocus = inlineFormElementRef.nativeElement.querySelector('[autofocus]');
+        if (inputWithAutofocus) {
+            inputWithAutofocus.focus();
+        }
+        else {
+            let focusEl = inlineFormElementRef.nativeElement.querySelector('.sky-inline-form-content');
+            let focusableChildren = this.loadFocusableChildren(focusEl);
+            this.focusFirstElement(focusableChildren);
+        }
+    }
+    loadFocusableChildren(elem) {
+        const elements = Array.prototype.slice.call(elem.querySelectorAll(SKY_TABBABLE_SELECTOR));
+        return elements.filter((element) => {
+            return this.isVisible(element);
+        });
+    }
+    isVisible(element) {
+        const style = window.getComputedStyle(element);
+        const isHidden = style.display === 'none' || style.visibility === 'hidden';
+        if (isHidden) {
+            return false;
+        }
+        /* istanbul ignore next */
+        const hasBounds = !!(element.offsetWidth ||
+            element.offsetHeight ||
+            element.getClientRects().length);
+        return hasBounds;
+    }
+    focusFirstElement(list) {
+        if (list.length > 0) {
+            list[0].focus();
+        }
+    }
+}
+SkyInlineFormAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyInlineFormAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormAdapterService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=inline-form-adapter.service.js.map

package/esm2015/lib/modules/inline-form/inline-form-adapter.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-form-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/inline-form/src/lib/modules/inline-form/inline-form-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,eAAe,CAAC;;AAEvD,oBAAoB;AACpB,MAAM,qBAAqB,GAAG;IAC5B,SAAS;IACT,YAAY;IACZ,4CAA4C;IAC5C,6CAA6C;IAC7C,6CAA6C;IAC7C,+CAA+C;IAC/C,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,kCAAkC;IAClC,yBAAyB;CAC1B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACb,mBAAmB;AAEnB;;GAEG;AAEH,MAAM,OAAO,2BAA2B;IAC/B,cAAc,CAAC,oBAAgC;QACpD,MAAM,kBAAkB,GACtB,oBAAoB,CAAC,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAElE,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,CAAC,KAAK,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,OAAO,GACT,oBAAoB,CAAC,aAAa,CAAC,aAAa,CAC9C,0BAA0B,CAC3B,CAAC;YACJ,IAAI,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAE5D,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;SAC3C;IACH,CAAC;IAEO,qBAAqB,CAAC,IAAiB;QAC7C,MAAM,QAAQ,GAAuB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAC7D,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAC7C,CAAC;QAEF,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;YACjC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,SAAS,CAAC,OAAoB;QACpC,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC;QAC3E,IAAI,QAAQ,EAAE;YACZ,OAAO,KAAK,CAAC;SACd;QAED,0BAA0B;QAC1B,MAAM,SAAS,GAAG,CAAC,CAAC,CAClB,OAAO,CAAC,WAAW;YACnB,OAAO,CAAC,YAAY;YACpB,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,CAChC,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IAEO,iBAAiB,CAAC,IAAwB;QAChD,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SACjB;IACH,CAAC;;yHAhDU,2BAA2B;6HAA3B,2BAA2B;4FAA3B,2BAA2B;kBADvC,UAAU","sourcesContent":["import { ElementRef, Injectable } from '@angular/core';\n\n/* tslint:disable */\nconst SKY_TABBABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  \"input:not([disabled]):not([tabindex='-1'])\",\n  \"button:not([disabled]):not([tabindex='-1'])\",\n  \"select:not([disabled]):not([tabindex='-1'])\",\n  \"textarea:not([disabled]):not([tabindex='-1'])\",\n  'iframe',\n  'object',\n  'embed',\n  \"*[tabindex]:not([tabindex='-1'])\",\n  '*[contenteditable=true]',\n].join(', ');\n/* tslint:enable */\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyInlineFormAdapterService {\n  public applyAutofocus(inlineFormElementRef: ElementRef): void {\n    const inputWithAutofocus =\n      inlineFormElementRef.nativeElement.querySelector('[autofocus]');\n\n    if (inputWithAutofocus) {\n      inputWithAutofocus.focus();\n    } else {\n      let focusEl: HTMLElement =\n        inlineFormElementRef.nativeElement.querySelector(\n          '.sky-inline-form-content'\n        );\n      let focusableChildren = this.loadFocusableChildren(focusEl);\n\n      this.focusFirstElement(focusableChildren);\n    }\n  }\n\n  private loadFocusableChildren(elem: HTMLElement): HTMLElement[] {\n    const elements: Array<HTMLElement> = Array.prototype.slice.call(\n      elem.querySelectorAll(SKY_TABBABLE_SELECTOR)\n    );\n\n    return elements.filter((element) => {\n      return this.isVisible(element);\n    });\n  }\n\n  private isVisible(element: HTMLElement): boolean {\n    const style = window.getComputedStyle(element);\n    const isHidden = style.display === 'none' || style.visibility === 'hidden';\n    if (isHidden) {\n      return false;\n    }\n\n    /* istanbul ignore next */\n    const hasBounds = !!(\n      element.offsetWidth ||\n      element.offsetHeight ||\n      element.getClientRects().length\n    );\n    return hasBounds;\n  }\n\n  private focusFirstElement(list: Array<HTMLElement>): void {\n    if (list.length > 0) {\n      list[0].focus();\n    }\n  }\n}\n"]}

package/esm2015/lib/modules/inline-form/inline-form.component.js

@@ -0,0 +1,227 @@
+import { ChangeDetectorRef, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, } from '@angular/core';
+import { SkyAppWindowRef } from '@skyux/core';
+import { SkyLibResourcesService } from '@skyux/i18n';
+import { zip as observableZip } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { skySlideDissolve } from './animations/slide-dissolve';
+import { SkyInlineFormButtonLayout } from './types/inline-form-button-layout';
+import { SkyInlineFormAdapterService } from './inline-form-adapter.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./inline-form-adapter.service";
+import * as i2 from "@skyux/i18n";
+import * as i3 from "@skyux/core";
+import * as i4 from "@angular/common";
+/**
+ * Renders form content in the current view instead of a separate modal.
+ */
+export class SkyInlineFormComponent {
+    constructor(adapter, elementRef, resourcesService, skyAppWindowRef, changeDetectorRef) {
+        this.adapter = adapter;
+        this.elementRef = elementRef;
+        this.resourcesService = resourcesService;
+        this.skyAppWindowRef = skyAppWindowRef;
+        this.changeDetectorRef = changeDetectorRef;
+        /**
+         * Fires when users close the inline form.
+         */
+        this.close = new EventEmitter();
+        this._showForm = false;
+    }
+    /**
+     * Specifies configuration options for the buttons to display with the inline form.
+     * @required
+     */
+    set config(value) {
+        if (value !== this._config) {
+            this._config = value;
+            this.setupButtons();
+        }
+    }
+    get config() {
+        return this._config;
+    }
+    /**
+     * Indicates whether to display the inline form. Users can toggle between displaying
+     * and hiding the inline form.
+     * @default false
+     */
+    set showForm(value) {
+        this._showForm = value;
+        /* istanbul ignore else */
+        if (value) {
+            // setTimeout() prevents applyAutofocus() from firing
+            // until after *ngIf has added the form element to the DOM.
+            this.skyAppWindowRef.nativeWindow.setTimeout(() => {
+                this.adapter.applyAutofocus(this.elementRef);
+            });
+        }
+    }
+    get showForm() {
+        return this._showForm;
+    }
+    ngOnInit() {
+        this.setupButtons();
+    }
+    ngOnDestroy() {
+        this.close.complete();
+    }
+    closeInlineForm(event) {
+        const args = {
+            reason: event.action,
+        };
+        this.close.emit(args);
+    }
+    setupButtons() {
+        if (this.isValidCustomConfig(this.config)) {
+            this.buttons = this.getCustomButtons(this.config.buttons);
+            this.changeDetectorRef.markForCheck();
+            return;
+        }
+        this.getPresetButtons().then((buttons) => {
+            this.buttons = buttons;
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    getPresetButtons() {
+        let buttonType = this.config
+            ? this.config.buttonLayout
+            : SkyInlineFormButtonLayout.DoneCancel;
+        let promise;
+        switch (buttonType) {
+            /* istanbul ignore next */
+            default:
+            case SkyInlineFormButtonLayout.DoneCancel:
+                observableZip(this.resourcesService.getString('skyux_inline_form_button_done'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
+                    .pipe(take(1))
+                    .subscribe((values) => {
+                    promise = new Promise((resolve) => {
+                        resolve([
+                            {
+                                text: values[0],
+                                styleType: 'primary',
+                                action: 'done',
+                            },
+                            {
+                                text: values[1],
+                                styleType: 'link',
+                                action: 'cancel',
+                            },
+                        ]);
+                    });
+                });
+                break;
+            case SkyInlineFormButtonLayout.SaveCancel:
+                observableZip(this.resourcesService.getString('skyux_inline_form_button_save'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
+                    .pipe(take(1))
+                    .subscribe((values) => {
+                    promise = new Promise((resolve) => {
+                        resolve([
+                            {
+                                text: values[0],
+                                styleType: 'primary',
+                                action: 'save',
+                            },
+                            {
+                                text: values[1],
+                                styleType: 'link',
+                                action: 'cancel',
+                            },
+                        ]);
+                    });
+                });
+                break;
+            case SkyInlineFormButtonLayout.DoneDeleteCancel:
+                observableZip(this.resourcesService.getString('skyux_inline_form_button_done'), this.resourcesService.getString('skyux_inline_form_button_delete'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
+                    .pipe(take(1))
+                    .subscribe((values) => {
+                    promise = new Promise((resolve) => {
+                        resolve([
+                            {
+                                text: values[0],
+                                styleType: 'primary',
+                                action: 'done',
+                            },
+                            {
+                                text: values[1],
+                                styleType: 'default',
+                                action: 'delete',
+                            },
+                            {
+                                text: values[2],
+                                styleType: 'link',
+                                action: 'cancel',
+                            },
+                        ]);
+                    });
+                });
+                break;
+            case SkyInlineFormButtonLayout.SaveDeleteCancel:
+                observableZip(this.resourcesService.getString('skyux_inline_form_button_save'), this.resourcesService.getString('skyux_inline_form_button_delete'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
+                    .pipe(take(1))
+                    .subscribe((values) => {
+                    promise = new Promise((resolve) => {
+                        resolve([
+                            {
+                                text: values[0],
+                                styleType: 'primary',
+                                action: 'save',
+                            },
+                            {
+                                text: values[1],
+                                styleType: 'default',
+                                action: 'delete',
+                            },
+                            {
+                                text: values[2],
+                                styleType: 'link',
+                                action: 'cancel',
+                            },
+                        ]);
+                    });
+                });
+                break;
+        }
+        return promise;
+    }
+    getCustomButtons(buttonConfigs) {
+        const buttons = [];
+        buttonConfigs.forEach((config) => {
+            /* istanbul ignore next */
+            const styleType = config.styleType || 'default';
+            buttons.push({
+                action: config.action,
+                disabled: config.disabled,
+                styleType: styleType,
+                text: config.text,
+            });
+        });
+        return buttons;
+    }
+    isValidCustomConfig(config) {
+        return (config &&
+            config.buttonLayout === SkyInlineFormButtonLayout.Custom &&
+            config.buttons.length > 0);
+    }
+}
+SkyInlineFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormComponent, deps: [{ token: i1.SkyInlineFormAdapterService }, { token: i0.ElementRef }, { token: i2.SkyLibResourcesService }, { token: i3.SkyAppWindowRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyInlineFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInlineFormComponent, selector: "sky-inline-form", inputs: { config: "config", template: "template", showForm: "showForm" }, outputs: { close: "close" }, providers: [SkyInlineFormAdapterService], ngImport: i0, template: "<div [@skySlideDissolve]=\"showForm\">\n  <div *ngIf=\"!showForm\" class=\"sky-slide-dissolve-first\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"template && showForm\" class=\"sky-slide-dissolve-last\">\n    <div class=\"sky-inline-form sky-shadow sky-box sky-elevation-3\">\n      <div class=\"sky-inline-form-content\">\n        <ng-container [ngTemplateOutlet]=\"template\"> </ng-container>\n      </div>\n      <div class=\"sky-inline-form-footer\">\n        <button\n          *ngFor=\"let button of buttons\"\n          class=\"sky-btn {{ 'sky-btn-' + button.styleType }}\"\n          type=\"button\"\n          [disabled]=\"button.disabled ? true : null\"\n          [ngClass]=\"{ 'sky-btn-disabled': button.disabled }\"\n          (click)=\"closeInlineForm(button)\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-form{background:#eeeeef;border:1px solid #cdcfd2;padding:10px;width:100%}.sky-inline-form .sky-inline-form-footer{margin-top:20px}.sky-inline-form .sky-inline-form-footer button{margin:0 5px 0 0}:host-context(.sky-theme-modern) .sky-inline-form{background-color:#fff;border:none;padding:15px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer{margin-top:30px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer button{margin-right:10px}.sky-theme-modern .sky-inline-form{background-color:#fff;border:none;padding:15px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer{margin-top:30px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer button{margin-right:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-inline-form{background-color:#232427}.sky-theme-modern.sky-theme-mode-dark .sky-inline-form{background-color:#232427}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [skySlideDissolve], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-inline-form',
+                    templateUrl: './inline-form.component.html',
+                    styleUrls: ['./inline-form.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [SkyInlineFormAdapterService],
+                    animations: [skySlideDissolve],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyInlineFormAdapterService }, { type: i0.ElementRef }, { type: i2.SkyLibResourcesService }, { type: i3.SkyAppWindowRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], showForm: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=inline-form.component.js.map