igniteui-webcomponents/components/resize-container/resize-container.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcResizeContainerComponent_1;
import { LitElement, html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { partNameMap } from '../common/util.js';
import IgcIconComponent from '../icon/icon.js';
import { addResizeController } from './resize-controller.js';
import { styles } from './themes/resize-container.base.css.js';
import { styles as shared } from './themes/shared/resize-container.common.css.js';
import { all } from './themes/themes.js';
let IgcResizeContainerComponent = IgcResizeContainerComponent_1 = class IgcResizeContainerComponent extends EventEmitterMixin(LitElement) {
    static register() {
        registerComponent(IgcResizeContainerComponent_1, IgcIconComponent);
    }
    set ghostFactory(value) {
        this._ghostFactory = value;
        this._controller.set({ deferredFactory: this._ghostFactory });
    }
    get ghostFactory() {
        return this._ghostFactory;
    }
    set mode(value) {
        this._mode = value;
        this._controller.set({ mode: this._mode });
    }
    get mode() {
        return this._mode;
    }
    constructor() {
        super();
        this._mode = 'immediate';
        this._container = createRef();
        this._adorners = {
            side: createRef(),
            corner: createRef(),
            bottom: createRef(),
        };
        this._isActive = false;
        this.active = false;
        this._controller = addResizeController(this, {
            ref: [this._adorners.side, this._adorners.corner, this._adorners.bottom],
            mode: this._mode,
            deferredFactory: this._ghostFactory,
            start: this._handleResizeStart,
            resize: this._handleResize,
            end: this._handleResizeEnd,
            cancel: this._handleResizeCancel,
            resizeTarget: () => this._container.value,
        });
    }
    createRenderRoot() {
        const root = super.createRenderRoot();
        root.addEventListener('slotchange', () => this.requestUpdate());
        return root;
    }
    _updateResizingState(params) {
        const { initial, current, trigger } = params.state;
        const { side, bottom } = this._adorners;
        if (trigger === side.value) {
            current.height = initial.height;
        }
        else if (trigger === bottom.value) {
            current.width = initial.width;
        }
    }
    _handlePointerEnter() {
        this._isActive = true;
    }
    _handlePointerLeave() {
        this._isActive = false;
    }
    _handleResizeStart(params) {
        params.event.preventDefault();
        return this.emitEvent('igcResizeStart', {
            bubbles: false,
            cancelable: true,
            detail: params,
        });
    }
    _handleResize(params) {
        this._updateResizingState(params);
        this.emitEvent('igcResize', { bubbles: false, detail: params });
    }
    _handleResizeEnd(params) {
        this.emitEvent('igcResizeEnd', { bubbles: false, detail: params });
    }
    _handleResizeCancel({ initial }) {
        this._controller.dispose();
        if (this.mode !== 'deferred') {
            Object.assign(this._container.value.style, {
                width: `${initial.width}px`,
                height: `${initial.height}px`,
            });
        }
        this.emitEvent('igcResizeCancel', { bubbles: false, cancelable: false });
    }
    _renderAdorner(name, part) {
        return html `
      <slot ${ref(this._adorners[name])} part=${part} name="${name}-adorner">
      </slot>
    `;
    }
    _renderAdorners() {
        if (!this._isActive && !this.active) {
            return nothing;
        }
        return html `
      ${this._renderAdorner('side', 'trigger-side')}
      ${this._renderAdorner('corner', 'trigger')}
      ${this._renderAdorner('bottom', 'trigger-bottom')}
    `;
    }
    render() {
        const parts = partNameMap({
            'resize-base': true,
            active: this._isActive || this.active,
        });
        return html `
      <div
        ${ref(this._container)}
        part=${parts}
        @pointerenter=${this.active ? nothing : this._handlePointerEnter}
        @pointerleave=${this.active ? nothing : this._handlePointerLeave}
      >
        <slot></slot>
        ${this._renderAdorners()}
      </div>
    `;
    }
};
IgcResizeContainerComponent.tagName = 'igc-resize';
IgcResizeContainerComponent.styles = [styles, shared];
__decorate([
    state()
], IgcResizeContainerComponent.prototype, "_isActive", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], IgcResizeContainerComponent.prototype, "active", void 0);
__decorate([
    property({ attribute: false })
], IgcResizeContainerComponent.prototype, "ghostFactory", null);
__decorate([
    property()
], IgcResizeContainerComponent.prototype, "mode", null);
IgcResizeContainerComponent = IgcResizeContainerComponent_1 = __decorate([
    themes(all)
], IgcResizeContainerComponent);
export default IgcResizeContainerComponent;
//# sourceMappingURL=resize-container.js.map