fix(core) Do not use static string bindings for boolean values (#3236)

apps/docs/src/app/core/component-docs/dialog/examples/component-based/dialog-example.component.ts

@@ -21,9 +21,9 @@ import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        compact="true"
                         fdType="emphasized"
                         fd-dialog-decisive-button
+                        [compact]="true"
                         (click)="this.dialogRef.close('Continue')"
                     >
                         Interesting
@@ -33,10 +33,10 @@ import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        compact="true"
                         fdType="transparent"
                         fd-dialog-decisive-button
                         fd-initial-focus
+                        [compact]="true"
                         (click)="this.dialogRef.dismiss('Cancel')"
                     >
                         Cancel

apps/docs/src/app/core/component-docs/dialog/examples/dialog-backdrop-container/dialog-backdrop-container-example.component.html

@@ -27,10 +27,10 @@ <h1 fd-dialog-title>Backdrop Configuration</h1>
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    compact="true"
                     fd-initial-focus
                     fdType="emphasized"
                     fd-dialog-decisive-button
+                    [compact]="true"
                     (click)="dialog.close()"
                 >
                     Close

apps/docs/src/app/core/component-docs/dialog/examples/dialog-complex/dialog-complex-example.component.html

@@ -21,11 +21,11 @@ <h1 fd-dialog-title>Fresh Market</h1>
                     <fd-bar-element fullWidth="true">
                         <fd-input-group
                             fd-initial-focus
-                            button="true"
-                            compact="true"
                             glyph="search"
                             placement="after"
                             placeholder="Search"
+                            [button]="true"
+                            [compact]="true"
                             [(ngModel)]="searchedPhrase"
                         >
                         </fd-input-group>
@@ -60,7 +60,7 @@ <h1 fd-dialog-title>Fresh Market</h1>
                             fd-dialog-decisive-button
                             glyph="cart"
                             fdType="emphasized"
-                            compact="true"
+                            [compact]="true"
                             (click)="checkout()"
                         >
                             Checkout

apps/docs/src/app/core/component-docs/dialog/examples/dialog-configuration/dialog-configuration-example.component.html

@@ -16,10 +16,10 @@ <h1 fd-dialog-title>Origin of the Pineapple Word</h1>
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    compact="true"
                     fdType="emphasized"
                     fd-initial-focus
                     fd-dialog-decisive-button
+                    [compact]="true"
                     (click)="dialog.close()"
                 >
                     Interesting

apps/docs/src/app/core/component-docs/dialog/examples/dialog-object-example/dialog-object-example.component.html

@@ -13,8 +13,8 @@
     <div fd-bar-middle>
         <fd-bar-element [fullWidth]="true">
             <fd-input-group glyph="menu"
-                            button="true"
-                            compact="true">
+                            [button]="true"
+                            [compact]="true">
             </fd-input-group>
         </fd-bar-element>
     </div>

apps/docs/src/app/core/component-docs/dialog/examples/dialog-position/dialog-position-example.component.html

@@ -14,10 +14,10 @@ <h1 fd-dialog-title>More Facts about the Pineapple</h1>
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    compact="true"
                     fdType="emphasized"
                     fd-initial-focus
                     fd-dialog-decisive-button
+                    [compact]="true"
                     (click)="dialog.close()"
                 >
                     Interesting

apps/docs/src/app/core/component-docs/dialog/examples/dialog-state/dialog-state-example.component.html

@@ -12,10 +12,10 @@ <h1 fd-dialog-title>Dialog states</h1>
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    compact="true"
                     fdType="emphasized"
                     fd-initial-focus
                     fd-dialog-decisive-button
+                    [compact]="true"
                     (click)="dialog.close()">
                     Ok
                 </button>

apps/docs/src/app/core/component-docs/dialog/examples/stacked-dialogs/first-dialog-example.component.ts

@@ -19,10 +19,10 @@ import { SecondDialogExampleComponent } from './second-dialog-example.component'
                 <fd-dialog-footer-button>
                     <button
                         fd-button
-                        compact="true"
                         fdType="emphasized"
                         fd-initial-focus
                         fd-dialog-decisive-button
+                        [compact]="true"
                         (click)="openDialog()"
                     >
                         Open Second Dialog

apps/docs/src/app/core/component-docs/dialog/examples/template-based/template-based-dialog-example.component.html

@@ -13,9 +13,9 @@ <h1 fd-dialog-title>The History of Pineapple</h1>
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    compact="true"
                     fdType="emphasized"
                     fd-dialog-decisive-button
+                    [compact]="true"
                     (click)="dialog.close('Continue')">
                     Interested
                 </button>
@@ -24,10 +24,10 @@ <h1 fd-dialog-title>The History of Pineapple</h1>
             <fd-dialog-footer-button>
                 <button
                     fd-button
-                    compact="true"
                     fdType="transparent"
                     fd-initial-focus
                     fd-dialog-decisive-button
+                    [compact]="true"
                     (click)="dialog.dismiss('Cancel')">
                     Cancel
                 </button>

apps/docs/src/app/core/component-docs/input-group/examples/input-group-button-example.component.html

@@ -1,19 +1,19 @@
 <div fd-form-item>
     <label fd-form-label>Left Aligned Icon Button Add-on</label>
-    <fd-input-group button="true"
-                    placement="before"
+    <fd-input-group placement="before"
                     glyph="accelerated"
-                    placeholder="Amount">
+                    placeholder="Amount"
+                    [button]="true">
     </fd-input-group>
 </div>
 
 <br/>
 
 <div fd-form-item>
     <label fd-form-label>Right Aligned Text Button Add-on</label>
-    <fd-input-group button="true"
-                    placement="after"
+    <fd-input-group placement="after"
                     addOnText="Submit"
-                    placeholder="Amount">
+                    placeholder="Amount"
+                    [button]="true">
     </fd-input-group>
 </div>

apps/docs/src/app/core/component-docs/input-group/examples/input-group-form-example/input-group-form-example.component.html

@@ -3,9 +3,9 @@
         <div fd-form-item>
             <label fd-form-label>Search Input</label>
             <fd-input-group glyph="decline"
-                            button="true"
                             placeholder="Search"
-                            formControlName="searchQuery">
+                            formControlName="searchQuery"
+                            [button]="true">
             </fd-input-group>
         </div>
         <small>Search Query Entered: {{ customForm.controls.searchQuery.value }}</small>

apps/docs/src/app/core/component-docs/input-group/examples/input-group-search-example/input-group-search-example.component.html

@@ -1,9 +1,9 @@
 <div fd-form-item>
     <label fd-form-label>Search input</label>
     <fd-input-group
-        button="true"
         glyph="decline"
         placeholder="Search"
+        [button]="true"
         [disabled]="false"
         [(ngModel)]="searchTerm"
         (addOnButtonClicked)="searchTerm = ''"
@@ -17,10 +17,10 @@
 <div fd-form-item>
     <label fd-form-label>Search input with search type</label>
     <fd-input-group
-        button="true"
         type="search"
         glyph="search"
         placeholder="Search"
+        [button]="true"
         [disabled]="false"
         [(ngModel)]="searchTermSecond"
     >

apps/docs/src/app/core/component-docs/input-group/examples/input-group-states-example.component.html

@@ -2,10 +2,10 @@
     <label fd-form-label>Information</label>
     <fd-form-input-message-group>
         <fd-input-group
-            button="true"
             addOnText="Button"
             state="information"
             placeholder="Placeholder"
+            [button]="true"
         ></fd-input-group>
         <fd-form-message type="information">
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
@@ -19,10 +19,10 @@
     <label fd-form-label>Success</label>
     <fd-form-input-message-group>
         <fd-input-group
-            button="true"
             state="success"
             addOnText="Button"
             placeholder="Placeholder"
+            [button]="true"
         ></fd-input-group>
         <fd-form-message type="success">
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
@@ -36,10 +36,10 @@
     <label fd-form-label>Warning</label>
     <fd-form-input-message-group>
         <fd-input-group
-            button="true"
             state="warning"
             addOnText="Button"
             placeholder="Placeholder"
+            [button]="true"
         ></fd-input-group>
         <fd-form-message type="warning">
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
@@ -53,10 +53,10 @@
     <label fd-form-label>Error</label>
     <fd-form-input-message-group>
         <fd-input-group
-            button="true"
             state="error"
             addOnText="Button"
             placeholder="Placeholder"
+            [button]="true"
         ></fd-input-group>
         <fd-form-message type="error">
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc

apps/docs/src/app/core/component-docs/input-group/examples/input-group-text-compact-example.component.html

@@ -1,9 +1,9 @@
 <div fd-form-item>
     <label fd-form-label>Compact size</label>
     <fd-input-group addOnText="$"
-                    compact="true"
                     placement="before"
-                    placeholder="Amount">
+                    placeholder="Amount"
+                    [compact]="true">
     </fd-input-group>
 </div>
 
@@ -12,9 +12,9 @@
 <div fd-form-item>
     <label fd-form-label>Compact size button</label>
     <fd-input-group glyph="cart"
-                    button="true"
-                    compact="true"
                     placement="after"
-                    placeholder="Amount">
+                    placeholder="Amount"
+                    [compact]="true"
+                    [button]="true">
     </fd-input-group>
 </div>

apps/docs/src/app/core/component-docs/list/examples/list-data-example/list-data-example.component.html

@@ -4,10 +4,10 @@
     </label>
     <fd-toolbar-spacer></fd-toolbar-spacer>
     <fd-input-group
-        button="true"
-        compact="true"
         glyph="decline"
         placeholder="Search"
+        [button]="true"
+        [compact]="true"
         [disabled]="false"
         [(ngModel)]="searchTerm"
         (ngModelChange)="handleSearchTermChange($event)"

libs/core/src/lib/dialog/dialog.component.html

@@ -2,7 +2,6 @@
     #dialogWindow
     role="dialog"
     tabindex="-1"
-    attr.aria-modal="true"
     fdResize
     fdResizeBoundary=".fd-dialog"
     cdkDrag
@@ -25,6 +24,7 @@
     [fdResizeDisabled]="!dialogConfig.resizable"
     [@dialog-fade]
     [attr.id]="dialogConfig.id"
+    [attr.aria-modal]="true"
     [attr.aria-label]="dialogConfig.ariaLabel"
     [attr.aria-labelledby]="dialogConfig.ariaLabelledBy"
     [attr.aria-describedby]="dialogConfig.ariaDescribedBy"

libs/core/src/lib/shellbar/product-menu/product-menu.component.html

@@ -1,9 +1,9 @@
 <ng-template [ngIf]="items?.length > 0" [ngIfElse]="subHeader">
 
     <button fd-button
-            fdMenu="true"
             fdType="transparent"
             class="fd-shellbar__button--menu"
+            [fdMenu]="true"
             [disabled]="disabled"
             [fdMenuTrigger]="menu">
         <span class="fd-shellbar__title">{{ control }}</span>