q2-tecton-elements 1.37.1 → 1.38.1

package/dist/q2-tecton-elements/p-db6921fb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","activeElement","document","body","tagName","componentWillLoad","connectedCallback","forEach","eventName","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","stylesCss","Q2Popover","scheduledAfterRender","viewPortChanged","open","determinePopDirection","undefined","componentDidLoad","componentDidRender","setTimeout","fn","removeViewportListeners","async","options","containerElement","scrollTo","openChanged","popoverStateChanged","push","resizeIframe","addViewportListeners","currentDirection","style","removeProperty","show","popoverStateHandler","detail","stopPropagation","visualViewport","direction","determinePopOffset","contentElement","controlElement","maxHeight","currentOrStatedDirection","setProperty","waitForNextPaint","top","topOffset","height","_a","getBoundingClientRect","contentHeight","clientHeight","scrollY","_c","_b","Tecton","platformDimensions","_d","offsetTop","outletOffset","_f","_e","innerHeight","_h","_g","_j","bottomOffset","canShowFullSizeBelow","canShowFullSizeAbove","determinedDirection","setDirectionAndShow","minHeight","displayBuffer","canShowMinHeightBelow","Math","max","dropdownHeight","render","containerClasses","h","ref","el","class","join"],"sources":["./src/components/click-elsewhere/index.tsx","./src/components/q2-popover/styles.scss?tag=q2-popover&encapsulation=shadow","./src/components/q2-popover/index.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n    isCurrentlyFocused: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter;\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n\n            child = child.parentNode || child.host;\n        }\n    }\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    windowBlurHandler = (): void => {\n        const activeElement = this.findActiveElement();\n        if (\n            (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n            (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n        ) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n    };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    width: 100%;\n}\n\n:host([align='right']) {\n    display: block;\n    position: absolute;\n    right: 0;\n    text-align: end;\n    left: unset;\n}\n\n.container {\n    display: none;\n    overflow: hidden;\n    opacity: 0;\n    height: 0;\n    position: absolute;\n    top: var-list(var-prefixer(popover-top), initial);\n    visibility: hidden;\n    background: var-list(--tct-popover-background, var-prefixer(popover-background-color), --app-white, #ffffff);\n    color: var-list(var-prefixer(popover-text-color), --t-text, #4d4d4d);\n    z-index: var-list(var-prefixer(popover-z-index), 100);\n    width: max-content;\n    min-width: var-list(var-prefixer(popover-min-width), 135px);\n    box-shadow: var-list(var-prefixer(popover-box-shadow), --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n    text-align: start;\n    left: 0;\n    border-radius: var-list(var-prefixer(popover-border-radius), 0);\n\n    // --comp-pop-max-height is set via JS\n    max-height: var(--comp-pop-max-height);\n\n    @include tiny-scrollbar();\n\n    :host([block]) & {\n        left: unset;\n        right: unset;\n        width: 100%;\n        min-width: var-list(var-prefixer(popover-min-width), unset);\n    }\n\n    :host([align='right']) & {\n        right: 0;\n        text-align: end;\n        left: unset;\n    }\n\n    :host([open]) & {\n        visibility: visible;\n    }\n\n    :host([open]) &.show {\n        height: auto;\n        overflow: auto;\n        opacity: 1;\n    }\n\n    &.up {\n        bottom: var(--comp-pop-offset);\n    }\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\n.content {\n    height: auto;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { resizeIframe, waitForNextPaint } from '../../utils';\n\n@Component({\n    tag: 'q2-popover',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Popover implements ComponentInterface {\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n    @Prop({ reflect: true }) align: 'left' | 'right';\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() minHeight: number;\n    @Prop() controlElement: HTMLElement;\n\n    @Element() hostElement: HTMLElement;\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    @State() show: boolean = false;\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /// Lifecycle hooks ///\n    componentDidLoad() {\n        if (this.open) this.determinePopDirection();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    /// Methods ///\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    /// Watchers ///\n    @Watch('open')\n    openChanged(open) {\n        this.popoverStateChanged.emit({ open });\n        this.scheduledAfterRender.push(resizeIframe);\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.containerElement.style.removeProperty('display');\n            this.containerElement.style.removeProperty('--comp-pop-max-height');\n            this.show = false;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    /// Helpers ///\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    addViewportListeners() {\n        // window.visualViewport.addEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.addEventListener('resize', this.viewPortChanged);\n    }\n\n    removeViewportListeners() {\n        // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.removeEventListener('resize', this.viewPortChanged);\n    }\n\n    async setDirectionAndShow(direction: 'up' | 'down') {\n        if (direction === 'up') {\n            this.determinePopOffset();\n        }\n\n        this.currentDirection = direction;\n        this.show = true;\n    }\n\n    async determinePopDirection() {\n        const { containerElement, contentElement, direction, controlElement, currentDirection } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        // If the direction is already set then use it, otherwise use the current direction\n        const currentOrStatedDirection = direction ?? currentDirection;\n\n        // Set the container to block so we can get the height\n        containerElement.style.setProperty('display', 'block');\n        await waitForNextPaint();\n\n        // Determine the dimensions of the control element\n        const { top: topOffset, height } = controlElement?.getBoundingClientRect() ?? {\n            top: 0,\n            height: 0,\n        };\n\n        const contentHeight = contentElement.clientHeight;\n        const scrollY =\n            window.Tecton?.platformDimensions?.scrollY ||\n            window.visualViewport?.offsetTop || // Only Android Chrome provides this which we need when scrolled\n            0;\n        const outletOffset = scrollY + (window.Tecton?.platformDimensions?.outletOffset || 0);\n        const innerHeight =\n            window.Tecton?.platformDimensions?.innerHeight || window.visualViewport?.height || window.innerHeight;\n        const bottomOffset = scrollY + innerHeight - topOffset - height - outletOffset;\n        const canShowFullSizeBelow = bottomOffset > contentHeight;\n        const canShowFullSizeAbove = contentHeight <= topOffset;\n        let determinedDirection: 'up' | 'down';\n\n        // Show the full-size popover below or above if it will fit\n        if (currentOrStatedDirection === 'down' && canShowFullSizeBelow) return this.setDirectionAndShow('down');\n        else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove) return this.setDirectionAndShow('up');\n        else if (currentOrStatedDirection === undefined && canShowFullSizeBelow) determinedDirection = 'down';\n        else if (currentOrStatedDirection === undefined && canShowFullSizeAbove) determinedDirection = 'up';\n\n        if (determinedDirection) return this.setDirectionAndShow(determinedDirection);\n\n        // If full size will not fit then make it as tall as possible\n        const { minHeight = 150 } = this;\n        const displayBuffer = 5;\n        const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;\n\n        let maxHeight;\n        if (currentOrStatedDirection === 'down') {\n            maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);\n            determinedDirection = 'down';\n        } else if (currentOrStatedDirection === 'up') {\n            maxHeight = Math.max(topOffset - displayBuffer, minHeight);\n            determinedDirection = 'up';\n        } else if (canShowMinHeightBelow) {\n            maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);\n            determinedDirection = 'down';\n        } else {\n            maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);\n            determinedDirection = 'up';\n        }\n        containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n        return this.setDirectionAndShow(determinedDirection);\n    }\n\n    determinePopOffset() {\n        const { controlElement, containerElement } = this;\n        const dropdownHeight = controlElement?.getBoundingClientRect().height ?? 0;\n        containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-e45856f7.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as r}from"./p-277dc8cd.js";import{c as o,l as s}from"./p-ef856249.js";const a="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const n=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.valueUpdated();this.updateDisabled()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.label=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.optional=false;this.hasError=false}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}componentWillLoad(){this.updateReadonly(this.readonly)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueUpdated(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(t){this.checkboxElements.forEach((e=>{e.readonly=t}))}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){return i("div",null,this.label||this.optional?i("div",{class:"group-legend"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",i("fieldset",{class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueUpdated"],disabled:["updateDisabled"],readonly:["updateReadonly"]}}};n.style=a;export{n as q2_checkbox_group};
-//# sourceMappingURL=p-e45856f7.entry.js.map