npm - @ifsworld/granite-components - Versions diffs - 4.0.0-beta.10 → 4.0.0-beta.13 - Mend

@ifsworld/granite-components 4.0.0-beta.10 → 4.0.0-beta.13

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 (45) hide show

package/esm2015/lib/menu/menu.module.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { GraniteMenuTouchCloseComponent } from './menu-touch-close.component';
 import { GraniteMenuTouchTitleItemComponent } from './menu-touch-title.component';
 import { GraniteDividerDirective } from './divider.directive';
 import { GraniteIconModule } from '../icon/icon.module';
+import { GraniteTitleDirective } from './title.directive';
 export class GraniteMenuModule {
 }
 GraniteMenuModule.decorators = [
@@ -20,6 +21,7 @@ GraniteMenuModule.decorators = [
                     GraniteMenuTouchCloseComponent,
                     GraniteMenuTouchTitleItemComponent,
                     GraniteDividerDirective,
+                    GraniteTitleDirective,
                 ],
                 imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule],
                 exports: [
@@ -29,6 +31,7 @@ GraniteMenuModule.decorators = [
                     GraniteMenuTouchCloseComponent,
                     GraniteMenuTouchTitleItemComponent,
                     GraniteDividerDirective,
+                    GraniteTitleDirective,
                 ],
             },] }
 ];

package/esm2015/lib/menu/menu.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu.module.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/menu/menu.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;~~AAqBxD~~,MAAM,OAAO,iBAAiB;;;~~YAnB7B~~,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;oBACpB,wBAAwB;oBACxB,8BAA8B;oBAC9B,8BAA8B;oBAC9B,kCAAkC;oBAClC,uBAAuB;~~iBACxB~~;gBACD,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,CAAC;gBACvE,OAAO,EAAE;oBACP,oBAAoB;oBACpB,wBAAwB;oBACxB,8BAA8B;oBAC9B,8BAA8B;oBAC9B,kCAAkC;oBAClC,uBAAuB;~~iBACxB~~;aACF","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { PortalModule } from '@angular/cdk/portal';\n\nimport { GraniteMenuComponent } from './menu.component';\nimport { GraniteMenuItemComponent } from './menu-item.component';\nimport { GraniteMenuTriggerForDirective } from './menu-trigger-for.directive';\nimport { GraniteMenuTouchCloseComponent } from './menu-touch-close.component';\nimport { GraniteMenuTouchTitleItemComponent } from './menu-touch-title.component';\nimport { GraniteDividerDirective } from './divider.directive';\nimport { GraniteIconModule } from '../icon/icon.module';\n\n@NgModule({\n declarations: [\n GraniteMenuComponent,\n GraniteMenuItemComponent,\n GraniteMenuTriggerForDirective,\n GraniteMenuTouchCloseComponent,\n GraniteMenuTouchTitleItemComponent,\n GraniteDividerDirective,\n ],\n imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule],\n exports: [\n GraniteMenuComponent,\n GraniteMenuItemComponent,\n GraniteMenuTriggerForDirective,\n GraniteMenuTouchCloseComponent,\n GraniteMenuTouchTitleItemComponent,\n GraniteDividerDirective,\n ],\n})\nexport class GraniteMenuModule {}\n"]}
1	+ {"version":3,"file":"menu.module.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/menu/menu.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAuB1D,MAAM,OAAO,iBAAiB;;;YArB7B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;oBACpB,wBAAwB;oBACxB,8BAA8B;oBAC9B,8BAA8B;oBAC9B,kCAAkC;oBAClC,uBAAuB;oBACvB,qBAAqB;iBACtB;gBACD,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,CAAC;gBACvE,OAAO,EAAE;oBACP,oBAAoB;oBACpB,wBAAwB;oBACxB,8BAA8B;oBAC9B,8BAA8B;oBAC9B,kCAAkC;oBAClC,uBAAuB;oBACvB,qBAAqB;iBACtB;aACF","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { PortalModule } from '@angular/cdk/portal';\n\nimport { GraniteMenuComponent } from './menu.component';\nimport { GraniteMenuItemComponent } from './menu-item.component';\nimport { GraniteMenuTriggerForDirective } from './menu-trigger-for.directive';\nimport { GraniteMenuTouchCloseComponent } from './menu-touch-close.component';\nimport { GraniteMenuTouchTitleItemComponent } from './menu-touch-title.component';\nimport { GraniteDividerDirective } from './divider.directive';\nimport { GraniteIconModule } from '../icon/icon.module';\nimport { GraniteTitleDirective } from './title.directive';\n\n@NgModule({\n declarations: [\n GraniteMenuComponent,\n GraniteMenuItemComponent,\n GraniteMenuTriggerForDirective,\n GraniteMenuTouchCloseComponent,\n GraniteMenuTouchTitleItemComponent,\n GraniteDividerDirective,\n GraniteTitleDirective,\n ],\n imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule],\n exports: [\n GraniteMenuComponent,\n GraniteMenuItemComponent,\n GraniteMenuTriggerForDirective,\n GraniteMenuTouchCloseComponent,\n GraniteMenuTouchTitleItemComponent,\n GraniteDividerDirective,\n GraniteTitleDirective,\n ],\n})\nexport class GraniteMenuModule {}\n"]}

package/esm2015/lib/menu/menu.module.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"GraniteMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./menu.component","name":"GraniteMenuComponent","line":16,"character":4},{"__symbolic":"reference","module":"./menu-item.component","name":"GraniteMenuItemComponent","line":17,"character":4},{"__symbolic":"reference","module":"./menu-trigger-for.directive","name":"GraniteMenuTriggerForDirective","line":18,"character":4},{"__symbolic":"reference","module":"./menu-touch-close.component","name":"GraniteMenuTouchCloseComponent","line":19,"character":4},{"__symbolic":"reference","module":"./menu-touch-title.component","name":"GraniteMenuTouchTitleItemComponent","line":20,"character":4},{"__symbolic":"reference","module":"./divider.directive","name":"GraniteDividerDirective","line":21,"character":4}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":23,"character":26},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":23,"character":41},{"__symbolic":"reference","module":"../icon/icon.module","name":"GraniteIconModule","line":23,"character":55}],"exports":[{"__symbolic":"reference","module":"./menu.component","name":"GraniteMenuComponent","line":25,"character":4},{"__symbolic":"reference","module":"./menu-item.component","name":"GraniteMenuItemComponent","line":26,"character":4},{"__symbolic":"reference","module":"./menu-trigger-for.directive","name":"GraniteMenuTriggerForDirective","line":27,"character":4},{"__symbolic":"reference","module":"./menu-touch-close.component","name":"GraniteMenuTouchCloseComponent","line":28,"character":4},{"__symbolic":"reference","module":"./menu-touch-title.component","name":"GraniteMenuTouchTitleItemComponent","line":29,"character":4},{"__symbolic":"reference","module":"./divider.directive","name":"GraniteDividerDirective","line":30,"character":4}]}]}]}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"GraniteMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./menu.component","name":"GraniteMenuComponent","line":17,"character":4},{"__symbolic":"reference","module":"./menu-item.component","name":"GraniteMenuItemComponent","line":18,"character":4},{"__symbolic":"reference","module":"./menu-trigger-for.directive","name":"GraniteMenuTriggerForDirective","line":19,"character":4},{"__symbolic":"reference","module":"./menu-touch-close.component","name":"GraniteMenuTouchCloseComponent","line":20,"character":4},{"__symbolic":"reference","module":"./menu-touch-title.component","name":"GraniteMenuTouchTitleItemComponent","line":21,"character":4},{"__symbolic":"reference","module":"./divider.directive","name":"GraniteDividerDirective","line":22,"character":4},{"__symbolic":"reference","module":"./title.directive","name":"GraniteTitleDirective","line":23,"character":4}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":25,"character":26},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":25,"character":41},{"__symbolic":"reference","module":"../icon/icon.module","name":"GraniteIconModule","line":25,"character":55}],"exports":[{"__symbolic":"reference","module":"./menu.component","name":"GraniteMenuComponent","line":27,"character":4},{"__symbolic":"reference","module":"./menu-item.component","name":"GraniteMenuItemComponent","line":28,"character":4},{"__symbolic":"reference","module":"./menu-trigger-for.directive","name":"GraniteMenuTriggerForDirective","line":29,"character":4},{"__symbolic":"reference","module":"./menu-touch-close.component","name":"GraniteMenuTouchCloseComponent","line":30,"character":4},{"__symbolic":"reference","module":"./menu-touch-title.component","name":"GraniteMenuTouchTitleItemComponent","line":31,"character":4},{"__symbolic":"reference","module":"./divider.directive","name":"GraniteDividerDirective","line":32,"character":4},{"__symbolic":"reference","module":"./title.directive","name":"GraniteTitleDirective","line":33,"character":4}]}]}]}}}]

package/esm2015/lib/menu/title.directive.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+export class GraniteTitleDirective {
+}
+GraniteTitleDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[graniteTitle]',
+                exportAs: 'graniteTitle',
+                host: {
+                    '[class.granite-title]': 'true',
+                },
+            },] }
+];
+//# sourceMappingURL=title.directive.js.map

package/esm2015/lib/menu/title.directive.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"title.directive.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/menu/title.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAS1C,MAAM,OAAO,qBAAqB;;;YAPjC,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,QAAQ,EAAE,cAAc;gBACxB,IAAI,EAAE;oBACJ,uBAAuB,EAAE,MAAM;iBAChC;aACF","sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[graniteTitle]',\n exportAs: 'graniteTitle',\n host: {\n '[class.granite-title]': 'true',\n },\n})\nexport class GraniteTitleDirective {}\n"]}

package/esm2015/lib/menu/title.directive.metadata.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ [{"__symbolic":"module","version":4,"metadata":{"GraniteTitleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[graniteTitle]","exportAs":"graniteTitle","host":{"[class.granite-title]":"true","$quoted$":["[class.granite-title]"]}}]}]}}}]

package/esm2015/lib/toggle-switch/toggle-switch.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-switch.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/toggle-switch/toggle-switch.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAe,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,MAAM,EAGN,YAAY,EACZ,UAAU,EACV,SAAS,GACV,MAAM,eAAe,CAAC;AAkBvB,MAAM,OAAO,4BAA4B;IAqCvC,YAAoB,aAA2B;QAA3B,kBAAa,GAAb,aAAa,CAAc;QAnC/C,OAAE,GAAkB,IAAI,CAAC;QAGzB,YAAO,GAAY,KAAK,CAAC;QAGzB,aAAQ,GAAY,KAAK,CAAC;QAG1B,aAAQ,GAAY,KAAK,CAAC;QAG1B,kBAAa,GAAa,OAAO,CAAC;QAGlC,cAAS,GAAkB,IAAI,CAAC;QAGhC,mBAAc,GAAkB,IAAI,CAAC;~~QAGrC~~,gBAAW,GAA0B,IAAI,YAAY,EAAW,CAAC;QAGjE,iBAAY,GAAuB,IAAI,YAAY,EAAQ,CAAC;QAG5D,eAAU,GAAuB,IAAI,YAAY,EAAQ,CAAC;~~QAK1D~~,oBAAe,GAAY,KAAK,CAAC;QACjC,0BAAqB,GAAY,KAAK,CAAC;IAEW,CAAC;IAEnD,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,qBAAqB,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SACpE;QAED,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;SACtE;QAED,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;SACtE;QAED,IAAI,OAAO,CAAC,aAAa,IAAI,IAAI,EAAE;YACjC,IAAI,CAAC,eAAe;gBAClB,OAAO,CAAC,aAAa,CAAC,YAAY,IAAI,IAAI;oBAC1C,OAAO,CAAC,aAAa,CAAC,YAAY,KAAK,QAAQ,CAAC;SACnD;QAED,IACE,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;YACtC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAChC;YACA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;SACnC;IACH,CAAC;IAED,KAAK,CAAC,SAAsB,SAAS,EAAE,OAAsB;QAC3D,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IACxE,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;IAC1C,CAAC;;;YAnGF,SAAS,SAAC;gBACT,QAAQ,EAAE,uBAAuB;gBACjC,QAAQ,EAAE,qBAAqB;gBAC/B,IAAI,EAAE;oBACJ,KAAK,EAAE,uBAAuB;oBAC9B,uCAAuC,EAAE,SAAS;oBAClD,wCAAwC,EAAE,UAAU;oBACpD,wCAAwC,EAAE,UAAU;oBACpD,4CAA4C,EAAE,iBAAiB;iBAChE;gBACD,0xBAA6C;gBAE7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;YA7BQ,YAAY;;;iBA+BlB,KAAK;sBAGL,KAAK;uBAGL,KAAK;uBAGL,KAAK;4BAGL,KAAK;wBAGL,KAAK,SAAC,YAAY;6BAGlB,KAAK,SAAC,iBAAiB;0BAGvB,MAAM;2BAGN,MAAM;yBAGN,MAAM;4BAGN,SAAS,SAAC,OAAO","sourcesContent":["import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n ChangeDetectionStrategy,\n Component,\n Input,\n Output,\n OnChanges,\n SimpleChanges,\n EventEmitter,\n ElementRef,\n ViewChild,\n} from '@angular/core';\n\nimport { Position } from '../core/types';\n\n@Component({\n selector: 'granite-toggle-switch',\n exportAs: 'graniteToggleSwitch',\n host: {\n class: 'granite-toggle-switch',\n '[class.granite-toggle-switch-checked]': 'checked',\n '[class.granite-toggle-switch-disabled]': 'disabled',\n '[class.granite-toggle-switch-readonly]': 'readonly',\n '[class.granite-toggle-switch-label-before]': '_positionBefore',\n },\n templateUrl: './toggle-switch.component.html',\n styleUrls: ['./toggle-switch.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteToggleSwitchComponent implements OnChanges {\n @Input()\n id: string \| null = null;\n\n @Input()\n checked: boolean = false;\n\n @Input()\n disabled: boolean = false;\n\n @Input()\n readonly: boolean = false;\n\n @Input()\n labelPosition: Position = 'after';\n\n @Input('aria-label')\n ariaLabel: string \| null = null;\n\n @Input('aria-labelledby')\n ariaLabelledby: string \| null = null;\n\n @Output()\n valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @Output()\n toggleChange: EventEmitter<void> = new EventEmitter<void>();\n\n @Output()\n toggleBlur: EventEmitter<void> = new EventEmitter<void>();\n\n @ViewChild('input')\n private _inputElement: ElementRef<HTMLInputElement>;\n\n _positionBefore: boolean = false;\n _toggleSwitchDisabled: boolean = false;\n\n constructor(private _focusMonitor: FocusMonitor) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.checked) {\n this.checked = coerceBooleanProperty(changes.checked.currentValue);\n }\n\n if (changes.disabled) {\n this.disabled = coerceBooleanProperty(changes.disabled.currentValue);\n }\n\n if (changes.readonly) {\n this.readonly = coerceBooleanProperty(changes.readonly.currentValue);\n }\n\n if (changes.labelPosition != null) {\n this._positionBefore =\n changes.labelPosition.currentValue != null &&\n changes.labelPosition.currentValue === 'before';\n }\n\n if (\n (changes.disabled \|\| changes.readonly) &&\n (this.disabled \|\| this.readonly)\n ) {\n this._toggleSwitchDisabled = true;\n }\n }\n\n focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {\n this._focusMonitor.focusVia(this._getInputElement(), origin, options);\n }\n\n _onBlur(): void {\n this.toggleBlur.emit();\n }\n\n _toggleSwitchChange(): void {\n this.checked = this._getInputElement().checked;\n this.valueChange.emit(this.checked);\n }\n\n _toggleSwitchClick(): void {\n this.toggleChange.emit();\n }\n\n private _getInputElement(): HTMLInputElement {\n return this._inputElement.nativeElement;\n }\n}\n"]}
1	+ {"version":3,"file":"toggle-switch.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/toggle-switch/toggle-switch.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAe,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,MAAM,EAGN,YAAY,EACZ,UAAU,EACV,SAAS,GACV,MAAM,eAAe,CAAC;AAkBvB,MAAM,OAAO,4BAA4B;IAqCvC,YAAoB,aAA2B;QAA3B,kBAAa,GAAb,aAAa,CAAc;QAnC/C,OAAE,GAAkB,IAAI,CAAC;QAGzB,YAAO,GAAY,KAAK,CAAC;QAGzB,aAAQ,GAAY,KAAK,CAAC;QAG1B,aAAQ,GAAY,KAAK,CAAC;QAG1B,kBAAa,GAAa,OAAO,CAAC;QAGlC,cAAS,GAAkB,IAAI,CAAC;QAGhC,mBAAc,GAAkB,IAAI,CAAC;QAG5B,gBAAW,GAA0B,IAAI,YAAY,EAAW,CAAC;QAGjE,iBAAY,GAAuB,IAAI,YAAY,EAAQ,CAAC;QAG5D,eAAU,GAAuB,IAAI,YAAY,EAAQ,CAAC;QAKnE,oBAAe,GAAY,KAAK,CAAC;QACjC,0BAAqB,GAAY,KAAK,CAAC;IAEW,CAAC;IAEnD,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,qBAAqB,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SACpE;QAED,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;SACtE;QAED,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;SACtE;QAED,IAAI,OAAO,CAAC,aAAa,IAAI,IAAI,EAAE;YACjC,IAAI,CAAC,eAAe;gBAClB,OAAO,CAAC,aAAa,CAAC,YAAY,IAAI,IAAI;oBAC1C,OAAO,CAAC,aAAa,CAAC,YAAY,KAAK,QAAQ,CAAC;SACnD;QAED,IACE,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;YACtC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAChC;YACA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;SACnC;IACH,CAAC;IAED,KAAK,CAAC,SAAsB,SAAS,EAAE,OAAsB;QAC3D,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IACxE,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;IAC1C,CAAC;;;YAnGF,SAAS,SAAC;gBACT,QAAQ,EAAE,uBAAuB;gBACjC,QAAQ,EAAE,qBAAqB;gBAC/B,IAAI,EAAE;oBACJ,KAAK,EAAE,uBAAuB;oBAC9B,uCAAuC,EAAE,SAAS;oBAClD,wCAAwC,EAAE,UAAU;oBACpD,wCAAwC,EAAE,UAAU;oBACpD,4CAA4C,EAAE,iBAAiB;iBAChE;gBACD,0xBAA6C;gBAE7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;YA7BQ,YAAY;;;iBA+BlB,KAAK;sBAGL,KAAK;uBAGL,KAAK;uBAGL,KAAK;4BAGL,KAAK;wBAGL,KAAK,SAAC,YAAY;6BAGlB,KAAK,SAAC,iBAAiB;0BAGvB,MAAM;2BAGN,MAAM;yBAGN,MAAM;4BAGN,SAAS,SAAC,OAAO","sourcesContent":["import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n ChangeDetectionStrategy,\n Component,\n Input,\n Output,\n OnChanges,\n SimpleChanges,\n EventEmitter,\n ElementRef,\n ViewChild,\n} from '@angular/core';\n\nimport { Position } from '../core/types';\n\n@Component({\n selector: 'granite-toggle-switch',\n exportAs: 'graniteToggleSwitch',\n host: {\n class: 'granite-toggle-switch',\n '[class.granite-toggle-switch-checked]': 'checked',\n '[class.granite-toggle-switch-disabled]': 'disabled',\n '[class.granite-toggle-switch-readonly]': 'readonly',\n '[class.granite-toggle-switch-label-before]': '_positionBefore',\n },\n templateUrl: './toggle-switch.component.html',\n styleUrls: ['./toggle-switch.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteToggleSwitchComponent implements OnChanges {\n @Input()\n id: string \| null = null;\n\n @Input()\n checked: boolean = false;\n\n @Input()\n disabled: boolean = false;\n\n @Input()\n readonly: boolean = false;\n\n @Input()\n labelPosition: Position = 'after';\n\n @Input('aria-label')\n ariaLabel: string \| null = null;\n\n @Input('aria-labelledby')\n ariaLabelledby: string \| null = null;\n\n @Output()\n readonly valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @Output()\n readonly toggleChange: EventEmitter<void> = new EventEmitter<void>();\n\n @Output()\n readonly toggleBlur: EventEmitter<void> = new EventEmitter<void>();\n\n @ViewChild('input')\n private _inputElement: ElementRef<HTMLInputElement>;\n\n _positionBefore: boolean = false;\n _toggleSwitchDisabled: boolean = false;\n\n constructor(private _focusMonitor: FocusMonitor) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.checked) {\n this.checked = coerceBooleanProperty(changes.checked.currentValue);\n }\n\n if (changes.disabled) {\n this.disabled = coerceBooleanProperty(changes.disabled.currentValue);\n }\n\n if (changes.readonly) {\n this.readonly = coerceBooleanProperty(changes.readonly.currentValue);\n }\n\n if (changes.labelPosition != null) {\n this._positionBefore =\n changes.labelPosition.currentValue != null &&\n changes.labelPosition.currentValue === 'before';\n }\n\n if (\n (changes.disabled \|\| changes.readonly) &&\n (this.disabled \|\| this.readonly)\n ) {\n this._toggleSwitchDisabled = true;\n }\n }\n\n focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {\n this._focusMonitor.focusVia(this._getInputElement(), origin, options);\n }\n\n _onBlur(): void {\n this.toggleBlur.emit();\n }\n\n _toggleSwitchChange(): void {\n this.checked = this._getInputElement().checked;\n this.valueChange.emit(this.checked);\n }\n\n _toggleSwitchClick(): void {\n this.toggleChange.emit();\n }\n\n private _getInputElement(): HTMLInputElement {\n return this._inputElement.nativeElement;\n }\n}\n"]}

package/fesm2015/ifsworld-granite-components.js CHANGED Viewed

@@ -520,8 +520,14 @@ GraniteMenuItemComponent.decorators = [
                 selector: '[graniteMenuItem]',
                 template: `<ng-content></ng-content>
     <ng-container *ngIf="_triggersSubmenu">
-      <granite-icon class="caret-left">caret-left</granite-icon>
-      <granite-icon class="caret-right">caret-right</granite-icon>
+      <granite-icon
+        class="caret-left"
+        [fontIcon]="'icon-caret-left'"
+      ></granite-icon>
+      <granite-icon
+        class="caret-right"
+        [fontIcon]="'icon-caret-right'"
+      ></granite-icon>
     </ng-container>`,
                 exportAs: 'graniteMenuItem',
                 host: {
@@ -534,7 +540,7 @@ GraniteMenuItemComponent.decorators = [
                     //#endregion --- Touch device customizations ---
                     '(mouseenter)': '_hovered.next(this)',
                 },
-                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;-ms-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}"]
+                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;-ms-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){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){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-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}"]
             },] }
 ];
 GraniteMenuItemComponent.ctorParameters = () => [
@@ -808,6 +814,9 @@ class _MenuBaseComponent {
         /** Emits whenever an animation on the menu completes. */
         // eslint-disable-next-line rxjs/no-exposed-subjects
         this._animationDone = new Subject();
+        this._menuEmpty$ = new BehaviorSubject(false);
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this._isMenuEmpty$ = this._menuEmpty$;
         /** Only the direct descendant menu items. */
         this._directDescendantItems = new QueryList();
         /** Subscription to tab events on the menu panel */
@@ -847,6 +856,9 @@ class _MenuBaseComponent {
             params: { xOffset: this.xOffset },
         });
     }
+    ngAfterContentChecked() {
+        this._menuEmpty$.next(this._allItems.length < 1 ? true : false);
+    }
     ngAfterContentInit() {
         this._updateDirectDescendants();
         this._keyManager = new FocusKeyManager(this._directDescendantItems).withWrap();
@@ -1092,7 +1104,7 @@ class GraniteMenuComponent extends _MenuBaseComponent {
 GraniteMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'granite-menu',
-                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",
+                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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 exportAs: 'graniteMenu',
                 animations: [
@@ -1103,7 +1115,7 @@ GraniteMenuComponent.decorators = [
                 providers: [
                     { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
                 ],
-                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;-ms-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;-ms-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;-ms-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}"]
+                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;-ms-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):not(.is-menu-empty){min-height:2rem}.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;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-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:not(.is-menu-empty){min-height:2rem}.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;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-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):not(.is-menu-empty){min-height:2rem}.close:not(:empty).ng-animating{pointer-events:none}"]
             },] }
 ];
@@ -1165,6 +1177,7 @@ class GraniteMenuTriggerForDirective {
         this._menuItemInstance = _menuItemInstance;
         this._dir = _dir;
         this._focusMonitor = _focusMonitor;
+        this.openOnHover = true;
         /** Whether the associated menu is open */
         this._isMenuOpen = false;
         // Tracking input type is necessary so it's possible to only auto-focus
@@ -1278,7 +1291,9 @@ class GraniteMenuTriggerForDirective {
         }
     }
     ngAfterContentInit() {
-        this._checkMenu();
+        // removed checkMenu here to avoid errors in dynamically genarated menus
+        // menu is checked when opening the menu
+        // this._checkMenu();
         this._handleHover();
     }
     ngOnDestroy() {
@@ -1334,6 +1349,9 @@ class GraniteMenuTriggerForDirective {
             });
         }
     }
+    isOpen() {
+        return this._isMenuOpen;
+    }
     /** Open the associated menu */
     openMenu() {
         var _a;
@@ -1643,7 +1661,8 @@ class GraniteMenuTriggerForDirective {
      */
     _openOnHover() {
         var _a, _b;
-        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')));
+        return (this.openOnHover &&
+            ((_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')));
     }
     /**
      * Whether to toggle submenus on click. This is true when showing desktop menus
@@ -1651,8 +1670,9 @@ class GraniteMenuTriggerForDirective {
      */
     _toggleOnSubmenuClick() {
         var _a, _b;
-        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')));
+        return (!this.openOnHover ||
+            (((_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'))));
     }
     // ------------------------------------------- //
     // --- Here be touch device customizations --- //
@@ -1781,7 +1801,8 @@ GraniteMenuTriggerForDirective.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
 GraniteMenuTriggerForDirective.propDecorators = {
-    menu: [{ type: Input, args: ['graniteMenuTriggerFor',] }]
+    menu: [{ type: Input, args: ['graniteMenuTriggerFor',] }],
+    openOnHover: [{ type: Input }]
 };
 class GraniteMenuTouchCloseComponent {
@@ -1795,7 +1816,7 @@ GraniteMenuTouchCloseComponent.decorators = [
                 host: {
                     '[class.granite-device-output-touch]': 'true',
                 },
-                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;-ms-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}"]
+                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;-ms-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){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){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-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}"]
             },] }
 ];
@@ -1817,8 +1838,14 @@ GraniteMenuTouchTitleItemComponent.decorators = [
                 selector: '[graniteMenuTouchTitleItem]',
                 template: `
     <ng-container *ngIf="_triggersBack">
-      <granite-icon class="caret-left">caret-left</granite-icon>
-      <granite-icon class="caret-right">caret-right</granite-icon>
+      <granite-icon
+        class="caret-left"
+        [fontIcon]="'icon-caret-left'"
+      ></granite-icon>
+      <granite-icon
+        class="caret-right"
+        [fontIcon]="'icon-caret-right'"
+      ></granite-icon>
     </ng-container>
     <ng-content></ng-content>
   `,
@@ -1828,7 +1855,7 @@ GraniteMenuTouchTitleItemComponent.decorators = [
                     '[class.granite-menu-item-back-trigger]': '_triggersBack',
                     '[class.granite-device-output-touch]': 'true',
                 },
-                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;-ms-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}"]
+                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;-ms-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){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){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-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}"]
             },] }
 ];
 GraniteMenuTouchTitleItemComponent.ctorParameters = () => [
@@ -1910,6 +1937,18 @@ GraniteIconModule.decorators = [
             },] }
 ];
+class GraniteTitleDirective {
+}
+GraniteTitleDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[graniteTitle]',
+                exportAs: 'graniteTitle',
+                host: {
+                    '[class.granite-title]': 'true',
+                },
+            },] }
+];
 class GraniteMenuModule {
 }
 GraniteMenuModule.decorators = [
@@ -1921,6 +1960,7 @@ GraniteMenuModule.decorators = [
                     GraniteMenuTouchCloseComponent,
                     GraniteMenuTouchTitleItemComponent,
                     GraniteDividerDirective,
+                    GraniteTitleDirective,
                 ],
                 imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule],
                 exports: [
@@ -1930,6 +1970,7 @@ GraniteMenuModule.decorators = [
                     GraniteMenuTouchCloseComponent,
                     GraniteMenuTouchTitleItemComponent,
                     GraniteDividerDirective,
+                    GraniteTitleDirective,
                 ],
             },] }
 ];
@@ -2397,6 +2438,7 @@ var ButtonSelectors;
     ButtonSelectors["graniteButton"] = "granite-button";
     ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
     ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
+    ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
 })(ButtonSelectors || (ButtonSelectors = {}));
 const ButtonComponentMixin = disabledMixin();
 class GraniteButtonComponent extends ButtonComponentMixin {
@@ -2404,6 +2446,8 @@ class GraniteButtonComponent extends ButtonComponentMixin {
         super();
         this._focusMonitor = _focusMonitor;
         this._elementRef = _elementRef;
+        this.toggled = false;
+        this._buttonToggled = false;
         for (const selector of Object.keys(ButtonSelectors)) {
             if (this._getHostElement().hasAttribute(selector)) {
                 this._getHostElement().classList.add(ButtonSelectors[selector]);
@@ -2412,6 +2456,11 @@ class GraniteButtonComponent extends ButtonComponentMixin {
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
+        if (changes.toggled &&
+            (this._getHostElement().classList.contains(ButtonSelectors.graniteFlatButton) ||
+                this._getHostElement().classList.contains(ButtonSelectors.graniteToolbarButton))) {
+            this._buttonToggled = coerceBooleanProperty(changes.toggled.currentValue);
+        }
     }
     focus(origin = 'program', options) {
         this._focusMonitor.focusVia(this._getHostElement(), origin, options);
@@ -2425,24 +2474,29 @@ GraniteButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: `button[graniteButton],
     button[granitePrimaryButton],
-    button[graniteFlatButton]
+    button[graniteFlatButton],
+    button[graniteToolbarButton]
   `,
                 host: {
                     class: 'granite-button-base',
                     '[class.granite-button-disabled]': 'disabled',
+                    '[class.granite-button-toggled]': '_buttonToggled',
                     '[attr.disabled]': 'disabled || null',
                 },
                 exportAs: 'graniteButton',
                 template: '<ng-content></ng-content>',
                 inputs: ['disabled'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                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-selected);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-selected);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-selected);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}"]
+                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-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-selected);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}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-selected);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-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-selected);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-selected);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-nav-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-nav-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-nav-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-nav-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-nav-button:hover{text-decoration:underline}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);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-selected);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-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}"]
             },] }
 ];
 GraniteButtonComponent.ctorParameters = () => [
     { type: FocusMonitor },
     { type: ElementRef }
 ];
+GraniteButtonComponent.propDecorators = {
+    toggled: [{ type: Input }]
+};
 class GraniteAnchorComponent extends GraniteButtonComponent {
     constructor(_focusMonitor, _elementRef) {
         super(_focusMonitor, _elementRef);
@@ -2471,7 +2525,7 @@ GraniteAnchorComponent.decorators = [
                 template: '<ng-content></ng-content>',
                 inputs: ['disabled'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                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-selected);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-selected);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-selected);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}"]
+                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-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-selected);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}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-selected);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-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-selected);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-selected);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-nav-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-nav-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-nav-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-nav-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-nav-button:hover{text-decoration:underline}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);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-selected);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-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}"]
             },] }
 ];
 GraniteAnchorComponent.ctorParameters = () => [
@@ -2870,5 +2924,5 @@ GraniteCoreModule.decorators = [
  * Generated bundle index. Do not edit.
  */
-export { ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteTableDataCellComponent as ɵe, GraniteCell as ɵf, GraniteTableHeaderCellComponent as ɵg, PurePipesModule as ɵh, GraniteTitlePipe as ɵi };
+export { ButtonSelectors, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteTitleDirective, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteTableDataCellComponent as ɵe, GraniteCell as ɵf, GraniteTableHeaderCellComponent as ɵg, PurePipesModule as ɵh, GraniteTitlePipe as ɵi };
 //# sourceMappingURL=ifsworld-granite-components.js.map