@ifsworld/granite-components 4.0.0-beta.5 → 4.0.0-beta.8

package/bundles/ifsworld-granite-components.umd.js

@@ -2845,7 +2845,7 @@
                         '[class.granite-checkbox-readonly]': 'readonly',
                         '[class.granite-checkbox-label-before]': '_positionBefore',
                     },
-                    template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n",
+                    template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"checkbox\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{-webkit-animation:fadeInAnimation .2s;animation:fadeInAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{-webkit-animation:fadeOutAnimation .2s;animation:fadeOutAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *,:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-checkbox-box{width:var(--granite-spacing-m);height:var(--granite-spacing-m);border:solid var(--granite-color-background-inactive);border-width:calc(var(--granite-spacing-xs) / 4);border-radius:var(--granite-spacing-xs);display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:calc(var(--granite-spacing-xs) / 4) solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:calc(var(--granite-spacing-s) + (var(--granite-spacing-xs) / 4));height:calc(var(--granite-spacing-xs) + (var(--granite-spacing-xs) / 4));background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-left-width:calc(var(--granite-spacing-xs) / 2);border-bottom-width:calc(var(--granite-spacing-xs) / 2);border-right-width:0;border-top-width:0}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@-webkit-keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}"]
                 },] }
@@ -3064,9 +3064,9 @@
     GraniteTableComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'granite-table',
-                    template: "<cdk-table\n  [dataSource]=\"dataSource\"\n  multiTemplateDataRows\n  [trackBy]=\"trackBy\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ng-container\n    *ngFor=\"let column of columns; index as columnI\"\n    [cdkColumnDef]=\"column.name\"\n  >\n    <!-- Cell Header -->\n    <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n      {{ (column.title ? column.title : column.name) | graniteTitle }}\n    </cdk-header-cell>\n\n    <!-- Cell Data -->\n    <cdk-cell\n      graniteTableDataCell\n      *cdkCellDef=\"let element; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"element[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n    ></cdk-cell>\n  </ng-container>\n\n  <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n  <cdk-row\n    *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n    [attr.aria-rowindex]=\"rowI + 1\"\n  ></cdk-row>\n</cdk-table>\n",
+                    template: "<cdk-table\n  [dataSource]=\"dataSource\"\n  multiTemplateDataRows\n  [trackBy]=\"trackBy\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ng-container\n    *ngFor=\"let column of columns; index as columnI\"\n    [cdkColumnDef]=\"column.name\"\n  >\n    <!-- Cell Header -->\n    <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n      {{ (column.title ? column.title : column.name) | graniteTitle }}\n    </cdk-header-cell>\n\n    <!-- Cell Data -->\n    <cdk-cell\n      graniteTableDataCell\n      *cdkCellDef=\"let row; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"row[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n      [row]=\"row\"\n    ></cdk-cell>\n  </ng-container>\n\n  <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n  <cdk-row\n    *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n    [attr.aria-rowindex]=\"rowI + 1\"\n  ></cdk-row>\n</cdk-table>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1}cdk-cell{height:calc(var(--granite-spacing-m) * 2.5);border-top:1px solid var(--granite-color-border-soft)}"]
+                    styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1;height:calc(var(--granite-spacing-m) * 2.5)}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]
                 },] }
     ];
     GraniteTableComponent.propDecorators = {
@@ -3100,8 +3100,8 @@
         { type: core.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'cdk-cell[graniteTableDataCell]',
-                    template: "<span class=\"granite-table-data-cell-static-container\">\n  <ng-template\n    [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n    [ngTemplateOutletContext]=\"{\n      data: value,\n      rowIndex: rowIndex,\n      columnIndex: columnIndex,\n      column: column\n    }\"\n  ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n  <ng-container [ngSwitch]=\"staticType\">\n    <ng-container *ngSwitchCase=\"'badge'\">\n      <granite-badge>{{ value }}</granite-badge>\n    </ng-container>\n    <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n  </ng-container>\n</ng-template>\n",
-                    styles: [".granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:var(--granite-spacing-l);font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]
+                    template: "<span class=\"granite-table-data-cell-static-container\">\n  <ng-template\n    [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n    [ngTemplateOutletContext]=\"{\n      data: value,\n      rowIndex: rowIndex,\n      columnIndex: columnIndex,\n      column: column,\n      row: row\n    }\"\n  ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n  <ng-container [ngSwitch]=\"staticType\">\n    <ng-container *ngSwitchCase=\"'badge'\">\n      <granite-badge>{{ value }}</granite-badge>\n    </ng-container>\n    <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n  </ng-container>\n</ng-template>\n",
+                    styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]
                 },] }
     ];
     GraniteTableDataCellComponent.propDecorators = {
@@ -3109,7 +3109,8 @@
         staticType: [{ type: core.Input }],
         rowIndex: [{ type: core.Input }],
         columnIndex: [{ type: core.Input }],
-        tableCellTemplateRef: [{ type: core.Input }]
+        tableCellTemplateRef: [{ type: core.Input }],
+        row: [{ type: core.Input }]
     };
 
     var GraniteTableHeaderCellComponent = /** @class */ (function (_super) {
@@ -3124,7 +3125,7 @@
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'cdk-header-cell[graniteTableHeaderCell]',
                     template: "<span class=\"granite-table-header-cell-title\">\n  <ng-content></ng-content>\n</span>\n",
-                    styles: [".granite-table-header-cell-title{padding:var(--granite-spacing-s);height:var(--granite-spacing-l);font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]
+                    styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]
                 },] }
     ];
 
@@ -3199,8 +3200,8 @@
             this._empty = false;
             this._passwordFieldIcon = 'view';
             this._passwordField = false;
-            this._passwordToggled = false;
             this._currentCharCount = 0;
+            this._passwordToggled = false;
         }
         GraniteInputFieldComponent.prototype.ngOnInit = function () {
             this._validateType();