@theseam/ui-common 0.2.9

package/fesm2015/theseam-ui-common-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theseam-ui-common-icon.js","sources":["../../../projects/ui-common/icon/icon-btn/icon-btn.component.ts","../../../projects/ui-common/icon/icon-notification/icon-notification.component.ts","../../../projects/ui-common/icon/icon/icon.component.ts","../../../projects/ui-common/icon/icon.module.ts","../../../projects/ui-common/icon/utils/file-extension-icon.ts","../../../projects/ui-common/icon/utils/get-known-icon.ts","../../../projects/ui-common/icon/theseam-ui-common-icon.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion'\nimport { Component, DoCheck, ElementRef, HostBinding, Input, OnInit, Renderer2 } from '@angular/core'\n\nimport { SizeProp } from '@fortawesome/fontawesome-svg-core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\nimport type { ThemeTypes } from '@theseam/ui-common/models'\n\nimport type { SeamIcon } from '../icon'\nimport type { TheSeamIconType } from '../icon/icon.component'\n\n@Component({\n  // tslint:disable-next-line:component-selector\n  selector: 'button[seamIconBtn]',\n  template: `\n    <seam-icon *ngIf=\"icon\"\n      [grayscaleOnDisable]=\"grayscaleOnDisable\"\n      [disabled]=\"disabled\"\n      [iconClass]=\"iconClass\"\n      [icon]=\"icon\"\n      [size]=\"size\"\n      [showDefaultOnError]=\"showDefaultOnError\"\n      [iconType]=\"iconType\">\n    </seam-icon>\n    <ng-content select=\".sr-only,seam-icon-notification\"></ng-content>\n  `,\n  styles: [],\n  // tslint:disable-next-line:use-host-property-decorator\n  host: {\n    '[attr.aria-disabled]': 'disabled.toString()',\n    '[attr.disabled]': 'disabled || null',\n  },\n})\nexport class IconBtnComponent implements OnInit, DoCheck {\n  static ngAcceptInputType_grayscaleOnDisable: BooleanInput\n  static ngAcceptInputType_disabled: BooleanInput\n  static ngAcceptInputType_showDefaultOnError: BooleanInput\n\n  /** Toggles whether the img/icon will attempt to be grayscale when disabled is true. */\n  @Input() @InputBoolean() grayscaleOnDisable: boolean = true\n\n  /** Toggles the img/icon to grayscale if `grayscaleOnDisable` is true. */\n  @Input() @InputBoolean() disabled: boolean = false\n\n  /**\n   * Placed on the `.seam-icon--fa` and `seam-icon--img` elements.\n   */\n  @Input() iconClass: string | undefined | null\n\n  /**\n   * The icon to display.\n   *\n   * If the input icon is a string an `img` element will be used with icon as `src`.\n   * If the input is not a string it will be assumed to be a font-awesome IconProp object.\n   */\n  @Input() icon: SeamIcon | undefined | null\n\n  /**\n   * NOTE: Only works for fa-icon for now.\n   */\n  @Input() size: SizeProp | undefined | null\n\n  /**\n   * Toggles whether an image that has thrown the `onerror` event should show\n   * the `defaultIcon` instead.\n   */\n   @Input() @InputBoolean() showDefaultOnError: boolean = false\n\n  /**\n   * Shown if icon is not set or if showDefaultOnError is true and img has thrown an error.\n   *\n   * NOTE: Not supported for icon-btn yet.\n   */\n  // @Input() defaultIcon: SeamIcon\n\n  @Input() iconType: TheSeamIconType | undefined | null = 'image-fill'\n\n  @HostBinding('class.p-0') _cssPadding0 = true\n\n  @HostBinding('class.btn') _btn = true\n  @HostBinding('class.text-nowrap') _textNoWrap = true\n\n  @HostBinding('class.btn-default') get _btnDefault() { return this.isBtnTheme('default') }\n  @HostBinding('class.btn-primary') get _btnPrimary() { return this.isBtnTheme('primary') }\n  @HostBinding('class.btn-secondary') get _btnSecondary() { return this.isBtnTheme('secondary') }\n  @HostBinding('class.btn-success') get _btnSuccess() { return this.isBtnTheme('success') }\n  @HostBinding('class.btn-danger') get _btnDanger() { return this.isBtnTheme('danger') }\n  @HostBinding('class.btn-warning') get _btnWarning() { return this.isBtnTheme('warning') }\n  @HostBinding('class.btn-info') get _btnInfo() { return this.isBtnTheme('info') }\n  @HostBinding('class.btn-light') get _btnLight() { return this.isBtnTheme('light') }\n  @HostBinding('class.btn-dark') get _btnDark() { return this.isBtnTheme('dark') }\n  @HostBinding('class.btn-lightgray') get _btnLightGray() { return this.isBtnTheme('lightgray') }\n\n  @HostBinding('class.btn-sm') get _btnSizeSm() { return this.btnSize === 'sm' }\n  @HostBinding('class.btn-lg') get _btnSizeLg() { return this.btnSize === 'lg' }\n\n  @Input() btnTheme: ThemeTypes | undefined | null = 'default'\n  @Input() badgeTheme: ThemeTypes | undefined | null = 'light'\n  @Input() badgeText: string | undefined | null = ''\n\n  @Input() btnSize: 'sm' | 'lg' | undefined | null\n\n  @Input()\n  get type(): string | undefined | null { return this._type }\n  set type(value: string | undefined | null) {\n    this._type = value\n  }\n  private _type: string | undefined | null\n\n  @Input()\n  get role(): string | undefined | null { return this._role }\n  set role(value: string | undefined | null) {\n    this._role = value\n  }\n  private _role: string | undefined | null\n\n  constructor(\n    private _elementRef: ElementRef<HTMLButtonElement | HTMLAnchorElement>,\n    private _renderer: Renderer2\n  ) { }\n\n  ngOnInit() { }\n\n  ngDoCheck() {\n    if (this._isButton()) {\n      this._renderer.setAttribute(this._elementRef.nativeElement, 'type', this._type || 'button')\n    } else if (this._isAnchor()) {\n      this._renderer.setAttribute(this._elementRef.nativeElement, 'role', this._role || 'button')\n    }\n  }\n\n  public isBtnTheme(type: ThemeTypes): boolean {\n    return this.btnTheme === type\n  }\n\n  protected _isButton() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'button'\n  }\n\n  protected _isAnchor() {\n    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'button'\n  }\n\n}\n","import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations'\nimport { BooleanInput } from '@angular/cdk/coercion'\nimport { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'\n\nimport { SizeProp } from '@fortawesome/fontawesome-svg-core'\nimport { faCircle } from '@fortawesome/free-solid-svg-icons'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\nimport { SeamIcon } from '../icon'\nimport type { TheSeamIconType } from '../icon/icon.component'\n\nexport const pulseAnimation = animation([\n  style({ transform: 'scale(1)' }),\n  animate(\n    '{{ timings }}',\n    keyframes([\n      style({ transform: 'scale(1)', offset: 0 }),\n      style({ transform: 'scale({{ scale }})', offset: 0.5 }),\n      style({ transform: 'scale(1)', offset: 1 })\n    ])\n  )\n])\n\n@Component({\n  selector: 'seam-icon-notification',\n  template: `\n    <seam-icon *ngIf=\"icon && !hidden\" [@counterChange]=\"count\"\n      [grayscaleOnDisable]=\"grayscaleOnDisable\"\n      [disabled]=\"disabled\"\n      [iconClass]=\"iconClass\"\n      [icon]=\"icon\"\n      [size]=\"size\"\n      [showDefaultOnError]=\"showDefaultOnError\"\n      [iconType]=\"iconType\">\n    </seam-icon>\n    <ng-content select=\".sr-only\"></ng-content>\n  `,\n  styles: [`\n    :host {\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: 0;\n      bottom: 0;\n    }\n\n    seam-icon {\n      position: absolute;\n      top: 4px;\n      right: 4px;\n      width: 25% !important;\n      height: 25% !important;\n      min-width: 15px;\n      min-height: 15px;\n    }\n  `],\n  // tslint:disable-next-line:use-host-property-decorator\n  host: {\n    '[attr.aria-disabled]': 'disabled.toString()',\n    '[attr.disabled]': 'disabled || null',\n  },\n  animations: [\n    trigger('counterChange', [\n      transition(\n        ':increment',\n        useAnimation(pulseAnimation, {\n          params: {\n            timings: '400ms ease-in-out',\n            scale: 1.2\n          }\n        })\n      )\n    ])\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class IconNotificationComponent implements OnInit {\n  static ngAcceptInputType_hidden: BooleanInput\n  static ngAcceptInputType_grayscaleOnDisable: BooleanInput\n  static ngAcceptInputType_disabled: BooleanInput\n  static ngAcceptInputType_showDefaultOnError: BooleanInput\n\n  @Input() count: number | undefined | null\n\n  @Input() @InputBoolean() hidden = false\n\n  /** Toggles whether the img/icon will attempt to be grayscale when disabled is true. */\n  @Input() @InputBoolean() grayscaleOnDisable = true\n\n  /** Toggles the img/icon to grayscale if `grayscaleOnDisable` is true. */\n  @Input() @InputBoolean() disabled = false\n\n  /**\n   * Placed on the `.seam-icon--fa` and `seam-icon--img` elements.\n   */\n  @Input() iconClass: string | undefined | null\n\n  /**\n   * The icon to display.\n   *\n   * If the input icon is a string an `img` element will be used with icon as `src`.\n   * If the input is not a string it will be assumed to be a font-awesome IconProp object.\n   */\n  @Input() icon: SeamIcon | undefined | null = faCircle\n\n  /**\n   * Toggles whether an image that has thrown the `onerror` event should show\n   * the `defaultIcon` instead.\n   */\n   @Input() @InputBoolean() showDefaultOnError = false\n\n  /**\n   * Shown if icon is not set or if showDefaultOnError is true and img has thrown an error.\n   *\n   * NOTE: Not supported for icon-notification yet.\n   */\n  // @Input() defaultIcon: SeamIcon\n\n  /**\n   * NOTE: Only works for fa-icon for now.\n   */\n  @Input() size: SizeProp | undefined | null\n\n  @Input() iconType: TheSeamIconType | undefined | null = 'image-fill'\n\n  constructor(\n    private _elementRef: ElementRef<HTMLElement>\n  ) { }\n\n  ngOnInit() {\n    if (this._elementRef && this._elementRef.nativeElement && this._elementRef.nativeElement.parentElement) {\n      this._elementRef.nativeElement.parentElement.style.position = 'relative'\n    }\n  }\n\n  // ngDoCheck() {}\n\n}\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'\nimport { Component, HostBinding, Input } from '@angular/core'\n\nimport { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\nimport { SeamIcon } from '../icon'\n\n//\n// TODO: Ensure all inputs correctly update the state whenever changed, not just\n// on initial load.\n//\n\n// Browsers that do not support css grayscale filter.\nconst needToFix = /(MSIE 10)|(Trident.*rv:11\\.0)|( Edge\\/[\\d\\.]+$)/.test(navigator.userAgent)\n\nexport type TheSeamIconType = 'borderless-styled-square' | 'styled-square' | 'image-fill' | undefined\n\n@Component({\n  selector: 'seam-icon',\n  templateUrl: './icon.component.html',\n  styleUrls: ['./icon.component.scss']\n})\nexport class IconComponent {\n  static ngAcceptInputType_grayscaleOnDisable: BooleanInput\n  static ngAcceptInputType_disabled: BooleanInput\n  static ngAcceptInputType_showDefaultOnError: BooleanInput\n\n  needToFix = needToFix\n\n  /** Toggles whether the img/icon will attempt to be grayscale when disabled is true. */\n  @Input() @InputBoolean() grayscaleOnDisable: boolean = true\n\n  /** Toggles the img/icon to grayscale if `grayscaleOnDisable` is true. */\n  @Input() @InputBoolean() disabled: boolean = false\n\n  /**\n   * Placed on the `.seam-icon--fa` and `seam-icon--img` elements.\n   */\n  @Input() iconClass: string | undefined | null\n\n  /**\n   * The icon to display.\n   *\n   * If the input icon is a string an `img` element will be used with icon as `src`.\n   * If the input is not a string it will be assumed to be a font-awesome IconProp object.\n   */\n  @Input()\n  get icon(): SeamIcon | undefined | null { return this._iconUrl || this._iconObj }\n  set icon(value: SeamIcon | undefined | null) {\n    if (typeof value === 'string') {\n      this._iconUrl = value\n      this._iconObj = undefined\n    } else {\n      this._iconUrl = undefined\n      this._iconObj = value\n    }\n\n    this._iconUrlBeforeError = undefined\n    this._iconObjBeforeError = undefined\n\n    if (!this._iconUrl && !this._iconObj) {\n      this._iconUrl = this._defaultIconUrl\n      this._iconObj = this._defaultIconObj\n    }\n  }\n\n  public _iconUrl: string | undefined | null\n  public _iconObj: IconProp | undefined | null\n\n  private _iconUrlBeforeError: string | undefined | null\n  private _iconObjBeforeError: IconProp | undefined | null\n\n  /**\n   * NOTE: Only works for fa-icon for now.\n   */\n  @Input() size: SizeProp | undefined | null\n\n  /**\n   * Toggles whether an image that has thrown the `onerror` event should show\n   * the `defaultIcon` instead.\n   */\n  @Input()\n  get showDefaultOnError(): boolean { return this._showDefaultOnError }\n  set showDefaultOnError(value: boolean) {\n    this._showDefaultOnError = coerceBooleanProperty(value)\n    if (this._hasError) {\n      if (this._iconUrlBeforeError || this._iconObjBeforeError) {\n        this._iconUrl = this._iconUrlBeforeError\n        this._iconObj = this._iconObjBeforeError\n        this._iconUrlBeforeError = undefined\n        this._iconObjBeforeError = undefined\n      } else if (this._showDefaultOnError) {\n        this._iconUrl = this._defaultIconUrl\n        this._iconObj = this._defaultIconObj\n      }\n    }\n  }\n  private _showDefaultOnError = false\n\n  /**\n   * Shown if icon is not set or if showDefaultOnError is true and img has thrown an error.\n   */\n  @Input()\n  get defaultIcon(): SeamIcon | undefined | null { return this._defaultIconUrl || this._defaultIconObj }\n  set defaultIcon(value: SeamIcon | undefined | null) {\n    if (typeof value === 'string') {\n      this._defaultIconUrl = value\n      this._defaultIconObj = undefined\n    } else {\n      this._defaultIconUrl = undefined\n      this._defaultIconObj = value\n    }\n\n    if (!this._defaultIconUrl && !this._defaultIconObj) {\n      this._iconUrl = this._iconUrlBeforeError\n      this._iconObj = this._iconObjBeforeError\n    }\n\n    if (!this._iconUrl && !this._iconObj) {\n      this._iconUrl = this._defaultIconUrl\n      this._iconObj = this._defaultIconObj\n    }\n  }\n\n  public _defaultIconUrl: string | undefined | null\n  public _defaultIconObj: IconProp | undefined | null\n\n  @Input() iconType: TheSeamIconType | undefined | null\n\n  @HostBinding('attr.icon-type')\n  get _iconTypeAttr() { return this.iconType }\n\n  private _hasError = false\n\n  public _imgError(event: ErrorEvent): void {\n    this._hasError = true\n    if (this._showDefaultOnError && (this._defaultIconUrl || this._defaultIconObj)) {\n      this._iconUrlBeforeError = this._iconUrl\n      this._iconObjBeforeError = this._iconObj\n      this._iconUrl = this._defaultIconUrl\n      this._iconObj = this._defaultIconObj\n    }\n  }\n\n  @HostBinding('class.disabled')\n  get _cssDisabled() { return this.disabled || null }\n\n  @HostBinding('class.no-grayscale')\n  get _cssNoGreyscale() { return !this.grayscaleOnDisable }\n\n}\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome'\n\nimport { IconBtnComponent } from './icon-btn/icon-btn.component'\nimport { IconNotificationComponent } from './icon-notification/icon-notification.component'\nimport { IconComponent } from './icon/icon.component'\n\n@NgModule({\n  declarations: [\n    IconComponent,\n    IconBtnComponent,\n    IconNotificationComponent\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule\n  ],\n  exports: [\n    IconComponent,\n    IconBtnComponent,\n    IconNotificationComponent\n  ]\n})\nexport class TheSeamIconModule { }\n","import {\n  faFile,\n  faFileAlt,\n  faFileArchive,\n  faFileExcel,\n  faFileImage,\n  faFilePdf,\n  faFilePowerpoint,\n  faFileWord\n} from '@fortawesome/free-regular-svg-icons'\n\nimport { SeamIcon } from '../icon'\n\nconst FILE_EXTENSION_ICONS: { [type: string]: SeamIcon } = {\n  'pdf': faFilePdf,\n  'doc': faFileWord,\n  'docx': faFileWord,\n  'xls': faFileExcel,\n  'xlsx': faFileExcel,\n  'gif': faFileImage,\n  'jpg': faFileImage,\n  'jpeg': faFileImage,\n  'png': faFileImage,\n  'zip': faFileArchive,\n  'ppt': faFilePowerpoint,\n  'pptx': faFilePowerpoint,\n  'txt': faFileAlt,\n  'json': faFileAlt\n}\n\nexport const DEFAULT_FILE_EXTENSION_ICON: SeamIcon = faFile\n\nexport function fileExtensionIcon(extension: string | null | undefined, defaultIfNotFound: boolean = true): SeamIcon | undefined {\n  if (!extension) {\n    return defaultIfNotFound ? DEFAULT_FILE_EXTENSION_ICON : undefined\n  }\n\n  let ext = extension\n  if (ext.charAt(0) === '.') {\n    ext = ext.substr(1)\n  }\n\n  const icon = FILE_EXTENSION_ICONS[ext]\n  if (!icon && defaultIfNotFound) {\n    return DEFAULT_FILE_EXTENSION_ICON\n  }\n  return icon\n}\n","import {\n  faAddressCard,\n  faBell,\n  faBookmark,\n  faCheckCircle,\n  faClock,\n  faComment,\n  faEnvelope,\n  faEnvelopeOpen,\n  faFile,\n  faFileAlt,\n  faFileArchive,\n  faFileAudio,\n  faFileCode,\n  faFileExcel,\n  faFileImage,\n  faFilePdf,\n  faFilePowerpoint,\n  faFileVideo,\n  faFileWord,\n  faFolder,\n  faFolderOpen,\n  faImage,\n  faImages,\n  faQuestionCircle,\n  faSave,\n  faStickyNote,\n  faTimesCircle,\n  faTrashAlt,\n  faUser,\n  faUserCircle\n} from '@fortawesome/free-regular-svg-icons'\nimport {\n  faBan,\n  faChartArea,\n  faChartBar,\n  faChartLine,\n  faCheck,\n  faCloudUploadAlt,\n  faCog,\n  faEdit,\n  faExclamation,\n  faExclamationCircle,\n  faExclamationTriangle,\n  faExternalLinkSquareAlt,\n  faFileContract,\n  faFileCsv,\n  faFileDownload,\n  faFileExport,\n  faFileImport,\n  faFileInvoice,\n  faFileInvoiceDollar,\n  faFileMedical,\n  faFileMedicalAlt,\n  faFilePrescription,\n  faFileSignature,\n  faFileUpload,\n  faInbox,\n  faInfoCircle,\n  faLock,\n  faLockOpen,\n  faPrint,\n  faReceipt,\n  faReply,\n  faShare,\n  faSignature,\n  faTimes,\n  faTrash,\n  faUserCheck,\n  faUserEdit,\n  faUserPlus,\n  faUsers,\n  faUserTimes\n} from '@fortawesome/free-solid-svg-icons'\n\nimport { SeamIcon } from '../icon'\n\n// TODO: Decide a good way to do this, so that we don't have to import full icon\n// libraries, but still provide icon choices to use from a string. One way could\n// be to define a dictionary of app icons that we can use that map a unique\n// string to an icon definition.\nconst knownIcons: { [key: string]: SeamIcon } = {\n  'faAddressCard': faAddressCard,\n  'faBan': faBan,\n  'faBell': faBell,\n  'faBookmark': faBookmark,\n  'faChartLine': faChartLine,\n  'faChartArea': faChartArea,\n  'faChartBar': faChartBar,\n  'faCheck': faCheck,\n  'faCheckCircle': faCheckCircle,\n  'faClock': faClock,\n  'faCloudUploadAlt': faCloudUploadAlt,\n  'faComment': faComment,\n  'faCog': faCog,\n  'faEdit': faEdit,\n  'faEnvelope': faEnvelope,\n  'faEnvelopeOpen': faEnvelopeOpen,\n  'faExclamation': faExclamation,\n  'faExclamationCircle': faExclamationCircle,\n  'faExclamationTriangle': faExclamationTriangle,\n  'faExternalLinkSquareAlt': faExternalLinkSquareAlt,\n  'faFile': faFile,\n  'faFileAlt': faFileAlt,\n  'faFileArchive': faFileArchive,\n  'faFileAudio': faFileAudio,\n  'faFileCode': faFileCode,\n  'faFileContract': faFileContract,\n  'faFileCsv': faFileCsv,\n  'faFileDownload': faFileDownload,\n  'faFileExcel': faFileExcel,\n  'faFileExport': faFileExport,\n  'faFileImage': faFileImage,\n  'faFileImport': faFileImport,\n  'faFileInvoice': faFileInvoice,\n  'faFileInvoiceDollar': faFileInvoiceDollar,\n  'faFileMedical': faFileMedical,\n  'faFileMedicalAlt': faFileMedicalAlt,\n  'faFilePdf': faFilePdf,\n  'faFilePowerpoint': faFilePowerpoint,\n  'faFilePrescription': faFilePrescription,\n  'faFileSignature': faFileSignature,\n  'faFileUpload': faFileUpload,\n  'faFileVideo': faFileVideo,\n  'faFileWord': faFileWord,\n  'faFolder': faFolder,\n  'faFolderOpen': faFolderOpen,\n  'faImage': faImage,\n  'faImages': faImages,\n  'faInbox': faInbox,\n  'faInfoCircle': faInfoCircle,\n  'faLock': faLock,\n  'faLockOpen': faLockOpen,\n  'faPrint': faPrint,\n  'faQuestionCircle': faQuestionCircle,\n  'faReceipt': faReceipt,\n  'faReply': faReply,\n  'faSave': faSave,\n  'faShare': faShare,\n  'faSignature': faSignature,\n  'faStickyNote': faStickyNote,\n  'faTimes': faTimes,\n  'faTimesCircle': faTimesCircle,\n  'faTrash': faTrash,\n  'faTrashAlt': faTrashAlt,\n  'faUser': faUser,\n  'faUserCheck': faUserCheck,\n  'faUserCircle': faUserCircle,\n  'faUserEdit': faUserEdit,\n  'faUserTimes': faUserTimes,\n  'faUsers': faUsers,\n  'faUserPlus': faUserPlus\n}\n\nexport function getKnownIcon(iconStr: string): SeamIcon | undefined {\n  return knownIcons[iconStr]\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/theseam-ui-common-layout.js

@@ -0,0 +1,89 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Injectable } from '@angular/core';
+import { FlexLayoutModule, MediaObserver } from '@angular/flex-layout';
+import { map, startWith, distinctUntilChanged, shareReplay } from 'rxjs/operators';
+import * as i1 from '@angular/flex-layout/core';
+
+// TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap
+
+class TheSeamLayoutModule {
+}
+TheSeamLayoutModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [],
+                imports: [
+                    CommonModule,
+                    FlexLayoutModule
+                ],
+                exports: [
+                    FlexLayoutModule
+                ]
+            },] }
+];
+
+const mediaQueriesMap = {
+    'xs': 'screen and (max-width: 599px)',
+    'sm': 'screen and (min-width: 600px) and (max-width: 959px)',
+    'md': 'screen and (min-width: 960px) and (max-width: 1279px)',
+    'lg': 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    'xl': 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    'lt-sm': 'screen and (max-width: 599px)',
+    'lt-md': 'screen and (max-width: 959px)',
+    'lt-lg': 'screen and (max-width: 1279px)',
+    'lt-xl': 'screen and (max-width: 1919px)',
+    'gt-xs': 'screen and (min-width: 600px)',
+    'gt-sm': 'screen and (min-width: 960px)',
+    'gt-md': 'screen and (min-width: 1280px)',
+    'gt-lg': 'screen and (min-width: 1920px)'
+};
+/**
+ * TODO: Find out if the MediaObserver can return an immediate result on load
+ * accurately like the native matchMedia. If not switch to another that can or
+ * just implement it myself. I would rather use a well tested library for
+ * something like that, since it could have a lot of affect on performance.
+ */
+function isMediaQueryActive(query, fallback) {
+    if (window && window.matchMedia) {
+        const x = window.matchMedia(mediaQueriesMap[query]);
+        return x.matches;
+    }
+    return fallback.isActive(query);
+}
+/**
+ * Observable helper for observing a single breakpoint alias with
+ * `@angular/flex-layout` MediaObserver.
+ */
+function observeMediaQuery(mediaObserver, alias) {
+    // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))
+    return mediaObserver.asObservable()
+        .pipe(map(_ => mediaObserver.isActive(alias)), 
+    // startWith(mediaObserver.isActive(alias)),
+    startWith(isMediaQueryActive(alias, mediaObserver)), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
+}
+
+class TheSeamLayoutService {
+    constructor(_media) {
+        this._media = _media;
+        this.isMobile$ = this.observe('lt-sm');
+    }
+    observe(alias) {
+        return observeMediaQuery(this._media, alias);
+    }
+}
+TheSeamLayoutService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TheSeamLayoutService_Factory() { return new TheSeamLayoutService(i0.ɵɵinject(i1.MediaObserver)); }, token: TheSeamLayoutService, providedIn: "root" });
+TheSeamLayoutService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+TheSeamLayoutService.ctorParameters = () => [
+    { type: MediaObserver }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TheSeamLayoutModule, TheSeamLayoutService, observeMediaQuery };
+//# sourceMappingURL=theseam-ui-common-layout.js.map

package/fesm2015/theseam-ui-common-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theseam-ui-common-layout.js","sources":["../../../projects/ui-common/layout/breakpoint-aliases.ts","../../../projects/ui-common/layout/layout.module.ts","../../../projects/ui-common/layout/observe-media-query.ts","../../../projects/ui-common/layout/layout.service.ts","../../../projects/ui-common/layout/theseam-ui-common-layout.ts"],"sourcesContent":["// TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap\n// breakpoints work the same.\n//\n// I like the more spread-out ranges in '@angular/flex-layout', but since our\n// styles are mostly based on bootstrap it may be worth it to drop down closer\n// to the bootstrap breakpoints.\n//\n// Another option is to create new aliases to blend a mix between them, if it\n// doesn't add to much complexity.\n\n/**\n * | breakpoint | mediaQuery                                              |\n * |------------|---------------------------------------------------------|\n * | xs         | 'screen and (max-width: 599px)'                         |\n * | sm         | 'screen and (min-width: 600px) and (max-width: 959px)'  |\n * | md         | 'screen and (min-width: 960px) and (max-width: 1279px)' |\n * | lg         | 'screen and (min-width: 1280px) and (max-width: 1919px)'|\n * | xl         | 'screen and (min-width: 1920px) and (max-width: 5000px)'|\n * |            |                                                         |\n * | lt-sm      | 'screen and (max-width: 599px)'                         |\n * | lt-md      | 'screen and (max-width: 959px)'                         |\n * | lt-lg      | 'screen and (max-width: 1279px)'                        |\n * | lt-xl      | 'screen and (max-width: 1919px)'                        |\n * |            |                                                         |\n * | gt-xs      | 'screen and (min-width: 600px)'                         |\n * | gt-sm      | 'screen and (min-width: 960px)'                         |\n * | gt-md      | 'screen and (min-width: 1280px)'                        |\n * | gt-lg      | 'screen and (min-width: 1920px)'                        |\n */\nexport type MediaQueryAliases =\n  // Breakpoint      MediaQuery\n    'xs'         // 'screen and (max-width: 599px)'\n  | 'sm'         // 'screen and (min-width: 600px) and (max-width: 959px)'\n  | 'md'         // 'screen and (min-width: 960px) and (max-width: 1279px)'\n  | 'lg'         // 'screen and (min-width: 1280px) and (max-width: 1919px)'\n  | 'xl'         // 'screen and (min-width: 1920px) and (max-width: 5000px)'\n  | 'lt-sm'      // 'screen and (max-width: 599px)'\n  | 'lt-md'      // 'screen and (max-width: 959px)'\n  | 'lt-lg'      // 'screen and (max-width: 1279px)'\n  | 'lt-xl'      // 'screen and (max-width: 1919px)'\n  | 'gt-xs'      // 'screen and (min-width: 600px)'\n  | 'gt-sm'      // 'screen and (min-width: 960px)'\n  | 'gt-md'      // 'screen and (min-width: 1280px)'\n  | 'gt-lg'      // 'screen and (min-width: 1920px)'\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FlexLayoutModule } from '@angular/flex-layout'\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    FlexLayoutModule\n  ],\n  exports: [\n    FlexLayoutModule\n  ]\n})\nexport class TheSeamLayoutModule { }\n","import { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\nimport { distinctUntilChanged, map, shareReplay, startWith, tap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\n\nconst mediaQueriesMap: { [breakpoint: string]: string } = {\n  'xs'   : 'screen and (max-width: 599px)',\n  'sm'   : 'screen and (min-width: 600px) and (max-width: 959px)',\n  'md'   : 'screen and (min-width: 960px) and (max-width: 1279px)',\n  'lg'   : 'screen and (min-width: 1280px) and (max-width: 1919px)',\n  'xl'   : 'screen and (min-width: 1920px) and (max-width: 5000px)',\n  'lt-sm': 'screen and (max-width: 599px)',\n  'lt-md': 'screen and (max-width: 959px)',\n  'lt-lg': 'screen and (max-width: 1279px)',\n  'lt-xl': 'screen and (max-width: 1919px)',\n  'gt-xs': 'screen and (min-width: 600px)',\n  'gt-sm': 'screen and (min-width: 960px)',\n  'gt-md': 'screen and (min-width: 1280px)',\n  'gt-lg': 'screen and (min-width: 1920px)'\n}\n\n/**\n * TODO: Find out if the MediaObserver can return an immediate result on load\n * accurately like the native matchMedia. If not switch to another that can or\n * just implement it myself. I would rather use a well tested library for\n * something like that, since it could have a lot of affect on performance.\n */\nfunction isMediaQueryActive(query: string, fallback: MediaObserver) {\n  if (window && window.matchMedia) {\n    const x = window.matchMedia(mediaQueriesMap[query])\n    return x.matches\n  }\n  return fallback.isActive(query)\n}\n\n/**\n * Observable helper for observing a single breakpoint alias with\n * `@angular/flex-layout` MediaObserver.\n */\nexport function observeMediaQuery(\n  mediaObserver: MediaObserver,\n  alias: MediaQueryAliases\n): Observable<boolean> {\n  // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))\n  return mediaObserver.asObservable()\n    .pipe(\n      map(_ => mediaObserver.isActive(alias)),\n      // startWith(mediaObserver.isActive(alias)),\n      startWith(isMediaQueryActive(alias, mediaObserver)),\n      distinctUntilChanged(),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    )\n}\n","import { inject, Injectable, InjectionToken } from '@angular/core'\nimport { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\nimport { observeMediaQuery } from './observe-media-query'\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TheSeamLayoutService {\n\n  /**\n   * Is app a mobile-like size.\n   */\n  public isMobile$: Observable<boolean>\n\n  constructor(\n    private _media: MediaObserver\n  ) {\n    this.isMobile$ = this.observe('lt-sm')\n  }\n\n  public observe(alias: MediaQueryAliases): Observable<boolean> {\n    return observeMediaQuery(this._media, alias)\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;MCca,mBAAmB;;;YAV/B,QAAQ,SAAC;gBACR,YAAY,EAAE,EAAE;gBAChB,OAAO,EAAE;oBACP,YAAY;oBACZ,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,gBAAgB;iBACjB;aACF;;;ACPD,MAAM,eAAe,GAAqC;IACxD,IAAI,EAAK,+BAA+B;IACxC,IAAI,EAAK,sDAAsD;IAC/D,IAAI,EAAK,uDAAuD;IAChE,IAAI,EAAK,wDAAwD;IACjE,IAAI,EAAK,wDAAwD;IACjE,OAAO,EAAE,+BAA+B;IACxC,OAAO,EAAE,+BAA+B;IACxC,OAAO,EAAE,gCAAgC;IACzC,OAAO,EAAE,gCAAgC;IACzC,OAAO,EAAE,+BAA+B;IACxC,OAAO,EAAE,+BAA+B;IACxC,OAAO,EAAE,gCAAgC;IACzC,OAAO,EAAE,gCAAgC;CAC1C,CAAA;AAED;;;;;;AAMA,SAAS,kBAAkB,CAAC,KAAa,EAAE,QAAuB;IAChE,IAAI,MAAM,IAAI,MAAM,CAAC,UAAU,EAAE;QAC/B,MAAM,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAA;QACnD,OAAO,CAAC,CAAC,OAAO,CAAA;KACjB;IACD,OAAO,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACjC,CAAC;AAED;;;;SAIgB,iBAAiB,CAC/B,aAA4B,EAC5B,KAAwB;;IAGxB,OAAO,aAAa,CAAC,YAAY,EAAE;SAChC,IAAI,CACH,GAAG,CAAC,CAAC,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;IAEvC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,EACnD,oBAAoB,EAAE,EACtB,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAC/C,CAAA;AACL;;MC3Ca,oBAAoB;IAO/B,YACU,MAAqB;QAArB,WAAM,GAAN,MAAM,CAAe;QAE7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;KACvC;IAEM,OAAO,CAAC,KAAwB;QACrC,OAAO,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;KAC7C;;;;YAlBF,UAAU,SAAC;gBACV,UAAU,EAAE,MAAM;aACnB;;;YARQ,aAAa;;;ACDtB;;;;;;"}

package/fesm2015/theseam-ui-common-loading.js

@@ -0,0 +1,131 @@
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { CommonModule } from '@angular/common';
+import { Component, Input, Injectable, NgModule } from '@angular/core';
+import { ngxLoadingAnimationTypes, NgxLoadingModule } from '@marklb/ngx-loading';
+import { throwError } from 'rxjs';
+import { tap, catchError, finalize } from 'rxjs/operators';
+
+const defaultThemeConfig = {
+    animationType: ngxLoadingAnimationTypes.threeBounce,
+    backdropBackgroundColour: 'rgba(0,0,0,0.3)',
+    backdropBorderRadius: '0px',
+    primaryColour: '#ffffff',
+    secondaryColour: '#ffffff',
+    tertiaryColour: '#ffffff'
+};
+const primaryThemeConfig = {
+    animationType: ngxLoadingAnimationTypes.threeBounce,
+    backdropBackgroundColour: 'rgba(250,250,250,0.2)',
+    backdropBorderRadius: '0px',
+    primaryColour: 'rgba(53,126,189,0.7)',
+    secondaryColour: 'rgba(53,126,189,0.7)',
+    tertiaryColour: 'rgba(53,126,189,0.7)'
+};
+
+class LoadingComponent {
+    constructor() {
+        this._theme = defaultThemeConfig;
+    }
+    set theme(value) {
+        if (value === 'primary') {
+            this._theme = primaryThemeConfig;
+        }
+        else {
+            this._theme = defaultThemeConfig;
+        }
+    }
+    ngOnInit() { }
+}
+LoadingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-loading',
+                template: "<ngx-loading [show]=\"true\" [config]=\"_theme\"></ngx-loading>\n",
+                styles: [":host{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:9000}"]
+            },] }
+];
+LoadingComponent.ctorParameters = () => [];
+LoadingComponent.propDecorators = {
+    theme: [{ type: Input }]
+};
+
+class TheSeamLoadingOverlayService {
+    constructor(_overlay) {
+        this._overlay = _overlay;
+        this._enabled = false;
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    toggle(enabled) {
+        const enable = enabled === undefined ? !this.enabled : enabled;
+        if (enable && !this.enabled) {
+            this.enable();
+        }
+        else if (!enable && this.enabled) {
+            this.disable();
+        }
+    }
+    enable() {
+        if (this.enabled) {
+            return;
+        }
+        this._overlayRef = this._overlay.create({
+            hasBackdrop: false,
+            width: '100%',
+            height: '100%'
+        });
+        this._overlayRef.attach(new ComponentPortal(LoadingComponent));
+        this._enabled = true;
+    }
+    disable() {
+        var _a;
+        if (!this.enabled) {
+            return;
+        }
+        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._enabled = false;
+    }
+    while(source) {
+        this.enable();
+        return source
+            .pipe(tap(() => this.disable()), catchError(err => {
+            this.disable();
+            return throwError(err);
+        }), finalize(() => this.disable()));
+    }
+}
+TheSeamLoadingOverlayService.decorators = [
+    { type: Injectable }
+];
+TheSeamLoadingOverlayService.ctorParameters = () => [
+    { type: Overlay }
+];
+
+// NOTE: Named export used for this because of a function calling bug in the builder.
+const loadingForRoot = NgxLoadingModule.forRoot(defaultThemeConfig);
+class TheSeamLoadingModule {
+}
+TheSeamLoadingModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [LoadingComponent],
+                imports: [
+                    CommonModule,
+                    OverlayModule,
+                    PortalModule,
+                    loadingForRoot
+                ],
+                providers: [
+                    TheSeamLoadingOverlayService
+                ],
+                exports: [LoadingComponent],
+                entryComponents: [LoadingComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LoadingComponent, TheSeamLoadingModule, TheSeamLoadingOverlayService, defaultThemeConfig, loadingForRoot, primaryThemeConfig };
+//# sourceMappingURL=theseam-ui-common-loading.js.map

package/fesm2015/theseam-ui-common-loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theseam-ui-common-loading.js","sources":["../../../projects/ui-common/loading/loading-themes.ts","../../../projects/ui-common/loading/loading/loading.component.ts","../../../projects/ui-common/loading/loading-overlay.service.ts","../../../projects/ui-common/loading/loading.module.ts","../../../projects/ui-common/loading/theseam-ui-common-loading.ts"],"sourcesContent":["import { ngxLoadingAnimationTypes, NgxLoadingConfig } from '@marklb/ngx-loading'\n\nexport const defaultThemeConfig: NgxLoadingConfig = {\n  animationType: ngxLoadingAnimationTypes.threeBounce,\n  backdropBackgroundColour: 'rgba(0,0,0,0.3)',\n  backdropBorderRadius: '0px',\n  primaryColour: '#ffffff',\n  secondaryColour: '#ffffff',\n  tertiaryColour: '#ffffff'\n}\n\nexport const primaryThemeConfig: NgxLoadingConfig = {\n  animationType: ngxLoadingAnimationTypes.threeBounce,\n  backdropBackgroundColour: 'rgba(250,250,250,0.2)',\n  backdropBorderRadius: '0px',\n  primaryColour: 'rgba(53,126,189,0.7)',\n  secondaryColour: 'rgba(53,126,189,0.7)',\n  tertiaryColour: 'rgba(53,126,189,0.7)'\n}\n","import { Component, Input, OnInit } from '@angular/core'\n\nimport { NgxLoadingConfig } from '@marklb/ngx-loading'\n\nimport { defaultThemeConfig, primaryThemeConfig } from '../loading-themes'\nimport type { TheSeamLoadingTheme } from '../loading.models'\n\n@Component({\n  selector: 'seam-loading',\n  templateUrl: './loading.component.html',\n  styleUrls: ['./loading.component.scss']\n})\nexport class LoadingComponent implements OnInit {\n\n  @Input()\n  set theme(value: TheSeamLoadingTheme) {\n    if (value === 'primary') {\n      this._theme = primaryThemeConfig\n    } else {\n      this._theme = defaultThemeConfig\n    }\n  }\n  _theme: NgxLoadingConfig = defaultThemeConfig\n\n  constructor() { }\n\n  ngOnInit() { }\n\n}\n","import { Overlay, OverlayRef } from '@angular/cdk/overlay'\nimport { ComponentPortal } from '@angular/cdk/portal'\nimport { Injectable } from '@angular/core'\nimport { Observable, throwError } from 'rxjs'\nimport { catchError, finalize, tap } from 'rxjs/operators'\n\nimport { LoadingComponent } from './loading/loading.component'\n\n@Injectable()\nexport class TheSeamLoadingOverlayService {\n\n  private _enabled = false\n\n  private _overlayRef?: OverlayRef\n\n  constructor(\n    private _overlay: Overlay\n  ) { }\n\n  get enabled(): boolean {\n    return this._enabled\n  }\n\n  public toggle(enabled?: boolean) {\n    const enable = enabled === undefined ? !this.enabled : enabled\n    if (enable && !this.enabled) {\n      this.enable()\n    } else if (!enable && this.enabled) {\n      this.disable()\n    }\n  }\n\n  public enable() {\n    if (this.enabled) { return }\n\n    this._overlayRef = this._overlay.create({\n      hasBackdrop: false,\n      width: '100%',\n      height: '100%'\n    })\n    this._overlayRef.attach(new ComponentPortal(LoadingComponent))\n\n    this._enabled = true\n  }\n\n  public disable() {\n    if (!this.enabled) { return }\n\n    this._overlayRef?.dispose()\n\n    this._enabled = false\n  }\n\n  public while<T = any>(source: Observable<T>): Observable<T> {\n    this.enable()\n    return source\n      .pipe(\n        tap(() => this.disable()),\n        catchError(err => {\n          this.disable()\n          return throwError(err)\n        }),\n        finalize(() => this.disable())\n      )\n  }\n\n}\n","import { OverlayModule } from '@angular/cdk/overlay'\nimport { PortalModule } from '@angular/cdk/portal'\nimport { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { NgxLoadingModule } from '@marklb/ngx-loading'\n\nimport { TheSeamLoadingOverlayService } from './loading-overlay.service'\nimport { defaultThemeConfig } from './loading-themes'\nimport { LoadingComponent } from './loading/loading.component'\n\n// NOTE: Named export used for this because of a function calling bug in the builder.\nexport const loadingForRoot = NgxLoadingModule.forRoot(defaultThemeConfig)\n\n@NgModule({\n  declarations: [LoadingComponent],\n  imports: [\n    CommonModule,\n    OverlayModule,\n    PortalModule,\n    loadingForRoot\n  ],\n  providers: [\n    TheSeamLoadingOverlayService\n  ],\n  exports: [LoadingComponent],\n  entryComponents: [LoadingComponent]\n})\nexport class TheSeamLoadingModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/theseam-ui-common-menu.js

@@ -0,0 +1,762 @@
+import { animation, style, group, animate, query, useAnimation, trigger, transition } from '@angular/animations';
+import { Component, ChangeDetectionStrategy, InjectionToken, ElementRef, Inject, Optional, Input, HostListener, Directive, ViewContainerRef, forwardRef, EventEmitter, ViewChild, TemplateRef, Output, HostBinding, NgModule } from '@angular/core';
+import { FocusMonitor, isFakeMousedownFromScreenReader, FocusKeyManager } from '@angular/cdk/a11y';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { Subject, Subscription, of, merge, BehaviorSubject, fromEvent } from 'rxjs';
+import { mixinDisabled } from '@theseam/ui-common/core';
+import { UP_ARROW, DOWN_ARROW, ESCAPE, END, hasModifierKey, HOME } from '@angular/cdk/keycodes';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { map, switchMap, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+
+const menuDropdownPanelSlideIn = animation([
+    style({
+        opacity: 0,
+        transform: 'translateY(-70%)'
+    }),
+    group([
+        animate('170ms linear', style({ opacity: 1 })),
+        animate('220ms ease', style({ transform: 'translateY(0)' })),
+    ])
+]);
+const menuDropdownPanelSlideOut = animation([
+    style({
+        opacity: 1,
+        transform: 'translateY(0)'
+    }),
+    group([
+        animate('170ms linear', style({ opacity: 0 })),
+        animate('220ms ease', style({ transform: 'translateY(-70%)' })),
+    ])
+]);
+const menuDropdownPanelExpandIn = animation([
+    style({
+        opacity: 0,
+        transform: 'scale(0.8)'
+    }),
+    group([
+        animate('100ms linear', style({ opacity: 1 })),
+        animate('120ms ease', style({ transform: 'scale(1)' })),
+    ])
+]);
+const menuDropdownPanelExpandOut = animation([
+    style({
+        opacity: 1,
+        transform: 'scale(1)'
+    }),
+    group([
+        animate('100ms linear', style({ opacity: 0 })),
+        animate('120ms ease', style({ transform: 'scale(0.8)' })),
+    ])
+]);
+const menuDropdownPanelFadeIn = animation([
+    style({ transform: 'translateY(-30px)', opacity: '0' }),
+    animate('250ms', style({ transform: 'translateY(0)', opacity: '1' }))
+]);
+const menuDropdownPanelFadeOut = animation([
+    style({ transform: 'translateY(0)', opacity: '1' }),
+    animate('250ms', style({ transform: 'translateY(-30px)', opacity: '0' }))
+]);
+const menuDropdownPanelIn = animation([
+    query('.seam-menu-container.seam-menu-anim--slide .dropdown-menu', useAnimation(menuDropdownPanelSlideIn), { optional: true }),
+    query('.seam-menu-container.seam-menu-anim--fade .dropdown-menu', useAnimation(menuDropdownPanelFadeIn), { optional: true })
+]);
+const menuDropdownPanelOut = animation([
+    query('.seam-menu-container.seam-menu-anim--slide .dropdown-menu', useAnimation(menuDropdownPanelSlideOut), { optional: true }),
+    query('.seam-menu-container.seam-menu-anim--fade .dropdown-menu', useAnimation(menuDropdownPanelFadeOut), { optional: true })
+]);
+
+class MenuDividerComponent {
+}
+MenuDividerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-menu-divider',
+                template: ``,
+                // tslint:disable-next-line:use-host-property-decorator
+                host: {
+                    'class': 'dropdown-divider d-block'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+
+/**
+ * Injection token used to provide the parent menu to menu-specific components.
+ */
+const THESEAM_MENU_PANEL = new InjectionToken('THESEAM_MENU_PANEL');
+
+class TheSeamMenuItemBase {
+}
+const _seamMenuItemMixinBase = mixinDisabled(TheSeamMenuItemBase);
+class MenuItemComponent extends _seamMenuItemMixinBase {
+    constructor(_elementRef, document, _focusMonitor, _parentMenu) {
+        super();
+        this._elementRef = _elementRef;
+        this.document = document;
+        this._focusMonitor = _focusMonitor;
+        this._parentMenu = _parentMenu;
+        /** ARIA role for the menu item. */
+        this.role = 'menuitem';
+        this.badgeTheme = 'danger';
+        /** Stream that emits when the menu item is hovered. */
+        this._hovered = new Subject();
+        /** Whether the menu item is highlighted. */
+        this._highlighted = false;
+        if (_focusMonitor) {
+            // Start monitoring the element so it gets the appropriate focused classes. We want
+            // to show the focus style for menu items only when the focus was not caused by a
+            // mouse or touch interaction.
+            _focusMonitor.monitor(this._elementRef, false);
+        }
+        // console.log(this._parentMenu)
+        if (_parentMenu && _parentMenu.addItem) {
+            _parentMenu.addItem(this);
+        }
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        if (this._focusMonitor) {
+            this._focusMonitor.stopMonitoring(this._elementRef);
+        }
+        if (this._parentMenu && this._parentMenu.removeItem) {
+            this._parentMenu.removeItem(this);
+        }
+        this._hovered.complete();
+    }
+    /** Focuses the menu item. */
+    focus(origin = 'program') {
+        if (this._focusMonitor) {
+            this._focusMonitor.focusVia(this._getHostElement(), origin);
+        }
+        else {
+            this._getHostElement().focus();
+        }
+    }
+    /** Used to set the `tabindex`. */
+    _getTabIndex() {
+        return this.disabled ? '-1' : '0';
+    }
+    /** Returns the host DOM element. */
+    _getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    /** Prevents the default element actions if it is disabled. */
+    _checkDisabled(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /** Emits to the hover stream. */
+    _handleMouseEnter() {
+        this._hovered.next(this);
+    }
+    /** Gets the label to be used when determining whether the option should be focused. */
+    getLabel() {
+        const element = this._elementRef.nativeElement;
+        const textNodeType = this.document ? this.document.TEXT_NODE : 3;
+        let output = '';
+        if (element.childNodes) {
+            const length = element.childNodes.length;
+            // Go through all the top-level text nodes and extract their text.
+            // We skip anything that's not a text node to prevent the text from
+            // being thrown off by something like an icon.
+            for (let i = 0; i < length; i++) {
+                if (element.childNodes[i].nodeType === textNodeType) {
+                    output += element.childNodes[i].textContent;
+                }
+            }
+        }
+        return output.trim();
+    }
+}
+MenuItemComponent.decorators = [
+    { type: Component, args: [{
+                // tslint:disable-next-line:component-selector
+                selector: '[seamMenuItem]',
+                template: "<div class=\"d-flex flex-row\">\n  <seam-icon *ngIf=\"icon\"\n    style=\"width: 30px; height: 20px; flex: 0 0 auto;\"\n    class=\"pr-2\"\n    [icon]=\"icon\"\n    [iconClass]=\"iconClass\"\n    iconType=\"image-fill\">\n  </seam-icon>\n  <!-- <span class=\"text-nowrap\">\n    <ng-content></ng-content>\n  </span> -->\n  <div class=\"text-truncate\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"badgeText\">\n    <span class=\"badge badge-pill{{ badgeTheme ? ' badge-' + badgeTheme : '' }} position-relative\"\n      style=\"top: -8px\"\n      >{{ badgeText }}</span>\n  </div>\n</div>\n",
+                exportAs: 'seamMenuItem',
+                // tslint:disable-next-line:use-input-property-decorator
+                inputs: ['disabled'],
+                // tslint:disable-next-line:use-host-property-decorator
+                host: {
+                    '[attr.role]': 'role',
+                    'class': 'dropdown-item',
+                    '[attr.tabindex]': '_getTabIndex()',
+                    '[attr.aria-disabled]': 'disabled.toString()',
+                    '[attr.disabled]': 'disabled || null',
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+MenuItemComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: FocusMonitor },
+    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_MENU_PANEL,] }, { type: Optional }] }
+];
+MenuItemComponent.propDecorators = {
+    role: [{ type: Input }],
+    icon: [{ type: Input }],
+    iconClass: [{ type: Input }],
+    badgeText: [{ type: Input }],
+    badgeTheme: [{ type: Input }],
+    _checkDisabled: [{ type: HostListener, args: ['click', ['$event'],] }],
+    _handleMouseEnter: [{ type: HostListener, args: ['mouseenter',] }]
+};
+
+/** Options for binding a passive event listener. */
+const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
+class MenuToggleDirective {
+    // @HostListener('document:mousedown', [ '$event' ])
+    // _onDocumentMouseDown(event: any) {
+    //   console.log('outside click')
+    // }
+    constructor(_elementRef, _viewContainerRef, _overlay, _focusMonitor) {
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+        this._focusMonitor = _focusMonitor;
+        this._active = false;
+        this._menuClosedSubscription = Subscription.EMPTY;
+        this._closingActionsSubscription = Subscription.EMPTY;
+        this.restoreFocus = true;
+        // Tracking input type is necessary so it's possible to only auto-focus
+        // the first item of the list when the menu is opened via the keyboard
+        this._openedBy = null;
+        this._positions = [
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+        ];
+        /**
+         * Handles touch start events on the trigger.
+         * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
+         */
+        this._handleTouchStart = () => this._openedBy = 'touch';
+        this._elementRef.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
+    }
+    set positions(val) {
+        var _a;
+        this._positions = val;
+        if (this.menuOpen()) {
+            (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.updatePositionStrategy(this.getOverlayPosition(this._elementRef.nativeElement));
+        }
+    }
+    get positions() { return this._positions; }
+    _onMouseDown(event) {
+        if (!isFakeMousedownFromScreenReader(event)) {
+            // Since right or middle button clicks won't trigger the `click` event,
+            // we shouldn't consider the menu as opened by mouse in those cases.
+            this._openedBy = event.button === 0 ? 'mouse' : null;
+            // Since clicking on the trigger won't close the menu if it opens a sub-menu,
+            // we should prevent focus from moving onto it via click to avoid the
+            // highlight from lingering on the menu item.
+            // if (this.triggersSubmenu()) {
+            //   event.preventDefault();
+            // }
+        }
+    }
+    _onKeydown(event) {
+        var _a;
+        this._openedBy = null;
+        // tslint:disable-next-line:deprecation
+        const keyCode = event.keyCode;
+        if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
+            if (this.menuOpen()) {
+                (_a = this.seamMenuToggle) === null || _a === void 0 ? void 0 : _a.focusFirstItem(this._openedBy || 'program');
+            }
+        }
+    }
+    _onClick(event) {
+        this.toggle();
+    }
+    _onDocumentKeydown(event) {
+        if (event.keyCode === ESCAPE) {
+            this.closeMenu();
+        }
+    }
+    ngOnDestroy() {
+        this.closeMenu();
+        this._elementRef.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
+        this._menuClosedSubscription.unsubscribe();
+        this._closingActionsSubscription.unsubscribe();
+    }
+    toggle() {
+        if (this._active) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    }
+    openMenu() {
+        if (this._active || !this.seamMenuToggle) {
+            return;
+        }
+        this._active = true;
+        this._overlayRef = this._overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'transparent',
+            positionStrategy: this.getOverlayPosition(this._elementRef.nativeElement),
+        });
+        const tpl = this.seamMenuToggle.templateRef;
+        if (!tpl) {
+            throw Error(`Menu template not found.`);
+        }
+        this._overlayRef.attach(new TemplatePortal(tpl, this._viewContainerRef));
+        this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
+        this._initMenu();
+        this._menuClosedSubscription = this.seamMenuToggle.closed.subscribe(v => {
+            // console.log('closed', v)
+            this.closeMenu();
+        });
+        // this._overlayRef.backdropClick().subscribe(v => {
+        //   console.log('backdropClick', v)
+        // })
+    }
+    closeMenu() {
+        var _a, _b;
+        if (!this._active) {
+            return;
+        }
+        if ((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) {
+            (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+        }
+        this._resetMenu();
+        this._menuClosedSubscription.unsubscribe();
+        this._closingActionsSubscription.unsubscribe();
+        this._active = false;
+    }
+    menuOpen() {
+        var _a;
+        return (_a = (this._overlayRef && this._overlayRef.hasAttached())) !== null && _a !== void 0 ? _a : false;
+    }
+    getOverlayPosition(origin) {
+        const positionStrategy = this._overlay.position()
+            .flexibleConnectedTo(origin)
+            .withPositions(this.positions)
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        return positionStrategy;
+    }
+    /**
+     * Focuses the menu trigger.
+     * @param origin Source of the menu trigger's focus.
+     */
+    focus(origin = 'program') {
+        if (this._focusMonitor) {
+            this._focusMonitor.focusVia(this._elementRef, origin);
+        }
+        else {
+            this._elementRef.nativeElement.focus();
+        }
+    }
+    /**
+     * This method sets the menu state to open and focuses the first item if
+     * the menu was opened via the keyboard.
+     */
+    _initMenu() {
+        // this.seamMenuToggle.parentMenu = this.triggersSubmenu() ? this._parentMenu : undefined
+        // this.seamMenuToggle.direction = this.dir
+        // this._setMenuElevation()
+        // this._setIsMenuOpen(true)
+        // this.seamMenuToggle.focusFirstItem(this._openedBy || 'program')
+    }
+    /**
+     * This method resets the menu when it's closed, most importantly restoring
+     * focus to the menu trigger if the menu was opened via the keyboard.
+     */
+    _resetMenu() {
+        // this._setIsMenuOpen(false)
+        // We should reset focus if the user is navigating using a keyboard or
+        // if we have a top-level trigger which might cause focus to be lost
+        // when clicking on the backdrop.
+        if (this.restoreFocus) {
+            if (!this._openedBy) {
+                // Note that the focus style will show up both for `program` and
+                // `keyboard` so we don't have to specify which one it is.
+                this.focus();
+            }
+            // else if (!this.triggersSubmenu()) {
+            //   this.focus(this._openedBy)
+            // }
+        }
+        this._openedBy = null;
+    }
+    /** Returns a stream that emits whenever an action that should close the menu occurs. */
+    _menuClosingActions() {
+        var _a, _b, _c, _d;
+        const backdrop = (_b = (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.backdropClick()) !== null && _b !== void 0 ? _b : of();
+        const detachments = (_d = (_c = this._overlayRef) === null || _c === void 0 ? void 0 : _c.detachments()) !== null && _d !== void 0 ? _d : of();
+        // const parentClose = this._parentMenu ? this._parentMenu.closed : of()
+        const parentClose = of();
+        // const hover = this._parentMenu ? this._parentMenu._hovered().pipe(
+        //   filter(active => active !== this._menuItemInstance),
+        //   filter(() => this._menuOpen)
+        // ) : of()
+        const hover = of();
+        return merge(backdrop, parentClose, hover, detachments);
+    }
+}
+MenuToggleDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[seamMenuToggle]',
+                // tslint:disable-next-line:use-host-property-decorator
+                host: {
+                    'aria-haspopup': 'true',
+                    '[attr.aria-expanded]': 'menuOpen() || null'
+                },
+                exportAs: 'seamMenuToggle'
+            },] }
+];
+MenuToggleDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ViewContainerRef },
+    { type: Overlay },
+    { type: FocusMonitor }
+];
+MenuToggleDirective.propDecorators = {
+    seamMenuToggle: [{ type: Input }],
+    positions: [{ type: Input }],
+    _onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
+    _onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
+    _onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
+    _onDocumentKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
+};
+
+const LIB_MENU = {
+    provide: THESEAM_MENU_PANEL,
+    // tslint:disable-next-line:no-use-before-declare
+    useExisting: forwardRef(() => MenuComponent)
+};
+class MenuComponent {
+    constructor() {
+        this._ngUnsubscribe = new Subject();
+        this._footer = new BehaviorSubject(undefined);
+        this.hasFooter$ = this._footer.pipe(map(v => v !== null && v !== undefined));
+        this._header = new BehaviorSubject(undefined);
+        this.hasHeader$ = this._header.pipe(map(v => v !== null && v !== undefined));
+        /** Menu items inside the current menu. */
+        this._items = [];
+        /** Emits whenever the amount of menu items changes. */
+        this._itemChanges = new Subject();
+        /** Subscription to tab events on the menu panel */
+        this._tabSubscription = Subscription.EMPTY;
+        this.closed = new EventEmitter();
+        this._baseWidth = new BehaviorSubject(null);
+        this.animationType = 'slide';
+        this._menuWidth$ = this._baseWidth.pipe(switchMap(baseWidth => {
+            if (baseWidth) {
+                return fromEvent(window, 'resize').pipe(startWith(undefined), map(() => window.innerWidth < baseWidth ? `${window.innerWidth}px` : `${baseWidth}px`));
+            }
+            return of(undefined);
+        }), distinctUntilChanged(), takeUntil(this._ngUnsubscribe));
+    }
+    /**
+     * Defines a width for a menu that will scale down if the window innerWidth is
+     * smaller than the value.
+     */
+    get baseWidth() { return this._baseWidth.value; }
+    set baseWidth(value) {
+        const _val = coerceNumberProperty(value, null);
+        if (_val !== this._baseWidth.value) {
+            this._baseWidth.next(_val);
+        }
+    }
+    ngOnDestroy() {
+        this._tabSubscription.unsubscribe();
+        this.closed.complete();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    ngAfterContentInit() {
+        this._keyManager = new FocusKeyManager(this._items).withWrap().withTypeAhead();
+        this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
+    }
+    /** Stream that emits whenever the hovered menu item changes. */
+    _hovered() {
+        return this._itemChanges.pipe(startWith(this._items), switchMap(items => merge(...items.map(item => item._hovered))));
+    }
+    /** Handle a keyboard event from the menu, delegating to the appropriate action. */
+    _handleKeydown(event) {
+        // tslint:disable-next-line:deprecation
+        const keyCode = event.keyCode;
+        const manager = this._keyManager;
+        switch (keyCode) {
+            case ESCAPE:
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    this.closed.emit('keydown');
+                }
+                break;
+            // case LEFT_ARROW:
+            //   if (this.parentMenu && this.direction === 'ltr') {
+            //     this.closed.emit('keydown')
+            //   }
+            //   break
+            // case RIGHT_ARROW:
+            //   if (this.parentMenu && this.direction === 'rtl') {
+            //     this.closed.emit('keydown')
+            //   }
+            //   break
+            case HOME:
+            case END:
+                if (!hasModifierKey(event)) {
+                    keyCode === HOME ? manager === null || manager === void 0 ? void 0 : manager.setFirstItemActive() : manager === null || manager === void 0 ? void 0 : manager.setLastItemActive();
+                    event.preventDefault();
+                }
+                break;
+            default:
+                if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
+                    manager === null || manager === void 0 ? void 0 : manager.setFocusOrigin('keyboard');
+                }
+                manager === null || manager === void 0 ? void 0 : manager.onKeydown(event);
+        }
+    }
+    /**
+     * Focus the first item in the menu.
+     * @param origin Action from which the focus originated. Used to set the correct styling.
+     */
+    focusFirstItem(origin = 'program') {
+        var _a;
+        (_a = this._keyManager) === null || _a === void 0 ? void 0 : _a.setFocusOrigin(origin).setFirstItemActive();
+    }
+    /**
+     * Resets the active item in the menu. This is used when the menu is opened, allowing
+     * the user to start from the first option when pressing the down arrow.
+     */
+    resetActiveItem() {
+        var _a;
+        (_a = this._keyManager) === null || _a === void 0 ? void 0 : _a.setActiveItem(-1);
+    }
+    /** Registers a menu item with the menu. */
+    addItem(item) {
+        // We register the items through this method, rather than picking them up through
+        // `ContentChildren`, because we need the items to be picked up by their closest
+        // `seam-menu` ancestor. If we used `@ContentChildren(MenuItemComponent, {descendants: true})`,
+        // all descendant items will bleed into the top-level menu in the case where the consumer
+        // has `seam-menu` instances nested inside each other.
+        if (this._items.indexOf(item) === -1) {
+            this._items.push(item);
+            this._itemChanges.next(this._items);
+        }
+    }
+    /** Removes an item from the menu. */
+    removeItem(item) {
+        const index = this._items.indexOf(item);
+        if (this._items.indexOf(item) > -1) {
+            this._items.splice(index, 1);
+            this._itemChanges.next(this._items);
+        }
+    }
+    /** Sets the footer component. */
+    setFooter(footer) {
+        this._footer.next(footer);
+    }
+    /** Sets the header component. */
+    setHeader(header) {
+        this._header.next(header);
+    }
+    _dropdownMenuClick(event) {
+        // This is needed, because some menu's will get stuck open if the component
+        // managing the menu is destroyed before the menu finishes its cleanup. I
+        // may look for a fix to that eventually.
+        this.closed.emit('click');
+    }
+}
+MenuComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-menu',
+                template: "<ng-template>\n  <div class=\"seam-menu-container\" @slideDown\n    [class.seam-menu-anim--slide]=\"animationType==='slide'\"\n    [class.seam-menu-anim--fade]=\"animationType==='fade'\">\n    <div class=\"dropdown-menu show position-static{{ menuClass ? ' ' + menuClass : '' }}\"\n      [style.width]=\"_menuWidth$ | async\"\n      [class.pt-0]=\"hasHeader$ | async\"\n      [class.pb-0]=\"hasFooter$ | async\"\n      (keydown)=\"_handleKeydown($event)\"\n      (click)=\"_dropdownMenuClick($event)\"\n      tabindex=\"-1\"\n      role=\"menu\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                providers: [LIB_MENU],
+                animations: [
+                    trigger('slideDown', [
+                        transition(':enter', useAnimation(menuDropdownPanelIn)),
+                        transition(':leave', useAnimation(menuDropdownPanelOut)),
+                    ])
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                exportAs: 'seamMenu',
+                styles: [".seam-menu-container.seam-menu-anim--slide{overflow:hidden}.dropdown-menu.ng-animating,.seam-menu-container.ng-animating{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}"]
+            },] }
+];
+MenuComponent.ctorParameters = () => [];
+MenuComponent.propDecorators = {
+    templateRef: [{ type: ViewChild, args: [TemplateRef,] }],
+    closed: [{ type: Output }],
+    menuClass: [{ type: Input }],
+    baseWidth: [{ type: Input }],
+    animationType: [{ type: Input }]
+};
+
+// TODO: Split up the button and anchor classes.
+class MenuFooterActionComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    get _attrType() { return this.type; }
+    /** ARIA type for the button. */
+    get type() { return this._isButton() ? this._type || 'button' : undefined; }
+    set type(value) {
+        this._type = value;
+    }
+    get _classBtn() { return this._isButton(); }
+    get _classBtnLink() { return this._isButton(); }
+    get _stylePadding() { return this._isButton() && 0; }
+    get _styleBorder() { return this._isButton() && 0; }
+    get _styleDisplay() { return this._isButton() && 'inline'; }
+    /** Determines if the component host is a button. */
+    _isButton() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'button';
+    }
+    /** Determines if the component host is an anchor. */
+    _isAnchor() {
+        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'a';
+    }
+}
+MenuFooterActionComponent.decorators = [
+    { type: Component, args: [{
+                // tslint:disable-next-line:component-selector
+                selector: 'button[seamMenuFooterAction],a[seamMenuFooterAction]',
+                template: "<ng-content></ng-content>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+MenuFooterActionComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
+MenuFooterActionComponent.propDecorators = {
+    _attrType: [{ type: HostBinding, args: ['attr.type',] }],
+    type: [{ type: Input }],
+    _classBtn: [{ type: HostBinding, args: ['class.btn',] }],
+    _classBtnLink: [{ type: HostBinding, args: ['class.btn-link',] }],
+    _stylePadding: [{ type: HostBinding, args: ['style.padding.px',] }],
+    _styleBorder: [{ type: HostBinding, args: ['style.border.px',] }],
+    _styleDisplay: [{ type: HostBinding, args: ['style.display.px',] }]
+};
+
+class MenuFooterComponent {
+    constructor(_parentMenu) {
+        this._parentMenu = _parentMenu;
+    }
+    ngOnInit() {
+        if (this._parentMenu && this._parentMenu.setFooter) {
+            this._parentMenu.setFooter(this);
+        }
+    }
+    ngOnDestroy() {
+        if (this._parentMenu && this._parentMenu.setFooter) {
+            this._parentMenu.setFooter(undefined);
+        }
+    }
+}
+MenuFooterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-menu-footer',
+                template: "<ng-content select=\"a[seamMenuFooterAction],button[seamMenuFooterAction]\"></ng-content>\n",
+                host: {
+                    'class': 'd-flex flex-column text-center bg-light border-top rounded-bottom py-2'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+MenuFooterComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_MENU_PANEL,] }, { type: Optional }] }
+];
+
+class MenuHeaderComponent {
+    constructor(_parentMenu) {
+        this._parentMenu = _parentMenu;
+    }
+    ngOnInit() {
+        if (this._parentMenu && this._parentMenu.setHeader) {
+            this._parentMenu.setHeader(this);
+        }
+    }
+    ngOnDestroy() {
+        if (this._parentMenu && this._parentMenu.setHeader) {
+            this._parentMenu.setHeader(undefined);
+        }
+    }
+}
+MenuHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-menu-header',
+                template: "<ng-content></ng-content>\n",
+                host: {
+                    'class': 'd-flex flex-column bg-light border-bottom rounded-top py-2 mb-2'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+MenuHeaderComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_MENU_PANEL,] }, { type: Optional }] }
+];
+
+class TheSeamMenuModule {
+}
+TheSeamMenuModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    MenuComponent,
+                    MenuToggleDirective,
+                    MenuItemComponent,
+                    MenuDividerComponent,
+                    MenuFooterComponent,
+                    MenuFooterActionComponent,
+                    MenuHeaderComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    OverlayModule,
+                    TheSeamIconModule
+                ],
+                exports: [
+                    MenuComponent,
+                    MenuToggleDirective,
+                    MenuItemComponent,
+                    MenuDividerComponent,
+                    TheSeamIconModule,
+                    OverlayModule,
+                    MenuFooterComponent,
+                    MenuFooterActionComponent,
+                    MenuHeaderComponent
+                ]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LIB_MENU, MenuComponent, MenuDividerComponent, MenuFooterActionComponent, MenuFooterComponent, MenuHeaderComponent, MenuItemComponent, MenuToggleDirective, THESEAM_MENU_PANEL, TheSeamMenuModule, menuDropdownPanelExpandIn, menuDropdownPanelExpandOut, menuDropdownPanelFadeIn, menuDropdownPanelFadeOut, menuDropdownPanelIn, menuDropdownPanelOut, menuDropdownPanelSlideIn, menuDropdownPanelSlideOut };
+//# sourceMappingURL=theseam-ui-common-menu.js.map