q2-tecton-elements 1.21.1 → 1.22.0

package/dist/components/shapes.js

@@ -0,0 +1,91 @@
+import { h } from '@stencil/core/internal/client';
+
+const atoms = {
+  circle: ({ width, additionalClasses }) => (h("div", { class: `skeleton-shape circle ${additionalClasses || ''}`, style: { width, height: width } })),
+  rectangle: ({ width, height, borderRadius, additionalClasses }) => (h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } })),
+};
+const molecules = {
+  field: () => (h("div", { class: "skeleton-shape field" },
+    h("div", { class: "skeleton-field-label" }, atoms.rectangle({ height: '1rem', width: '50%' })),
+    atoms.rectangle({
+      height: 'var(--tct-input-height, 42px)',
+      borderRadius: '3px',
+    }))),
+  text: (counts, modifiers) => {
+    var _a;
+    const rows = (_a = counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _a !== void 0 ? _a : 1;
+    const hasHeader = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('header');
+    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
+    const smallHeaderClass = (modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('smallheader')) ? ' smaller' : '';
+    const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';
+    return (h("div", { class: "skeleton-shape text" },
+      hasHeader && atoms.rectangle({ width: '60%', additionalClasses }),
+      !!rows &&
+        Array(rows)
+          .fill(undefined)
+          .map(() => atoms.rectangle({ height: '1rem' }))));
+  },
+};
+const shapes = {
+  circle: () => {
+    return atoms.circle({ width: '100%' });
+  },
+  rectangle: () => {
+    return atoms.rectangle({ height: '100%', borderRadius: 'var(--tct-border-radius-1, 3px)' });
+  },
+  table: (counts, modifiers) => {
+    var _a, _b;
+    const columnCount = (_a = counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _a !== void 0 ? _a : 5;
+    const rowCount = (_b = counts === null || counts === void 0 ? void 0 : counts[1]) !== null && _b !== void 0 ? _b : 5;
+    const headless = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('headless');
+    const bordered = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('bordered');
+    return (h("div", { class: "skeleton-shape table" },
+      !headless && (h("div", { class: "skeleton-table-head" },
+        h("div", { class: "skeleton-table-row skeleton-table-header flex" }, !!columnCount &&
+          Array(columnCount)
+            .fill(undefined)
+            .map(() => atoms.rectangle({ height: '1rem' }))),
+        h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({ height: '3px' })))),
+      h("div", { class: "skeleton-table-body" }, !!rowCount &&
+        Array(rowCount)
+          .fill(undefined)
+          .map(() => (h("div", { class: "skeleton-table-row-wrapper" },
+          h("div", { class: "skeleton-table-row flex" }, !!columnCount &&
+            Array(columnCount)
+              .fill(undefined)
+              .map(() => atoms.rectangle({ height: '1.5rem' }))),
+          bordered && (h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({
+            height: '1px',
+            additionalClasses: 'no-margin',
+          })))))))));
+  },
+  field: molecules.field,
+  form: (counts) => {
+    var _a, _b, _c;
+    const columns = (_a = ((counts === null || counts === void 0 ? void 0 : counts[1]) && (counts === null || counts === void 0 ? void 0 : counts[0]))) !== null && _a !== void 0 ? _a : 1;
+    const rows = (_c = (_b = counts === null || counts === void 0 ? void 0 : counts[1]) !== null && _b !== void 0 ? _b : counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _c !== void 0 ? _c : 1;
+    const totalItems = columns * rows;
+    return (h("div", { class: `skeleton-shape form flex columns-${columns}` }, !!totalItems && Array(totalItems).fill(undefined).map(molecules.field)));
+  },
+  text: molecules.text,
+  'detailed-item': (counts, modifiers) => {
+    const isSquare = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('square');
+    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
+    return (h("div", { class: `skeleton-shape detailed-item flex ${alignment}` },
+      h("div", { class: `detailed-item-image flex-${alignment}` }, isSquare
+        ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })
+        : atoms.circle({ width: '1.5em' })),
+      h("div", { class: `detailed-item-text flex flex-v-center flex-${alignment}` },
+        h("div", null, molecules.text(counts, modifiers)))));
+  },
+  'label-value': (counts) => {
+    var _a;
+    const cells = 2 * ((_a = counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _a !== void 0 ? _a : 1);
+    return (h("div", { class: "skeleton-shape label-value flex" }, !!cells &&
+      Array(cells)
+        .fill(undefined)
+        .map(() => atoms.rectangle({ height: '1rem' }))));
+  },
+};
+
+export { atoms as a, shapes as s };

package/dist/components/tecton-tab-pane.d.ts

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

package/dist/components/tecton-tab-pane.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
+
+const TectonTabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.badge = createEvent(this, "badge", 7);
+    ///////// Actions /////////
+    this.onIFrameLoad = (event) => {
+      const iframe = event.target;
+      iframe.contentWindow &&
+        iframe.contentWindow.postMessage(`[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`, '*');
+    };
+    this.value = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.selected = undefined;
+    this.index = undefined;
+    this.guid = undefined;
+    this.provided = undefined;
+    this.url = undefined;
+    this.moduleId = undefined;
+    this.minHeight = undefined;
+    this.badgeCount = undefined;
+    this.badgeDescription = undefined;
+    this.authPayload = undefined;
+    this.showForm = undefined;
+    this._showForm = undefined;
+  }
+  badgeObserver() {
+    this.badge.emit();
+  }
+  get iframeTitle() {
+    return this.moduleId.split('.').slice(-2).join('-');
+  }
+  componentWillRender() {
+    const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
+    if (loadingWrapper) {
+      loadingWrapper.style.minHeight = this.minHeight;
+      loadingWrapper.hidden = !this.selected;
+    }
+  }
+  componentWillLoad() {
+    this._showForm = this.showForm;
+  }
+  componentDidRender() {
+    const formElement = this.hostElement.shadowRoot.querySelector('form');
+    if (!!formElement && !!formElement.parentElement) {
+      formElement.submit();
+      this._showForm = false;
+    }
+  }
+  ///////// Observers /////////
+  selectedObserver() {
+    const loader = this.hostElement.shadowRoot.querySelector('div[slot="loading-wrapper"]');
+    this._showForm = this.showForm; // reset state
+    if (loader) {
+      loader.hidden = !this.selected;
+    }
+  }
+  ///////// View Methods /////////
+  render() {
+    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", null, h("slot", { name: "loading-wrapper" }), h("iframe", { hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+      return (h("input", { type: "hidden", value: element.value, name: element.key }));
+    }))) : (''))), h("div", { class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "badgeCount": ["badgeObserver"],
+    "selected": ["selectedObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "tecton-tab-pane", {
+    "value": [513],
+    "label": [513],
+    "name": [513],
+    "selected": [516],
+    "index": [2],
+    "guid": [2],
+    "provided": [516],
+    "url": [513],
+    "moduleId": [513, "module-id"],
+    "minHeight": [513, "min-height"],
+    "badgeCount": [514, "badge-count"],
+    "badgeDescription": [513, "badge-description"],
+    "authPayload": [16],
+    "showForm": [4, "show-form"],
+    "_showForm": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tecton-tab-pane"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tecton-tab-pane":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TectonTabPane$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const TectonTabPane = TectonTabPane$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TectonTabPane, defineCustomElement };