@ifsworld/granite-components 4.0.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/bundles/ifsworld-granite-components.umd.js +109 -25
  2. package/bundles/ifsworld-granite-components.umd.js.map +1 -1
  3. package/bundles/ifsworld-granite-components.umd.min.js +2 -2
  4. package/bundles/ifsworld-granite-components.umd.min.js.map +1 -1
  5. package/esm2015/index.js +2 -0
  6. package/esm2015/index.js.map +1 -1
  7. package/esm2015/index.metadata.json +1 -1
  8. package/esm2015/lib/button/button.component.js +21 -6
  9. package/esm2015/lib/button/button.component.js.map +1 -1
  10. package/esm2015/lib/button/button.component.metadata.json +1 -1
  11. package/esm2015/lib/checkbox/checkbox-group.component.js +19 -0
  12. package/esm2015/lib/checkbox/checkbox-group.component.js.map +1 -0
  13. package/esm2015/lib/checkbox/checkbox-group.component.metadata.json +1 -0
  14. package/esm2015/lib/checkbox/checkbox.component.js +1 -1
  15. package/esm2015/lib/checkbox/checkbox.component.metadata.json +1 -1
  16. package/esm2015/lib/checkbox/checkbox.module.js +3 -2
  17. package/esm2015/lib/checkbox/checkbox.module.js.map +1 -1
  18. package/esm2015/lib/checkbox/checkbox.module.metadata.json +1 -1
  19. package/esm2015/lib/menu/menu-item.component.js +9 -3
  20. package/esm2015/lib/menu/menu-item.component.js.map +1 -1
  21. package/esm2015/lib/menu/menu-item.component.metadata.json +1 -1
  22. package/esm2015/lib/menu/menu-touch-close.component.js +1 -1
  23. package/esm2015/lib/menu/menu-touch-close.component.metadata.json +1 -1
  24. package/esm2015/lib/menu/menu-touch-title.component.js +9 -3
  25. package/esm2015/lib/menu/menu-touch-title.component.js.map +1 -1
  26. package/esm2015/lib/menu/menu-touch-title.component.metadata.json +1 -1
  27. package/esm2015/lib/menu/menu-trigger-for.directive.js +15 -4
  28. package/esm2015/lib/menu/menu-trigger-for.directive.js.map +1 -1
  29. package/esm2015/lib/menu/menu-trigger-for.directive.metadata.json +1 -1
  30. package/esm2015/lib/menu/menu.component.js +23 -5
  31. package/esm2015/lib/menu/menu.component.js.map +1 -1
  32. package/esm2015/lib/menu/menu.component.metadata.json +1 -1
  33. package/esm2015/lib/menu/menu.module.js +3 -0
  34. package/esm2015/lib/menu/menu.module.js.map +1 -1
  35. package/esm2015/lib/menu/menu.module.metadata.json +1 -1
  36. package/esm2015/lib/menu/title.directive.js +13 -0
  37. package/esm2015/lib/menu/title.directive.js.map +1 -0
  38. package/esm2015/lib/menu/title.directive.metadata.json +1 -0
  39. package/esm2015/lib/radio-button/radio-group.component.js +2 -2
  40. package/esm2015/lib/radio-button/radio-group.component.js.map +1 -1
  41. package/esm2015/lib/radio-button/radio-group.component.metadata.json +1 -1
  42. package/fesm2015/ifsworld-granite-components.js +112 -26
  43. package/fesm2015/ifsworld-granite-components.js.map +1 -1
  44. package/ifsworld-granite-components.metadata.json +1 -1
  45. package/index.d.ts +2 -0
  46. package/lib/button/button.component.d.ts +8 -0
  47. package/lib/checkbox/checkbox-group.component.d.ts +3 -0
  48. package/lib/menu/menu-trigger-for.directive.d.ts +1 -0
  49. package/lib/menu/menu.component.d.ts +6 -2
  50. package/lib/menu/title.directive.d.ts +2 -0
  51. package/package.json +3 -1
  52. package/src/lib/core/style/_mixins.scss +13 -0
  53. package/src/lib/core/style/_tokens.scss +2 -0
@@ -914,7 +914,7 @@
914
914
  { type: core.Component, args: [{
915
915
  // eslint-disable-next-line @angular-eslint/component-selector
916
916
  selector: '[graniteMenuItem]',
917
- template: "<ng-content></ng-content>\n <ng-container *ngIf=\"_triggersSubmenu\">\n <granite-icon class=\"caret-left\">caret-left</granite-icon>\n <granite-icon class=\"caret-right\">caret-right</granite-icon>\n </ng-container>",
917
+ template: "<ng-content></ng-content>\n <ng-container *ngIf=\"_triggersSubmenu\">\n <granite-icon\n class=\"caret-left\"\n [fontIcon]=\"'icon-caret-left'\"\n ></granite-icon>\n <granite-icon\n class=\"caret-right\"\n [fontIcon]=\"'icon-caret-right'\"\n ></granite-icon>\n </ng-container>",
918
918
  exportAs: 'graniteMenuItem',
919
919
  host: {
920
920
  '[attr.role]': 'role',
@@ -926,7 +926,7 @@
926
926
  //#endregion --- Touch device customizations ---
927
927
  '(mouseenter)': '_hovered.next(this)',
928
928
  },
929
- styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
929
+ styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
930
930
  },] }
931
931
  ];
932
932
  GraniteMenuItemComponent.ctorParameters = function () { return [
@@ -1173,6 +1173,7 @@
1173
1173
  var _MenuBaseComponent = /** @class */ (function () {
1174
1174
  function _MenuBaseComponent(_changeDetectorRef) {
1175
1175
  this._changeDetectorRef = _changeDetectorRef;
1176
+ this.openOnHover = true;
1176
1177
  /**
1177
1178
  * Event emitted when the menu is closed
1178
1179
  */
@@ -1194,6 +1195,15 @@
1194
1195
  /** Emits whenever an animation on the menu completes. */
1195
1196
  // eslint-disable-next-line rxjs/no-exposed-subjects
1196
1197
  this._animationDone = new rxjs.Subject();
1198
+ this._menuEmpty$ = new rxjs.BehaviorSubject(false);
1199
+ // eslint-disable-next-line @typescript-eslint/member-ordering
1200
+ this._isMenuEmpty$ = rxjs.combineLatest([
1201
+ this._menuEmpty$,
1202
+ this._animationDone,
1203
+ ]).pipe(operators.filter(function (_b) {
1204
+ var _c = __read(_b, 2), m = _c[0], a = _c[1];
1205
+ return m && a != null;
1206
+ }), operators.map(function () { return true; }));
1197
1207
  /** Only the direct descendant menu items. */
1198
1208
  this._directDescendantItems = new core.QueryList();
1199
1209
  /** Subscription to tab events on the menu panel */
@@ -1245,10 +1255,20 @@
1245
1255
  enumerable: false,
1246
1256
  configurable: true
1247
1257
  });
1258
+ _MenuBaseComponent.prototype.ngAfterContentChecked = function () {
1259
+ this._menuEmpty$.next(this._allItems.length < 1 ? true : false);
1260
+ };
1248
1261
  _MenuBaseComponent.prototype.ngAfterContentInit = function () {
1249
1262
  var _this = this;
1250
1263
  this._updateDirectDescendants();
1251
- this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems).withWrap();
1264
+ this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems)
1265
+ .withWrap()
1266
+ .skipPredicate(function (menuItem) {
1267
+ var hostElement = menuItem._getHostElement();
1268
+ return hostElement instanceof HTMLButtonElement
1269
+ ? hostElement.disabled
1270
+ : hostElement.hasAttribute('graniteTitle');
1271
+ });
1252
1272
  this._tabSubscription = this._keyManager.tabOut.subscribe(function () {
1253
1273
  _this.closed.emit('tab');
1254
1274
  });
@@ -1486,6 +1506,7 @@
1486
1506
  yPosition: [{ type: core.Input }],
1487
1507
  title: [{ type: core.Input }],
1488
1508
  closeLabel: [{ type: core.Input }],
1509
+ openOnHover: [{ type: core.Input }],
1489
1510
  templateRef: [{ type: core.ViewChild, args: [core.TemplateRef,] }],
1490
1511
  _allItems: [{ type: core.ContentChildren, args: [GraniteMenuItemComponent, { descendants: true },] }],
1491
1512
  closed: [{ type: core.Output }]
@@ -1500,7 +1521,7 @@
1500
1521
  GraniteMenuComponent.decorators = [
1501
1522
  { type: core.Component, args: [{
1502
1523
  selector: 'granite-menu',
1503
- template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick()\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n",
1524
+ template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick()\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n",
1504
1525
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1505
1526
  exportAs: 'graniteMenu',
1506
1527
  animations: [
@@ -1511,7 +1532,7 @@
1511
1532
  providers: [
1512
1533
  { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
1513
1534
  ],
1514
- styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:.25rem;-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - ($granite-base-rem * 7))}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:.25rem;-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
1535
+ styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem;max-height:calc(100% - ($granite-base-rem * 7))}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-xs)}.granite-menu.granite-device-output-touch.close{-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-xs)}.close:not(:empty).close{-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}"]
1515
1536
  },] }
1516
1537
  ];
1517
1538
 
@@ -1687,7 +1708,9 @@
1687
1708
  }
1688
1709
  };
1689
1710
  GraniteMenuTriggerForDirective.prototype.ngAfterContentInit = function () {
1690
- this._checkMenu();
1711
+ // removed checkMenu here to avoid errors in dynamically genarated menus
1712
+ // menu is checked when opening the menu
1713
+ // this._checkMenu();
1691
1714
  this._handleHover();
1692
1715
  };
1693
1716
  GraniteMenuTriggerForDirective.prototype.ngOnDestroy = function () {
@@ -1744,6 +1767,9 @@
1744
1767
  });
1745
1768
  }
1746
1769
  };
1770
+ GraniteMenuTriggerForDirective.prototype.isOpen = function () {
1771
+ return this._isMenuOpen;
1772
+ };
1747
1773
  /** Open the associated menu */
1748
1774
  GraniteMenuTriggerForDirective.prototype.openMenu = function () {
1749
1775
  var _this = this;
@@ -2057,7 +2083,10 @@
2057
2083
  */
2058
2084
  GraniteMenuTriggerForDirective.prototype._openOnHover = function () {
2059
2085
  var _a, _b;
2060
- return (((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' && ((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse')));
2086
+ return ((this.triggersSubmenu()
2087
+ ? this._parentMenu.openOnHover
2088
+ : this.menu.openOnHover) &&
2089
+ ((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' && ((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse')));
2061
2090
  };
2062
2091
  /**
2063
2092
  * Whether to toggle submenus on click. This is true when showing desktop menus
@@ -2065,8 +2094,11 @@
2065
2094
  */
2066
2095
  GraniteMenuTriggerForDirective.prototype._toggleOnSubmenuClick = function () {
2067
2096
  var _a, _b;
2068
- return (((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' &&
2069
- !((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse')));
2097
+ return (!(this.triggersSubmenu()
2098
+ ? this._parentMenu.openOnHover
2099
+ : this.menu.openOnHover) ||
2100
+ (((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' &&
2101
+ !((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse'))));
2070
2102
  };
2071
2103
  // ------------------------------------------- //
2072
2104
  // --- Here be touch device customizations --- //
@@ -2213,7 +2245,7 @@
2213
2245
  host: {
2214
2246
  '[class.granite-device-output-touch]': 'true',
2215
2247
  },
2216
- styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
2248
+ styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
2217
2249
  },] }
2218
2250
  ];
2219
2251
 
@@ -2234,14 +2266,14 @@
2234
2266
  { type: core.Component, args: [{
2235
2267
  // eslint-disable-next-line @angular-eslint/component-selector
2236
2268
  selector: '[graniteMenuTouchTitleItem]',
2237
- template: "\n <ng-container *ngIf=\"_triggersBack\">\n <granite-icon class=\"caret-left\">caret-left</granite-icon>\n <granite-icon class=\"caret-right\">caret-right</granite-icon>\n </ng-container>\n <ng-content></ng-content>\n ",
2269
+ template: "\n <ng-container *ngIf=\"_triggersBack\">\n <granite-icon\n class=\"caret-left\"\n [fontIcon]=\"'icon-caret-left'\"\n ></granite-icon>\n <granite-icon\n class=\"caret-right\"\n [fontIcon]=\"'icon-caret-right'\"\n ></granite-icon>\n </ng-container>\n <ng-content></ng-content>\n ",
2238
2270
  exportAs: 'graniteMenuTouchTitleItem',
2239
2271
  host: {
2240
2272
  '[class.granite-menu-item-title]': 'true',
2241
2273
  '[class.granite-menu-item-back-trigger]': '_triggersBack',
2242
2274
  '[class.granite-device-output-touch]': 'true',
2243
2275
  },
2244
- styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
2276
+ styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
2245
2277
  },] }
2246
2278
  ];
2247
2279
  GraniteMenuTouchTitleItemComponent.ctorParameters = function () { return [
@@ -2328,6 +2360,21 @@
2328
2360
  },] }
2329
2361
  ];
2330
2362
 
2363
+ var GraniteTitleDirective = /** @class */ (function () {
2364
+ function GraniteTitleDirective() {
2365
+ }
2366
+ return GraniteTitleDirective;
2367
+ }());
2368
+ GraniteTitleDirective.decorators = [
2369
+ { type: core.Directive, args: [{
2370
+ selector: '[graniteTitle]',
2371
+ exportAs: 'graniteTitle',
2372
+ host: {
2373
+ '[class.granite-title]': 'true',
2374
+ },
2375
+ },] }
2376
+ ];
2377
+
2331
2378
  var GraniteMenuModule = /** @class */ (function () {
2332
2379
  function GraniteMenuModule() {
2333
2380
  }
@@ -2342,6 +2389,7 @@
2342
2389
  GraniteMenuTouchCloseComponent,
2343
2390
  GraniteMenuTouchTitleItemComponent,
2344
2391
  GraniteDividerDirective,
2392
+ GraniteTitleDirective,
2345
2393
  ],
2346
2394
  imports: [common.CommonModule, overlay.OverlayModule, portal.PortalModule, GraniteIconModule],
2347
2395
  exports: [
@@ -2351,6 +2399,7 @@
2351
2399
  GraniteMenuTouchCloseComponent,
2352
2400
  GraniteMenuTouchTitleItemComponent,
2353
2401
  GraniteDividerDirective,
2402
+ GraniteTitleDirective,
2354
2403
  ],
2355
2404
  },] }
2356
2405
  ];
@@ -2806,11 +2855,11 @@
2806
2855
  class: 'granite-radio-group',
2807
2856
  '[attr.role]': '"radiogroup"',
2808
2857
  '[attr.aria-labelledby]': 'ariaLabelledby',
2809
- '[class.granite-radio-group-layout-horizontal]': 'layout === "horizontal"',
2858
+ '[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
2810
2859
  },
2811
2860
  template: "<ng-content></ng-content>\n",
2812
2861
  changeDetection: core.ChangeDetectionStrategy.OnPush,
2813
- styles: [":host(.granite-radio-group-layout-horizontal){display:flex;align-items:flex-start}"]
2862
+ styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
2814
2863
  },] }
2815
2864
  ];
2816
2865
 
@@ -2894,7 +2943,7 @@
2894
2943
  },
2895
2944
  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",
2896
2945
  changeDetection: core.ChangeDetectionStrategy.OnPush,
2897
- 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:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.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}}"]
2946
+ 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;-webkit-margin-end:var(--granite-spacing-xl);margin-inline-end:var(--granite-spacing-xl)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.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}}"]
2898
2947
  },] }
2899
2948
  ];
2900
2949
  GraniteCheckboxComponent.ctorParameters = function () { return [
@@ -2914,6 +2963,28 @@
2914
2963
  _inputElement: [{ type: core.ViewChild, args: ['input',] }]
2915
2964
  };
2916
2965
 
2966
+ var GraniteCheckboxGroupComponent = /** @class */ (function (_super) {
2967
+ __extends(GraniteCheckboxGroupComponent, _super);
2968
+ function GraniteCheckboxGroupComponent() {
2969
+ return _super !== null && _super.apply(this, arguments) || this;
2970
+ }
2971
+ return GraniteCheckboxGroupComponent;
2972
+ }(GraniteRadioCheckboxBase));
2973
+ GraniteCheckboxGroupComponent.decorators = [
2974
+ { type: core.Component, args: [{
2975
+ selector: 'granite-checkbox-group',
2976
+ host: {
2977
+ class: 'granite-checkbox-group',
2978
+ '[attr.role]': '"group"',
2979
+ '[attr.aria-labelledby]': 'ariaLabelledby',
2980
+ '[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
2981
+ },
2982
+ template: "<ng-content></ng-content>\n",
2983
+ changeDetection: core.ChangeDetectionStrategy.OnPush,
2984
+ styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
2985
+ },] }
2986
+ ];
2987
+
2917
2988
  var GraniteCheckboxModule = /** @class */ (function () {
2918
2989
  function GraniteCheckboxModule() {
2919
2990
  }
@@ -2921,8 +2992,8 @@
2921
2992
  }());
2922
2993
  GraniteCheckboxModule.decorators = [
2923
2994
  { type: core.NgModule, args: [{
2924
- declarations: [GraniteCheckboxComponent],
2925
- exports: [GraniteCheckboxComponent],
2995
+ declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
2996
+ exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
2926
2997
  },] }
2927
2998
  ];
2928
2999
 
@@ -2955,12 +3026,12 @@
2955
3026
  return Derived;
2956
3027
  };
2957
3028
 
2958
- var ButtonSelectors;
2959
3029
  (function (ButtonSelectors) {
2960
3030
  ButtonSelectors["graniteButton"] = "granite-button";
2961
3031
  ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
2962
3032
  ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
2963
- })(ButtonSelectors || (ButtonSelectors = {}));
3033
+ ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
3034
+ })(exports.ButtonSelectors || (exports.ButtonSelectors = {}));
2964
3035
  var ButtonComponentMixin = disabledMixin();
2965
3036
  var GraniteButtonComponent = /** @class */ (function (_super) {
2966
3037
  __extends(GraniteButtonComponent, _super);
@@ -2969,11 +3040,13 @@
2969
3040
  var _this = _super.call(this) || this;
2970
3041
  _this._focusMonitor = _focusMonitor;
2971
3042
  _this._elementRef = _elementRef;
3043
+ _this.toggled = false;
3044
+ _this._buttonToggled = false;
2972
3045
  try {
2973
- for (var _b = __values(Object.keys(ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
3046
+ for (var _b = __values(Object.keys(exports.ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
2974
3047
  var selector = _c.value;
2975
3048
  if (_this._getHostElement().hasAttribute(selector)) {
2976
- _this._getHostElement().classList.add(ButtonSelectors[selector]);
3049
+ _this._getHostElement().classList.add(exports.ButtonSelectors[selector]);
2977
3050
  }
2978
3051
  }
2979
3052
  }
@@ -2988,6 +3061,11 @@
2988
3061
  }
2989
3062
  GraniteButtonComponent.prototype.ngOnChanges = function (changes) {
2990
3063
  _super.prototype.ngOnChanges.call(this, changes);
3064
+ if (changes.toggled &&
3065
+ (this._getHostElement().classList.contains(exports.ButtonSelectors.graniteFlatButton) ||
3066
+ this._getHostElement().classList.contains(exports.ButtonSelectors.graniteToolbarButton))) {
3067
+ this._buttonToggled = coercion.coerceBooleanProperty(changes.toggled.currentValue);
3068
+ }
2991
3069
  };
2992
3070
  GraniteButtonComponent.prototype.focus = function (origin, options) {
2993
3071
  if (origin === void 0) { origin = 'program'; }
@@ -3001,23 +3079,27 @@
3001
3079
  GraniteButtonComponent.decorators = [
3002
3080
  { type: core.Component, args: [{
3003
3081
  // eslint-disable-next-line @angular-eslint/component-selector
3004
- selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton]\n ",
3082
+ selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ",
3005
3083
  host: {
3006
3084
  class: 'granite-button-base',
3007
3085
  '[class.granite-button-disabled]': 'disabled',
3086
+ '[class.granite-button-toggled]': '_buttonToggled',
3008
3087
  '[attr.disabled]': 'disabled || null',
3009
3088
  },
3010
3089
  exportAs: 'graniteButton',
3011
3090
  template: '<ng-content></ng-content>',
3012
3091
  inputs: ['disabled'],
3013
3092
  changeDetection: core.ChangeDetectionStrategy.OnPush,
3014
- styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]
3093
+ styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]
3015
3094
  },] }
3016
3095
  ];
3017
3096
  GraniteButtonComponent.ctorParameters = function () { return [
3018
3097
  { type: a11y.FocusMonitor },
3019
3098
  { type: core.ElementRef }
3020
3099
  ]; };
3100
+ GraniteButtonComponent.propDecorators = {
3101
+ toggled: [{ type: core.Input }]
3102
+ };
3021
3103
  var GraniteAnchorComponent = /** @class */ (function (_super) {
3022
3104
  __extends(GraniteAnchorComponent, _super);
3023
3105
  function GraniteAnchorComponent(_focusMonitor, _elementRef) {
@@ -3039,7 +3121,7 @@
3039
3121
  GraniteAnchorComponent.decorators = [
3040
3122
  { type: core.Component, args: [{
3041
3123
  // eslint-disable-next-line @angular-eslint/component-selector
3042
- selector: 'a[graniteButton]',
3124
+ selector: "a[graniteButton],\n a[graniteFlatButton]",
3043
3125
  host: {
3044
3126
  class: 'granite-button-base',
3045
3127
  '[attr.tabindex]': 'disabled ? -1 : 0',
@@ -3049,7 +3131,7 @@
3049
3131
  template: '<ng-content></ng-content>',
3050
3132
  inputs: ['disabled'],
3051
3133
  changeDetection: core.ChangeDetectionStrategy.OnPush,
3052
- styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]
3134
+ styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]
3053
3135
  },] }
3054
3136
  ];
3055
3137
  GraniteAnchorComponent.ctorParameters = function () { return [
@@ -3516,6 +3598,7 @@
3516
3598
  exports.GraniteButtonComponent = GraniteButtonComponent;
3517
3599
  exports.GraniteButtonModule = GraniteButtonModule;
3518
3600
  exports.GraniteCheckboxComponent = GraniteCheckboxComponent;
3601
+ exports.GraniteCheckboxGroupComponent = GraniteCheckboxGroupComponent;
3519
3602
  exports.GraniteCheckboxModule = GraniteCheckboxModule;
3520
3603
  exports.GraniteCoreModule = GraniteCoreModule;
3521
3604
  exports.GraniteDividerDirective = GraniteDividerDirective;
@@ -3540,6 +3623,7 @@
3540
3623
  exports.GraniteTableColumnDirective = GraniteTableColumnDirective;
3541
3624
  exports.GraniteTableComponent = GraniteTableComponent;
3542
3625
  exports.GraniteTableModule = GraniteTableModule;
3626
+ exports.GraniteTitleDirective = GraniteTitleDirective;
3543
3627
  exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
3544
3628
  exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
3545
3629
  exports._MenuBaseComponent = _MenuBaseComponent;