@ifsworld/granite-components 4.0.0 → 4.3.0

package/esm2015/lib/menu/menu.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/menu/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,SAAS,EACT,YAAY,EACZ,KAAK,EAEL,MAAM,EACN,SAAS,EACT,WAAW,EACX,SAAS,GACV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAe,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EACL,eAAe,EACf,KAAK,EAEL,OAAO,EACP,YAAY,GACb,MAAM,MAAM,CAAC;AACd,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAEL,kBAAkB,GAEnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAMrE,OAAO,EACL,gCAAgC,EAChC,gCAAgC,GACjC,MAAM,eAAe,CAAC;AAEvB,sCAAsC;AACtC,IAAI,YAAY,GAAG,CAAC,CAAC;AA2BrB,oDAAoD;AACpD,MAAM,oBAAoB,GAAkB;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;KACX;CACF,CAAC;AAEF,qDAAqD;AAErD,kEAAkE;AAClE,MAAM,OAAO,kBAAkB;IAoH7B,YAAoB,kBAAqC;QAArC,uBAAkB,GAAlB,kBAAkB,CAAmB;QAzEzD;;WAEG;QACgB,WAAM,GAAkC,IAAI,YAAY,EAAE,CAAC;QAE9E;;;WAGG;QACM,YAAO,GAAG,sBAAsB,YAAY,EAAE,EAAE,CAAC;QAQ1D,0DAA0D;QAC1D,mBAAc,GAAY,KAAK,CAAC;QAEhC,2CAA2C;QAC3C,cAAS,GAAY,KAAK,CAAC;QAE3B,mDAAmD;QACnD,oBAAe,GAAY,KAAK,CAAC;QAEjC,uDAAuD;QACvD,oDAAoD;QACpD,mBAAc,GAAmC,IAAI,eAAe,CAClE,oBAAoB,CACrB,CAAC;QAEF,yDAAyD;QACzD,oDAAoD;QACpD,mBAAc,GAAG,IAAI,OAAO,EAAkB,CAAC;QAc/C,6CAA6C;QACrC,2BAAsB,GAAG,IAAI,SAAS,EAA4B,CAAC;QAI3E,mDAAmD;QAC3C,qBAAgB,GAAG,YAAY,CAAC,KAAK,CAAC;QAEtC,eAAU,GAAkB,OAAO,CAAC;QACpC,eAAU,GAAkB,OAAO,CAAC;QAU5C;;;WAGG;QACK,YAAO,GAAW,CAAC,CAAC;IAEgC,CAAC;IAlH7D,0CAA0C;IAC1C,IACI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,CAAC,KAAoB;QAChC,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO,EAAE;YAC3C,gCAAgC,EAAE,CAAC;SACpC;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,0CAA0C;IAC1C,IACI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,CAAC,KAAoB;QAChC,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,OAAO,EAAE;YAC1C,gCAAgC,EAAE,CAAC;SACpC;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IA8ED,4CAA4C;IAC5C,IAAI,oBAAoB,CAAC,KAA0B;QACjD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;SAClC,CAAC,CAAC;IACL,CAAC;IAUD,kBAAkB;QAChB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,WAAW,GAAG,IAAI,eAAe,CACpC,IAAI,CAAC,sBAAsB,CAC5B,CAAC,QAAQ,EAAE,CAAC;QACb,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;YAC7D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,0FAA0F;QAC1F,+FAA+F;QAC/F,6DAA6D;QAC7D,IAAI,CAAC,sBAAsB,CAAC,OAAO;aAChC,IAAI,CACH,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC,EACtC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CACH,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAA8B,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAChE,CACF,CACF;aACA,SAAS,CAAC,CAAC,WAAW,EAAE,EAAE,CACzB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAC/C,CAAC;IACN,CAAC;IAED,WAAW;QACT,IAAI,CAAC,sBAAsB,CAAC,OAAO,EAAE,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,QAAQ;QACN,8EAA8E;QAC9E,MAAM,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,OAE/C,CAAC;QAEF,OAAO,WAAW,CAAC,IAAI,CACrB,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC;QACtC,yDAAyD;QACzD,MAAM,CAAC,GAAG,EAAE;;YACV,OAAO,OAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,MAAK,OAAO,CAAC;QAChD,CAAC,CAAC,EACF,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAA8B,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CACvE,CACsC,CAAC;IAC5C,CAAC;IAED,mFAAmF;IACnF,cAAc,CAAC,KAAoB;QACjC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;QAEjC,QAAQ,GAAG,EAAE;YACX,KAAK,QAAQ;gBACX,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;oBAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;iBAC7B;gBACD,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;oBAC/C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;iBAC7B;gBACD,MAAM;YACR,KAAK,YAAY;gBACf,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;oBAC/C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;iBAC7B;gBACD,MAAM;YACR,KAAK,MAAM,CAAC;YACZ,KAAK,KAAK;gBACR,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;oBAC1B,GAAG,KAAK,MAAM;wBACZ,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE;wBAC9B,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC;oBAChC,KAAK,CAAC,cAAc,EAAE,CAAC;iBACxB;gBACD,MAAM;YACR;gBACE,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,WAAW,EAAE;oBAC5C,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;iBACpC;gBAED,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,SAAsB,SAAS;QAC5C,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC/D,CAAC;IAED,2DAA2D;IAC3D,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC;IACvD,CAAC;IAED,iCAAiC;IACjC,eAAe;QACb,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;IACtC,CAAC;IAED,uDAAuD;IACvD,eAAe;QACb,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,6BAA6B;QAC3B,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;IACtC,CAAC;IAED;;;;;OAKG;IACH,sCAAsC;QACpC,IAAI,CAAC,oBAAoB,GAAG,kBAAkB,CAAC;IACjD,CAAC;IAED;;;OAGG;IACH,6BAA6B;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,6BAA6B;QAC3B,IAAI,CAAC,oBAAoB,GAAG,kBAAkB,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,iEAAiE;IACjE,gCAAgC;QAC9B,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED;;;OAGG;IACH,uBAAuB,CAAC,OAAe;QACrC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,2BAA2B,CAAC,OAAe;QACzC,IAAI,CAAC,oBAAoB,GAAG,YAAY,CAAC;QACzC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,wBAAwB;QACtB,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC;QACnC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,mEAAmE;IACnE,gBAAgB,CAAC,KAAqB;QACpC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAqB;QACrC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzB,4FAA4F;QAC5F,2FAA2F;QAC3F,0FAA0F;QAC1F,wFAAwF;QACxF,0FAA0F;QAC1F,wEAAwE;QACxE,IACE,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,IAAI,KAAK,CAAC,OAAO,KAAK,kBAAkB,CAAC;YACnE,IAAI,CAAC,WAAW,CAAC,eAAe,KAAK,CAAC,EACtC;YACA,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;SAC7B;IACH,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACH,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACH,gBAAgB,CAAC,CAAa;QAC5B,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,2EAA2E;YAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC7B;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IACH,UAAU,CACR,WAAiC,EACjC,YAAmC;QAEnC,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAChC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;QAElC,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3C,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;YAChC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;IACzC,CAAC;IAED;;;OAGG;IACH,eAAe;QACb,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;;;;OAKG;IACK,wBAAwB;QAC9B,IAAI,CAAC,SAAS,CAAC,OAAO;aACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAC/B,SAAS,CAAC,CAAC,KAA0C,EAAE,EAAE;YACxD,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAC/B,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAClD,CAAC;YACF,IAAI,CAAC,sBAAsB,CAAC,eAAe,EAAE,CAAC;QAChD,CAAC,CAAC,CAAC;IACP,CAAC;;;YA7YF,SAAS;;;YAjFR,iBAAiB;;;wBAsFhB,KAAK;wBAYL,KAAK;oBAYL,KAAK;yBAOL,KAAK;0BAGL,SAAS,SAAC,WAAW;wBAGrB,eAAe,SAAC,wBAAwB,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;qBAM/D,MAAM;;AA+WT,MAAM,OAAO,oBAAqB,SAAQ,kBAAkB;;;YAf3D,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,0vEAAkC;gBAElC,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,QAAQ,EAAE,aAAa;gBACvB,UAAU,EAAE;oBACV,4BAA4B,CAAC,oBAAoB;oBACjD,0BAA0B,CAAC,kBAAkB;oBAC7C,0BAA0B,CAAC,oBAAoB;iBAChD;gBACD,SAAS,EAAE;oBACT,EAAE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,oBAAoB,EAAE;iBACnE;;aACF","sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  Directive,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { FocusKeyManager, FocusOrigin } from '@angular/cdk/a11y';\nimport { Direction } from '@angular/cdk/bidi';\nimport { hasModifierKey } from '@angular/cdk/keycodes';\nimport { AnimationEvent } from '@angular/animations';\n\nimport {\n  BehaviorSubject,\n  merge,\n  Observable,\n  Subject,\n  Subscription,\n} from 'rxjs';\nimport { filter, startWith, switchMap } from 'rxjs/operators';\n\nimport { GraniteMenuItemComponent } from './menu-item.component';\nimport {\n  ClosedEventType,\n  GRANITE_MENU_PANEL,\n  GraniteMenuPanelInterface,\n} from './menu-panel';\nimport { graniteMenuDesktopAnimations } from './menu-desktop-animations';\nimport { graniteMenuTouchAnimations } from './menu-touch-animations';\nimport {\n  ClientOutputInterface,\n  ClientInputInterface,\n} from '../core/client-environment';\nimport { MenuPositionX, MenuPositionY } from './menu-positions';\nimport {\n  throwGraniteMenuInvalidPositionX,\n  throwGraniteMenuInvalidPositionY,\n} from './menu-errors';\n\n/** Counter for panel ID generation */\nlet menuPanelUid = 0;\n\n/** Menu panel animation states */\ntype TransformMenuStates =\n  // Touch device\n  | 'void'\n  | 'enter'\n  | 'enter-from-below'\n  | 'below-with-delay'\n  | 'below'\n  | 'pan'\n  | 'hide'\n  | 'pan-hidden';\n\n/**\n * Menu panel animation transform/state object. Has to be an object as we supply\n * the `xOffset` parameter and not just the state name.\n */\ntype TransformMenu = {\n  /** Current animation state name */\n  value: TransformMenuStates;\n  params: {\n    /** How far the menu has been panned/swiped by the user */\n    xOffset: number;\n  };\n};\n\n/** Menu panel animation default transform values */\nconst transformMenuDefault: TransformMenu = {\n  value: 'void',\n  params: {\n    xOffset: 0,\n  },\n};\n\n/** Base class with all of the menu functionality. */\n@Directive()\n// eslint-disable-next-line @angular-eslint/directive-class-suffix\nexport class _MenuBaseComponent\n  implements AfterContentInit, OnDestroy, GraniteMenuPanelInterface {\n  /** Position of the menu in the X axis. */\n  @Input()\n  get xPosition(): MenuPositionX {\n    return this._xPosition;\n  }\n  set xPosition(value: MenuPositionX) {\n    if (value !== 'before' && value !== 'after') {\n      throwGraniteMenuInvalidPositionX();\n    }\n    this._xPosition = value;\n  }\n\n  /** Position of the menu in the Y axis. */\n  @Input()\n  get yPosition(): MenuPositionY {\n    return this._yPosition;\n  }\n  set yPosition(value: MenuPositionY) {\n    if (value !== 'above' && value !== 'below') {\n      throwGraniteMenuInvalidPositionY();\n    }\n    this._yPosition = value;\n  }\n\n  /** Optional touch menu panel title */\n  @Input()\n  title: string;\n\n  /**\n   * Touch menu close button label. If not set, any label set by parent will\n   * be used.\n   */\n  @Input()\n  closeLabel: string;\n\n  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;\n\n  /** All items inside the menu. Includes items nested inside another menu. */\n  @ContentChildren(GraniteMenuItemComponent, { descendants: true })\n  _allItems: QueryList<GraniteMenuItemComponent>;\n\n  /**\n   * Event emitted when the menu is closed\n   */\n  @Output() readonly closed: EventEmitter<ClosedEventType> = new EventEmitter();\n\n  /**\n   * Used for locating the panel in tests and setting the aria-control attribute\n   * for the menu trigger.\n   */\n  readonly panelId = `granite-menu-panel-${menuPanelUid++}`;\n\n  /** Parent menu of the current menu panel. */\n  parentMenu: GraniteMenuPanelInterface | undefined;\n\n  /** Layout direction of the menu. */\n  direction: Direction;\n\n  /** Whether to show back button in touch menu title bar */\n  showBackButton: boolean = false;\n\n  /** Whether to show touch menu title bar */\n  showTitle: boolean = false;\n\n  /** Whether to add a close button below the menu */\n  showCloseButton: boolean = false;\n\n  /** Observable current state of the panel animation. */\n  // eslint-disable-next-line rxjs/no-exposed-subjects\n  _transformMenu: BehaviorSubject<TransformMenu> = new BehaviorSubject(\n    transformMenuDefault\n  );\n\n  /** Emits whenever an animation on the menu completes. */\n  // eslint-disable-next-line rxjs/no-exposed-subjects\n  _animationDone = new Subject<AnimationEvent>();\n\n  /** Whether the menu is animating. */\n  _isAnimating: boolean;\n\n  /** Whether the menu is about to be destroyed. */\n  _isClosing: boolean;\n\n  /** Client input device information */\n  _clientInput: ClientInputInterface;\n\n  /** Client output device information */\n  _clientOutput: ClientOutputInterface;\n\n  /** Only the direct descendant menu items. */\n  private _directDescendantItems = new QueryList<GraniteMenuItemComponent>();\n\n  private _keyManager: FocusKeyManager<GraniteMenuItemComponent>;\n\n  /** Subscription to tab events on the menu panel */\n  private _tabSubscription = Subscription.EMPTY;\n\n  private _xPosition: MenuPositionX = 'after';\n  private _yPosition: MenuPositionY = 'below';\n\n  /** Current state of the panel animation. */\n  set _panelAnimationState(state: TransformMenuStates) {\n    this._transformMenu.next({\n      value: state,\n      params: { xOffset: this.xOffset },\n    });\n  }\n\n  /**\n   * Current horizontal offset. Used with `pan` and `pan-hidden`\n   * animation states.\n   */\n  private xOffset: number = 0;\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  ngAfterContentInit(): void {\n    this._updateDirectDescendants();\n    this._keyManager = new FocusKeyManager(\n      this._directDescendantItems\n    ).withWrap();\n    this._tabSubscription = this._keyManager.tabOut.subscribe(() => {\n      this.closed.emit('tab');\n    });\n\n    // If a user manually (programatically) focuses a menu item, we need to reflect that focus\n    // change back to the key manager. Note that we don't need to unsubscribe here because _focused\n    // is internal and we know that it gets completed on destroy.\n    this._directDescendantItems.changes\n      .pipe(\n        startWith(this._directDescendantItems),\n        switchMap((items) =>\n          merge<GraniteMenuItemComponent>(\n            ...items.map((item: GraniteMenuItemComponent) => item._focused)\n          )\n        )\n      )\n      .subscribe((focusedItem) =>\n        this._keyManager.updateActiveItem(focusedItem)\n      );\n  }\n\n  ngOnDestroy(): void {\n    this._directDescendantItems.destroy();\n    this._tabSubscription.unsubscribe();\n    this.closed.complete();\n  }\n\n  /**\n   * Stream that combines the `_hovered` observables of all the menu's items\n   * into a single observable. Emits whenever the hovered menu item changes.\n   */\n  _hovered(): Observable<GraniteMenuItemComponent> {\n    // Coerce the `changes` property because Angular types it as `Observable<any>`\n    const itemChanges = this._directDescendantItems.changes as Observable<\n      QueryList<GraniteMenuItemComponent>\n    >;\n\n    return itemChanges.pipe(\n      startWith(this._directDescendantItems),\n      // Hovering is not applicable when producing touch output\n      filter(() => {\n        return this._clientOutput?.device !== 'touch';\n      }),\n      switchMap((items) =>\n        merge(...items.map((item: GraniteMenuItemComponent) => item._hovered))\n      )\n    ) as Observable<GraniteMenuItemComponent>;\n  }\n\n  /** Handle a keyboard event from the menu, delegating to the appropriate action. */\n  _handleKeydown(event: KeyboardEvent): void {\n    const key = event.key;\n    const manager = this._keyManager;\n\n    switch (key) {\n      case 'Escape':\n        if (!hasModifierKey(event)) {\n          event.preventDefault();\n          this.closed.emit('keydown');\n        }\n        break;\n      case 'ArrowLeft':\n        if (this.parentMenu && this.direction === 'ltr') {\n          this.closed.emit('keydown');\n        }\n        break;\n      case 'ArrowRight':\n        if (this.parentMenu && this.direction === 'rtl') {\n          this.closed.emit('keydown');\n        }\n        break;\n      case 'Home':\n      case 'End':\n        if (!hasModifierKey(event)) {\n          key === 'Home'\n            ? manager.setFirstItemActive()\n            : manager.setLastItemActive();\n          event.preventDefault();\n        }\n        break;\n      default:\n        if (key === 'ArrowUp' || key === 'ArrowDown') {\n          manager.setFocusOrigin('keyboard');\n        }\n\n        manager.onKeydown(event);\n    }\n  }\n\n  /**\n   * Focus the first item in the menu.\n   * @param origin Action from which the focus originated. Used to set the correct styling.\n   */\n  focusFirstItem(origin: FocusOrigin = 'program'): void {\n    this._keyManager.setFocusOrigin(origin).setFirstItemActive();\n  }\n\n  /** Updates the `showTitle` property for touch device UI */\n  _updateShowTitle(): void {\n    this.showTitle = !!this.title || this.showBackButton;\n  }\n\n  /** Starts the enter animation */\n  _startAnimation(): void {\n    this._panelAnimationState = 'enter';\n  }\n\n  /** Resets the panel animation to its initial state. */\n  _resetAnimation(): void {\n    this._panelAnimationState = 'void';\n  }\n\n  /**\n   * Starts the 'below' animation, moving a menu down, out of view below the\n   * viewport. Used to close the whole menu, for example when clicking\n   * the backdrop.\n   */\n  _startTouchCloseDownAnimation(): void {\n    this._panelAnimationState = 'below';\n  }\n\n  /**\n   * Starts the 'below-with-delay' animation, moving a menu down, out of view below the\n   * viewport. Used to close the whole menu as a response to the user tapping\n   * a menu item. There is a short delay before the animation starts, to that\n   * the user gets a visual feedback on what item was selected.\n   */\n  _startTouchCloseDownAnimationWithDelay(): void {\n    this._panelAnimationState = 'below-with-delay';\n  }\n\n  /**\n   * Starts the 'void' animation, moving a (sub) menu out of view to the side\n   * of the viewport. Used when going \"back\" from a sub menu.\n   */\n  _startTouchCloseSideAnimation(): void {\n    this._resetAnimation();\n  }\n\n  /**\n   * Starts the enter-from-below animation, moving a (root) menu into view,\n   * Animates upwards from a starting position below the viewport.\n   */\n  _startTouchRootEnterAnimation(): void {\n    this._panelAnimationState = 'enter-from-below';\n    this.xOffset = 0;\n  }\n\n  /** Starts the enter animation, moving a (sub) menu into view. */\n  _startTouchSubmenuEnterAnimation(): void {\n    this._panelAnimationState = 'enter';\n    this.xOffset = 0;\n  }\n\n  /**\n   * Starts the pan animation, to position a submenu in a response\n   * to user dragging sideways (panning).\n   */\n  _startTouchPanAnimation(xOffset: number): void {\n    this._panelAnimationState = 'pan';\n    this.xOffset = xOffset;\n  }\n\n  /**\n   * Starts the pan-hidden animation, to position a parent menu next to an\n   * active submenu that the user is dragging sideways (panning).\n   */\n  _startTouchHidePanAnimation(xOffset: number): void {\n    this._panelAnimationState = 'pan-hidden';\n    this.xOffset = xOffset;\n  }\n\n  /**\n   * Starts the hide animation, to make a parent menu slide out to leave\n   * space for a submenu.\n   */\n  _startTouchHideAnimation(): void {\n    this._panelAnimationState = 'hide';\n    this.xOffset = 0;\n  }\n\n  /** Callback that is invoked when the panel animation completes. */\n  _onAnimationDone(event: AnimationEvent): void {\n    this._animationDone.next(event);\n    this._isAnimating = false;\n  }\n\n  _onAnimationStart(event: AnimationEvent): void {\n    this._isAnimating = true;\n\n    // Scroll the content element to the top as soon as the animation starts. This is necessary,\n    // because we move focus to the first item while it's still being animated, which can throw\n    // the browser off when it determines the scroll position. Alternatively we can move focus\n    // when the animation is done, however moving focus asynchronously will interrupt screen\n    // readers which are in the process of reading out the menu already. We take the `element`\n    // from the `event` since we can't use a `ViewChild` to access the pane.\n    if (\n      (event.toState === 'enter' || event.toState === 'enter-from-below') &&\n      this._keyManager.activeItemIndex === 0\n    ) {\n      event.element.scrollTop = 0;\n    }\n  }\n\n  /**\n   * Handle click on the menu by emitting on the `closed` emitter\n   * with a `click` reason\n   */\n  _handleClick(): void {\n    this.closed.emit('click');\n  }\n\n  /**\n   * Handle click on the close button by emitting on the `closed` emitter\n   * without any particular reason\n   */\n  _handleCloseClick(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle click on the back icon by emitting on the `clicked` emitter\n   */\n  _handleBackClick(e: MouseEvent): void {\n    if (this.showBackButton) {\n      // Close submenu keydown-style: close only this menu and leave parents open\n      this.closed.emit('keydown');\n    }\n    e.stopPropagation();\n  }\n\n  /**\n   * Update client device information for the menu and its menu items.\n   */\n  _setDevice(\n    clientInput: ClientInputInterface,\n    clientOutput: ClientOutputInterface\n  ): void {\n    this._clientInput = clientInput;\n    this._clientOutput = clientOutput;\n\n    this._directDescendantItems.forEach((item) => {\n      item._clientInput = clientInput;\n      item._clientOutput = clientOutput;\n    });\n\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Resets the active item in the menu. This is used when the menu is opened, allowing\n   * the user to start from the first option when pressing the down arrow.\n   */\n  resetActiveItem(): void {\n    this._keyManager.setActiveItem(-1);\n  }\n\n  /**\n   * Sets up a stream that will keep track of any newly-added menu items and will update the list\n   * of direct descendants. We collect the descendants this way, because `_allItems` can include\n   * items that are part of child menus, and using a custom way of registering items is unreliable\n   * when it comes to maintaining the item order.\n   */\n  private _updateDirectDescendants() {\n    this._allItems.changes\n      .pipe(startWith(this._allItems))\n      .subscribe((items: QueryList<GraniteMenuItemComponent>) => {\n        this._directDescendantItems.reset(\n          items.filter((item) => item._parentMenu === this)\n        );\n        this._directDescendantItems.notifyOnChanges();\n      });\n  }\n}\n\n@Component({\n  selector: 'granite-menu',\n  templateUrl: 'menu.component.html',\n  styleUrls: ['menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  exportAs: 'graniteMenu',\n  animations: [\n    graniteMenuDesktopAnimations.transformMenuDesktop,\n    graniteMenuTouchAnimations.transformMenuTouch,\n    graniteMenuTouchAnimations.transformCloseButton,\n  ],\n  providers: [\n    { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },\n  ],\n})\nexport class GraniteMenuComponent extends _MenuBaseComponent {}\n"]}
+{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterContentChecked,\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  Directive,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { FocusKeyManager, FocusOrigin } from '@angular/cdk/a11y';\nimport { Direction } from '@angular/cdk/bidi';\nimport { hasModifierKey } from '@angular/cdk/keycodes';\nimport { AnimationEvent } from '@angular/animations';\n\nimport {\n  BehaviorSubject,\n  combineLatest,\n  merge,\n  Observable,\n  Subject,\n  Subscription,\n} from 'rxjs';\nimport { filter, map, startWith, switchMap } from 'rxjs/operators';\n\nimport { GraniteMenuItemComponent } from './menu-item.component';\nimport {\n  ClosedEventType,\n  GRANITE_MENU_PANEL,\n  GraniteMenuPanelInterface,\n} from './menu-panel';\nimport { graniteMenuDesktopAnimations } from './menu-desktop-animations';\nimport { graniteMenuTouchAnimations } from './menu-touch-animations';\nimport {\n  ClientOutputInterface,\n  ClientInputInterface,\n} from '../core/client-environment';\nimport { MenuPositionX, MenuPositionY } from './menu-positions';\nimport {\n  throwGraniteMenuInvalidPositionX,\n  throwGraniteMenuInvalidPositionY,\n} from './menu-errors';\n\n/** Counter for panel ID generation */\nlet menuPanelUid = 0;\n\n/** Menu panel animation states */\ntype TransformMenuStates =\n  // Touch device\n  | 'void'\n  | 'enter'\n  | 'enter-from-below'\n  | 'below-with-delay'\n  | 'below'\n  | 'pan'\n  | 'hide'\n  | 'pan-hidden';\n\n/**\n * Menu panel animation transform/state object. Has to be an object as we supply\n * the `xOffset` parameter and not just the state name.\n */\ntype TransformMenu = {\n  /** Current animation state name */\n  value: TransformMenuStates;\n  params: {\n    /** How far the menu has been panned/swiped by the user */\n    xOffset: number;\n  };\n};\n\n/** Menu panel animation default transform values */\nconst transformMenuDefault: TransformMenu = {\n  value: 'void',\n  params: {\n    xOffset: 0,\n  },\n};\n\n/** Base class with all of the menu functionality. */\n@Directive()\n// eslint-disable-next-line @angular-eslint/directive-class-suffix\nexport class _MenuBaseComponent\n  implements\n    AfterContentInit,\n    OnDestroy,\n    AfterContentChecked,\n    GraniteMenuPanelInterface {\n  /** Position of the menu in the X axis. */\n  @Input()\n  get xPosition(): MenuPositionX {\n    return this._xPosition;\n  }\n  set xPosition(value: MenuPositionX) {\n    if (value !== 'before' && value !== 'after') {\n      throwGraniteMenuInvalidPositionX();\n    }\n    this._xPosition = value;\n  }\n\n  /** Position of the menu in the Y axis. */\n  @Input()\n  get yPosition(): MenuPositionY {\n    return this._yPosition;\n  }\n  set yPosition(value: MenuPositionY) {\n    if (value !== 'above' && value !== 'below') {\n      throwGraniteMenuInvalidPositionY();\n    }\n    this._yPosition = value;\n  }\n\n  /** Optional touch menu panel title */\n  @Input()\n  title: string;\n\n  /**\n   * Touch menu close button label. If not set, any label set by parent will\n   * be used.\n   */\n  @Input()\n  closeLabel: string;\n\n  @Input()\n  openOnHover: boolean = true;\n\n  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;\n\n  /** All items inside the menu. Includes items nested inside another menu. */\n  @ContentChildren(GraniteMenuItemComponent, { descendants: true })\n  _allItems: QueryList<GraniteMenuItemComponent>;\n\n  /**\n   * Event emitted when the menu is closed\n   */\n  @Output() readonly closed: EventEmitter<ClosedEventType> = new EventEmitter();\n\n  /**\n   * Used for locating the panel in tests and setting the aria-control attribute\n   * for the menu trigger.\n   */\n  readonly panelId = `granite-menu-panel-${menuPanelUid++}`;\n\n  /** Parent menu of the current menu panel. */\n  parentMenu: GraniteMenuPanelInterface | undefined;\n\n  /** Layout direction of the menu. */\n  direction: Direction;\n\n  /** Whether to show back button in touch menu title bar */\n  showBackButton: boolean = false;\n\n  /** Whether to show touch menu title bar */\n  showTitle: boolean = false;\n\n  /** Whether to add a close button below the menu */\n  showCloseButton: boolean = false;\n\n  /** Observable current state of the panel animation. */\n  // eslint-disable-next-line rxjs/no-exposed-subjects\n  _transformMenu: BehaviorSubject<TransformMenu> = new BehaviorSubject(\n    transformMenuDefault\n  );\n\n  /** Emits whenever an animation on the menu completes. */\n  // eslint-disable-next-line rxjs/no-exposed-subjects\n  _animationDone = new Subject<AnimationEvent>();\n\n  /** Whether the menu is animating. */\n  _isAnimating: boolean;\n\n  /** Whether the menu is about to be destroyed. */\n  _isClosing: boolean;\n\n  /** Client input device information */\n  _clientInput: ClientInputInterface;\n\n  /** Client output device information */\n  _clientOutput: ClientOutputInterface;\n\n  private _menuEmpty$: BehaviorSubject<boolean> = new BehaviorSubject(false);\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  _isMenuEmpty$: Observable<boolean> = combineLatest([\n    this._menuEmpty$,\n    this._animationDone,\n  ]).pipe(\n    filter(([m, a]) => m && a != null),\n    map(() => true)\n  );\n\n  /** Only the direct descendant menu items. */\n  private _directDescendantItems = new QueryList<GraniteMenuItemComponent>();\n\n  private _keyManager: FocusKeyManager<GraniteMenuItemComponent>;\n\n  /** Subscription to tab events on the menu panel */\n  private _tabSubscription = Subscription.EMPTY;\n\n  private _xPosition: MenuPositionX = 'after';\n  private _yPosition: MenuPositionY = 'below';\n\n  /** Current state of the panel animation. */\n  set _panelAnimationState(state: TransformMenuStates) {\n    this._transformMenu.next({\n      value: state,\n      params: { xOffset: this.xOffset },\n    });\n  }\n\n  /**\n   * Current horizontal offset. Used with `pan` and `pan-hidden`\n   * animation states.\n   */\n  private xOffset: number = 0;\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  ngAfterContentChecked(): void {\n    this._menuEmpty$.next(this._allItems.length < 1 ? true : false);\n  }\n\n  ngAfterContentInit(): void {\n    this._updateDirectDescendants();\n    this._keyManager = new FocusKeyManager(this._directDescendantItems)\n      .withWrap()\n      .skipPredicate((menuItem) => {\n        const hostElement: HTMLElement = menuItem._getHostElement();\n        return hostElement instanceof HTMLButtonElement\n          ? hostElement.disabled\n          : hostElement.hasAttribute('graniteTitle');\n      });\n    this._tabSubscription = this._keyManager.tabOut.subscribe(() => {\n      this.closed.emit('tab');\n    });\n\n    // If a user manually (programatically) focuses a menu item, we need to reflect that focus\n    // change back to the key manager. Note that we don't need to unsubscribe here because _focused\n    // is internal and we know that it gets completed on destroy.\n    this._directDescendantItems.changes\n      .pipe(\n        startWith(this._directDescendantItems),\n        switchMap((items) =>\n          merge<GraniteMenuItemComponent>(\n            ...items.map((item: GraniteMenuItemComponent) => item._focused)\n          )\n        )\n      )\n      .subscribe((focusedItem) =>\n        this._keyManager.updateActiveItem(focusedItem)\n      );\n  }\n\n  ngOnDestroy(): void {\n    this._directDescendantItems.destroy();\n    this._tabSubscription.unsubscribe();\n    this.closed.complete();\n  }\n\n  /**\n   * Stream that combines the `_hovered` observables of all the menu's items\n   * into a single observable. Emits whenever the hovered menu item changes.\n   */\n  _hovered(): Observable<GraniteMenuItemComponent> {\n    // Coerce the `changes` property because Angular types it as `Observable<any>`\n    const itemChanges = this._directDescendantItems.changes as Observable<\n      QueryList<GraniteMenuItemComponent>\n    >;\n\n    return itemChanges.pipe(\n      startWith(this._directDescendantItems),\n      // Hovering is not applicable when producing touch output\n      filter(() => {\n        return this._clientOutput?.device !== 'touch';\n      }),\n      switchMap((items) =>\n        merge(...items.map((item: GraniteMenuItemComponent) => item._hovered))\n      )\n    ) as Observable<GraniteMenuItemComponent>;\n  }\n\n  /** Handle a keyboard event from the menu, delegating to the appropriate action. */\n  _handleKeydown(event: KeyboardEvent): void {\n    const key = event.key;\n    const manager = this._keyManager;\n\n    switch (key) {\n      case 'Escape':\n        if (!hasModifierKey(event)) {\n          event.preventDefault();\n          this.closed.emit('keydown');\n        }\n        break;\n      case 'ArrowLeft':\n        if (this.parentMenu && this.direction === 'ltr') {\n          this.closed.emit('keydown');\n        }\n        break;\n      case 'ArrowRight':\n        if (this.parentMenu && this.direction === 'rtl') {\n          this.closed.emit('keydown');\n        }\n        break;\n      case 'Home':\n      case 'End':\n        if (!hasModifierKey(event)) {\n          key === 'Home'\n            ? manager.setFirstItemActive()\n            : manager.setLastItemActive();\n          event.preventDefault();\n        }\n        break;\n      default:\n        if (key === 'ArrowUp' || key === 'ArrowDown') {\n          manager.setFocusOrigin('keyboard');\n        }\n\n        manager.onKeydown(event);\n    }\n  }\n\n  /**\n   * Focus the first item in the menu.\n   * @param origin Action from which the focus originated. Used to set the correct styling.\n   */\n  focusFirstItem(origin: FocusOrigin = 'program'): void {\n    this._keyManager.setFocusOrigin(origin).setFirstItemActive();\n  }\n\n  /** Updates the `showTitle` property for touch device UI */\n  _updateShowTitle(): void {\n    this.showTitle = !!this.title || this.showBackButton;\n  }\n\n  /** Starts the enter animation */\n  _startAnimation(): void {\n    this._panelAnimationState = 'enter';\n  }\n\n  /** Resets the panel animation to its initial state. */\n  _resetAnimation(): void {\n    this._panelAnimationState = 'void';\n  }\n\n  /**\n   * Starts the 'below' animation, moving a menu down, out of view below the\n   * viewport. Used to close the whole menu, for example when clicking\n   * the backdrop.\n   */\n  _startTouchCloseDownAnimation(): void {\n    this._panelAnimationState = 'below';\n  }\n\n  /**\n   * Starts the 'below-with-delay' animation, moving a menu down, out of view below the\n   * viewport. Used to close the whole menu as a response to the user tapping\n   * a menu item. There is a short delay before the animation starts, to that\n   * the user gets a visual feedback on what item was selected.\n   */\n  _startTouchCloseDownAnimationWithDelay(): void {\n    this._panelAnimationState = 'below-with-delay';\n  }\n\n  /**\n   * Starts the 'void' animation, moving a (sub) menu out of view to the side\n   * of the viewport. Used when going \"back\" from a sub menu.\n   */\n  _startTouchCloseSideAnimation(): void {\n    this._resetAnimation();\n  }\n\n  /**\n   * Starts the enter-from-below animation, moving a (root) menu into view,\n   * Animates upwards from a starting position below the viewport.\n   */\n  _startTouchRootEnterAnimation(): void {\n    this._panelAnimationState = 'enter-from-below';\n    this.xOffset = 0;\n  }\n\n  /** Starts the enter animation, moving a (sub) menu into view. */\n  _startTouchSubmenuEnterAnimation(): void {\n    this._panelAnimationState = 'enter';\n    this.xOffset = 0;\n  }\n\n  /**\n   * Starts the pan animation, to position a submenu in a response\n   * to user dragging sideways (panning).\n   */\n  _startTouchPanAnimation(xOffset: number): void {\n    this._panelAnimationState = 'pan';\n    this.xOffset = xOffset;\n  }\n\n  /**\n   * Starts the pan-hidden animation, to position a parent menu next to an\n   * active submenu that the user is dragging sideways (panning).\n   */\n  _startTouchHidePanAnimation(xOffset: number): void {\n    this._panelAnimationState = 'pan-hidden';\n    this.xOffset = xOffset;\n  }\n\n  /**\n   * Starts the hide animation, to make a parent menu slide out to leave\n   * space for a submenu.\n   */\n  _startTouchHideAnimation(): void {\n    this._panelAnimationState = 'hide';\n    this.xOffset = 0;\n  }\n\n  /** Callback that is invoked when the panel animation completes. */\n  _onAnimationDone(event: AnimationEvent): void {\n    this._animationDone.next(event);\n    this._isAnimating = false;\n  }\n\n  _onAnimationStart(event: AnimationEvent): void {\n    this._isAnimating = true;\n\n    // Scroll the content element to the top as soon as the animation starts. This is necessary,\n    // because we move focus to the first item while it's still being animated, which can throw\n    // the browser off when it determines the scroll position. Alternatively we can move focus\n    // when the animation is done, however moving focus asynchronously will interrupt screen\n    // readers which are in the process of reading out the menu already. We take the `element`\n    // from the `event` since we can't use a `ViewChild` to access the pane.\n    if (\n      (event.toState === 'enter' || event.toState === 'enter-from-below') &&\n      this._keyManager.activeItemIndex === 0\n    ) {\n      event.element.scrollTop = 0;\n    }\n  }\n\n  /**\n   * Handle click on the menu by emitting on the `closed` emitter\n   * with a `click` reason\n   */\n  _handleClick(): void {\n    this.closed.emit('click');\n  }\n\n  /**\n   * Handle click on the close button by emitting on the `closed` emitter\n   * without any particular reason\n   */\n  _handleCloseClick(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle click on the back icon by emitting on the `clicked` emitter\n   */\n  _handleBackClick(e: MouseEvent): void {\n    if (this.showBackButton) {\n      // Close submenu keydown-style: close only this menu and leave parents open\n      this.closed.emit('keydown');\n    }\n    e.stopPropagation();\n  }\n\n  /**\n   * Update client device information for the menu and its menu items.\n   */\n  _setDevice(\n    clientInput: ClientInputInterface,\n    clientOutput: ClientOutputInterface\n  ): void {\n    this._clientInput = clientInput;\n    this._clientOutput = clientOutput;\n\n    this._directDescendantItems.forEach((item) => {\n      item._clientInput = clientInput;\n      item._clientOutput = clientOutput;\n    });\n\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Resets the active item in the menu. This is used when the menu is opened, allowing\n   * the user to start from the first option when pressing the down arrow.\n   */\n  resetActiveItem(): void {\n    this._keyManager.setActiveItem(-1);\n  }\n\n  /**\n   * Sets up a stream that will keep track of any newly-added menu items and will update the list\n   * of direct descendants. We collect the descendants this way, because `_allItems` can include\n   * items that are part of child menus, and using a custom way of registering items is unreliable\n   * when it comes to maintaining the item order.\n   */\n  private _updateDirectDescendants() {\n    this._allItems.changes\n      .pipe(startWith(this._allItems))\n      .subscribe((items: QueryList<GraniteMenuItemComponent>) => {\n        this._directDescendantItems.reset(\n          items.filter((item) => item._parentMenu === this)\n        );\n        this._directDescendantItems.notifyOnChanges();\n      });\n  }\n}\n\n@Component({\n  selector: 'granite-menu',\n  templateUrl: 'menu.component.html',\n  styleUrls: ['menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  exportAs: 'graniteMenu',\n  animations: [\n    graniteMenuDesktopAnimations.transformMenuDesktop,\n    graniteMenuTouchAnimations.transformMenuTouch,\n    graniteMenuTouchAnimations.transformCloseButton,\n  ],\n  providers: [\n    { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },\n  ],\n})\nexport class GraniteMenuComponent extends _MenuBaseComponent {}\n"]}

package/esm2015/lib/menu/menu.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"_MenuBaseComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":84,"character":1}}],"members":{"xPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"yPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"closeLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":123,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":123,"character":13}]}]}],"_allItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":126,"character":3},"arguments":[{"__symbolic":"reference","module":"./menu-item.component","name":"GraniteMenuItemComponent","line":126,"character":19},{"descendants":true}]}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":202,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_hovered":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"focusFirstItem":[{"__symbolic":"method"}],"_updateShowTitle":[{"__symbolic":"method"}],"_startAnimation":[{"__symbolic":"method"}],"_resetAnimation":[{"__symbolic":"method"}],"_startTouchCloseDownAnimation":[{"__symbolic":"method"}],"_startTouchCloseDownAnimationWithDelay":[{"__symbolic":"method"}],"_startTouchCloseSideAnimation":[{"__symbolic":"method"}],"_startTouchRootEnterAnimation":[{"__symbolic":"method"}],"_startTouchSubmenuEnterAnimation":[{"__symbolic":"method"}],"_startTouchPanAnimation":[{"__symbolic":"method"}],"_startTouchHidePanAnimation":[{"__symbolic":"method"}],"_startTouchHideAnimation":[{"__symbolic":"method"}],"_onAnimationDone":[{"__symbolic":"method"}],"_onAnimationStart":[{"__symbolic":"method"}],"_handleClick":[{"__symbolic":"method"}],"_handleCloseClick":[{"__symbolic":"method"}],"_handleBackClick":[{"__symbolic":"method"}],"_setDevice":[{"__symbolic":"method"}],"resetActiveItem":[{"__symbolic":"method"}],"_updateDirectDescendants":[{"__symbolic":"method"}]}},"GraniteMenuComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_MenuBaseComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":484,"character":1},"arguments":[{"selector":"granite-menu","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":488,"character":19},"member":"OnPush"},"exportAs":"graniteMenu","animations":[{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu-desktop-animations","name":"graniteMenuDesktopAnimations","line":491,"character":4},"member":"transformMenuDesktop"},{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu-touch-animations","name":"graniteMenuTouchAnimations","line":492,"character":4},"member":"transformMenuTouch"},{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu-touch-animations","name":"graniteMenuTouchAnimations","line":493,"character":4},"member":"transformCloseButton"}],"providers":[{"provide":{"__symbolic":"reference","module":"./menu-panel","name":"GRANITE_MENU_PANEL","line":496,"character":15},"useExisting":{"__symbolic":"reference","name":"GraniteMenuComponent"}}],"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","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}"]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"_MenuBaseComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":86,"character":1}}],"members":{"xPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"yPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"closeLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":3}}]}],"openOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":132,"character":13}]}]}],"_allItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":135,"character":3},"arguments":[{"__symbolic":"reference","module":"./menu-item.component","name":"GraniteMenuItemComponent","line":135,"character":19},{"descendants":true}]}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":221,"character":42}]}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_hovered":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"focusFirstItem":[{"__symbolic":"method"}],"_updateShowTitle":[{"__symbolic":"method"}],"_startAnimation":[{"__symbolic":"method"}],"_resetAnimation":[{"__symbolic":"method"}],"_startTouchCloseDownAnimation":[{"__symbolic":"method"}],"_startTouchCloseDownAnimationWithDelay":[{"__symbolic":"method"}],"_startTouchCloseSideAnimation":[{"__symbolic":"method"}],"_startTouchRootEnterAnimation":[{"__symbolic":"method"}],"_startTouchSubmenuEnterAnimation":[{"__symbolic":"method"}],"_startTouchPanAnimation":[{"__symbolic":"method"}],"_startTouchHidePanAnimation":[{"__symbolic":"method"}],"_startTouchHideAnimation":[{"__symbolic":"method"}],"_onAnimationDone":[{"__symbolic":"method"}],"_onAnimationStart":[{"__symbolic":"method"}],"_handleClick":[{"__symbolic":"method"}],"_handleCloseClick":[{"__symbolic":"method"}],"_handleBackClick":[{"__symbolic":"method"}],"_setDevice":[{"__symbolic":"method"}],"resetActiveItem":[{"__symbolic":"method"}],"_updateDirectDescendants":[{"__symbolic":"method"}]}},"GraniteMenuComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_MenuBaseComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":512,"character":1},"arguments":[{"selector":"granite-menu","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":516,"character":19},"member":"OnPush"},"exportAs":"graniteMenu","animations":[{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu-desktop-animations","name":"graniteMenuDesktopAnimations","line":519,"character":4},"member":"transformMenuDesktop"},{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu-touch-animations","name":"graniteMenuTouchAnimations","line":520,"character":4},"member":"transformMenuTouch"},{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu-touch-animations","name":"graniteMenuTouchAnimations","line":521,"character":4},"member":"transformCloseButton"}],"providers":[{"provide":{"__symbolic":"reference","module":"./menu-panel","name":"GRANITE_MENU_PANEL","line":524,"character":15},"useExisting":{"__symbolic":"reference","name":"GraniteMenuComponent"}}],"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","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)}"]}]}]}}}]

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

@@ -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

@@ -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"]}
+{"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

@@ -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}]}]}]}}}]
+[{"__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

@@ -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

@@ -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

@@ -0,0 +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/radio-button/radio-group.component.js

@@ -9,11 +9,11 @@ GraniteRadioGroupComponent.decorators = [
                     class: 'granite-radio-group',
                     '[attr.role]': '"radiogroup"',
                     '[attr.aria-labelledby]': 'ariaLabelledby',
-                    '[class.granite-radio-group-layout-horizontal]': 'layout === "horizontal"',
+                    '[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
                 },
                 template: "<ng-content></ng-content>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host(.granite-radio-group-layout-horizontal){display:flex;align-items:flex-start}"]
+                styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
             },] }
 ];
 //# sourceMappingURL=radio-group.component.js.map

package/esm2015/lib/radio-button/radio-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/radio-button/radio-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAevE,MAAM,OAAO,0BAA2B,SAAQ,wBAAwB;;;YAbvE,SAAS,SAAC;gBACT,QAAQ,EAAE,qBAAqB;gBAC/B,IAAI,EAAE;oBACJ,KAAK,EAAE,qBAAqB;oBAC5B,aAAa,EAAE,cAAc;oBAC7B,wBAAwB,EAAE,gBAAgB;oBAC1C,+CAA+C,EAAE,yBAAyB;iBAC3E;gBAED,uCAA2C;gBAE3C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { GraniteRadioCheckboxBase } from '../core/radio-checkbox-base';\n\n@Component({\n  selector: 'granite-radio-group',\n  host: {\n    class: 'granite-radio-group',\n    '[attr.role]': '\"radiogroup\"',\n    '[attr.aria-labelledby]': 'ariaLabelledby',\n    '[class.granite-radio-group-layout-horizontal]': 'layout === \"horizontal\"',\n  },\n\n  templateUrl: './radio-group.component.html',\n  styleUrls: ['./radio-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteRadioGroupComponent extends GraniteRadioCheckboxBase {}\n"]}
+{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/radio-button/radio-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAgBvE,MAAM,OAAO,0BAA2B,SAAQ,wBAAwB;;;YAdvE,SAAS,SAAC;gBACT,QAAQ,EAAE,qBAAqB;gBAC/B,IAAI,EAAE;oBACJ,KAAK,EAAE,qBAAqB;oBAC5B,aAAa,EAAE,cAAc;oBAC7B,wBAAwB,EAAE,gBAAgB;oBAC1C,uDAAuD,EACrD,yBAAyB;iBAC5B;gBAED,uCAA2C;gBAE3C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { GraniteRadioCheckboxBase } from '../core/radio-checkbox-base';\n\n@Component({\n  selector: 'granite-radio-group',\n  host: {\n    class: 'granite-radio-group',\n    '[attr.role]': '\"radiogroup\"',\n    '[attr.aria-labelledby]': 'ariaLabelledby',\n    '[class.granite-radio-checkbox-base-layout-horizontal]':\n      'layout === \"horizontal\"',\n  },\n\n  templateUrl: './radio-group.component.html',\n  styleUrls: ['./radio-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteRadioGroupComponent extends GraniteRadioCheckboxBase {}\n"]}

package/esm2015/lib/radio-button/radio-group.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraniteRadioGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../core/radio-checkbox-base","name":"GraniteRadioCheckboxBase","line":16,"character":48},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"granite-radio-group","host":{"class":"granite-radio-group","[attr.role]":"\"radiogroup\"","[attr.aria-labelledby]":"ariaLabelledby","[class.granite-radio-group-layout-horizontal]":"layout === \"horizontal\"","$quoted$":["[attr.role]","[attr.aria-labelledby]","[class.granite-radio-group-layout-horizontal]"]},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":14,"character":19},"member":"OnPush"},"template":"<ng-content></ng-content>\n","styles":[":host(.granite-radio-group-layout-horizontal){display:flex;align-items:flex-start}"]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraniteRadioGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../core/radio-checkbox-base","name":"GraniteRadioCheckboxBase","line":17,"character":48},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"granite-radio-group","host":{"class":"granite-radio-group","[attr.role]":"\"radiogroup\"","[attr.aria-labelledby]":"ariaLabelledby","[class.granite-radio-checkbox-base-layout-horizontal]":"layout === \"horizontal\"","$quoted$":["[attr.role]","[attr.aria-labelledby]","[class.granite-radio-checkbox-base-layout-horizontal]"]},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":19},"member":"OnPush"},"template":"<ng-content></ng-content>\n","styles":[":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]}]}]}}}]