q2-tecton-elements 1.52.1 → 1.53.0

package/dist/q2-tecton-elements/q2-action-group.entry.js

@@ -1,27 +1,19 @@
-import { r as t, h as o } from "./index-7a5365e2.js";
+import { r as t, h as e } from "./index-7a5365e2.js";
 
-const i = "*{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 #0066cc)}: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(:not([hidden])){display:block;width:100%;--comp-default-btn-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-btn-group-margin, var(--comp-default-btn-group-margin))}.container{width:100%;display:flex;gap:var(--tct-btn-group-gap, var(--app-scale-2x, 10px))}.container.vertical{flex-direction:var(--tct-btn-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-btn-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-btn-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-btn-group-horizontal-align-items, center);flex-wrap:var(--tct-btn-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{flex-wrap:nowrap}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}";
+import { n as i } from "./index-d18e2a20.js";
 
-const n = i;
+const o = "*{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 #0066cc)}: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(:not([hidden])){display:block;width:100%;--comp-default-btn-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-btn-group-margin, var(--comp-default-btn-group-margin))}.container{width:100%;display:flex;gap:var(--tct-btn-group-gap, var(--app-scale-2x, 10px))}.container.vertical{flex-direction:var(--tct-btn-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-btn-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-btn-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-btn-group-horizontal-align-items, center);flex-wrap:var(--tct-btn-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{flex-wrap:nowrap}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}";
 
-const e = class {
-  constructor(o) {
-    t(this, o);
-    // #endregion
-    // #region Events
-    // #endregion
-    // #region Component Lifecycle Events
-    // #endregion
-    // #region Listeners
-    // #endregion
-    // #region Public Methods API
-    // #endregion
-    // #region Watchers
+const n = o;
+
+const r = class {
+  constructor(e) {
+    t(this, e);
     // #endregion
     // #region Local Methods
         this.handleResize = t => {
-      const o = t.detail.entries[0].contentRect.width;
-      const i = this.orientationThreshold > o;
+      const e = t.detail.entries[0].contentRect.width;
+      const i = this.orientationThreshold > e;
       this.autoOrientation = i ? "vertical" : "horizontal";
     };
     this.autoOrientation = "vertical";
@@ -30,27 +22,61 @@ const e = class {
     this.fullWidth = undefined;
   }
   // #endregion
+  // #region Events
+  // #endregion
+  // #region Component Lifecycle Events
+  // #endregion
+  // #region Listeners
+  // #endregion
+  // #region Public Methods API
+  // #endregion
+  // #region Watchers
+  toggleHiddenForOneFrame() {
+    const {container: t} = this;
+    t.style.display = "none";
+    // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical
+        i((() => i((() => {
+      t.style.display = null;
+    }))));
+  }
+  get computedOrientation() {
+    let t = this.orientation;
+    if (!t) t = "auto";
+    return t === "auto" ? this.autoOrientation : t;
+  }
+  get shouldDisableResizeObserver() {
+    let t = this.orientation;
+    if (!t) t = "auto";
+    return t !== "auto";
+  }
+  // #endregion
   // #region Render Methods
   render() {
-    const {orientation: t, autoOrientation: i, fullWidth: n} = this;
-    const e = [ "container" ];
-    if (n) e.push("full-width");
-    e.push(t === "auto" ? i : t);
-    return o("q2-resize-observer", {
-      key: "27d0bba89402b8885e17026dbec6fdd446a5db2d",
+    const {shouldDisableResizeObserver: t, computedOrientation: i, fullWidth: o} = this;
+    const n = [ "container" ];
+    if (o && i === "horizontal") n.push("full-width");
+    n.push(i);
+    return e("q2-resize-observer", {
+      key: "bb7ebcc182a63976c198c5073c471b6c3944c0ee",
       onTctResize: this.handleResize,
-      disabled: this.orientation !== "auto"
-    }, o("div", {
-      key: "b389ce34d328f3b18f61614fbc2f95baf1cb6c1c",
-      class: e.join(" "),
+      disabled: t
+    }, e("div", {
+      key: "fd586d567fc2d7183cc59e9444554adfde1095eb",
+      ref: t => this.container = t,
+      class: n.join(" "),
       role: "group"
-    }, o("slot", {
-      key: "f9f2cb35d830575d1616114887ae1cdd2a4a3855"
+    }, e("slot", {
+      key: "4c9a0b77af1371b8c4ee7eafdae2e74d6c8964e9"
     })));
   }
+  static get watchers() {
+    return {
+      orientation: [ "toggleHiddenForOneFrame" ]
+    };
+  }
 };
 
-e.style = n;
+r.style = n;
 
-export { e as q2_action_group };
+export { r as q2_action_group };
 //# sourceMappingURL=q2-action-group.entry.js.map

package/dist/q2-tecton-elements/q2-action-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ActionGroupCss","Q2ActionGroupStyle0","Q2BtnGroup","this","handleResize","event","width","detail","entries","contentRect","shouldBeVertical","orientationThreshold","autoOrientation","render","orientation","fullWidth","containerClassNames","push","h","key","onTctResize","disabled","class","join","role"],"sources":["src/components/q2-action-group/q2-action-group.scss?tag=q2-action-group&encapsulation=shadow","src/components/q2-action-group/q2-action-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n    --comp-default-btn-group-margin: #{var-list(--app-scale-5x, 25px)} 0;\n    margin: var-list(--tct-btn-group-margin, --comp-default-btn-group-margin);\n}\n\n.container {\n    width: 100%;\n    display: flex;\n    gap: var-list(--tct-btn-group-gap, --app-scale-2x, 10px);\n\n    &.vertical {\n        flex-direction: var-list(--tct-btn-group-vertical-flex-direction, column);\n\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n\n    &.horizontal {\n        justify-content: var-list(--tct-btn-group-horizontal-justify-content, flex-start);\n        flex-direction: var-list(--tct-btn-group-horizontal-flex-direction, row-reverse);\n        align-items: var-list(--tct-btn-group-horizontal-align-items, center);\n        flex-wrap: var-list(--tct-btn-group-horizontal-flex-wrap, wrap);\n\n        &.full-width {\n            flex-wrap: nowrap;\n        }\n    }\n\n    &.vertical,\n    &.horizontal.full-width {\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n}\n","import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { Component, ComponentInterface, h, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2BtnGroup implements ComponentInterface {\n    // #region Own Properties\n\n    // #endregion\n    // #region Host HTML Element\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    // #endregion\n    // #region Events\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    // #endregion\n    // #region Listeners\n\n    // #endregion\n    // #region Public Methods API\n\n    // #endregion\n    // #region Watchers\n\n    // #endregion\n    // #region Local Methods\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { orientation, autoOrientation, fullWidth } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth) containerClassNames.push('full-width');\n        containerClassNames.push(orientation === 'auto' ? autoOrientation : orientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={this.orientation !== 'auto'}\n            >\n                <div\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAmB;;AACzB,MAAAC,IAAeD;;MCOFE,IAAU;;;;;;;;;;;;;;;QA4DnBC,KAAAC,eACIC;MAIA,MAAMC,IAAQD,EAAME,OAAOC,QAAQ,GAAGC,YAAYH;MAClD,MAAMI,IAAmBP,KAAKQ,uBAAuBL;MACrDH,KAAKS,kBAAkBF,IAAmB,aAAa;AAAY;2BAzD1B;gCAYd;uBASmB;;;;;EA0ClD,MAAAG;IACI,OAAMC,aAAEA,GAAWF,iBAAEA,GAAeG,WAAEA,KAAcZ;IACpD,MAAMa,IAAsB,EAAC;IAC7B,IAAID,GAAWC,EAAoBC,KAAK;IACxCD,EAAoBC,KAAKH,MAAgB,SAASF,IAAkBE;IAEpE,OACII,EAAA;MAAAC,KAAA;MACIC,aAAajB,KAAKC;MAClBiB,UAAUlB,KAAKW,gBAAgB;OAE/BI,EAAA;MAAAC,KAAA;MACIG,OAAON,EAAoBO,KAAK;MAChCC,MAAK;OAELN,EAAA;MAAAC,KAAA"}
+{"version":3,"names":["q2ActionGroupCss","Q2ActionGroupStyle0","Q2BtnGroup","this","handleResize","event","width","detail","entries","contentRect","shouldBeVertical","orientationThreshold","autoOrientation","toggleHiddenForOneFrame","container","style","display","nextPaint","computedOrientation","orientation","shouldDisableResizeObserver","render","fullWidth","containerClassNames","push","h","key","onTctResize","disabled","ref","el","class","join","role"],"sources":["src/components/q2-action-group/q2-action-group.scss?tag=q2-action-group&encapsulation=shadow","src/components/q2-action-group/q2-action-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n    --comp-default-btn-group-margin: #{var-list(--app-scale-5x, 25px)} 0;\n    margin: var-list(--tct-btn-group-margin, --comp-default-btn-group-margin);\n}\n\n.container {\n    width: 100%;\n    display: flex;\n    gap: var-list(--tct-btn-group-gap, --app-scale-2x, 10px);\n\n    &.vertical {\n        flex-direction: var-list(--tct-btn-group-vertical-flex-direction, column);\n\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n\n    &.horizontal {\n        justify-content: var-list(--tct-btn-group-horizontal-justify-content, flex-start);\n        flex-direction: var-list(--tct-btn-group-horizontal-flex-direction, row-reverse);\n        align-items: var-list(--tct-btn-group-horizontal-align-items, center);\n        flex-wrap: var-list(--tct-btn-group-horizontal-flex-wrap, wrap);\n\n        &.full-width {\n            flex-wrap: nowrap;\n        }\n    }\n\n    &.vertical,\n    &.horizontal.full-width {\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n}\n","import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2BtnGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    // #endregion\n    // #region Events\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    // #endregion\n    // #region Listeners\n\n    // #endregion\n    // #region Public Methods API\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    get computedOrientation() {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver() {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation !== 'auto';\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAmB;;AACzB,MAAAC,IAAeD;;MCQFE,IAAU;;;;;QA0EnBC,KAAAC,eACIC;MAIA,MAAMC,IAAQD,EAAME,OAAOC,QAAQ,GAAGC,YAAYH;MAClD,MAAMI,IAAmBP,KAAKQ,uBAAuBL;MACrDH,KAAKS,kBAAkBF,IAAmB,aAAa;AAAY;2BArE1B;gCAYd;uBASmB;;;;;;;;;;;;;EA2BlD,uBAAAG;IACI,OAAMC,WAAEA,KAAcX;IACtBW,EAAUC,MAAMC,UAAU;;QAE1BC,GAAU,MACNA,GAAU;MACNH,EAAUC,MAAMC,UAAU;AAAI;;EAkB1C,uBAAIE;IACA,IAAIC,IAAchB,KAAKgB;IACvB,KAAKA,GAAaA,IAAc;IAChC,OAAOA,MAAgB,SAAShB,KAAKS,kBAAkBO;;EAG3D,+BAAIC;IACA,IAAID,IAAchB,KAAKgB;IACvB,KAAKA,GAAaA,IAAc;IAChC,OAAOA,MAAgB;;;;EAM3B,MAAAE;IACI,OAAMD,6BAAEA,GAA2BF,qBAAEA,GAAmBI,WAAEA,KAAcnB;IACxE,MAAMoB,IAAsB,EAAC;IAC7B,IAAID,KAAaJ,MAAwB,cAAcK,EAAoBC,KAAK;IAChFD,EAAoBC,KAAKN;IAEzB,OACIO,EAAA;MAAAC,KAAA;MACIC,aAAaxB,KAAKC;MAClBwB,UAAUR;OAEVK,EAAA;MAAAC,KAAA;MACIG,KAAKC,KAAO3B,KAAKW,YAAYgB;MAC7BC,OAAOR,EAAoBS,KAAK;MAChCC,MAAK;OAELR,EAAA;MAAAC,KAAA"}