@3t-transform/threeteeui 0.2.88 → 0.2.89

package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.stories.js

@@ -0,0 +1,83 @@
+export default {
+  title: 'Molecules/CheckboxGroup',
+  component: 'tttx-checkbox-group',
+  argTypes: {
+    checkboxGroupHeading: {
+      control: { type: 'text' },
+      default: 'Checkbox Group',
+    },
+  },
+};
+const CheckboxGroupTemplate = ({ heading, checkboxData, captionTop, captionBottom }) => {
+  return `
+        <tttx-checkbox-group >           
+             ${heading ? `
+                <tttx-checkbox-group-heading>
+                    ${heading}
+                </tttx-checkbox-group-heading>
+            ` : ''}
+
+            ${captionTop ? `
+                <tttx-checkbox-group-caption>
+                    ${captionTop}
+                </tttx-checkbox-group-caption>
+            ` : ''}
+
+            ${checkboxData.map(checkboxInfo => {
+    const { label, checked, inline, indeterminate } = checkboxInfo;
+    return `
+                        <tttx-checkbox 
+                            checkbox-id="checkbox" 
+                            label="${label}" 
+                            ${inline && 'inline'} 
+                            ${indeterminate && 'indeterminate'} 
+                            ${checked && 'checked'} 
+                        >
+                        </tttx-checkbox> `;
+  }).join('')}
+
+            ${captionBottom ? `
+                <tttx-checkbox-group-caption>
+                    ${captionBottom}
+                </tttx-checkbox-group-caption>
+            ` : ''}       
+        </tttx-checkbox-group>
+    `;
+};
+export const singleCheckbox = CheckboxGroupTemplate.bind({});
+singleCheckbox.args = {
+  heading: 'Safety-critical',
+  captionTop: 'This tags selected activities as safety-critical and can be changed indivudually once added',
+  checkboxData: [
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Tag as safety-critical',
+    }
+  ]
+};
+export const multipleCheckboxes = CheckboxGroupTemplate.bind({});
+multipleCheckboxes.args = {
+  heading: 'Favorite Cartoon Dad',
+  captionTop: 'This is a primary judge of character',
+  checkboxData: [
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Homer Sampson',
+      checked: true
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Fred Flinrock',
+      indeterminate: true
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'George Aeroplanesone',
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Other',
+    }
+  ],
+  captionBottom: 'Only messing',
+};

package/dist/components/index.d.ts

@@ -1,5 +1,9 @@
 /* tttx custom elements */
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
+export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/tttx-checkbox/tttx-checkbox';
+export { TttxCheckboxGroup as TttxCheckboxGroup } from '../types/components/molecules/tttx-checkbox-group/tttx-checkbox-group';
+export { TttxCheckboxGroupCaption as TttxCheckboxGroupCaption } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption';
+export { TttxCheckboxGroupHeading as TttxCheckboxGroupHeading } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading';
 export { TttxDataPattern as TttxDataPattern } from '../types/components/organisms/tttx-data-pattern/tttx-data-pattern';
 export { TttxDialogBox as TttxDialogBox } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
 export { TttxExpander as TttxExpander } from '../types/components/molecules/tttx-expander/tttx-expander';

package/dist/components/index.js

@@ -1,5 +1,9 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
+export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox } from './tttx-checkbox.js';
+export { TttxCheckboxGroup, defineCustomElement as defineCustomElementTttxCheckboxGroup } from './tttx-checkbox-group.js';
+export { TttxCheckboxGroupCaption, defineCustomElement as defineCustomElementTttxCheckboxGroupCaption } from './tttx-checkbox-group-caption.js';
+export { TttxCheckboxGroupHeading, defineCustomElement as defineCustomElementTttxCheckboxGroupHeading } from './tttx-checkbox-group-heading.js';
 export { TttxDataPattern, defineCustomElement as defineCustomElementTttxDataPattern } from './tttx-data-pattern.js';
 export { TttxDialogBox, defineCustomElement as defineCustomElementTttxDialogBox } from './tttx-dialog-box.js';
 export { TttxExpander, defineCustomElement as defineCustomElementTttxExpander } from './tttx-expander.js';

package/dist/components/tttx-checkbox-group-caption.d.ts

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

package/dist/components/tttx-checkbox-group-caption.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const TttxCheckboxGroupCaption$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group__caption' }, h("slot", null))));
+  }
+}, [4, "tttx-checkbox-group-caption"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox-group-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox-group-caption":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckboxGroupCaption$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckboxGroupCaption = TttxCheckboxGroupCaption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckboxGroupCaption, defineCustomElement };

package/dist/components/tttx-checkbox-group-heading.d.ts

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

package/dist/components/tttx-checkbox-group-heading.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const TttxCheckboxGroupHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group__heading' }, h("slot", null))));
+  }
+}, [4, "tttx-checkbox-group-heading"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox-group-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox-group-heading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckboxGroupHeading$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckboxGroupHeading = TttxCheckboxGroupHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckboxGroupHeading, defineCustomElement };

package/dist/components/tttx-checkbox-group.d.ts

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

package/dist/components/tttx-checkbox-group.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:19px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16px;margin-bottom:4px}";
+
+const TttxCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group' }, h("slot", null))));
+  }
+  static get style() { return tttxCheckboxGroupCss; }
+}, [1, "tttx-checkbox-group"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckboxGroup$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckboxGroup = TttxCheckboxGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckboxGroup, defineCustomElement };

package/dist/components/tttx-checkbox.d.ts

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

package/dist/components/tttx-checkbox.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+
+const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:19px}.tttx-checkbox tttx-icon{height:24px}.tttx-checkbox.--inline{display:inline-flex}.tttx-checkbox__input{display:none}.tttx-checkbox__label{margin-left:8px;padding-right:0;color:#212121;font-weight:normal}";
+
+const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.checkboxChangeEvent = createEvent(this, "checkboxChangeEvent", 3);
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.inline = false;
+    this.indeterminate = false;
+    this.checked = undefined;
+  }
+  watchIndeterminateChange(newValue) {
+    this.checkbox.indeterminate = newValue;
+  }
+  onClick() {
+    const { checked, indeterminate } = this;
+    this.checkboxChangeEvent.emit({
+      indeterminate,
+      checked
+    });
+  }
+  componentDidLoad() {
+    this.checkbox.indeterminate = this.indeterminate;
+  }
+  render() {
+    const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
+    const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
+    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+  }
+  static get watchers() { return {
+    "indeterminate": ["watchIndeterminateChange"]
+  }; }
+  static get style() { return tttxCheckboxCss; }
+}, [0, "tttx-checkbox", {
+    "checkboxId": [1, "checkbox-id"],
+    "label": [1],
+    "inline": [4],
+    "indeterminate": [4],
+    "checked": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckbox$1);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxCheckbox = TttxCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckbox, defineCustomElement };