q2-tecton-elements 1.21.2 → 1.22.1

package/dist/components/q2-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Card extends Components.Q2Card, HTMLElement {}
+export const Q2Card: {
+  prototype: Q2Card;
+  new (): Q2Card;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-card.js

@@ -0,0 +1,187 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { a as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index13.js';
+import { d as defineCustomElement$3 } from './index3.js';
+import { d as defineCustomElement$2 } from './index7.js';
+
+const stylesCss = "*{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{display:block}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}.container:is(button),.container:is(a){--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));cursor:pointer;border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:solid;border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}@media (hover: hover){.container:is(button),.container:is(a){--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}.container:is(button):hover,.container:is(button):active,.container:is(button):focus,.container:is(a):hover,.container:is(a):active,.container:is(a):focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}.container:is(button):hover,.container:is(a):hover{box-shadow:var(--comp-card-hover-box-shadow)}.container:is(button):focus:hover,.container:is(a):focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}.container:is(button):active,.container:is(a):active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}.container:is(button).is-touch,.container:is(a).is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}.container:is(button).has-avatar.is-touch,.container:is(a).has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+
+const SUPPORTED_THEME_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'accent-1',
+  'accent-2',
+  'accent-3',
+  'accent-4',
+  'accent-5',
+  'accent-6',
+  'accent-7',
+  'accent-8',
+  'accent-9',
+  'accent-10',
+  'accent-11',
+  'accent-12',
+];
+const STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];
+const Q2Card$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.click = createEvent(this, "click", 7);
+    this.handleClick = (event) => {
+      if (this.url)
+        return true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.click.emit();
+    };
+    this.title = undefined;
+    this.description = undefined;
+    this.avatarName = undefined;
+    this.avatarInitials = undefined;
+    this.avatarIcon = undefined;
+    this.avatarSrc = undefined;
+    this.isSmall = undefined;
+    this.bar = undefined;
+    this.isStatic = undefined;
+    this.isTouch = isTouchDevice();
+    this.url = undefined;
+    this.target = undefined;
+    this.isAutoTouch = false;
+    this.isAutoSmall = false;
+  }
+  componentWillLoad() {
+    this.checkBar();
+  }
+  componentDidLoad() {
+    const { hostElement, clickableElement } = this;
+    hostElement.click = () => clickableElement.click();
+    overrideFocus(this.hostElement);
+    this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
+    this.resizeObserver.observe(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.clickableElement.focus();
+  }
+  checkBar() {
+    const { bar } = this;
+    if (!bar)
+      return;
+    if (SUPPORTED_THEME_COLORS.includes(bar)) {
+      this.barColor = `var(--t-${bar})`;
+    }
+    else if (STOPLIGHT_COLORS.includes(bar)) {
+      this.barColor = `var(--const-stoplight-${bar})`;
+    }
+    else {
+      this.barColor = bar;
+    }
+  }
+  determineAutoTouch() {
+    if (this.hostElement.hasAttribute('is-touch'))
+      return;
+    this.isAutoTouch = isTouchDevice();
+  }
+  determineAutoSmall() {
+    var _a, _b;
+    if (this.isStatic)
+      return;
+    if (this.hostElement.hasAttribute('is-small'))
+      return;
+    const { containerElement, avatarElement } = this;
+    const avatarWidth = (_a = avatarElement === null || avatarElement === void 0 ? void 0 : avatarElement.offsetWidth) !== null && _a !== void 0 ? _a : 0;
+    const containerWidth = (_b = containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+    const totalWidth = avatarWidth + containerWidth;
+    this.isAutoSmall = totalWidth < 350;
+  }
+  generateAvatar() {
+    const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;
+    if (avatarIcon) {
+      return (h("q2-icon", { type: avatarIcon, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+    else if (avatarName || avatarInitials || avatarSrc) {
+      return (h("q2-avatar", { name: avatarName, initials: avatarInitials, src: avatarSrc, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+  }
+  generateContent() {
+    return (h(Fragment, null, this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })), this.generateAvatar(), h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description), h("slot", null)), this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+  }
+  generateContainerClasses() {
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch, isStatic, } = this;
+    const result = ['container'];
+    const showSmall = isSmall || isAutoSmall;
+    const showTouch = isTouch || isAutoTouch;
+    const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
+    if (showSmall)
+      result.push('is-small');
+    if (showTouch && !isStatic)
+      result.push('is-touch');
+    if (hasAvatar)
+      result.push('has-avatar');
+    return result.join(' ');
+  }
+  render() {
+    const { url, isStatic } = this;
+    if (!!url)
+      return (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent()));
+    else if (isStatic)
+      return (h("div", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement" }, this.generateContent()));
+    else
+      return (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "bar": ["checkBar"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-card", {
+    "title": [513],
+    "description": [513],
+    "avatarName": [513, "avatar-name"],
+    "avatarInitials": [513, "avatar-initials"],
+    "avatarIcon": [513, "avatar-icon"],
+    "avatarSrc": [513, "avatar-src"],
+    "isSmall": [516, "is-small"],
+    "bar": [513],
+    "isStatic": [516, "is-static"],
+    "isTouch": [516, "is-touch"],
+    "url": [513],
+    "target": [513],
+    "isAutoTouch": [32],
+    "isAutoSmall": [32]
+  }, [[0, "focus", "onHostElementFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-card", "q2-avatar", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Card$1);
+      }
+      break;
+    case "q2-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Card = Q2Card$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Card, defineCustomElement };

package/dist/components/q2-carousel-pane.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2CarouselPane extends Components.Q2CarouselPane, HTMLElement {}
+export const Q2CarouselPane: {
+  prototype: Q2CarouselPane;
+  new (): Q2CarouselPane;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-carousel-pane.js

@@ -0,0 +1,97 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as loc } from './index13.js';
+
+const stylesCss = "*{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}";
+
+const Q2Carousel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.clickCarouselPane = createEvent(this, "clickCarouselPane", 7);
+    this.generatePaneClass = (currentIndex) => {
+      return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;
+    };
+    this.paneClicked = event => {
+      if (this.isActivePane)
+        return;
+      event.preventDefault();
+      this.clickCarouselPane.emit({
+        paneIndex: this.index,
+        pane: this.hostElement,
+      });
+    };
+    this.index = undefined;
+    this.siblingCount = undefined;
+    this.isActivePane = undefined;
+    this.label = undefined;
+  }
+  get currentPaneIndex() {
+    return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);
+  }
+  componentDidLoad() {
+    this.determineDisabledContent();
+  }
+  determineDisabledContent() {
+    const { isActivePane } = this;
+    const focusableElements = this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');
+    focusableElements.forEach(element => {
+      const hasValidTabIndex = element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;
+      if (hasValidTabIndex) {
+        element.dataset.q2Tabindex = `${element.tabIndex}`;
+      }
+      if (isActivePane) {
+        if (element.hasAttribute('data-q2-tabindex')) {
+          element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));
+          element.removeAttribute('data-q2-tabindex');
+        }
+        else if (element.tagName.startsWith('Q2-')) {
+          element.tabIndex = undefined;
+        }
+        else {
+          element.removeAttribute('tabindex');
+        }
+      }
+      else {
+        element.tabIndex = -1;
+      }
+    });
+  }
+  render() {
+    const { label } = this;
+    return (h(Host, { class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        ? loc(label)
+        : loc('tecton.element.carousel.itemDescription', [
+          (this.currentPaneIndex + 1).toString(),
+          (this.siblingCount || 0).toString(),
+        ]), onClick: this.paneClicked }, h("article", { class: "q2-carousel-pane-main-content" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "isActivePane": ["determineDisabledContent"]
+  }; }
+  static get style() { return stylesCss; }
+}, [4, "q2-carousel-pane", {
+    "index": [2],
+    "siblingCount": [2, "sibling-count"],
+    "isActivePane": [516, "is-active-pane"],
+    "label": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-carousel-pane"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-carousel-pane":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Carousel);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2CarouselPane = Q2Carousel;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2CarouselPane, defineCustomElement };

package/dist/components/q2-carousel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Carousel extends Components.Q2Carousel, HTMLElement {}
+export const Q2Carousel: {
+  prototype: Q2Carousel;
+  new (): Q2Carousel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;