@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/cjs/{tttx-checkbox-group-caption_localcomponent.cjs.entry.js → tttx-checkbox-group-caption_1_9_103.cjs.entry.js}

@@ -6,14 +6,14 @@ const index = require('./index-2c07dc57.js');
 
 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:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
 
-const TttxCheckboxGroupCaption = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group__caption' }, index.h("slot", null))));
-  }
-};
+const TttxCheckboxGroupCaption = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group__caption' }, index.h("slot", null))));
+  }
+};
 TttxCheckboxGroupCaption.style = tttxCheckboxGroupCss;
 
-exports.tttx_checkbox_group_caption_localcomponent = TttxCheckboxGroupCaption;
+exports.tttx_checkbox_group_caption_1_9_103 = TttxCheckboxGroupCaption;

package/dist/cjs/{tttx-checkbox-group-heading_localcomponent.cjs.entry.js → tttx-checkbox-group-heading_1_9_103.cjs.entry.js}

@@ -6,14 +6,14 @@ const index = require('./index-2c07dc57.js');
 
 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:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
 
-const TttxCheckboxGroupHeading = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group__heading' }, index.h("slot", null))));
-  }
-};
+const TttxCheckboxGroupHeading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group__heading' }, index.h("slot", null))));
+  }
+};
 TttxCheckboxGroupHeading.style = tttxCheckboxGroupCss;
 
-exports.tttx_checkbox_group_heading_localcomponent = TttxCheckboxGroupHeading;
+exports.tttx_checkbox_group_heading_1_9_103 = TttxCheckboxGroupHeading;

package/dist/cjs/{tttx-checkbox-group_localcomponent.cjs.entry.js → tttx-checkbox-group_1_9_103.cjs.entry.js}

@@ -6,14 +6,14 @@ const index = require('./index-2c07dc57.js');
 
 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:18.752px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16.408px;margin-bottom:4px}";
 
-const TttxCheckboxGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group' }, index.h("slot", null))));
-  }
-};
+const TttxCheckboxGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: 'tttx-checkbox-group' }, index.h("slot", null))));
+  }
+};
 TttxCheckboxGroup.style = tttxCheckboxGroupCss;
 
-exports.tttx_checkbox_group_localcomponent = TttxCheckboxGroup;
+exports.tttx_checkbox_group_1_9_103 = TttxCheckboxGroup;

package/dist/cjs/{tttx-checkbox_localcomponent.cjs.entry.js → tttx-checkbox_1_9_103.cjs.entry.js}

@@ -6,38 +6,38 @@ const index = require('./index-2c07dc57.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:18.752px}.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkboxChangeEvent = index.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 (index.h(index.Host, null, index.h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, index.h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), index.h("tttx-icon_localcomponent", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), index.h("span", { class: "tttx-checkbox__label" }, this.label))));
-  }
-  static get watchers() { return {
-    "indeterminate": ["watchIndeterminateChange"]
-  }; }
-};
+const TttxCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkboxChangeEvent = index.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 (index.h(index.Host, null, index.h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, index.h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), index.h("tttx-icon_1_9_103", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), index.h("span", { class: "tttx-checkbox__label" }, this.label))));
+  }
+  static get watchers() { return {
+    "indeterminate": ["watchIndeterminateChange"]
+  }; }
+};
 TttxCheckbox.style = tttxCheckboxCss;
 
-exports.tttx_checkbox_localcomponent = TttxCheckbox;
+exports.tttx_checkbox_1_9_103 = TttxCheckbox;

package/dist/cjs/{tttx-comments_localcomponent.cjs.entry.js → tttx-comments_1_9_103.cjs.entry.js}

@@ -6,209 +6,209 @@ const index = require('./index-2c07dc57.js');
 
 const tttxCommentsCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input,label .outer-container textarea{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px;padding:0;padding-left:16px;padding-right:16px;}label .outer-container input.has-input-icon,label .outer-container textarea.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon,label .outer-container textarea.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon,label .outer-container textarea.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon,label .outer-container textarea.has-right-icon{padding-right:40px}label .outer-container input.invalid,label .outer-container textarea.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]),label .outer-container textarea:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label .outer-container input[type=radio],label .outer-container textarea[type=radio]{width:20px;height:20px}label .outer-container input[type=date],label .outer-container textarea[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly],label .outer-container textarea[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus,label .outer-container textarea:focus{border-color:#1479c6}label .outer-container input:focus-visible,label .outer-container textarea:focus-visible{outline:none}label .outer-container textarea{padding:8px;height:auto;min-height:100px;resize:vertical}label .outer-container textarea.resize-none{resize:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputBlock.radioBlock{display:block}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}*{font-family:\"Roboto\", sans-serif}#comment-container{display:flex;height:100%;flex-direction:column}#comment-bubbles-section{display:flex;height:100%;flex-direction:column;justify-content:end;margin-bottom:8px;padding-bottom:8px;overflow:hidden}#input-section,#input-section form{display:flex;flex-direction:column;padding:0px 1px}#scroll-container{display:flex;overflow-y:auto;max-height:100%;width:100%;align-items:end;flex-direction:column}.commentBubble{display:flex;flex-direction:column;margin-bottom:8px;width:100%}.commentBubble>.bubbleText{background:#f0f0f0;border-radius:4px;padding:8px 12px;margin-bottom:4px;margin-top:10px;font-size:11pt;white-space:wrap}.commentBubble>span{color:#757575;font-size:10pt;margin:2px 16px}.commentBubble.right>span{text-align:right}.commentBubble.left>span{text-align:left}input{border:1px solid #dddddd;border-radius:4px;padding:8px 16px;font-size:11pt}input[type=text]{flex-grow:1}input[type=submit]{text-transform:uppercase;background:white;font-size:10pt;margin-top:8px;width:132px;display:flex;align-self:end}input[type=submit]:hover,input[type=submit]:active{background:#dddddd}button#attach-file{text-transform:uppercase;background:white;font-size:10pt;margin-top:8px;align-self:end;border:1px solid #dddddd;border-radius:4px;width:34px;height:34px;display:flex;flex-direction:column;justify-content:center;margin-right:8px}button#attach-file:hover,button#attach-file:active{background:#dddddd}button#attach-file *{margin-top:3px}fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:row;justify-content:end}button.linkButton{border:none;background:transparent;color:#3680bd;cursor:pointer;padding:0;margin-left:5px;font-size:11pt}.file-link-container{display:flex;align-items:center}.commentBubble .bubbleHeader{display:flex;justify-content:space-between}.commentName{color:black;font-size:10pt}.commentContext{color:gray;font-size:10pt}.commentBubble .bubbleFooter{display:flex;padding:0 10px;font-size:9pt;color:#757575}.comment-date{margin-left:auto}.editing-sub-text{margin-top:5px;font-size:9pt;color:#757575}.flex-right-align{margin-left:auto}.cancel-edit-container{position:relative;width:100%;display:flex;justify-content:end}.cancel-edit-button{color:whitesmoke;background-color:#aaaaaa;border-radius:10px;height:20px;width:20px;text-align:center;position:absolute;margin-top:11px;margin-right:18px}.clickable,.clickable>*{cursor:pointer}.deleted-comment{background:white !important;color:gray;border:1px solid lightgray}.commentDivider{border:none;border-top:1px solid #ccc;margin:10px 0}.errorBubble{position:relative;font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}.errorBubble:not(.visible){display:none}.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.comment-textarea{resize:vertical;height:var(--textarea-max-height, 90px);width:100%;padding:10px 35px 10px 12px;box-sizing:border-box;border:1px solid #ccc;border-radius:6px;font-size:14px;line-height:1.4;font-family:\"Roboto\", sans-serif}.no-comments{display:flex;flex-direction:row;align-items:center;justify-content:start;color:#757575;font-size:14px;gap:4px;font-family:\"Roboto\", sans-serif;margin-top:20px}.mt-s{margin-top:4px}.bubble-header-inner{display:flex}.unread-symbol{margin-left:5px}.unread-comment-divider{display:flex;margin:10px 0}.unread-comments-text{font-size:10pt;margin:0px 10px;white-space:nowrap;color:#757575}.unread-comment-divider-line{border:none;border-top:1px solid #ccc;width:100%}";
 
-const TttxComments = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.commentAdded = index.createEvent(this, "commentAdded", 6);
-    this.commentEdited = index.createEvent(this, "commentEdited", 6);
-    this.requestCommentRemoval = index.createEvent(this, "requestCommentRemoval", 6);
-    this.requestFileUpload = index.createEvent(this, "requestFileUpload", 6);
-    this.requestFileDownload = index.createEvent(this, "requestFileDownload", 6);
-    this.blurChanged = index.createEvent(this, "commentFocusOut", 7);
-    this.isFileComment = (comment) => { var _a; return (((_a = comment.metadata) === null || _a === void 0 ? void 0 : _a.type) === ECommentType.FILE); };
-    this.isUnread = (comment) => {
-      if (comment.createdByFullName === this.currentuser)
-        return false; // your own comment cannot be unread
-      if (!comment.userLastViewed)
-        return true; // has never viewed, so unread
-      return comment.createdAt > comment.userLastViewed;
-    };
-    this.currentuser = undefined;
-    this.comments = undefined;
-    this.disableFile = false;
-    this.messageLimit = 1000;
-    this.inputBoxHeight = 90;
-    this.placeholder = 'Enter Comment';
-    this.saveButtonText = 'Add Comment';
-    this.value = undefined;
-    this.allowEditing = false;
-    this.readonly = false;
-    this._comments = undefined;
-    this.showError = undefined;
-    this._saveButtonText = undefined;
-    this.editingComment = undefined;
-  }
-  componentWillLoad() {
-    // dynamic constructor: any props can be added later
-    this.onCommentsChange();
-    this._saveButtonText = this.saveButtonText;
-  }
-  onCommentsChange() {
-    if (!this.comments) {
-      return;
-    }
-    if (typeof this.comments === 'string') {
-      this._comments = JSON.parse(this.comments);
-    }
-    else {
-      this._comments = this.comments;
-    }
-    if (this.editingComment) {
-      // if comment being edited is now deleted, clear the active edit session
-      const latestComment = this._comments.find((comment) => comment.id === this.editingComment.id);
-      if (latestComment.isDeleted)
-        this.onFinishEdit();
-    }
-    this.scrollToBottom();
-  }
-  renderCommentBubble() {
-    var _a, _b;
-    const hasUnreadAtTop = ((_a = this._comments) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.isUnread(this._comments[0]) : false;
-    let unreadDividerRendered = false;
-    let topDivider = null;
-    if (hasUnreadAtTop) {
-      topDivider = (index.h("div", { class: "unread-comment-divider" }, index.h("hr", { class: "unread-comment-divider-line" }), index.h("span", { class: "unread-comments-text" }, "New Unread Comments"), index.h("hr", { class: "unread-comment-divider-line" })));
-    }
-    return (index.h(index.Fragment, null, (_b = this._comments) === null || _b === void 0 ? void 0 : _b.map((comment, index$1) => {
-      var _a;
-      const isCurrentUser = comment.createdByFullName === this.currentuser;
-      const bubbleClass = `commentBubble ${isCurrentUser ? 'right' : 'left'}`;
-      const isLastComment = index$1 === this._comments.length - 1;
-      const topComment = index$1 === 0 ? { marginTop: '10px' } : {};
-      const nextIsUnread = !isLastComment ? this.isUnread(this._comments[index$1 + 1]) : false;
-      const firstComment = index$1 === 0 ? true : false;
-      let divider = null;
-      if (!isLastComment &&
-        nextIsUnread &&
-        !unreadDividerRendered &&
-        !(hasUnreadAtTop && index$1 === 0)) {
-        divider = (index.h("div", { class: "unread-comment-divider" }, index.h("hr", { class: "unread-comment-divider-line" }), index.h("span", { class: "unread-comments-text" }, "New Unread Comments"), index.h("hr", { class: "unread-comment-divider-line" })));
-      }
-      unreadDividerRendered = unreadDividerRendered || nextIsUnread;
-      return [
-        index.h("div", { class: bubbleClass, style: topComment }, firstComment && topDivider, index.h("div", { class: "bubbleHeader" }, index.h("div", { class: "bubble-header-inner" }, index.h("span", { class: "commentName" }, comment.createdByFullName), this.isUnread(comment) && (index.h("tttx-icon_localcomponent", { class: "unread-symbol", icon: "error", color: "blue", style: { height: '18px' }, size: 18 }))), ((_a = comment.metadata) === null || _a === void 0 ? void 0 : _a.contextString) && (index.h("span", { class: "commentContext" }, "(", comment.metadata.contextString, ")"))), index.h("div", { class: `bubbleText ${comment.isDeleted ? 'deleted-comment' : ''}` }, this.renderCommentInner(comment)), index.h("div", { class: "bubbleFooter" }, !this.readonly && this.allowEditing && isCurrentUser && !comment.isDeleted && !!comment.id && (index.h("div", null, !this.isFileComment(comment) && (index.h(index.Fragment, null, index.h("span", { class: "clickable", onClick: this.onEdit.bind(this, comment) }, "Edit"), " | ")), index.h("span", { class: "clickable", onClick: this.onRemove.bind(this, comment) }, "Remove"))), index.h("span", { class: "comment-date" }, !!comment.lastUpdatedAt && !comment.isDeleted && `Edited ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !!comment.lastUpdatedAt && comment.isDeleted && `Removed ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !comment.lastUpdatedAt && `${new Date(comment.createdAt).toLocaleString(undefined, timestampOptions)}`)), !divider && !isLastComment && index.h("hr", { class: "commentDivider" }), divider)
-      ];
-    })));
-  }
-  renderCommentInner(comment) {
-    if (comment.isDeleted) {
-      return this.isFileComment(comment) ? 'File removed.' : 'Comment removed.';
-    }
-    return this.isFileComment(comment) ? this.renderFileLink(comment.metadata) : comment.text;
-  }
-  renderFileLink(metadata) {
-    return (index.h("div", { class: "file-link-container" }, index.h("tttx-icon_localcomponent", { icon: "attach_file", color: "black", style: { height: '20px' }, size: 20 }), index.h("button", { class: "linkButton", type: "button", value: metadata.key, onClick: this.onFileDownloadRequest.bind(this) }, metadata.filename)));
-  }
-  onFormSubmit(event) {
-    // get comment text
-    event.preventDefault();
-    const fd = new FormData(event.currentTarget);
-    let text;
-    for (const data of fd.entries()) {
-      text = data[1];
-    }
-    event.currentTarget.reset();
-    // edit / create new as required
-    if (this.editingComment) {
-      this.editComment(text);
-    }
-    else {
-      this.createComment(text);
-    }
-    this.scrollToBottom();
-  }
-  createComment(text) {
-    const newComment = {
-      id: undefined,
-      text: text,
-      createdAt: +(new Date()),
-      createdByFullName: this.currentuser,
-      createdById: undefined,
-      isDeleted: false
-    };
-    this._comments = [...this._comments, newComment];
-    this.commentAdded.emit(newComment);
-  }
-  editComment(updatedText) {
-    // update comment for list refresh
-    const index = this._comments.findIndex((x) => x.id === this.editingComment.id);
-    this._comments[index] = Object.assign(Object.assign({}, this._comments[index]), { text: updatedText, lastUpdatedAt: +(new Date()), updatedByFullName: this.currentuser, updatedById: undefined });
-    this._comments = [...this._comments];
-    // emit updated comment event
-    this.commentEdited.emit(this._comments[index]);
-    // reset comments box
-    this.onFinishEdit();
-  }
-  scrollToBottom() {
-    setTimeout(() => this._scrollContainer.scrollTo({ top: this._scrollContainer.scrollHeight }));
-  }
-  onFileUploadRequest() {
-    this.requestFileUpload.emit();
-  }
-  onFileDownloadRequest(event) {
-    this.requestFileDownload.emit(event.currentTarget.value);
-  }
-  async addDummyComment(text, createdByFullName) {
-    const newComment = {
-      id: undefined,
-      text: text,
-      createdAt: +(new Date()),
-      createdByFullName: createdByFullName !== null && createdByFullName !== void 0 ? createdByFullName : this.currentuser,
-      createdById: undefined,
-      isDeleted: false
-    };
-    this._comments = [...this._comments, newComment];
-    this.scrollToBottom();
-  }
-  onCommentFieldChange(e) {
-    const input = e.target;
-    if (input.value.length >= this.messageLimit) {
-      this.showError = true;
-    }
-    else {
-      this.showError = false;
-    }
-  }
-  handleBlur(event) {
-    if (this.editingComment)
-      return; // don't save drafts for edits
-    const target = event.target;
-    this.blurChanged.emit(target.value);
-  }
-  onEdit(comment) {
-    this.editingComment = comment;
-    this.textInput.value = this.editingComment.text;
-    this._saveButtonText = 'Update comment';
-    this.scrollToBottom();
-  }
-  onFinishEdit() {
-    this.editingComment = undefined;
-    this.textInput.value = '';
-    this._saveButtonText = this.saveButtonText;
-  }
-  onRemove(comment) {
-    comment = Object.assign(Object.assign({}, comment), { lastUpdatedAt: +(new Date()), updatedByFullName: this.currentuser, updatedById: undefined });
-    this.requestCommentRemoval.emit(comment);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("article", { id: "comment-container" }, (!Array.isArray(this._comments) || this._comments.length === 0) && (index.h("div", { class: "no-comments" }, index.h("tttx-icon_localcomponent", { class: 'mt-s', icon: "chat_bubble_outline", color: "grey" }), index.h("span", null, "No comments have been added"))), index.h("section", { id: "comment-bubbles-section" }, index.h("div", { id: "scroll-container", ref: el => this._scrollContainer = el }, this.renderCommentBubble())), index.h("section", { id: "input-section" }, !this.readonly && index.h("form", { onSubmit: this.onFormSubmit.bind(this) }, this.editingComment && (index.h("div", { class: "cancel-edit-container" }, index.h("span", { class: "cancel-edit-button clickable", onClick: this.onFinishEdit.bind(this) }, "x"))), index.h("fieldset", null, index.h("textarea", { ref: el => this.textInput = el, name: "commentText", required: true, maxlength: `${this.messageLimit}`, placeholder: this.placeholder, onInput: (e) => this.onCommentFieldChange(e), style: { '--textarea-max-height': `${this.inputBoxHeight}px` }, class: "comment-textarea", value: this.value, onBlur: this.handleBlur.bind(this) })), this.showError && (index.h("span", { class: 'errorBubble visible' }, index.h("span", { class: "material-symbols-rounded" }, "warning"), " ", `${this.messageLimit} character limit is reached.`)), index.h("fieldset", null, this.editingComment && (index.h("span", { class: 'editing-sub-text' }, "Editing comment")), !this.disableFile && (index.h("button", { id: "attach-file", class: "flex-right-align clickable", type: "button", value: "File", onClick: this.onFileUploadRequest.bind(this) }, index.h("tttx-icon_localcomponent", { color: "black", icon: "attach_file" }))), index.h("input", { class: (this.disableFile ? 'flex-right-align ' : '') + 'clickable', style: { width: 'fit-content' }, type: "submit", value: this._saveButtonText })))))));
-  }
-  static get watchers() { return {
-    "comments": ["onCommentsChange"]
-  }; }
-};
-var ECommentType;
-(function (ECommentType) {
-  ECommentType[ECommentType["FILE"] = 0] = "FILE";
-})(ECommentType || (ECommentType = {}));
-const timestampOptions = {
-  hour12: false,
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric'
-};
+const TttxComments = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.commentAdded = index.createEvent(this, "commentAdded", 6);
+    this.commentEdited = index.createEvent(this, "commentEdited", 6);
+    this.requestCommentRemoval = index.createEvent(this, "requestCommentRemoval", 6);
+    this.requestFileUpload = index.createEvent(this, "requestFileUpload", 6);
+    this.requestFileDownload = index.createEvent(this, "requestFileDownload", 6);
+    this.blurChanged = index.createEvent(this, "commentFocusOut", 7);
+    this.isFileComment = (comment) => { var _a; return (((_a = comment.metadata) === null || _a === void 0 ? void 0 : _a.type) === ECommentType.FILE); };
+    this.isUnread = (comment) => {
+      if (comment.createdByFullName === this.currentuser)
+        return false; // your own comment cannot be unread
+      if (!comment.userLastViewed)
+        return true; // has never viewed, so unread
+      return comment.createdAt > comment.userLastViewed;
+    };
+    this.currentuser = undefined;
+    this.comments = undefined;
+    this.disableFile = false;
+    this.messageLimit = 1000;
+    this.inputBoxHeight = 90;
+    this.placeholder = 'Enter Comment';
+    this.saveButtonText = 'Add Comment';
+    this.value = undefined;
+    this.allowEditing = false;
+    this.readonly = false;
+    this._comments = undefined;
+    this.showError = undefined;
+    this._saveButtonText = undefined;
+    this.editingComment = undefined;
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onCommentsChange();
+    this._saveButtonText = this.saveButtonText;
+  }
+  onCommentsChange() {
+    if (!this.comments) {
+      return;
+    }
+    if (typeof this.comments === 'string') {
+      this._comments = JSON.parse(this.comments);
+    }
+    else {
+      this._comments = this.comments;
+    }
+    if (this.editingComment) {
+      // if comment being edited is now deleted, clear the active edit session
+      const latestComment = this._comments.find((comment) => comment.id === this.editingComment.id);
+      if (latestComment.isDeleted)
+        this.onFinishEdit();
+    }
+    this.scrollToBottom();
+  }
+  renderCommentBubble() {
+    var _a, _b;
+    const hasUnreadAtTop = ((_a = this._comments) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.isUnread(this._comments[0]) : false;
+    let unreadDividerRendered = false;
+    let topDivider = null;
+    if (hasUnreadAtTop) {
+      topDivider = (index.h("div", { class: "unread-comment-divider" }, index.h("hr", { class: "unread-comment-divider-line" }), index.h("span", { class: "unread-comments-text" }, "New Unread Comments"), index.h("hr", { class: "unread-comment-divider-line" })));
+    }
+    return (index.h(index.Fragment, null, (_b = this._comments) === null || _b === void 0 ? void 0 : _b.map((comment, index$1) => {
+      var _a;
+      const isCurrentUser = comment.createdByFullName === this.currentuser;
+      const bubbleClass = `commentBubble ${isCurrentUser ? 'right' : 'left'}`;
+      const isLastComment = index$1 === this._comments.length - 1;
+      const topComment = index$1 === 0 ? { marginTop: '10px' } : {};
+      const nextIsUnread = !isLastComment ? this.isUnread(this._comments[index$1 + 1]) : false;
+      const firstComment = index$1 === 0 ? true : false;
+      let divider = null;
+      if (!isLastComment &&
+        nextIsUnread &&
+        !unreadDividerRendered &&
+        !(hasUnreadAtTop && index$1 === 0)) {
+        divider = (index.h("div", { class: "unread-comment-divider" }, index.h("hr", { class: "unread-comment-divider-line" }), index.h("span", { class: "unread-comments-text" }, "New Unread Comments"), index.h("hr", { class: "unread-comment-divider-line" })));
+      }
+      unreadDividerRendered = unreadDividerRendered || nextIsUnread;
+      return [
+        index.h("div", { class: bubbleClass, style: topComment }, firstComment && topDivider, index.h("div", { class: "bubbleHeader" }, index.h("div", { class: "bubble-header-inner" }, index.h("span", { class: "commentName" }, comment.createdByFullName), this.isUnread(comment) && (index.h("tttx-icon_1_9_103", { class: "unread-symbol", icon: "error", color: "blue", style: { height: '18px' }, size: 18 }))), ((_a = comment.metadata) === null || _a === void 0 ? void 0 : _a.contextString) && (index.h("span", { class: "commentContext" }, "(", comment.metadata.contextString, ")"))), index.h("div", { class: `bubbleText ${comment.isDeleted ? 'deleted-comment' : ''}` }, this.renderCommentInner(comment)), index.h("div", { class: "bubbleFooter" }, !this.readonly && this.allowEditing && isCurrentUser && !comment.isDeleted && !!comment.id && (index.h("div", null, !this.isFileComment(comment) && (index.h(index.Fragment, null, index.h("span", { class: "clickable", onClick: this.onEdit.bind(this, comment) }, "Edit"), " | ")), index.h("span", { class: "clickable", onClick: this.onRemove.bind(this, comment) }, "Remove"))), index.h("span", { class: "comment-date" }, !!comment.lastUpdatedAt && !comment.isDeleted && `Edited ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !!comment.lastUpdatedAt && comment.isDeleted && `Removed ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !comment.lastUpdatedAt && `${new Date(comment.createdAt).toLocaleString(undefined, timestampOptions)}`)), !divider && !isLastComment && index.h("hr", { class: "commentDivider" }), divider)
+      ];
+    })));
+  }
+  renderCommentInner(comment) {
+    if (comment.isDeleted) {
+      return this.isFileComment(comment) ? 'File removed.' : 'Comment removed.';
+    }
+    return this.isFileComment(comment) ? this.renderFileLink(comment.metadata) : comment.text;
+  }
+  renderFileLink(metadata) {
+    return (index.h("div", { class: "file-link-container" }, index.h("tttx-icon_1_9_103", { icon: "attach_file", color: "black", style: { height: '20px' }, size: 20 }), index.h("button", { class: "linkButton", type: "button", value: metadata.key, onClick: this.onFileDownloadRequest.bind(this) }, metadata.filename)));
+  }
+  onFormSubmit(event) {
+    // get comment text
+    event.preventDefault();
+    const fd = new FormData(event.currentTarget);
+    let text;
+    for (const data of fd.entries()) {
+      text = data[1];
+    }
+    event.currentTarget.reset();
+    // edit / create new as required
+    if (this.editingComment) {
+      this.editComment(text);
+    }
+    else {
+      this.createComment(text);
+    }
+    this.scrollToBottom();
+  }
+  createComment(text) {
+    const newComment = {
+      id: undefined,
+      text: text,
+      createdAt: +(new Date()),
+      createdByFullName: this.currentuser,
+      createdById: undefined,
+      isDeleted: false
+    };
+    this._comments = [...this._comments, newComment];
+    this.commentAdded.emit(newComment);
+  }
+  editComment(updatedText) {
+    // update comment for list refresh
+    const index = this._comments.findIndex((x) => x.id === this.editingComment.id);
+    this._comments[index] = Object.assign(Object.assign({}, this._comments[index]), { text: updatedText, lastUpdatedAt: +(new Date()), updatedByFullName: this.currentuser, updatedById: undefined });
+    this._comments = [...this._comments];
+    // emit updated comment event
+    this.commentEdited.emit(this._comments[index]);
+    // reset comments box
+    this.onFinishEdit();
+  }
+  scrollToBottom() {
+    setTimeout(() => this._scrollContainer.scrollTo({ top: this._scrollContainer.scrollHeight }));
+  }
+  onFileUploadRequest() {
+    this.requestFileUpload.emit();
+  }
+  onFileDownloadRequest(event) {
+    this.requestFileDownload.emit(event.currentTarget.value);
+  }
+  async addDummyComment(text, createdByFullName) {
+    const newComment = {
+      id: undefined,
+      text: text,
+      createdAt: +(new Date()),
+      createdByFullName: createdByFullName !== null && createdByFullName !== void 0 ? createdByFullName : this.currentuser,
+      createdById: undefined,
+      isDeleted: false
+    };
+    this._comments = [...this._comments, newComment];
+    this.scrollToBottom();
+  }
+  onCommentFieldChange(e) {
+    const input = e.target;
+    if (input.value.length >= this.messageLimit) {
+      this.showError = true;
+    }
+    else {
+      this.showError = false;
+    }
+  }
+  handleBlur(event) {
+    if (this.editingComment)
+      return; // don't save drafts for edits
+    const target = event.target;
+    this.blurChanged.emit(target.value);
+  }
+  onEdit(comment) {
+    this.editingComment = comment;
+    this.textInput.value = this.editingComment.text;
+    this._saveButtonText = 'Update comment';
+    this.scrollToBottom();
+  }
+  onFinishEdit() {
+    this.editingComment = undefined;
+    this.textInput.value = '';
+    this._saveButtonText = this.saveButtonText;
+  }
+  onRemove(comment) {
+    comment = Object.assign(Object.assign({}, comment), { lastUpdatedAt: +(new Date()), updatedByFullName: this.currentuser, updatedById: undefined });
+    this.requestCommentRemoval.emit(comment);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("article", { id: "comment-container" }, (!Array.isArray(this._comments) || this._comments.length === 0) && (index.h("div", { class: "no-comments" }, index.h("tttx-icon_1_9_103", { class: 'mt-s', icon: "chat_bubble_outline", color: "grey" }), index.h("span", null, "No comments have been added"))), index.h("section", { id: "comment-bubbles-section" }, index.h("div", { id: "scroll-container", ref: el => this._scrollContainer = el }, this.renderCommentBubble())), index.h("section", { id: "input-section" }, !this.readonly && index.h("form", { onSubmit: this.onFormSubmit.bind(this) }, this.editingComment && (index.h("div", { class: "cancel-edit-container" }, index.h("span", { class: "cancel-edit-button clickable", onClick: this.onFinishEdit.bind(this) }, "x"))), index.h("fieldset", null, index.h("textarea", { ref: el => this.textInput = el, name: "commentText", required: true, maxlength: `${this.messageLimit}`, placeholder: this.placeholder, onInput: (e) => this.onCommentFieldChange(e), style: { '--textarea-max-height': `${this.inputBoxHeight}px` }, class: "comment-textarea", value: this.value, onBlur: this.handleBlur.bind(this) })), this.showError && (index.h("span", { class: 'errorBubble visible' }, index.h("span", { class: "material-symbols-rounded" }, "warning"), " ", `${this.messageLimit} character limit is reached.`)), index.h("fieldset", null, this.editingComment && (index.h("span", { class: 'editing-sub-text' }, "Editing comment")), !this.disableFile && (index.h("button", { id: "attach-file", class: "flex-right-align clickable", type: "button", value: "File", onClick: this.onFileUploadRequest.bind(this) }, index.h("tttx-icon_1_9_103", { color: "black", icon: "attach_file" }))), index.h("input", { class: (this.disableFile ? 'flex-right-align ' : '') + 'clickable', style: { width: 'fit-content' }, type: "submit", value: this._saveButtonText })))))));
+  }
+  static get watchers() { return {
+    "comments": ["onCommentsChange"]
+  }; }
+};
+var ECommentType;
+(function (ECommentType) {
+  ECommentType[ECommentType["FILE"] = 0] = "FILE";
+})(ECommentType || (ECommentType = {}));
+const timestampOptions = {
+  hour12: false,
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric'
+};
 TttxComments.style = tttxCommentsCss;
 
-exports.tttx_comments_localcomponent = TttxComments;
+exports.tttx_comments_1_9_103 = TttxComments;

package/dist/cjs/tttx-data-pattern_1_9_103.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2c07dc57.js');
+
+const tttxDataPatternCss = ":host{display:block}";
+
+const TttxDataPattern = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.data = undefined;
+    this.sorterOptions = undefined;
+    this.filterOptions = undefined;
+    this.filterHeader = 'Filter';
+    this.defaultSortOption = 'Sort by';
+    this.searchplaceholder = 'Search';
+    this.addbuttonlabel = 'Add';
+    this.addbutton = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("tttx-toolbar_1_9_103", { border: true }, index.h("span", { slot: "before" }, this.sorterOptions &&
+      index.h("tttx-sorter_1_9_103", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
+      index.h("tttx-filter_1_9_103", { "filter-options": JSON.stringify(this.filterOptions), showSelectAll: false, "show-option-icons": true, "filter-header": this.filterHeader, "filter-key": "data-pattern-list" })), index.h("span", { slot: "after" }, index.h("tttx-standalone-input_1_9_103", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), index.h("tttx-toolbar_1_9_103", { border: false }, index.h("span", { slot: "before" }, this.addbutton &&
+      index.h("tttx-button_1_9_103", { design: "primary", icon: "add" }, this.addbuttonlabel))), index.h("tttx-list_1_9_103", { data: this.data }))));
+  }
+};
+TttxDataPattern.style = tttxDataPatternCss;
+
+exports.tttx_data_pattern_1_9_103 = TttxDataPattern;