q2-tecton-elements 1.52.2 → 1.53.0

package/dist/q2-tecton-elements/q2-item_3.entry.js

@@ -0,0 +1,331 @@
+import { r as t, h as e, g as i, c as o } from "./index-7a5365e2.js";
+
+import { o as n, e as r } from "./index-d18e2a20.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 #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}*{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{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+
+const s = a;
+
+const d = class {
+  constructor(e) {
+    t(this, e);
+    this.renderTrigger = 0;
+    this.clickable = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentDidLoad() {
+    if (typeof MutationObserver !== "undefined") {
+      const t = new MutationObserver((() => this.renderTrigger += 1));
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      this.mutationObserver = t;
+    }
+    n(this.hostElement);
+  }
+  // #endregion
+  // #region Listeners
+  delegateFocus(t) {
+    var e;
+    if (this.clickable) {
+      (e = this.itemElement) === null || e === void 0 ? void 0 : e.focus();
+    } else {
+      t.preventDefault();
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get actionClasses() {
+    const t = [ "action" ];
+    if (!this.hasBulletSlotContent) {
+      t.push(`action-no-bullet`);
+    }
+    return t.join(" ");
+  }
+  get bulletClasses() {
+    const t = [ "bullet" ];
+    if (!this.hasFooterSlotContent) {
+      t.push(`bullet-no-footer`);
+    }
+    return t.join(" ");
+  }
+  get footerClasses() {
+    const t = [ "footer" ];
+    if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+      t.push(`footer-no-action-nor-bullet`);
+    } else if (!this.hasActionSlotContent) {
+      t.push(`footer-no-action`);
+    } else if (!this.hasBulletSlotContent) {
+      t.push(`footer-no-bullet`);
+    }
+    return t.join(" ");
+  }
+  get hasActionSlotContent() {
+    return r(this.hostElement, "action");
+  }
+  get hasBodySlotContent() {
+    return r(this.hostElement, "body");
+  }
+  get hasBulletSlotContent() {
+    return r(this.hostElement, "bullet");
+  }
+  get hasFooterSlotContent() {
+    return r(this.hostElement, "footer");
+  }
+  get hasHeaderSlotContent() {
+    return r(this.hostElement, "header");
+  }
+  get itemClasses() {
+    const t = [ "item" ];
+    if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+      t.push(`item-no-action-nor-bullet`);
+    } else if (!this.hasActionSlotContent) {
+      t.push(`item-no-action`);
+    } else if (!this.hasBulletSlotContent) {
+      t.push(`item-no-bullet`);
+    }
+    if (!this.hasFooterSlotContent) {
+      t.push(`item-no-footer`);
+    }
+    return t.join(" ");
+  }
+  get mainClasses() {
+    const t = [ "main" ];
+    if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+      t.push(`main-no-action-nor-bullet`);
+    } else if (!this.hasBulletSlotContent) {
+      t.push(`main-no-bullet`);
+    }
+    return t.join(" ");
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {clickable: t} = this;
+    return e("div", {
+      key: "0829fd5b35d9479ab8a7dae744e8a09e90a1a128",
+      "test-id": "itemContainer",
+      class: this.itemClasses,
+      ref: t => this.itemElement = t,
+      role: t ? "button" : undefined,
+      tabIndex: t ? 0 : undefined
+    }, this.hasBulletSlotContent && e("div", {
+      key: "6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2",
+      class: this.bulletClasses
+    }, e("slot", {
+      key: "9bd9880d99124c1102725b5ce6ca49ac1e229cf9",
+      name: "bullet"
+    })), e("div", {
+      key: "0c184236511ba043c91a009c93680858e34de545",
+      class: this.mainClasses
+    }, this.hasHeaderSlotContent && e("div", {
+      key: "2570b5fd60955dbbc97f5f3d941a5d653785fb0e",
+      class: "header"
+    }, e("slot", {
+      key: "a438cafe8aeded03ee814f736ae897852a9f1415",
+      name: "header"
+    })), this.hasBodySlotContent && e("div", {
+      key: "270585a7a4ca111aedd4baeab101c353814aa72c",
+      class: "body"
+    }, e("slot", {
+      key: "cc95afec425e06c0a9edccedb0420207ccab88a0",
+      name: "body"
+    }))), this.hasActionSlotContent && e("div", {
+      key: "c6a32baa731bd79c57a625d615058442a5bc764a",
+      class: this.actionClasses
+    }, e("slot", {
+      key: "2b3104f1e0b4eed5e605c5784468f608240a881b",
+      name: "action"
+    })), this.hasFooterSlotContent && e("div", {
+      key: "0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35",
+      class: this.footerClasses
+    }, e("slot", {
+      key: "76ae62c0b433f78b187853da2cf40394f7ca315e",
+      name: "footer"
+    })));
+  }
+  get hostElement() {
+    return i(this);
+  }
+};
+
+d.style = s;
+
+const c = "*{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{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
+
+const l = c;
+
+const h = class {
+  constructor(e) {
+    t(this, e);
+    this.tctClick = o(this, "tctClick", 7);
+    this.disabled = false;
+    this.href = "#";
+    this.label = undefined;
+    this.referrerpolicy = undefined;
+    this.target = undefined;
+    this.tctTitle = undefined;
+    this.variant = "inline";
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * A method for click.
+     *
+     * @testOnly
+     */
+  async clickLink() {
+    const t = this.hostElement.shadowRoot.querySelector(`[test-id="linkAnchor"]`);
+    t === null || t === void 0 ? void 0 : t.click();
+  }
+  // #endregion
+  // #region Local Methods
+  get classes() {
+    const t = [ "link-container" ];
+    if (this.variant) t.push(this.variant);
+    if (!!this.disabled) t.push("disabled");
+    return t.join(" ");
+  }
+  handleClick(t) {
+    t.stopPropagation();
+    if (this.disabled) return;
+    this.tctClick.emit({
+      target: this.target,
+      referrerpolicy: this.referrerpolicy,
+      href: this.href
+    });
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return this.variant === "standalone" ? e("div", {
+      class: this.classes,
+      "aria-label": this.label
+    }, e("a", {
+      class: "link",
+      onClick: t => this.handleClick(t),
+      href: !!this.disabled ? undefined : this.href,
+      target: this.target || "_self",
+      referrerPolicy: this.referrerpolicy || undefined,
+      title: this.tctTitle || undefined,
+      "test-id": "linkAnchor"
+    }, e("span", {
+      class: "label"
+    }, this.label), e("q2-icon", {
+      type: "chevron-right"
+    }))) : e("a", {
+      class: this.classes,
+      onClick: t => this.handleClick(t),
+      href: !!this.disabled ? undefined : this.href,
+      target: this.target || "_self",
+      referrerPolicy: this.referrerpolicy || undefined,
+      title: this.tctTitle || undefined,
+      "test-id": "linkAnchor"
+    }, this.label);
+  }
+  get hostElement() {
+    return i(this);
+  }
+};
+
+h.style = l;
+
+const p = "*{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}*{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
+
+const b = p;
+
+const f = class {
+  constructor(e) {
+    t(this, e);
+    this.scheduledAfterRender = [];
+    this.onMutationObserved = () => {
+      this.renderTrigger += 1;
+      this.scheduledAfterRender.push((() => {
+        Array.from(this.hostElement.children).forEach((t => {
+          if (t.tagName === "Q2-ITEM") t.role = "listitem";
+        }));
+      }));
+    };
+    this.renderTrigger = 0;
+    this.bordered = undefined;
+    this.label = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    (t = this.mutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    this.mutationObserver = null;
+  }
+  componentDidLoad() {
+    if (typeof MutationObserver === "undefined") return;
+    const t = new MutationObserver(this.onMutationObserved);
+    t.observe(this.hostElement, {
+      childList: true,
+      subtree: true
+    });
+    this.mutationObserver = t;
+    this.onMutationObserved();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach((t => t()));
+    this.scheduledAfterRender = [];
+  }
+  // #endregion
+  // #region Local Methods
+  get hasFilterSlot() {
+    return !!this.hostElement.querySelector("q2-pill") || r(this.hostElement, "pill");
+  }
+  get hasLabelContent() {
+    return !!this.label;
+  }
+  get headerClasses() {
+    const t = [ "header" ];
+    if (this.hasLabelContent && this.hasFilterSlot) {
+      t.push("header-spacebetween");
+    } else if (this.hasLabelContent && !this.hasFilterSlot) {
+      t.push("header-start");
+    } else if (!this.hasLabelContent && this.hasFilterSlot) {
+      t.push("header-end");
+    }
+    return t.join(" ");
+  }
+  get listClasses() {
+    const t = [ "list" ];
+    return t.join(" ");
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return e("div", {
+      key: "e4371faae59ae85dee324d6d6783a4b93c23f67f",
+      class: this.listClasses,
+      ref: t => this.listElement = t
+    }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
+      key: "59cc98b62d2581a66a9ed127189fb23364c49bff",
+      class: this.headerClasses
+    }, e("div", {
+      key: "568b6fab57c7552d5a577d19bd31760f6d1aa461",
+      class: "label"
+    }, this.label), this.hasFilterSlot && e("slot", {
+      key: "d27e785788847cf1a422568383bfe5d986764b2b",
+      name: "filter"
+    })), e("div", {
+      key: "7a00add6911167d7a27008f10f5d44cfae5d80b2",
+      role: "list"
+    }, e("slot", {
+      key: "dd5a0290091b0f1cb00a14cde43bab36e87573d2"
+    })));
+  }
+  get hostElement() {
+    return i(this);
+  }
+};
+
+f.style = b;
+
+export { d as q2_item, h as q2_link, f as q2_list };
+//# sourceMappingURL=q2-item_3.entry.js.map

package/dist/q2-tecton-elements/q2-item_3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name","q2LinkCss","Q2LinkStyle0","Q2Link","clickLink","anchor","shadowRoot","querySelector","click","list","variant","disabled","handleClick","stopPropagation","tctClick","emit","target","referrerpolicy","href","label","onClick","e","referrerPolicy","title","tctTitle","type","q2ListCss","Q2ListStyle0","Q2List","scheduledAfterRender","onMutationObserved","Array","from","children","forEach","child","tagName","disconnectedCallback","disconnect","componentDidRender","fn","hasFilterSlot","hasLabelContent","headerClasses","listClasses","listElement"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx","src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasBulletSlotContent && (\n                    <div class={this.bulletClasses}>\n                        <slot name=\"bullet\" />\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            height: var(--tct-link-height, 24px);\n            display: flex;\n            align-items: center;\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n                opacity: 0.5;\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n        &:focus-visible & {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The disabled.  */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The label to display. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** The target.  */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** The title attribute on a tag in shadowRoot. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** The value link to display. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes() {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type=\"chevron-right\"></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAY;;AAClB,MAAAC,IAAeD;;MCOFE,IAAM;;;yBAgBS;;;;;EAYxB,gBAAAC;IACI,WAAWC,qBAAqB,aAAa;MACzC,MAAMC,IAAW,IAAID,kBAAiB,MAAOE,KAAKC,iBAAiB;MACnEF,EAASG,QAAQF,KAAKG,aAAa;QAAEC,WAAW;QAAMC,SAAS;QAAMC,YAAY;;MACjFN,KAAKO,mBAAmBR;;IAE5BS,EAAcR,KAAKG;;;;EAOvB,aAAAM,CAAcC;;IACV,IAAIV,KAAKW,WAAW;OAChBC,IAAAZ,KAAKa,iBAAW,QAAAD,WAAA,aAAAA,EAAEE;WACf;MACHJ,EAAMK;;;;;EAOd,iBAAIC;IACA,MAAMC,IAAU,EAAC;IACjB,KAAKjB,KAAKkB,sBAAsB;MAC5BD,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,iBAAIC;IACA,MAAMJ,IAAU,EAAC;IACjB,KAAKjB,KAAKsB,sBAAsB;MAC5BL,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,iBAAIG;IACA,MAAMN,IAAU,EAAC;IACjB,KAAKjB,KAAKwB,yBAAyBxB,KAAKkB,sBAAsB;MAC1DD,EAAQE,KAAK;WACV,KAAKnB,KAAKwB,sBAAsB;MACnCP,EAAQE,KAAK;WACV,KAAKnB,KAAKkB,sBAAsB;MACnCD,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,wBAAII;IACA,OAAOC,EAAezB,KAAKG,aAAa;;EAG5C,sBAAIuB;IACA,OAAOD,EAAezB,KAAKG,aAAa;;EAG5C,wBAAIe;IACA,OAAOO,EAAezB,KAAKG,aAAa;;EAG5C,wBAAImB;IACA,OAAOG,EAAezB,KAAKG,aAAa;;EAG5C,wBAAIwB;IACA,OAAOF,EAAezB,KAAKG,aAAa;;EAG5C,eAAIyB;IACA,MAAMX,IAAU,EAAC;IACjB,KAAKjB,KAAKwB,yBAAyBxB,KAAKkB,sBAAsB;MAC1DD,EAAQE,KAAK;WACV,KAAKnB,KAAKwB,sBAAsB;MACnCP,EAAQE,KAAK;WACV,KAAKnB,KAAKkB,sBAAsB;MACnCD,EAAQE,KAAK;;IAEjB,KAAKnB,KAAKsB,sBAAsB;MAC5BL,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,eAAIS;IACA,MAAMZ,IAAU,EAAC;IACjB,KAAKjB,KAAKwB,yBAAyBxB,KAAKkB,sBAAsB;MAC1DD,EAAQE,KAAK;WACV,KAAKnB,KAAKkB,sBAAsB;MACnCD,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;;;EAMxB,MAAAU;IACI,OAAMnB,WAAEA,KAAcX;IACtB,OACI+B,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAOjC,KAAK4B;MACZM,KAAKC,KAAOnC,KAAKa,cAAcsB;MAC/BC,MAAMzB,IAAY,WAAW0B;MAC7BC,UAAU3B,IAAY,IAAI0B;OAEzBrC,KAAKkB,wBACFa,EAAA;MAAAC,KAAA;MAAKC,OAAOjC,KAAKqB;OACbU,EAAA;MAAAC,KAAA;MAAMO,MAAK;SAGnBR,EAAA;MAAAC,KAAA;MAAKC,OAAOjC,KAAK6B;OACZ7B,KAAK2B,wBACFI,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAA;MAAAC,KAAA;MAAMO,MAAK;SAGlBvC,KAAK0B,sBACFK,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAA;MAAAC,KAAA;MAAMO,MAAK;UAItBvC,KAAKwB,wBACFO,EAAA;MAAAC,KAAA;MAAKC,OAAOjC,KAAKgB;OACbe,EAAA;MAAAC,KAAA;MAAMO,MAAK;SAGlBvC,KAAKsB,wBACFS,EAAA;MAAAC,KAAA;MAAKC,OAAOjC,KAAKuB;OACbQ,EAAA;MAAAC,KAAA;MAAMO,MAAK;;;;;;;;;;AC/KnC,MAAMC,IAAY;;AAClB,MAAAC,IAAeD;;MCCFE,IAAM;;;;oBAWK;gBAIL;;;;;mBAoBG;;;;;;;;;EAqBlB,eAAMC;IACF,MAAMC,IAAS5C,KAAKG,YAAY0C,WAAWC,cAAc;IACxDF,MAA4B,QAA5BA,WAAM,aAANA,EAA8BG;;;;EAMnC,WAAI9B;IACA,MAAM+B,IAAO,EAAC;IACd,IAAIhD,KAAKiD,SAASD,EAAK7B,KAAKnB,KAAKiD;IACjC,MAAMjD,KAAKkD,UAAUF,EAAK7B,KAAK;IAC/B,OAAO6B,EAAK5B,KAAK;;EAGrB,WAAA+B,CAAYzC;IACRA,EAAM0C;IACN,IAAIpD,KAAKkD,UAAU;IACnBlD,KAAKqD,SAASC,KAAK;MACfC,QAAQvD,KAAKuD;MACbC,gBAAgBxD,KAAKwD;MACrBC,MAAMzD,KAAKyD;;;;;EAOnB,MAAA3B;IACI,OAAO9B,KAAKiD,YAAY,eACpBlB,EAAA;MACIE,OAAOjC,KAAKiB;MAAO,cACPjB,KAAK0D;OAEjB3B,EAAA;MACIE,OAAM;MACN0B,SAASC,KAAK5D,KAAKmD,YAAYS;MAC/BH,QAAQzD,KAAKkD,WAAWb,YAAYrC,KAAKyD;MACzCF,QAAQvD,KAAKuD,UAAU;MACvBM,gBAAgB7D,KAAKwD,kBAAkBnB;MACvCyB,OAAO9D,KAAK+D,YAAY1B;MAAS,WACzB;OAERN,EAAA;MAAME,OAAM;OAASjC,KAAK0D,QAC1B3B,EAAA;MAASiC,MAAK;WAItBjC,EAAA;MACIE,OAAOjC,KAAKiB;MACZ0C,SAASC,KAAK5D,KAAKmD,YAAYS;MAC/BH,QAAQzD,KAAKkD,WAAWb,YAAYrC,KAAKyD;MACzCF,QAAQvD,KAAKuD,UAAU;MACvBM,gBAAgB7D,KAAKwD,kBAAkBnB;MACvCyB,OAAO9D,KAAK+D,YAAY1B;MAAS,WACzB;OAEPrC,KAAK0D;;;;;;;;;ACnHtB,MAAMO,IAAY;;AAClB,MAAAC,IAAeD;;MCOFE,IAAM;;;IAKfnE,KAAAoE,uBAAuC;IA0EvCpE,KAAAqE,qBAAqB;MACjBrE,KAAKC,iBAAiB;MACtBD,KAAKoE,qBAAqBjD,MAAK;QAC3BmD,MAAMC,KAAKvE,KAAKG,YAAYqE,UAAUC,SAAQC;UAC1C,IAAIA,EAAMC,YAAY,WAAWD,EAAMtC,OAAO;AAAU;AAC1D;AACJ;yBApEkB;;;;;;EAgBxB,oBAAAwC;;KACIhE,IAAAZ,KAAKO,sBAAgB,QAAAK,WAAA,aAAAA,EAAEiE;IACvB7E,KAAKO,mBAAmB;;EAG5B,gBAAAV;IACI,WAAWC,qBAAqB,aAAa;IAC7C,MAAMC,IAAW,IAAID,iBAAiBE,KAAKqE;IAC3CtE,EAASG,QAAQF,KAAKG,aAAa;MAAEC,WAAW;MAAMC,SAAS;;IAC/DL,KAAKO,mBAAmBR;IACxBC,KAAKqE;;EAGT,kBAAAS;IACI9E,KAAKoE,qBAAqBK,SAAQM,KAAMA;IACxC/E,KAAKoE,uBAAuB;;;;EAMhC,iBAAIY;IACA,SAAShF,KAAKG,YAAY2C,cAAc,cAAcrB,EAAezB,KAAKG,aAAa;;EAG3F,mBAAI8E;IACA,SAASjF,KAAK0D;;EAGlB,iBAAIwB;IACA,MAAMjE,IAAU,EAAC;IACjB,IAAIjB,KAAKiF,mBAAmBjF,KAAKgF,eAAe;MAC5C/D,EAAQE,KAAK;WACV,IAAInB,KAAKiF,oBAAoBjF,KAAKgF,eAAe;MACpD/D,EAAQE,KAAK;WACV,KAAKnB,KAAKiF,mBAAmBjF,KAAKgF,eAAe;MACpD/D,EAAQE,KAAK;;IAEjB,OAAOF,EAAQG,KAAK;;EAGxB,eAAI+D;IACA,MAAMlE,IAAU,EAAC;IACjB,OAAOA,EAAQG,KAAK;;;;EAexB,MAAAU;IACI,OACIC,EAAA;MAAAC,KAAA;MACIC,OAAOjC,KAAKmF;MACZjD,KAAKC,KAAOnC,KAAKoF,cAAcjD;QAE7BnC,KAAKgF,iBAAiBhF,KAAKiF,oBACzBlD,EAAA;MAAAC,KAAA;MAAKC,OAAOjC,KAAKkF;OACbnD,EAAA;MAAAC,KAAA;MAAKC,OAAM;OAASjC,KAAK0D,QACxB1D,KAAKgF,iBAAiBjD,EAAA;MAAAC,KAAA;MAAMO,MAAK;SAG1CR,EAAA;MAAAC,KAAA;MAAKI,MAAK;OACNL,EAAA;MAAAC,KAAA"}

package/dist/q2-tecton-elements/q2-pill.entry.js

@@ -38,6 +38,7 @@ const v = class {
     };
     this.executeActionSheet = async t => {
       const i = await l(this, t);
+      this.primaryBtn.focus();
       this.handleSelectionChanges(i);
     };
     this.getOption = async t => {
@@ -48,9 +49,11 @@ const v = class {
         return this.hostElement.querySelector(`q2-option[value="${t}"]`);
       }
     };
-    this.handleButtonFocusout = async t => {
-      const i = t.relatedTarget;
-      if ((i === null || i === void 0 ? void 0 : i.tagName) === "Q2-OPTION") return;
+    this.handleFocusOut = async t => {
+      var i;
+      const e = t.relatedTarget;
+      if ((i = this.popoverElement) === null || i === void 0 ? void 0 : i.contains(e)) return;
+      if (this.hostElement.contains(e)) return;
       this.open = false;
     };
     this.handleChange = t => {
@@ -341,19 +344,19 @@ const v = class {
     if (t || i) r.push("has-icon");
     if (t) r.push("has-options");
     return e("click-elsewhere", {
-      key: "2e6401852016f9edeb1e27b8b69335755a7a9202",
+      key: "65e932df96cd2135dd8340aefea2523e0ac3084c",
       onChange: this.onClickElsewhere
     }, e("div", {
-      key: "997b3609f4cbd894fdf412d71624de290558a53c",
+      key: "0c4dfad1705c5f0f72ac03878776bdad4e209fa0",
       class: r.join(" ")
     }, e("div", {
-      key: "6326d50ba96228f78ccf29f1ac3ec2f88d4d88aa",
+      key: "da4d69d59bdbb4609e6638fce7b3abbf53c791e7",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, e("button", {
-      key: "bf29ea540b04bef1a58c9106b15a0155e8c9f81b",
+      key: "0d5f3a4984991bb1c47c241d9cf6676d486cd4dd",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -361,7 +364,7 @@ const v = class {
       ref: t => this.primaryBtn = t,
       onClick: this.handleClick,
       onKeyDown: this.handleKeydown,
-      onFocusout: this.handleButtonFocusout,
+      onFocusout: this.handleFocusOut,
       disabled: this.disabled,
       "aria-roledescription": !t && "filter",
       "aria-controls": t && "option-list" || undefined,
@@ -369,32 +372,33 @@ const v = class {
       "aria-label": this.buttonContent,
       "aria-describedby": t && "option-description" || undefined
     }, this.truncatedButtonContent, !t && i && e("span", {
-      key: "927bcd7ece084b5eb47bea58357f0f3f62d07536",
+      key: "18619ff31d265eaa351390a367ef3712dbd9547a",
       class: "sr"
     }, "(", c("tecton.element.pill.active"), ")"))), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "a87ee59b7a7b9b0f4cecb7d74aa71618e50c57ba",
+      key: "02eb90f588ea93c7153bdbaa709eaac678359249",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
       "max-height": this.popoverMaxHeight,
       minHeight: this.popoverMinHeight,
       direction: this.popoverDirection,
-      align: this.popoverAlignment
+      align: this.popoverAlignment,
+      onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "3952981f8a3dec4126035529df72e04f59dd3245",
+      key: "eb74c87224cc28e45db944411cc749350c99e77b",
       class: "popover-content"
     }, e("div", {
-      key: "f31e255a8f052cd2d3d1a53506ba51b4fdb936c3",
+      key: "de444989719d4c154f17e484918ee6e206414642",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, e("slot", {
-      key: "18a55b89efe4ca840cbb80c8266c5aa5cdd2c9d8",
+      key: "b58a201205c6a3980425db57d551fcd6f01583e0",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "923c991cc3dddc5ad8d8416b488f5c151b215984",
+      key: "1eb22efce706be5803dc035cedb9232ea1bcbde8",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -404,16 +408,16 @@ const v = class {
       onReady: () => this.updateSelectedOptionElements(),
       label: c("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "00d05bcff3be94a8de0dad038f67f9650234ef0f"
+      key: "de65981f3e33f12693927e4b5d9510fe751537d6"
     })), e("div", {
-      key: "cbbb918f147fe82de2411dba9d7297d18d540c2e",
+      key: "1c78d8873df7f63f7e7eab76c3a1a33459d3af4f",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, e("slot", {
-      key: "d327cd4e04931acd87f4889229543d69b3340860",
+      key: "8eee76d64492fde1b01fd55f8d3e4ecb099d0b4e",
       name: "popover-bottom"
     })))));
   }