q2-tecton-elements 1.21.1 → 1.22.0

package/dist/components/index9.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { l as loc, h as handleAriaLabel } from './index13.js';
+import { s as shapes } from './shapes.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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
+
+const Q2Loading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.halfCircleSpinner = () => {
+      return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" })));
+    };
+    this.spinner = () => {
+      return this.halfCircleSpinner();
+    };
+    this.skeletonLoader = () => {
+      return (h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" })));
+    };
+    this.type = undefined;
+    this.shape = undefined;
+    this.modifiers = undefined;
+    this.counts = undefined;
+    this.label = undefined;
+    this.ariaLabel = undefined;
+    this.inline = undefined;
+  }
+  get loader() {
+    const loaderMap = {
+      default: this.spinner,
+      spinner: this.spinner,
+      skeleton: this.skeletonLoader,
+    };
+    return loaderMap[this.type] || loaderMap.default;
+  }
+  get modifiersSet() {
+    if (this.type !== 'skeleton' || !this.modifiers) {
+      return undefined;
+    }
+    return new Set(this.modifiers.split('-'));
+  }
+  get countsArray() {
+    if (this.type !== 'skeleton' || !this.counts) {
+      return undefined;
+    }
+    return this.counts.split('x').map(Number);
+  }
+  get skeletonShape() {
+    var _a, _b;
+    return (_b = (_a = shapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(shapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
+  }
+  get spinnerShape() {
+    const spinnerMap = {
+      default: this.halfCircleSpinner,
+      'half-circle': this.halfCircleSpinner,
+    };
+    return spinnerMap[this.type] || spinnerMap.default;
+  }
+  get localizedLabel() {
+    return loc(this.label || 'tecton.element.loading.ariaLabel');
+  }
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  ariaLabelObserver() {
+    handleAriaLabel(this);
+  }
+  render() {
+    return this.loader();
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-loading", {
+    "type": [513],
+    "shape": [513],
+    "modifiers": [513],
+    "counts": [513],
+    "label": [513],
+    "ariaLabel": [513, "aria-label"],
+    "inline": [516]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Loading);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Q2Loading as Q, defineCustomElement as d };