@skyux/modals 6.18.0 → 6.19.0

package/documentation.json

@@ -2456,12 +2456,18 @@
               "isOptional": true
             },
             "comment": {
-              "shortText": "Indicates whether to place focus on this button by default."
+              "shortText": "Indicates whether to place focus on this button by default.",
+              "tags": [
+                {
+                  "tag": "deprecated",
+                  "text": "The confirm component automatically focuses the first interactive\nelement of the dialog.\n"
+                }
+              ]
             },
             "sources": [
               {
                 "fileName": "projects/modals/src/modules/confirm/confirm-button-config.ts",
-                "line": 21,
+                "line": 23,
                 "character": 2
               }
             ],
@@ -3008,12 +3014,12 @@
     {
       "fileName": "confirm-demo.component.html",
       "filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.component.html",
-      "rawContents": "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openCustomConfirm()\"\n>\n  Custom confirm\n</button>\n\n<p *ngIf=\"selectedAction && selectedText\">\n  You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n    selectedAction\n  }}.\"\n</p>\n<p *ngIf=\"selectedAction && !selectedText\">\n  You selected the \"{{ selectedAction }}\" action.\n</p>\n"
+      "rawContents": "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-default\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-default\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-default\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-default\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n<p *ngIf=\"selectedAction && selectedText\">\n  You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n    selectedAction\n  }}.\"\n</p>\n<p *ngIf=\"selectedAction && !selectedText\">\n  You selected the \"{{ selectedAction }}\" action.\n</p>\n"
     },
     {
       "fileName": "confirm-demo.component.ts",
       "filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport {\n  SkyConfirmButtonConfig,\n  SkyConfirmInstance,\n  SkyConfirmService,\n  SkyConfirmType,\n} from '@skyux/modals';\n\n@Component({\n  selector: 'app-confirm-demo',\n  templateUrl: './confirm-demo.component.html',\n})\nexport class ConfirmDemoComponent {\n  public selectedAction: string | undefined;\n\n  public selectedText: string | undefined;\n\n  #confirmSvc: SkyConfirmService;\n\n  constructor(confirmSvc: SkyConfirmService) {\n    this.#confirmSvc = confirmSvc;\n  }\n\n  public openOKConfirm(): void {\n    const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n      message:\n        'Use the OK button type for information that does not require user action.',\n      type: SkyConfirmType.OK,\n    });\n\n    dialog.closed.subscribe((result) => {\n      this.selectedText = undefined;\n      this.selectedAction = result.action;\n    });\n  }\n\n  public openCustomConfirm(): void {\n    const buttons: SkyConfirmButtonConfig[] = [\n      { text: 'Save', action: 'save', styleType: 'primary' },\n      { text: 'Delete', action: 'delete' },\n      { text: 'Cancel', action: 'cancel', styleType: 'link' },\n    ];\n\n    const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n      message: 'Use the Custom button type to define your own buttons.',\n      body: 'Labels should clearly indicate the action occurs when users select the button.',\n      type: SkyConfirmType.Custom,\n      buttons,\n    });\n\n    dialog.closed.subscribe((result) => {\n      this.selectedAction = result.action;\n\n      for (const button of buttons) {\n        if (button.action === result.action) {\n          this.selectedText = button.text;\n          break;\n        }\n      }\n    });\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\nimport {\n  SkyConfirmButtonConfig,\n  SkyConfirmInstance,\n  SkyConfirmService,\n  SkyConfirmType,\n} from '@skyux/modals';\n\n@Component({\n  selector: 'app-confirm-demo',\n  templateUrl: './confirm-demo.component.html',\n})\nexport class ConfirmDemoComponent {\n  public selectedAction: string | undefined;\n\n  public selectedText: string | undefined;\n\n  #confirmSvc: SkyConfirmService;\n\n  constructor(confirmSvc: SkyConfirmService) {\n    this.#confirmSvc = confirmSvc;\n  }\n\n  public openOKConfirm(): void {\n    const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n      message:\n        'Cannot delete invoice because it has vendor, credit memo, or purchase order activity.',\n      type: SkyConfirmType.OK,\n    });\n\n    dialog.closed.subscribe((result) => {\n      this.selectedText = undefined;\n      this.selectedAction = result.action;\n    });\n  }\n\n  public openTwoActionConfirm() {\n    const buttons: SkyConfirmButtonConfig[] = [\n      { text: 'Finalize', action: 'save', styleType: 'primary' },\n      { text: 'Cancel', action: 'cancel', styleType: 'link' },\n    ];\n\n    const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n      message: 'Finalize report cards?',\n      body: 'Grades cannot be changed once the report cards are finalized.',\n      type: SkyConfirmType.Custom,\n      buttons,\n    });\n\n    dialog.closed.subscribe((result) => {\n      this.selectedAction = result.action;\n\n      for (const button of buttons) {\n        if (button.action === result.action) {\n          this.selectedText = button.text;\n          break;\n        }\n      }\n    });\n  }\n\n  public openThreeActionConfirm() {\n    const buttons: SkyConfirmButtonConfig[] = [\n      { text: 'Save', action: 'save', styleType: 'primary' },\n      { text: 'Delete', action: 'delete' },\n      { text: 'Keep working', action: 'cancel', styleType: 'link' },\n    ];\n\n    const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n      message: 'Save your changes before leaving?',\n      type: SkyConfirmType.Custom,\n      buttons,\n    });\n\n    dialog.closed.subscribe((result) => {\n      this.selectedAction = result.action;\n\n      for (const button of buttons) {\n        if (button.action === result.action) {\n          this.selectedText = button.text;\n          break;\n        }\n      }\n    });\n  }\n\n  public openDeleteConfirm() {\n    const buttons: SkyConfirmButtonConfig[] = [\n      { text: 'Delete', action: 'delete', styleType: 'danger' },\n      { text: 'Cancel', action: 'cancel', styleType: 'link' },\n    ];\n\n    const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n      message: 'Delete this account?',\n      body: 'Deleting this account may affect processes that are currently running.',\n      type: SkyConfirmType.Custom,\n      buttons,\n    });\n\n    dialog.closed.subscribe((result) => {\n      this.selectedAction = result.action;\n\n      for (const button of buttons) {\n        if (button.action === result.action) {\n          this.selectedText = button.text;\n          break;\n        }\n      }\n    });\n  }\n}\n"
     },
     {
       "fileName": "confirm-demo.module.ts",

package/esm2020/lib/modules/confirm/confirm-button-config.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlybS1idXR0b24tY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL21vZGFscy9zcmMvbGliL21vZHVsZXMvY29uZmlybS9jb25maXJtLWJ1dHRvbi1jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgU2t5Q29uZmlybUJ1dHRvbkNvbmZpZyB7XG4gIC8qKlxuICAgKiBTcGVjaWZpZXMgYW4gaWRlbnRpZmllciB0byByZXR1cm4gd2hlbiB1c2VycyBzZWxlY3QgdGhlIGJ1dHRvbiB0byBjbG9zZSB0aGVcbiAgICogZGlhbG9nLiBUaGlzIGlzIHVzZWZ1bCB0byBkZXRlcm1pbmUgd2hpY2ggYnV0dG9uIHVzZXJzIHNlbGVjdC5cbiAgICovXG4gIGFjdGlvbjogc3RyaW5nO1xuICAvKipcbiAgICogU3BlY2lmaWVzIHRoZSBsYWJlbCBmb3IgdGhlIGJ1dHRvbi5cbiAgICovXG4gIHRleHQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFNwZWNpZmllcyBhIHN0eWxlIHRvIGFwcGx5IHRvIHRoZSBidXR0b24uIFRoZSB2YWxpZCBvcHRpb25zIGFyZSBgcHJpbWFyeWAgZm9yXG4gICAqIHRoZSBidXR0b24gdGhhdCB0cmlnZ2VycyB0aGUgcmVjb21tZW5kZWQgb3IgbW9zdC1jb21tb24gYWN0aW9uLCBgZGVmYXVsdGAgZm9yXG4gICAqIGJ1dHRvbnMgdGhhdCB0cmlnZ2VyIGxlc3MtY29tbW9uIGFjdGlvbnMsIGFuZCBgbGlua2AgZm9yIGEgYnV0dG9uIHRoYXRcbiAgICogY2xvc2VzIHRoZSBkaWFsb2cuXG4gICAqL1xuICBzdHlsZVR5cGU/OiAncHJpbWFyeScgfCAnZGVmYXVsdCcgfCAnbGluaycgfCBzdHJpbmc7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0byBwbGFjZSBmb2N1cyBvbiB0aGlzIGJ1dHRvbiBieSBkZWZhdWx0LlxuICAgKi9cbiAgYXV0b2ZvY3VzPzogYm9vbGVhbjtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlybS1idXR0b24tY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL21vZGFscy9zcmMvbGliL21vZHVsZXMvY29uZmlybS9jb25maXJtLWJ1dHRvbi1jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgU2t5Q29uZmlybUJ1dHRvbkNvbmZpZyB7XG4gIC8qKlxuICAgKiBTcGVjaWZpZXMgYW4gaWRlbnRpZmllciB0byByZXR1cm4gd2hlbiB1c2VycyBzZWxlY3QgdGhlIGJ1dHRvbiB0byBjbG9zZSB0aGVcbiAgICogZGlhbG9nLiBUaGlzIGlzIHVzZWZ1bCB0byBkZXRlcm1pbmUgd2hpY2ggYnV0dG9uIHVzZXJzIHNlbGVjdC5cbiAgICovXG4gIGFjdGlvbjogc3RyaW5nO1xuICAvKipcbiAgICogU3BlY2lmaWVzIHRoZSBsYWJlbCBmb3IgdGhlIGJ1dHRvbi5cbiAgICovXG4gIHRleHQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFNwZWNpZmllcyBhIHN0eWxlIHRvIGFwcGx5IHRvIHRoZSBidXR0b24uIFRoZSB2YWxpZCBvcHRpb25zIGFyZSBgcHJpbWFyeWAgZm9yXG4gICAqIHRoZSBidXR0b24gdGhhdCB0cmlnZ2VycyB0aGUgcmVjb21tZW5kZWQgb3IgbW9zdC1jb21tb24gYWN0aW9uLCBgZGVmYXVsdGAgZm9yXG4gICAqIGJ1dHRvbnMgdGhhdCB0cmlnZ2VyIGxlc3MtY29tbW9uIGFjdGlvbnMsIGFuZCBgbGlua2AgZm9yIGEgYnV0dG9uIHRoYXRcbiAgICogY2xvc2VzIHRoZSBkaWFsb2cuXG4gICAqL1xuICBzdHlsZVR5cGU/OiAncHJpbWFyeScgfCAnZGVmYXVsdCcgfCAnbGluaycgfCBzdHJpbmc7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0byBwbGFjZSBmb2N1cyBvbiB0aGlzIGJ1dHRvbiBieSBkZWZhdWx0LlxuICAgKiBAZGVwcmVjYXRlZCBUaGUgY29uZmlybSBjb21wb25lbnQgYXV0b21hdGljYWxseSBmb2N1c2VzIHRoZSBmaXJzdCBpbnRlcmFjdGl2ZVxuICAgKiBlbGVtZW50IG9mIHRoZSBkaWFsb2cuXG4gICAqL1xuICBhdXRvZm9jdXM/OiBib29sZWFuO1xufVxuIl19

package/lib/modules/confirm/confirm-button-config.d.ts

@@ -17,6 +17,8 @@ export interface SkyConfirmButtonConfig {
     styleType?: 'primary' | 'default' | 'link' | string;
     /**
      * Indicates whether to place focus on this button by default.
+     * @deprecated The confirm component automatically focuses the first interactive
+     * element of the dialog.
      */
     autofocus?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/modals",
-  "version": "6.18.0",
+  "version": "6.19.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -43,10 +43,10 @@
     "@angular/common": "^13.3.2",
     "@angular/core": "^13.3.2",
     "@angular/router": "^13.3.2",
-    "@skyux/core": "6.18.0",
-    "@skyux/i18n": "6.18.0",
-    "@skyux/indicators": "6.18.0",
-    "@skyux/theme": "6.18.0"
+    "@skyux/core": "6.19.0",
+    "@skyux/i18n": "6.19.0",
+    "@skyux/indicators": "6.19.0",
+    "@skyux/theme": "6.19.0"
   },
   "dependencies": {
     "tslib": "^2.3.1"