@doku-dev/doku-fragment/esm2020/lib/select/utils/view-element.util.mjs

A new Angular UI library that moving away from Bootstrap and built from scratch.

import { Injector, createComponent, } from '@angular/core';
import { DokuSelectDropdownPortal } from '../select-dropdown-portal.component';
import { DokuSelectOption } from '../select-option.component';
export class ViewElementUtil {
    static createSelectDropdownPortal(props) {
        const component = createComponent(DokuSelectDropdownPortal, {
            environmentInjector: props.environmentInjector,
            elementInjector: Injector.create({ providers: [], parent: props.parentElementInjector }),
        });
        props.applicationRef.attachView(component.hostView);
        const nativeElement = component.location.nativeElement;
        props.renderer.setStyle(nativeElement, 'display', 'block');
        if (props.portalClass) {
            props.renderer.addClass(nativeElement, props.portalClass);
        }
        if (props.inputWrapperElement) {
            props.renderer.setStyle(nativeElement, 'width', props.inputWrapperElement.clientWidth + 'px');
            props.renderer.setStyle(nativeElement, 'box-sizing', 'content-box');
            props.renderer.setStyle(props.inputWrapperElement, 'z-index', '1');
        }
        component.onDestroy(() => {
            if (!props.inputWrapperElement)
                return;
            props.renderer.setStyle(props.inputWrapperElement, 'z-index', '');
        });
        return component;
    }
    static createSelectOption(props) {
        let projectableNodes;
        let customOptionRef;
        if (props.templateRef) {
            const context = { $implicit: props.item };
            customOptionRef = props.templateRef.createEmbeddedView(context);
            props.applicationRef.attachView(customOptionRef);
            projectableNodes = [customOptionRef.rootNodes];
        }
        else {
            projectableNodes = [[props.renderer.createText(props.item[props.bindLabel])]];
        }
        const component = createComponent(DokuSelectOption, {
            environmentInjector: props.environmentInjector,
            elementInjector: Injector.create({ providers: [], parent: props.portalRef?.injector }),
            projectableNodes,
        });
        props.applicationRef.attachView(component.hostView);
        component.setInput('value', props.item[props.bindValue]);
        component.setInput('disabled', !!props.item.disabled);
        component.onDestroy(() => {
            customOptionRef?.destroy();
        });
        props.portalRef?.onDestroy(() => {
            component.destroy();
        });
        return component;
    }
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy1lbGVtZW50LnV0aWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2t1LWZyYWdtZW50L3NyYy9saWIvc2VsZWN0L3V0aWxzL3ZpZXctZWxlbWVudC51dGlsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFLTCxRQUFRLEVBR1IsZUFBZSxHQUNoQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUMvRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUc5RCxNQUFNLE9BQU8sZUFBZTtJQUMxQixNQUFNLENBQUMsMEJBQTBCLENBQUMsS0FPakM7UUFDQyxNQUFNLFNBQVMsR0FBRyxlQUFlLENBQUMsd0JBQXdCLEVBQUU7WUFDMUQsbUJBQW1CLEVBQUUsS0FBSyxDQUFDLG1CQUFtQjtZQUM5QyxlQUFlLEVBQUUsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1NBQ3pGLENBQUMsQ0FBQztRQUNILEtBQUssQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNwRCxNQUFNLGFBQWEsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQztRQUV2RCxLQUFLLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBRTNELElBQUksS0FBSyxDQUFDLFdBQVcsRUFBRTtZQUNyQixLQUFLLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQzNEO1FBRUQsSUFBSSxLQUFLLENBQUMsbUJBQW1CLEVBQUU7WUFDN0IsS0FBSyxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUMsbUJBQW1CLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxDQUFDO1lBQzlGLEtBQUssQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUUsYUFBYSxDQUFDLENBQUM7WUFDcEUsS0FBSyxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLG1CQUFtQixFQUFFLFNBQVMsRUFBRSxHQUFHLENBQUMsQ0FBQztTQUNwRTtRQUVELFNBQVMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxLQUFLLENBQUMsbUJBQW1CO2dCQUFFLE9BQU87WUFDdkMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLG1CQUFtQixFQUFFLFNBQVMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUNwRSxDQUFDLENBQUMsQ0FBQztRQUVILE9BQU8sU0FBUyxDQUFDO0lBQ25CLENBQUM7SUFFRCxNQUFNLENBQUMsa0JBQWtCLENBQUMsS0FTekI7UUFDQyxJQUFJLGdCQUEyQixDQUFDO1FBQ2hDLElBQUksZUFBcUQsQ0FBQztRQUUxRCxJQUFJLEtBQUssQ0FBQyxXQUFXLEVBQUU7WUFDckIsTUFBTSxPQUFPLEdBQUcsRUFBRSxTQUFTLEVBQUUsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQzFDLGVBQWUsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ2hFLEtBQUssQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1lBQ2pELGdCQUFnQixHQUFHLENBQUMsZUFBZSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1NBQ2hEO2FBQU07WUFDTCxnQkFBZ0IsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDL0U7UUFFRCxNQUFNLFNBQVMsR0FBRyxlQUFlLENBQUMsZ0JBQWdCLEVBQUU7WUFDbEQsbUJBQW1CLEVBQUUsS0FBSyxDQUFDLG1CQUFtQjtZQUM5QyxlQUFlLEVBQUUsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBQyxTQUFTLEVBQUUsUUFBUSxFQUFFLENBQUM7WUFDdEYsZ0JBQWdCO1NBQ2pCLENBQUMsQ0FBQztRQUNILEtBQUssQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUVwRCxTQUFTLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO1FBQ3pELFNBQVMsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRXRELFNBQVMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3ZCLGVBQWUsRUFBRSxPQUFPLEVBQUUsQ0FBQztRQUM3QixDQUFDLENBQUMsQ0FBQztRQUVILEtBQUssQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUM5QixTQUFTLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxPQUFPLFNBQVMsQ0FBQztJQUNuQixDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBcHBsaWNhdGlvblJlZixcbiAgQ29tcG9uZW50UmVmLFxuICBFbWJlZGRlZFZpZXdSZWYsXG4gIEVudmlyb25tZW50SW5qZWN0b3IsXG4gIEluamVjdG9yLFxuICBSZW5kZXJlcjIsXG4gIFRlbXBsYXRlUmVmLFxuICBjcmVhdGVDb21wb25lbnQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG9rdVNlbGVjdERyb3Bkb3duUG9ydGFsIH0gZnJvbSAnLi4vc2VsZWN0LWRyb3Bkb3duLXBvcnRhbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRG9rdVNlbGVjdE9wdGlvbiB9IGZyb20gJy4uL3NlbGVjdC1vcHRpb24uY29tcG9uZW50JztcbmltcG9ydCB7IERva3VTZWxlY3RPcHRpb25JdGVtUmVjb3JkIH0gZnJvbSAnLi4vc2VsZWN0LmludGVyZmFjZSc7XG5cbmV4cG9ydCBjbGFzcyBWaWV3RWxlbWVudFV0aWwge1xuICBzdGF0aWMgY3JlYXRlU2VsZWN0RHJvcGRvd25Qb3J0YWwocHJvcHM6IHtcbiAgICBhcHBsaWNhdGlvblJlZjogQXBwbGljYXRpb25SZWY7XG4gICAgZW52aXJvbm1lbnRJbmplY3RvcjogRW52aXJvbm1lbnRJbmplY3RvcjtcbiAgICBwYXJlbnRFbGVtZW50SW5qZWN0b3I6IEluamVjdG9yO1xuICAgIHJlbmRlcmVyOiBSZW5kZXJlcjI7XG4gICAgaW5wdXRXcmFwcGVyRWxlbWVudD86IEhUTUxFbGVtZW50IHwgbnVsbDtcbiAgICBwb3J0YWxDbGFzcz86IHN0cmluZztcbiAgfSkge1xuICAgIGNvbnN0IGNvbXBvbmVudCA9IGNyZWF0ZUNvbXBvbmVudChEb2t1U2VsZWN0RHJvcGRvd25Qb3J0YWwsIHtcbiAgICAgIGVudmlyb25tZW50SW5qZWN0b3I6IHByb3BzLmVudmlyb25tZW50SW5qZWN0b3IsXG4gICAgICBlbGVtZW50SW5qZWN0b3I6IEluamVjdG9yLmNyZWF0ZSh7IHByb3ZpZGVyczogW10sIHBhcmVudDogcHJvcHMucGFyZW50RWxlbWVudEluamVjdG9yIH0pLFxuICAgIH0pO1xuICAgIHByb3BzLmFwcGxpY2F0aW9uUmVmLmF0dGFjaFZpZXcoY29tcG9uZW50Lmhvc3RWaWV3KTtcbiAgICBjb25zdCBuYXRpdmVFbGVtZW50ID0gY29tcG9uZW50LmxvY2F0aW9uLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICBwcm9wcy5yZW5kZXJlci5zZXRTdHlsZShuYXRpdmVFbGVtZW50LCAnZGlzcGxheScsICdibG9jaycpO1xuXG4gICAgaWYgKHByb3BzLnBvcnRhbENsYXNzKSB7XG4gICAgICBwcm9wcy5yZW5kZXJlci5hZGRDbGFzcyhuYXRpdmVFbGVtZW50LCBwcm9wcy5wb3J0YWxDbGFzcyk7XG4gICAgfVxuXG4gICAgaWYgKHByb3BzLmlucHV0V3JhcHBlckVsZW1lbnQpIHtcbiAgICAgIHByb3BzLnJlbmRlcmVyLnNldFN0eWxlKG5hdGl2ZUVsZW1lbnQsICd3aWR0aCcsIHByb3BzLmlucHV0V3JhcHBlckVsZW1lbnQuY2xpZW50V2lkdGggKyAncHgnKTtcbiAgICAgIHByb3BzLnJlbmRlcmVyLnNldFN0eWxlKG5hdGl2ZUVsZW1lbnQsICdib3gtc2l6aW5nJywgJ2NvbnRlbnQtYm94Jyk7XG4gICAgICBwcm9wcy5yZW5kZXJlci5zZXRTdHlsZShwcm9wcy5pbnB1dFdyYXBwZXJFbGVtZW50LCAnei1pbmRleCcsICcxJyk7XG4gICAgfVxuXG4gICAgY29tcG9uZW50Lm9uRGVzdHJveSgoKSA9PiB7XG4gICAgICBpZiAoIXByb3BzLmlucHV0V3JhcHBlckVsZW1lbnQpIHJldHVybjtcbiAgICAgIHByb3BzLnJlbmRlcmVyLnNldFN0eWxlKHByb3BzLmlucHV0V3JhcHBlckVsZW1lbnQsICd6LWluZGV4JywgJycpO1xuICAgIH0pO1xuXG4gICAgcmV0dXJuIGNvbXBvbmVudDtcbiAgfVxuXG4gIHN0YXRpYyBjcmVhdGVTZWxlY3RPcHRpb24ocHJvcHM6IHtcbiAgICBpdGVtOiBEb2t1U2VsZWN0T3B0aW9uSXRlbVJlY29yZDtcbiAgICBiaW5kTGFiZWw6IHN0cmluZztcbiAgICBiaW5kVmFsdWU6IHN0cmluZztcbiAgICBhcHBsaWNhdGlvblJlZjogQXBwbGljYXRpb25SZWY7XG4gICAgZW52aXJvbm1lbnRJbmplY3RvcjogRW52aXJvbm1lbnRJbmplY3RvcjtcbiAgICByZW5kZXJlcjogUmVuZGVyZXIyO1xuICAgIHBvcnRhbFJlZj86IENvbXBvbmVudFJlZjxEb2t1U2VsZWN0RHJvcGRvd25Qb3J0YWw+O1xuICAgIHRlbXBsYXRlUmVmPzogVGVtcGxhdGVSZWY8dW5rbm93bj47XG4gIH0pIHtcbiAgICBsZXQgcHJvamVjdGFibGVOb2RlcyE6IE5vZGVbXVtdO1xuICAgIGxldCBjdXN0b21PcHRpb25SZWY6IEVtYmVkZGVkVmlld1JlZjx1bmtub3duPiB8IHVuZGVmaW5lZDtcblxuICAgIGlmIChwcm9wcy50ZW1wbGF0ZVJlZikge1xuICAgICAgY29uc3QgY29udGV4dCA9IHsgJGltcGxpY2l0OiBwcm9wcy5pdGVtIH07XG4gICAgICBjdXN0b21PcHRpb25SZWYgPSBwcm9wcy50ZW1wbGF0ZVJlZi5jcmVhdGVFbWJlZGRlZFZpZXcoY29udGV4dCk7XG4gICAgICBwcm9wcy5hcHBsaWNhdGlvblJlZi5hdHRhY2hWaWV3KGN1c3RvbU9wdGlvblJlZik7XG4gICAgICBwcm9qZWN0YWJsZU5vZGVzID0gW2N1c3RvbU9wdGlvblJlZi5yb290Tm9kZXNdO1xuICAgIH0gZWxzZSB7XG4gICAgICBwcm9qZWN0YWJsZU5vZGVzID0gW1twcm9wcy5yZW5kZXJlci5jcmVhdGVUZXh0KHByb3BzLml0ZW1bcHJvcHMuYmluZExhYmVsXSldXTtcbiAgICB9XG5cbiAgICBjb25zdCBjb21wb25lbnQgPSBjcmVhdGVDb21wb25lbnQoRG9rdVNlbGVjdE9wdGlvbiwge1xuICAgICAgZW52aXJvbm1lbnRJbmplY3RvcjogcHJvcHMuZW52aXJvbm1lbnRJbmplY3RvcixcbiAgICAgIGVsZW1lbnRJbmplY3RvcjogSW5qZWN0b3IuY3JlYXRlKHsgcHJvdmlkZXJzOiBbXSwgcGFyZW50OiBwcm9wcy5wb3J0YWxSZWY/LmluamVjdG9yIH0pLFxuICAgICAgcHJvamVjdGFibGVOb2RlcyxcbiAgICB9KTtcbiAgICBwcm9wcy5hcHBsaWNhdGlvblJlZi5hdHRhY2hWaWV3KGNvbXBvbmVudC5ob3N0Vmlldyk7XG5cbiAgICBjb21wb25lbnQuc2V0SW5wdXQoJ3ZhbHVlJywgcHJvcHMuaXRlbVtwcm9wcy5iaW5kVmFsdWVdKTtcbiAgICBjb21wb25lbnQuc2V0SW5wdXQoJ2Rpc2FibGVkJywgISFwcm9wcy5pdGVtLmRpc2FibGVkKTtcblxuICAgIGNvbXBvbmVudC5vbkRlc3Ryb3koKCkgPT4ge1xuICAgICAgY3VzdG9tT3B0aW9uUmVmPy5kZXN0cm95KCk7XG4gICAgfSk7XG5cbiAgICBwcm9wcy5wb3J0YWxSZWY/Lm9uRGVzdHJveSgoKSA9PiB7XG4gICAgICBjb21wb25lbnQuZGVzdHJveSgpO1xuICAgIH0pO1xuXG4gICAgcmV0dXJuIGNvbXBvbmVudDtcbiAgfVxufVxuIl19