@theseam/ui-common 0.2.9

package/fesm2015/theseam-ui-common-tiled-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theseam-ui-common-tiled-select.js","sources":["../../../projects/ui-common/tiled-select/directives/tiled-select-tile-overlay.directive.ts","../../../projects/ui-common/tiled-select/components/tiled-select/tiled-select.component.ts","../../../projects/ui-common/tiled-select/directives/tiled-select-tile-label-tpl.directive.ts","../../../projects/ui-common/tiled-select/components/tiled-select-tile/tiled-select-tile.component.ts","../../../projects/ui-common/tiled-select/directives/tiled-select-tile-icon-tpl.directive.ts","../../../projects/ui-common/tiled-select/components/tiled-select-tile-icon/tiled-select-tile-icon.component.ts","../../../projects/ui-common/tiled-select/tiled-select.module.ts","../../../projects/ui-common/tiled-select/theseam-ui-common-tiled-select.ts"],"sourcesContent":["import { Directive, Input, TemplateRef } from '@angular/core'\n\nimport { ITiledSelectItem } from '../tiled-select.models'\n\n@Directive({\n  selector: '[seamTiledSelectTileOverlay]',\n  exportAs: 'seamTiledSelectTileOverlay'\n})\nexport class TiledSelectTileOverlayDirective {\n\n  @Input() record: ITiledSelectItem | undefined | null\n\n  constructor(public template: TemplateRef<any>) { }\n\n}\n","import { animate, animation, query, stagger, style, transition, trigger, useAnimation } from '@angular/animations'\nimport { BooleanInput, coerceArray } from '@angular/cdk/coercion'\nimport { Platform } from '@angular/cdk/platform'\nimport { ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, OnInit, Output, QueryList } from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\nimport { TiledSelectTileOverlayDirective } from './../../directives/tiled-select-tile-overlay.directive'\n\nimport { ITiledSelectItem, TiledSelectLayout } from '../../tiled-select.models'\n\nexport const slideEnterAnimation = animation([\n  style({ opacity: 0, transform: 'translateX(-15px)' }),\n  stagger(100, [\n    animate('0.5s', style({ opacity: 1, transform: 'translateX(0)' }))\n  ])\n])\n\nexport const TILED_SELECT_VALUE_ACCESSOR: any = {\n  provide: NG_VALUE_ACCESSOR,\n  // tslint:disable-next-line:no-use-before-declare\n  useExisting: forwardRef(() => TiledSelectComponent),\n  multi: true,\n}\n\n@Component({\n  selector: 'seam-tiled-select',\n  templateUrl: './tiled-select.component.html',\n  styleUrls: ['./tiled-select.component.scss'],\n  providers: [ TILED_SELECT_VALUE_ACCESSOR ],\n  animations: [\n    trigger('tiles', [\n      transition('* => *', [\n        query(':enter', useAnimation(slideEnterAnimation), { optional: true })\n      ])\n    ])\n  ],\n})\nexport class TiledSelectComponent implements OnInit, ControlValueAccessor {\n  static ngAcceptInputType_val: BooleanInput\n  static ngAcceptInputType_disabled: BooleanInput\n  static ngAcceptInputType_multiple: BooleanInput\n  static ngAcceptInputType_selectionToggleable: BooleanInput\n  static ngAcceptInputType_tileBackdrop: BooleanInput\n  static ngAcceptInputType_showSelectedIcon: BooleanInput\n  static ngAcceptInputType_animationsDisabled: BooleanInput\n\n  @Input() layout: TiledSelectLayout = 'grid'\n  @Input()\n  get tiles() { return this._tiles }\n  set tiles(value: ITiledSelectItem[]) {\n    const _value = [ ...(value || []) ]\n    for (const v of _value) {\n      if (v.value === undefined) {\n        if (v.name === undefined) {\n          throw new Error('If value is undefined then name must be defined.')\n        }\n        v.value = v.name\n      }\n    }\n\n    const prev = this._tiles\n    if (prev.length !== _value.length) {\n      this.tilesAnimationState = !this.tilesAnimationState\n    } else {\n      for (const t of _value) {\n        if (!prev.find(p => p.name === t.name)) {\n          this.tilesAnimationState = !this.tilesAnimationState\n          break\n        }\n      }\n    }\n\n    this._tiles = _value\n  }\n  private _tiles: ITiledSelectItem[] = []\n\n  // tslint:disable-next-line:no-input-rename\n  @Input('value') val: string | string[] | undefined\n\n  @Input() @InputBoolean() disabled: boolean = false\n  @Input() @InputBoolean() multiple: boolean = false\n  @Input() @InputBoolean() selectionToggleable: boolean = true\n  @Input() @InputBoolean() tileBackdrop: boolean = false\n  @Input() @InputBoolean() showSelectedIcon: boolean = true\n  @Input() @InputBoolean() animationsDisabled: boolean = this._platform.IOS\n\n  @Output() readonly change = new EventEmitter<string | string[] | undefined>()\n\n  tilesAnimationState = false\n\n  onChange: any\n  onTouched: any\n\n  @ContentChildren(TiledSelectTileOverlayDirective)\n  public overlayTpls?: QueryList<TiledSelectTileOverlayDirective>\n\n  constructor(\n    private readonly _platform: Platform,\n    private readonly _cdr: ChangeDetectorRef\n  ) { }\n\n  ngOnInit() { }\n\n  get value(): string | string[] | undefined {\n    return this.val\n  }\n\n  set value(value: string | string[] | undefined) {\n    this.val = (this.multiple) ? [ ...(<string[]>value || []) ] : value || ''\n    if (this.onChange) {\n      this.onChange(this.val)\n      this.change.emit(this.val)\n      this._cdr.markForCheck()\n    }\n    if (this.onTouched) { this.onTouched() }\n  }\n\n  writeValue(value: any): void {\n    this.value = value\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  onTileSelected(event: MouseEvent, tile: ITiledSelectItem) {\n    this.toggleTileSelected(tile)\n  }\n\n  public isSelected(tile: ITiledSelectItem) {\n    if (!this.multiple) {\n      if (this.value === tile.value) {\n        return true\n      }\n    } else {\n      if (this.value) {\n        for (const v of this.value) {\n          if (v === tile.value) {\n            return true\n          }\n        }\n      }\n    }\n\n    return false\n  }\n\n  public toggleTileSelected(tile: ITiledSelectItem): void {\n    if (!this.selectionToggleable && this.isSelected(tile)) {\n      return\n    }\n\n    if (this.isSelected(tile)) {\n      this.unselectTile(tile)\n    } else {\n      this.selectTile(tile)\n    }\n  }\n\n  public selectTile(tile: ITiledSelectItem): void {\n    if (this.multiple) {\n      if (!this.isSelected(tile)) {\n        const value: string[] = <string[]>this.value || []\n        this.value = [ ...coerceArray(value), tile.value ]\n      }\n    } else {\n      this.value = tile.value\n    }\n  }\n\n  public unselectTile(tile: ITiledSelectItem): void {\n    if (this.multiple) {\n      const value: string[] = <string[]>this.value || []\n      this.value = value.filter(v => v !== tile.value)\n    } else {\n      this.value = undefined\n    }\n  }\n\n  public getSelectedTiles(): ITiledSelectItem[] {\n    return this.tiles.filter(t => this.isSelected(t))\n  }\n\n  getOverlayTpl(tile: ITiledSelectItem): TiledSelectTileOverlayDirective | undefined {\n    // console.log('overlayTpls', this.overlayTpls)\n    return (this.overlayTpls || []).find(t => t.record?.name === tile.name)\n  }\n\n}\n","import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[seamTiledSelectTileLabelTpl]'\n})\nexport class TiledSelectTileLabelTplDirective {\n\n  constructor(public template: TemplateRef<any>) { }\n\n}\n","import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations'\nimport { BooleanInput } from '@angular/cdk/coercion'\nimport { ChangeDetectorRef, Component, ContentChild, EventEmitter, HostBinding, Input, Output } from '@angular/core'\n\nimport { faCheckCircle } from '@fortawesome/free-regular-svg-icons'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\nimport { SeamIcon } from '@theseam/ui-common/icon'\n\nimport { TiledSelectTileLabelTplDirective } from '../../directives/tiled-select-tile-label-tpl.directive'\nimport { TiledSelectTileOverlayDirective } from '../../directives/tiled-select-tile-overlay.directive'\nimport { TiledSelectLayout } from '../../tiled-select.models'\n\nexport const tilePulse = animation(\n  animate(\n    '{{ timing }}s {{ delay }}s',\n    keyframes([\n      style({ transform: 'scale3d(1, 1, 1)' }),\n      style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),\n      style({ transform: 'scale3d(1, 1, 1)' }),\n    ])\n  ),\n  { params: { scale: 1.05, timing: 0.75, delay: 0 } }\n)\n\nexport const tileScaleUp = animation(\n  animate(\n    '{{ timing }}s {{ delay }}s',\n    keyframes([\n      style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),\n    ])\n  ),\n  { params: { scale: 1.05, timing: 0.75, delay: 0 } }\n)\n\nexport const tileScaleDown = animation(\n  animate(\n    '{{ timing }}s {{ delay }}s',\n    keyframes([\n      style({ transform: 'scale3d(1, 1, 1)' }),\n    ])\n  ),\n  { params: { scale: 1.05, timing: 0.75, delay: 0 } }\n)\n\n@Component({\n  selector: 'seam-tiled-select-tile',\n  templateUrl: './tiled-select-tile.component.html',\n  styleUrls: ['./tiled-select-tile.component.scss'],\n  animations: [\n    trigger('pulse', [\n      transition('false => true', [\n        useAnimation(tilePulse)\n        // useAnimation(tileScaleUp)\n      ]),\n      // transition('true => false', [\n      //   useAnimation(tileScaleDown)\n      // ])\n    ]),\n    // trigger('openClose', [\n    //   state('true', style({ height: '*' })),\n    //   state('false', style({ height: '0px' })),\n    //   transition('false <=> true', animate(500))\n    // ])\n  ],\n  // changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TiledSelectTileComponent {\n  static ngAcceptInputType_disabled: BooleanInput\n  static ngAcceptInputType_selected: BooleanInput\n  static ngAcceptInputType_tileBackdrop: BooleanInput\n  static ngAcceptInputType_selectable: BooleanInput\n  static ngAcceptInputType_grayscaleOnDisable: BooleanInput\n  static ngAcceptInputType_showLabel: BooleanInput\n  static ngAcceptInputType_showSelectedIcon: BooleanInput\n\n  faCheckCircle = faCheckCircle\n\n  @HostBinding('@pulse') pulseAnimationState = true\n\n  @Input() layout: TiledSelectLayout = 'grid'\n\n  @Input() name: string | undefined | null\n  @Input() label: string | undefined | null\n  @Input() icon: SeamIcon | undefined | null\n  @Input() @InputBoolean() disabled: boolean = false\n  @Input() @InputBoolean() selected: boolean = false\n\n  @Input() @InputBoolean() tileBackdrop: boolean = false\n  @Input() @InputBoolean() selectable: boolean = false\n  @Input() @InputBoolean() grayscaleOnDisable: boolean = true\n  @Input() @InputBoolean() showLabel: boolean = true\n  @Input() @InputBoolean() showSelectedIcon: boolean = true\n\n  @Input() iconClass: string | undefined | null\n\n  @Input() overlayTpl: TiledSelectTileOverlayDirective | undefined | null\n\n  @Output() activated = new EventEmitter<any>()\n\n  @ContentChild(TiledSelectTileLabelTplDirective, { static: true }) labelTpl?: TiledSelectTileLabelTplDirective\n\n  pulsing = false\n  pulsingTimeout: number | undefined\n\n  constructor(\n    private cdr: ChangeDetectorRef\n  ) { }\n\n  onTileClick(event: any) {\n    if (!this.selectable) { return }\n    this.activated.emit(event)\n\n    // this.pulsing = true\n    // setTimeout(() => {\n    //   this.pulsing = false\n    // }, 750)\n  }\n\n  mDown() {\n    if (this.pulsingTimeout) {\n      clearTimeout(this.pulsingTimeout)\n    }\n\n    if (!this.pulsing) {\n      this.pulsing = true\n      // this.cdr.detectChanges()\n    }\n\n    // console.log('start')\n    this.pulsingTimeout = window.setTimeout(() => {\n      this.pulsing = false\n      // this.cdr.detectChanges()\n      this.pulsingTimeout = undefined\n    }, 750)\n  }\n\n}\n","import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[seamTiledSelectTileIconTpl]',\n  exportAs: 'seamTiledSelectTileIconTpl'\n})\nexport class TiledSelectTileIconTplDirective {\n\n  constructor(public template: TemplateRef<any>) { }\n\n}\n","import { BooleanInput } from '@angular/cdk/coercion'\nimport { Component, ContentChild, HostBinding, Input, OnInit } from '@angular/core'\n\nimport { IconProp } from '@fortawesome/fontawesome-svg-core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\nimport { SeamIcon } from '@theseam/ui-common/icon'\n\nimport { TiledSelectTileIconTplDirective } from '../../directives/tiled-select-tile-icon-tpl.directive'\nimport { TiledSelectLayout } from '../../tiled-select.models'\n\nconst needToFix = /(MSIE 10)|(Trident.*rv:11\\.0)|( Edge\\/[\\d\\.]+$)/.test(navigator.userAgent)\n\n@Component({\n  selector: 'seam-tiled-select-tile-icon',\n  templateUrl: './tiled-select-tile-icon.component.html',\n  styleUrls: ['./tiled-select-tile-icon.component.scss']\n})\nexport class TiledSelectTileIconComponent implements OnInit {\n  static ngAcceptInputType_grayscaleOnDisable: BooleanInput\n  static ngAcceptInputType_disabled: BooleanInput\n\n  needToFix = needToFix\n\n  @HostBinding('class.grid') get _cssClassGrid() { return this.layout === 'grid' }\n  @HostBinding('class.list') get _cssClassList() { return this.layout === 'list' }\n\n  @Input()\n  set layout(value: TiledSelectLayout) { this._layout = value || 'grid' }\n  get layout(): TiledSelectLayout { return this._layout }\n  private _layout: TiledSelectLayout = 'grid'\n\n  @Input() @InputBoolean() grayscaleOnDisable: boolean = false\n  @Input() @InputBoolean() disabled: boolean = false\n\n  @Input() iconClass: string | undefined | null\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\n  public _iconUrl: string | undefined | null\n  public _iconObj: IconProp | undefined | null\n\n  @ContentChild(TiledSelectTileIconTplDirective, { static: true }) iconTpl?: TiledSelectTileIconTplDirective\n\n  constructor() { }\n\n  ngOnInit() { }\n\n}\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome'\n\nimport { TiledSelectTileIconComponent } from './components/tiled-select-tile-icon/tiled-select-tile-icon.component'\nimport { TiledSelectTileComponent } from './components/tiled-select-tile/tiled-select-tile.component'\nimport { TiledSelectComponent } from './components/tiled-select/tiled-select.component'\nimport { TiledSelectTileIconTplDirective } from './directives/tiled-select-tile-icon-tpl.directive'\nimport { TiledSelectTileLabelTplDirective } from './directives/tiled-select-tile-label-tpl.directive'\nimport { TiledSelectTileOverlayDirective } from './directives/tiled-select-tile-overlay.directive'\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FontAwesomeModule\n  ],\n  declarations: [\n    TiledSelectComponent,\n    TiledSelectTileComponent,\n    TiledSelectTileOverlayDirective,\n    TiledSelectTileIconComponent,\n    TiledSelectTileIconTplDirective,\n    TiledSelectTileLabelTplDirective\n  ],\n  exports: [\n    TiledSelectComponent,\n    TiledSelectTileComponent,\n    TiledSelectTileOverlayDirective,\n    TiledSelectTileIconTplDirective,\n    TiledSelectTileLabelTplDirective\n  ]\n})\nexport class TheSeamTiledSelectModule { }\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-toggle-edit.js

@@ -0,0 +1,521 @@
+import { __decorate } from 'tslib';
+import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { Directive, TemplateRef, Injectable, Inject, EventEmitter, Component, ElementRef, Optional, Self, Host, NgZone, Renderer2, ViewContainerRef, HostBinding, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
+import { faPen, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { InputBoolean } from '@theseam/ui-common/core';
+import { TheSeamFormFieldComponent, TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+
+class ToggleEditDisplayTplDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+ToggleEditDisplayTplDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[seamToggleEditDisplayTpl]'
+            },] }
+];
+ToggleEditDisplayTplDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+
+class ToggleEditKeyboardListenerService {
+    constructor(document) {
+        this.document = document;
+        this._elements = [];
+        this._isListening = false;
+        this._keydownListener = (event) => {
+            for (const element of this._elements) {
+                if (element.isEditing()) {
+                    element.keydownEvent(event);
+                }
+            }
+        };
+        this._document = document;
+    }
+    add(element) {
+        this._elements.push(element);
+        this._startListening();
+    }
+    remove(element) {
+        this._elements = this._elements.filter(v => v !== element);
+        if (this._elements.length === 0) {
+            this._stopListening();
+        }
+    }
+    isListening() {
+        return this._isListening;
+    }
+    _startListening() {
+        if (this.isListening()) {
+            return;
+        }
+        this._document.body.addEventListener('keydown', this._keydownListener, true);
+        this._isListening = true;
+    }
+    _stopListening() {
+        if (!this.isListening()) {
+            return;
+        }
+        this._document.body.removeEventListener('keydown', this._keydownListener, true);
+        this._isListening = false;
+    }
+}
+ToggleEditKeyboardListenerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToggleEditKeyboardListenerService_Factory() { return new ToggleEditKeyboardListenerService(i0.ɵɵinject(i1.DOCUMENT)); }, token: ToggleEditKeyboardListenerService, providedIn: "root" });
+ToggleEditKeyboardListenerService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+ToggleEditKeyboardListenerService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+
+class ToggleEditComponent {
+    constructor(_elementRef, controlContainer, formFieldComponent, _kbListener, _focusMonitor, _ngZone, _renderer, _viewContainerRef, _overlay) {
+        this._elementRef = _elementRef;
+        this.controlContainer = controlContainer;
+        this.formFieldComponent = formFieldComponent;
+        this._kbListener = _kbListener;
+        this._focusMonitor = _focusMonitor;
+        this._ngZone = _ngZone;
+        this._renderer = _renderer;
+        this._viewContainerRef = _viewContainerRef;
+        this._overlay = _overlay;
+        this.faPen = faPen;
+        this.faTimes = faTimes;
+        this.faCheck = faCheck;
+        this._previousDisabled = false;
+        /** Use `hasFocus()` to check for focus. This is only for monitoring focus lost. */
+        this._focused = false;
+        this._actionsFocused = false;
+        this._submitting = false;
+        /**
+         * Input value before editing.
+         *
+         * If the edit change is canceled the input value will be reset back to this
+         * value.
+         */
+        this._beforeEditValue = null;
+        this.cancelOnBlur = true;
+        this.waitOnSubmit = false;
+        this.placeholder = '';
+        this._editing = false;
+        this.changeAccepted = new EventEmitter();
+        this.changeDeclined = new EventEmitter();
+        this.editingChange = new EventEmitter();
+        this._ngZone.runOutsideAngular(() => {
+            this._focusObserver = new MutationObserver(() => {
+                this._ngZone.run(() => {
+                    if (this.hasFocus()) {
+                        if (this.disabled) {
+                            return;
+                        }
+                        this._onFocus();
+                    }
+                    else {
+                        this._onBlur();
+                    }
+                });
+            });
+        });
+    }
+    get _toggleEditActiveClass() { return this.editing; }
+    get editing() { return this._editing; }
+    set editing(value) {
+        if (this.disabled && value) {
+            return;
+        }
+        if (!this._editing) {
+            this.updateBeforeEditValue();
+        }
+        this._editing = coerceBooleanProperty(value);
+        this.editingChange.emit(value);
+    }
+    ngOnInit() {
+        this._initMonitors();
+        if (this.formFieldComponent) {
+            // TODO: Consider making this smarter, such as avoiding overwritting when input set.
+            this.formFieldComponent.numPaddingErrors = 0;
+        }
+    }
+    ngOnDestroy() {
+        this._destroyMonitors();
+    }
+    ngAfterViewInit() {
+        if (this.formFieldComponent && this.formFieldComponent.contentInput) {
+            this.formFieldComponent.contentInput.stateChanges.subscribe(_ => {
+                this._checkDisabledChange();
+            });
+        }
+        setTimeout(() => {
+            if (this.templatePortalContent) {
+                this.templatePortal = new TemplatePortal(this.templatePortalContent, this._viewContainerRef);
+            }
+        });
+        this._checkDisabledChange();
+    }
+    ngDoCheck() {
+        this._checkDisabledChange();
+    }
+    _initMonitors() {
+        var _a;
+        this._kbListener.add(this);
+        this._focusMonitor.monitor(this._elementRef.nativeElement, true);
+        (_a = this._focusObserver) === null || _a === void 0 ? void 0 : _a.observe(this._elementRef.nativeElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+            childList: false,
+            characterData: false
+        });
+    }
+    _destroyMonitors() {
+        var _a;
+        this._kbListener.remove(this);
+        (_a = this._focusObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._focused = false;
+        this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+        this._renderer.removeAttribute(this._elementRef.nativeElement, 'tabindex');
+    }
+    // Make this disabled checking implementation better. It gets called to much
+    // trying to be accurate.
+    _checkDisabledChange() {
+        const isDisabled = this.disabled;
+        if (isDisabled !== this._previousDisabled) {
+        }
+    }
+    get disabled() {
+        const control = this.getControl();
+        if (control) {
+            return control.disabled;
+        }
+        return false;
+    }
+    canSubmit() {
+        const control = this.getControl();
+        if (control) {
+            return control.valid;
+        }
+        return true;
+    }
+    isSubmitting() {
+        return this._submitting;
+    }
+    submitComplete(error) {
+        const control = this.getControl();
+        if (control) {
+            control.enable();
+        }
+        this._submitting = false;
+        if (!error) {
+            this.stopEditing();
+        }
+    }
+    updateBeforeEditValue() {
+        const control = this.getControl();
+        if (control) {
+            this._beforeEditValue = control.value;
+        }
+    }
+    getValue() {
+        const control = this.getControl();
+        if (control) {
+            return control.value;
+        }
+        return null;
+    }
+    resetValue() {
+        const control = this.getControl();
+        if (control) {
+            // Reset without emitting then update which will emit, because reset will
+            // emit changes before setting pristine
+            control.reset(this._beforeEditValue, { emitEvent: false });
+            control.updateValueAndValidity();
+        }
+    }
+    isFormGroup() {
+        return !!this.controlContainer;
+    }
+    getFormGroup() {
+        if (!this.isFormGroup()) {
+            return null;
+        }
+        return this.controlContainer.control;
+    }
+    isInFormField() {
+        return !!this.formFieldComponent;
+    }
+    getFormControl() {
+        if (!this.isInFormField()) {
+            return null;
+        }
+        if (!this.formFieldComponent.contentInput) {
+            return null;
+        }
+        return this.formFieldComponent.contentInput.ngControl.control;
+    }
+    hasControl() {
+        return !!this.getControl();
+    }
+    getControl() {
+        if (this.isFormGroup()) {
+            return this.getFormGroup();
+        }
+        else if (this.isInFormField()) {
+            return this.getFormControl();
+        }
+        return null;
+    }
+    submitEdit() {
+        if (!this.canSubmit()) {
+            return;
+        }
+        if (this.waitOnSubmit) {
+            const control = this.getControl();
+            if (control) {
+                control.disable();
+            }
+            this._submitting = true;
+        }
+        this.stopEditing();
+        this.changeAccepted.emit(this);
+    }
+    cancelEdit() {
+        // Reset without emitting then update which will emit, because reset will
+        // emit changes before setting pristine
+        this.resetValue();
+        this.stopEditing();
+        this.changeDeclined.emit(this);
+    }
+    _onFocus() {
+        // Return if already focused
+        if (this._focused) {
+            return;
+        }
+        this._focused = true;
+        this._actionsFocused = false;
+    }
+    _onBlur() {
+        // Return if focus hasn't been detected
+        if (!this._focused) {
+            return;
+        }
+        if (this.editing && this.cancelOnBlur) {
+            setTimeout(() => {
+                if (!this._actionsFocused) {
+                    this.cancelEdit();
+                }
+            });
+        }
+        this._focused = false;
+    }
+    hasFocus() {
+        return this._elementRef.nativeElement.classList.contains('cdk-focused');
+    }
+    focusContent() {
+        // Set the tab index to `-1` to allow the root element of the component to
+        // receive `focus` event from javascript, but not get focused by keyboard
+        // navigation. This is for the focus monitor. If a button is clicked the
+        // focus monitor emits a blur before the focus of the input. This will avoid
+        // the blur by letting the component itself receive focus events.
+        this._renderer.setAttribute(this._elementRef.nativeElement, 'tabindex', '-1');
+        this._elementRef.nativeElement.focus();
+    }
+    toggleEditing(isEditing) {
+        if (this.editing === isEditing) {
+            return;
+        }
+        const _editing = isEditing === undefined ? !this.editing : !!isEditing;
+        if (_editing) {
+            this.startEditing();
+        }
+        else {
+            this.stopEditing();
+        }
+    }
+    isEditing() {
+        return this.editing;
+    }
+    startEditing() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.isEditing()) {
+            return;
+        }
+        this.updateBeforeEditValue();
+        this.focusContent();
+        this.editing = true;
+        this.modalRef = this._overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.getOverlayPosition(this._elementRef.nativeElement),
+        });
+        this.modalRef.attach(this.templatePortal);
+    }
+    stopEditing() {
+        var _a;
+        if (!this.isEditing()) {
+            return;
+        }
+        if (this.isSubmitting()) {
+            return;
+        }
+        if ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) {
+            this.modalRef.detach();
+        }
+        // NOTE: This is a hack to avoid a focus lost issue introduced by a focus
+        // acuired issue's hack.
+        this._elementRef.nativeElement.focus();
+        this._elementRef.nativeElement.blur();
+        this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+        this._renderer.removeAttribute(this._elementRef.nativeElement, 'tabindex');
+        this._focusMonitor.monitor(this._elementRef.nativeElement, true);
+        this.editing = false;
+    }
+    keydownEvent(event) {
+        // tslint:disable-next-line:deprecation
+        switch (event.keyCode) {
+            case ESCAPE: {
+                this.cancelEdit();
+                break;
+            }
+            case ENTER: {
+                this.submitEdit();
+                break;
+            }
+        }
+    }
+    getOverlayPosition(origin) {
+        const positionStrategy = this._overlay.position()
+            .flexibleConnectedTo(origin)
+            .withPositions(this.getPositions())
+            .withFlexibleDimensions(false)
+            .withPush(false);
+        return positionStrategy;
+    }
+    getPositions() {
+        return [
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom'
+            },
+        ];
+    }
+    resized() {
+        if (this.modalRef && this.modalRef.hasAttached()) {
+            this.modalRef.updatePosition();
+        }
+    }
+    actionsFocusChange(event) {
+        this._actionsFocused = !!event;
+    }
+}
+ToggleEditComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-toggle-edit',
+                template: "<div class=\"toggle-edit-not-editing rounded\"\n  [class.w-100]=\"editing\"\n  [class.toggle-edit-editing]=\"editing\"\n  [class.is-disabled]=\"disabled\"\n  (seamElemResized)=\"resized()\">\n  <div class=\"toggle-edit-content-container\">\n    <div class=\"toggle-edit-content\" (click)=\"toggleEditing(true)\">\n      <ng-container *ngIf=\"editing; else notEditingTpl\">\n        <ng-content></ng-content>\n      </ng-container>\n      <ng-template #notEditingTpl>\n        <ng-container *ngIf=\"displayTpl; else noDisplayTpl\">\n          <ng-template [ngTemplateOutlet]=\"displayTpl.template\" [ngTemplateOutletContext]=\"{ $implicit: getValue() || placeholder }\"></ng-template>\n        </ng-container>\n        <ng-template #noDisplayTpl>\n          <div class=\"pl-1 pr-1\">\n            {{ getValue() || placeholder }}\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n    <div>\n      <ng-template *ngIf=\"!editing\" [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n      <ng-template #templatePortalContent>\n        <seam-toggle-edit-actions-container\n          [class.bg-light]=\"editing\"\n          tabindex=\"-1\"\n          cdkMonitorSubtreeFocus\n          (cdkFocusChange)=\"actionsFocusChange($event)\">\n          <button *ngIf=\"!editing\"\n            type=\"button\"\n            class=\"toggle-edit-edit-btn btn text-secondary bg-transparent p-1 border-0\"\n            (click)=\"toggleEditing(true)\">\n            <fa-icon [icon]=\"faPen\"></fa-icon>\n          </button>\n          <button *ngIf=\"editing\"\n            type=\"button\"\n            [disabled]=\"!canSubmit()\"\n            class=\"toggle-edit-submit-btn btn text-secondary bg-transparent p-1 border-0\"\n            (click)=\"submitEdit()\">\n            <fa-icon [icon]=\"faCheck\"></fa-icon>\n          </button>\n          <button *ngIf=\"editing\"\n            type=\"button\"\n            class=\"toggle-edit-cancel-btn btn text-secondary bg-transparent p-1 border-0\"\n            (click)=\"cancelEdit()\">\n            <fa-icon [icon]=\"faTimes\"></fa-icon>\n          </button>\n        </seam-toggle-edit-actions-container>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n<seam-loading *ngIf=\"isSubmitting()\"></seam-loading>\n",
+                styles: [":host{display:block;position:relative}.toggle-edit-not-editing{transition:background-color .25s ease-in-out}.toggle-edit-not-editing .toggle-edit-content-container{display:flex;flex-direction:row}.toggle-edit-not-editing .toggle-edit-content-container .toggle-edit-content{flex:1 1 auto;display:flex;align-items:center}.toggle-edit-not-editing:not(.is-disabled).toggle-edit-editing,.toggle-edit-not-editing:not(.is-disabled):hover{background-color:#f8f9fa}.toggle-edit-not-editing:not(.is-disabled).toggle-edit-editing .toggle-edit-edit-btn,.toggle-edit-not-editing:not(.is-disabled):hover .toggle-edit-edit-btn{opacity:1;visibility:visible}.toggle-edit-not-editing .toggle-edit-edit-btn{opacity:0;visibility:hidden}.toggle-edit-not-editing .toggle-edit-cancel-btn,.toggle-edit-not-editing .toggle-edit-edit-btn,.toggle-edit-not-editing .toggle-edit-submit-btn{transition:.25s ease-in-out}.toggle-edit-not-editing .toggle-edit-edit-btn{border-top-left-radius:0;border-bottom-left-radius:0}.toggle-edit-not-editing .toggle-edit-submit-btn{border-radius:0}.toggle-edit-not-editing .toggle-edit-cancel-btn{border-top-left-radius:0;border-bottom-left-radius:0}"]
+            },] }
+];
+ToggleEditComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ControlContainer, decorators: [{ type: Optional }, { type: Self }] },
+    { type: TheSeamFormFieldComponent, decorators: [{ type: Optional }, { type: Host }] },
+    { type: ToggleEditKeyboardListenerService },
+    { type: FocusMonitor },
+    { type: NgZone },
+    { type: Renderer2 },
+    { type: ViewContainerRef },
+    { type: Overlay }
+];
+ToggleEditComponent.propDecorators = {
+    _toggleEditActiveClass: [{ type: HostBinding, args: ['class.toggle-edit-active',] }],
+    cancelOnBlur: [{ type: Input }],
+    waitOnSubmit: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    editing: [{ type: Input }],
+    changeAccepted: [{ type: Output }],
+    changeDeclined: [{ type: Output }],
+    editingChange: [{ type: Output }],
+    templatePortalContent: [{ type: ViewChild, args: ['templatePortalContent', { static: true },] }],
+    displayTpl: [{ type: ContentChild, args: [ToggleEditDisplayTplDirective, { static: true },] }]
+};
+__decorate([
+    InputBoolean()
+], ToggleEditComponent.prototype, "cancelOnBlur", void 0);
+__decorate([
+    InputBoolean()
+], ToggleEditComponent.prototype, "waitOnSubmit", void 0);
+
+class ToggleEditActionsContainerComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ToggleEditActionsContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-toggle-edit-actions-container',
+                template: "<ng-content></ng-content>\n",
+                styles: [":host{display:block}"]
+            },] }
+];
+ToggleEditActionsContainerComponent.ctorParameters = () => [];
+
+class TheSeamToggleEditModule {
+}
+TheSeamToggleEditModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ToggleEditDisplayTplDirective,
+                    ToggleEditActionsContainerComponent,
+                    ToggleEditComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    TheSeamSharedModule,
+                    FontAwesomeModule,
+                    ReactiveFormsModule,
+                    TheSeamFormFieldModule,
+                    OverlayModule,
+                    PortalModule,
+                    A11yModule,
+                    TheSeamLoadingModule
+                ],
+                exports: [
+                    ToggleEditDisplayTplDirective,
+                    ToggleEditComponent
+                ]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TheSeamToggleEditModule, ToggleEditActionsContainerComponent, ToggleEditComponent, ToggleEditDisplayTplDirective, ToggleEditKeyboardListenerService };
+//# sourceMappingURL=theseam-ui-common-toggle-edit.js.map