@verdocs/web-sdk 1.15.1 → 1.15.3

package/dist/components/verdocs-templates-list.js

@@ -1,13 +1,19 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { P as Permissions, V as VerdocsEndpoint, c as canPerformTemplateAction } from './VerdocsEndpoint.js';
-import { g as getSummary } from './Templates.js';
+import { g as getSummary, d as deleteTemplate } from './Templates.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$5 } from './verdocs-dropdown2.js';
-import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$3 } from './verdocs-loader2.js';
+import { d as defineCustomElement$a } from './verdocs-button2.js';
+import { d as defineCustomElement$9 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$8 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$7 } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$6 } from './verdocs-pagination2.js';
+import { d as defineCustomElement$5 } from './verdocs-quick-filter2.js';
+import { d as defineCustomElement$4 } from './verdocs-spinner2.js';
+import { d as defineCustomElement$3 } from './verdocs-template-star2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+import { r as requiredArgs, t as toDate, g as getTimezoneOffsetInMilliseconds, l as locale, a as getDefaultOptions } from './index2.js';
 
 /**
  * Confirm whether the user has all of the specified permissions.
@@ -16,6 +22,491 @@ var userHasPermissions = function (session, permissions) {
     return permissions.every(function (perm) { return ((session === null || session === void 0 ? void 0 : session.permissions) || []).includes(perm); });
 };
 
+/**
+ * @name compareAsc
+ * @category Common Helpers
+ * @summary Compare the two dates and return -1, 0 or 1.
+ *
+ * @description
+ * Compare the two dates and return 1 if the first date is after the second,
+ * -1 if the first date is before the second or 0 if dates are equal.
+ *
+ * @param {Date|Number} dateLeft - the first date to compare
+ * @param {Date|Number} dateRight - the second date to compare
+ * @returns {Number} the result of the comparison
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Compare 11 February 1987 and 10 July 1989:
+ * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
+ * //=> -1
+ *
+ * @example
+ * // Sort the array of dates:
+ * const result = [
+ *   new Date(1995, 6, 2),
+ *   new Date(1987, 1, 11),
+ *   new Date(1989, 6, 10)
+ * ].sort(compareAsc)
+ * //=> [
+ * //   Wed Feb 11 1987 00:00:00,
+ * //   Mon Jul 10 1989 00:00:00,
+ * //   Sun Jul 02 1995 00:00:00
+ * // ]
+ */
+function compareAsc(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeft = toDate(dirtyDateLeft);
+  var dateRight = toDate(dirtyDateRight);
+  var diff = dateLeft.getTime() - dateRight.getTime();
+  if (diff < 0) {
+    return -1;
+  } else if (diff > 0) {
+    return 1;
+    // Return 0 if diff is 0; return NaN if diff is NaN
+  } else {
+    return diff;
+  }
+}
+
+/**
+ * @name differenceInCalendarMonths
+ * @category Month Helpers
+ * @summary Get the number of calendar months between the given dates.
+ *
+ * @description
+ * Get the number of calendar months between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of calendar months
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many calendar months are between 31 January 2014 and 1 September 2014?
+ * const result = differenceInCalendarMonths(
+ *   new Date(2014, 8, 1),
+ *   new Date(2014, 0, 31)
+ * )
+ * //=> 8
+ */
+function differenceInCalendarMonths(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeft = toDate(dirtyDateLeft);
+  var dateRight = toDate(dirtyDateRight);
+  var yearDiff = dateLeft.getFullYear() - dateRight.getFullYear();
+  var monthDiff = dateLeft.getMonth() - dateRight.getMonth();
+  return yearDiff * 12 + monthDiff;
+}
+
+/**
+ * @name differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of milliseconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */
+function differenceInMilliseconds(dateLeft, dateRight) {
+  requiredArgs(2, arguments);
+  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
+}
+
+var roundingMap = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function trunc(value) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+  } // Math.trunc is not supported by IE
+};
+
+var defaultRoundingMethod = 'trunc';
+function getRoundingMethod(method) {
+  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
+}
+
+/**
+ * @name endOfDay
+ * @category Day Helpers
+ * @summary Return the end of a day for the given date.
+ *
+ * @description
+ * Return the end of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the end of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The end of a day for 2 September 2014 11:55:00:
+ * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 23:59:59.999
+ */
+function endOfDay(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setHours(23, 59, 59, 999);
+  return date;
+}
+
+/**
+ * @name endOfMonth
+ * @category Month Helpers
+ * @summary Return the end of a month for the given date.
+ *
+ * @description
+ * Return the end of a month for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the end of a month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The end of a month for 2 September 2014 11:55:00:
+ * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 30 2014 23:59:59.999
+ */
+function endOfMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var month = date.getMonth();
+  date.setFullYear(date.getFullYear(), month + 1, 0);
+  date.setHours(23, 59, 59, 999);
+  return date;
+}
+
+/**
+ * @name isLastDayOfMonth
+ * @category Month Helpers
+ * @summary Is the given date the last day of a month?
+ *
+ * @description
+ * Is the given date the last day of a month?
+ *
+ * @param {Date|Number} date - the date to check
+ * @returns {Boolean} the date is the last day of a month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Is 28 February 2014 the last day of a month?
+ * const result = isLastDayOfMonth(new Date(2014, 1, 28))
+ * //=> true
+ */
+function isLastDayOfMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  return endOfDay(date).getTime() === endOfMonth(date).getTime();
+}
+
+/**
+ * @name differenceInMonths
+ * @category Month Helpers
+ * @summary Get the number of full months between the given dates.
+ *
+ * @description
+ * Get the number of full months between the given dates using trunc as a default rounding method.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of full months
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many full months are between 31 January 2014 and 1 September 2014?
+ * const result = differenceInMonths(new Date(2014, 8, 1), new Date(2014, 0, 31))
+ * //=> 7
+ */
+function differenceInMonths(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeft = toDate(dirtyDateLeft);
+  var dateRight = toDate(dirtyDateRight);
+  var sign = compareAsc(dateLeft, dateRight);
+  var difference = Math.abs(differenceInCalendarMonths(dateLeft, dateRight));
+  var result;
+
+  // Check for the difference of less than month
+  if (difference < 1) {
+    result = 0;
+  } else {
+    if (dateLeft.getMonth() === 1 && dateLeft.getDate() > 27) {
+      // This will check if the date is end of Feb and assign a higher end of month date
+      // to compare it with Jan
+      dateLeft.setDate(30);
+    }
+    dateLeft.setMonth(dateLeft.getMonth() - sign * difference);
+
+    // Math.abs(diff in full months - diff in calendar months) === 1 if last calendar month is not full
+    // If so, result must be decreased by 1 in absolute value
+    var isLastMonthNotFull = compareAsc(dateLeft, dateRight) === -sign;
+
+    // Check for cases of one full calendar month
+    if (isLastDayOfMonth(toDate(dirtyDateLeft)) && difference === 1 && compareAsc(dirtyDateLeft, dateRight) === 1) {
+      isLastMonthNotFull = false;
+    }
+    result = sign * (difference - Number(isLastMonthNotFull));
+  }
+
+  // Prevent negative zero
+  return result === 0 ? 0 : result;
+}
+
+/**
+ * @name differenceInSeconds
+ * @category Second Helpers
+ * @summary Get the number of seconds between the given dates.
+ *
+ * @description
+ * Get the number of seconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @param {Object} [options] - an object with options.
+ * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
+ * @returns {Number} the number of seconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many seconds are between
+ * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?
+ * const result = differenceInSeconds(
+ *   new Date(2014, 6, 2, 12, 30, 20, 0),
+ *   new Date(2014, 6, 2, 12, 30, 7, 999)
+ * )
+ * //=> 12
+ */
+function differenceInSeconds(dateLeft, dateRight, options) {
+  requiredArgs(2, arguments);
+  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;
+  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
+}
+
+function assign(target, object) {
+  if (target == null) {
+    throw new TypeError('assign requires that input parameter not be null or undefined');
+  }
+  for (var property in object) {
+    if (Object.prototype.hasOwnProperty.call(object, property)) {
+      target[property] = object[property];
+    }
+  }
+  return target;
+}
+
+function cloneObject(object) {
+  return assign({}, object);
+}
+
+var MINUTES_IN_DAY = 1440;
+var MINUTES_IN_ALMOST_TWO_DAYS = 2520;
+var MINUTES_IN_MONTH = 43200;
+var MINUTES_IN_TWO_MONTHS = 86400;
+
+/**
+ * @name formatDistance
+ * @category Common Helpers
+ * @summary Return the distance between the given dates in words.
+ *
+ * @description
+ * Return the distance between the given dates in words.
+ *
+ * | Distance between dates                                            | Result              |
+ * |-------------------------------------------------------------------|---------------------|
+ * | 0 ... 30 secs                                                     | less than a minute  |
+ * | 30 secs ... 1 min 30 secs                                         | 1 minute            |
+ * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |
+ * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |
+ * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |
+ * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |
+ * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |
+ * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |
+ * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |
+ * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |
+ * | 1 yr ... 1 yr 3 months                                            | about 1 year        |
+ * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |
+ * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |
+ * | N yrs ... N yrs 3 months                                          | about N years       |
+ * | N yrs 3 months ... N yrs 9 months                                 | over N years        |
+ * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |
+ *
+ * With `options.includeSeconds == true`:
+ * | Distance between dates | Result               |
+ * |------------------------|----------------------|
+ * | 0 secs ... 5 secs      | less than 5 seconds  |
+ * | 5 secs ... 10 secs     | less than 10 seconds |
+ * | 10 secs ... 20 secs    | less than 20 seconds |
+ * | 20 secs ... 40 secs    | half a minute        |
+ * | 40 secs ... 60 secs    | less than a minute   |
+ * | 60 secs ... 90 secs    | 1 minute             |
+ *
+ * @param {Date|Number} date - the date
+ * @param {Date|Number} baseDate - the date to compare with
+ * @param {Object} [options] - an object with options.
+ * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed
+ * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first
+ * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
+ * @returns {String} the distance in words
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} `date` must not be Invalid Date
+ * @throws {RangeError} `baseDate` must not be Invalid Date
+ * @throws {RangeError} `options.locale` must contain `formatDistance` property
+ *
+ * @example
+ * // What is the distance between 2 July 2014 and 1 January 2015?
+ * const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))
+ * //=> '6 months'
+ *
+ * @example
+ * // What is the distance between 1 January 2015 00:00:15
+ * // and 1 January 2015 00:00:00, including seconds?
+ * const result = formatDistance(
+ *   new Date(2015, 0, 1, 0, 0, 15),
+ *   new Date(2015, 0, 1, 0, 0, 0),
+ *   { includeSeconds: true }
+ * )
+ * //=> 'less than 20 seconds'
+ *
+ * @example
+ * // What is the distance from 1 January 2016
+ * // to 1 January 2015, with a suffix?
+ * const result = formatDistance(new Date(2015, 0, 1), new Date(2016, 0, 1), {
+ *   addSuffix: true
+ * })
+ * //=> 'about 1 year ago'
+ *
+ * @example
+ * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?
+ * import { eoLocale } from 'date-fns/locale/eo'
+ * const result = formatDistance(new Date(2016, 7, 1), new Date(2015, 0, 1), {
+ *   locale: eoLocale
+ * })
+ * //=> 'pli ol 1 jaro'
+ */
+
+function formatDistance(dirtyDate, dirtyBaseDate, options) {
+  var _ref, _options$locale;
+  requiredArgs(2, arguments);
+  var defaultOptions = getDefaultOptions();
+  var locale$1 = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : locale;
+  if (!locale$1.formatDistance) {
+    throw new RangeError('locale must contain formatDistance property');
+  }
+  var comparison = compareAsc(dirtyDate, dirtyBaseDate);
+  if (isNaN(comparison)) {
+    throw new RangeError('Invalid time value');
+  }
+  var localizeOptions = assign(cloneObject(options), {
+    addSuffix: Boolean(options === null || options === void 0 ? void 0 : options.addSuffix),
+    comparison: comparison
+  });
+  var dateLeft;
+  var dateRight;
+  if (comparison > 0) {
+    dateLeft = toDate(dirtyBaseDate);
+    dateRight = toDate(dirtyDate);
+  } else {
+    dateLeft = toDate(dirtyDate);
+    dateRight = toDate(dirtyBaseDate);
+  }
+  var seconds = differenceInSeconds(dateRight, dateLeft);
+  var offsetInSeconds = (getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft)) / 1000;
+  var minutes = Math.round((seconds - offsetInSeconds) / 60);
+  var months;
+
+  // 0 up to 2 mins
+  if (minutes < 2) {
+    if (options !== null && options !== void 0 && options.includeSeconds) {
+      if (seconds < 5) {
+        return locale$1.formatDistance('lessThanXSeconds', 5, localizeOptions);
+      } else if (seconds < 10) {
+        return locale$1.formatDistance('lessThanXSeconds', 10, localizeOptions);
+      } else if (seconds < 20) {
+        return locale$1.formatDistance('lessThanXSeconds', 20, localizeOptions);
+      } else if (seconds < 40) {
+        return locale$1.formatDistance('halfAMinute', 0, localizeOptions);
+      } else if (seconds < 60) {
+        return locale$1.formatDistance('lessThanXMinutes', 1, localizeOptions);
+      } else {
+        return locale$1.formatDistance('xMinutes', 1, localizeOptions);
+      }
+    } else {
+      if (minutes === 0) {
+        return locale$1.formatDistance('lessThanXMinutes', 1, localizeOptions);
+      } else {
+        return locale$1.formatDistance('xMinutes', minutes, localizeOptions);
+      }
+    }
+
+    // 2 mins up to 0.75 hrs
+  } else if (minutes < 45) {
+    return locale$1.formatDistance('xMinutes', minutes, localizeOptions);
+
+    // 0.75 hrs up to 1.5 hrs
+  } else if (minutes < 90) {
+    return locale$1.formatDistance('aboutXHours', 1, localizeOptions);
+
+    // 1.5 hrs up to 24 hrs
+  } else if (minutes < MINUTES_IN_DAY) {
+    var hours = Math.round(minutes / 60);
+    return locale$1.formatDistance('aboutXHours', hours, localizeOptions);
+
+    // 1 day up to 1.75 days
+  } else if (minutes < MINUTES_IN_ALMOST_TWO_DAYS) {
+    return locale$1.formatDistance('xDays', 1, localizeOptions);
+
+    // 1.75 days up to 30 days
+  } else if (minutes < MINUTES_IN_MONTH) {
+    var days = Math.round(minutes / MINUTES_IN_DAY);
+    return locale$1.formatDistance('xDays', days, localizeOptions);
+
+    // 1 month up to 2 months
+  } else if (minutes < MINUTES_IN_TWO_MONTHS) {
+    months = Math.round(minutes / MINUTES_IN_MONTH);
+    return locale$1.formatDistance('aboutXMonths', months, localizeOptions);
+  }
+  months = differenceInMonths(dateRight, dateLeft);
+
+  // 2 months up to 12 months
+  if (months < 12) {
+    var nearestMonth = Math.round(minutes / MINUTES_IN_MONTH);
+    return locale$1.formatDistance('xMonths', nearestMonth, localizeOptions);
+
+    // 1 year up to max Date
+  } else {
+    var monthsSinceStartOfYear = months % 12;
+    var years = Math.floor(months / 12);
+
+    // N years up to 1 years 3 months
+    if (monthsSinceStartOfYear < 3) {
+      return locale$1.formatDistance('aboutXYears', years, localizeOptions);
+
+      // N years 3 months up to N years 9 months
+    } else if (monthsSinceStartOfYear < 9) {
+      return locale$1.formatDistance('overXYears', years, localizeOptions);
+
+      // N years 9 months up to N year 12 months
+    } else {
+      return locale$1.formatDistance('almostXYears', years + 1, localizeOptions);
+    }
+  }
+}
+
 /**
  * Various helpers to identify available operations for a template by a user.
  *
@@ -42,50 +533,94 @@ var userCanCreateTemplate = function (session) {
     return userCanCreatePersonalTemplate(session) || userCanCreateOrgTemplate(session) || userCanCreatePublicTemplate(session);
 };
 
-const verdocsTemplatesListCss = "verdocs-templates-list{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-templates-list .template{display:-ms-flexbox;display:flex;margin:3px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #eee;background:#fff;padding:8px 20px}verdocs-templates-list .template svg{width:32px;height:32px}@media screen and (max-width: 1300px){verdocs-templates-list .template svg{width:24px;height:24px}}verdocs-templates-list .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:black;font-size:18px;margin-left:10px}@media screen and (max-width: 1300px){verdocs-templates-list .name{font-size:16px}}verdocs-templates-list .spacer{display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;height:50px;margin:0 12px;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-templates-list .spacer{margin:12px 0;border-top:1px solid #dad8dd;border-right:none}}";
+const verdocsTemplatesListCss = "verdocs-templates-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-templates-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-templates-list .header .filter{width:150px}verdocs-templates-list .header verdocs-text-input{margin:0}verdocs-templates-list .header verdocs-text-input input{height:32px}verdocs-templates-list .filter{-ms-flex-align:center;align-items:center}verdocs-templates-list .template{width:100%;margin:3px 0;background:#ffffff}verdocs-templates-list .template:hover{cursor:pointer;background:#f5f5fa}verdocs-templates-list .template .inner{gap:10px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-templates-list .template .inner svg{width:24px;height:24px}verdocs-templates-list .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:black;font-size:18px;margin-left:10px}@media screen and (max-width: 1300px){verdocs-templates-list .name{font-size:16px}}verdocs-templates-list .spacer{margin:0;height:30px;-ms-flex:0 0 1px;flex:0 0 1px;display:-ms-flexbox;display:flex;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-templates-list .spacer{margin:12px 0;border-top:1px solid #dad8dd;border-right:none}}verdocs-templates-list .empty-text{font-size:20px;text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-templates-list .ownership{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 100px;flex:0 0 100px;font-size:16px;margin:0 0 0 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-templates-list .ownership svg{width:24px;height:24px;margin-right:8px}verdocs-templates-list .last-used{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 280px;flex:0 0 280px;font-size:16px;margin:0 0 0 10px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-templates-list .last-used svg{width:24px;height:24px;margin-right:8px}verdocs-templates-list .usage{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px;font-size:16px;margin:0 0 0 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-templates-list .usage svg{width:24px;height:24px;margin-right:8px}";
 
-const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>`;
+const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>`;
+const GlobeAltIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /></svg>`;
+const LockClosedIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>`;
+const BuildingOfficeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" /></svg>`;
+const CalendarIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>`;
+const EnvelopeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>`;
+const SharingFilters = [
+  { value: 'all', label: 'All' },
+  { value: 'personal', label: 'Personal' },
+  { value: 'shared', label: 'Shared' },
+  { value: 'public', label: 'Public' },
+];
+const StarredFilters = [
+  { value: 'all', label: 'All' },
+  { value: 'starred', label: 'Starred' },
+  { value: 'unstarred', label: 'Not Starred' },
+];
+const SortOptions = [
+  { value: 'name', label: 'Name' },
+  { value: 'created_at', label: 'Created' },
+  { value: 'updated_at', label: 'Last Updated' },
+  { value: 'last_used_at', label: 'Last Used' },
+  { value: 'counter', label: 'Most Used' },
+  { value: 'star_counter', label: 'Most Starred' },
+];
 const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.sdkError = createEvent(this, "sdkError", 7);
-    this.viewEnvelope = createEvent(this, "viewEnvelope", 7);
-    this.finishLater = createEvent(this, "finishLater", 7);
-    this.viewAll = createEvent(this, "viewAll", 7);
-    this.handleOptionSelected = (id, summary) => {
-      console.log('option selected', id, summary);
-      if (id === 'createdoc') ;
-      else if (id === 'createlink') {
-        // Create a link to this template
-        VerdocsToast('Link creation is coming soon!');
+    this.viewTemplate = createEvent(this, "viewTemplate", 7);
+    this.editTemplate = createEvent(this, "editTemplate", 7);
+    this.templateDeleted = createEvent(this, "templateDeleted", 7);
+    this.handleOptionSelected = (option, template) => {
+      var _a, _b;
+      if (option === 'createdoc') {
+        (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: template });
+      }
+      else if (option === 'createlink') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'signnow') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'submitted') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'link') {
+        VerdocsToast('This feature is coming soon!');
+      }
+      else if (option === 'edit') {
+        (_b = this.editTemplate) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: template });
+      }
+      else if (option === 'delete') {
+        this.confirmDelete = template;
       }
-      else ;
     };
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.items = 5;
-    this.view = undefined;
-    this.page = 0;
-    this.count = 0;
-    this.loading = true;
-    this.name = '';
-    this.containing = '';
     this.sharing = 'all';
     this.starred = 'all';
     this.sort = 'updated_at';
-    this.selectedTemplates = [];
+    this.name = '';
+    this.selectedPage = 0;
+    this.count = 0;
+    this.loading = true;
+    this.confirmDelete = null;
     this.templates = [];
   }
   async componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[TEMPLATES] Must be authenticated');
+      return;
+    }
+    return this.queryTemplates();
+  }
+  async queryTemplates() {
     var _a, _b, _c;
     try {
       this.endpoint.loadSession();
       if (!this.endpoint.session) {
-        console.log('[ENVELOPES] Must be authenticated');
+        console.log('[TEMPLATES] Must be authenticated');
         return;
       }
       let queryParams = {
-        page: this.page,
+        page: this.selectedPage,
         ascending: this.sort === 'name' || this.sort === 'star_counter',
         sort_by: this.sort,
       };
@@ -94,20 +629,20 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         queryParams.is_public = this.sharing === 'public';
       }
       if (this.starred !== 'all') {
-        // TODO: Update the js-sdk type
-        queryParams['is_starred'] = this.starred === 'starred';
+        queryParams.is_starred = this.starred === 'starred';
       }
       if (this.name.trim() !== '') {
         queryParams.name = this.name.trim();
       }
+      console.log('qp', queryParams, this.name);
       const response = await getSummary(this.endpoint, queryParams);
-      console.log('[TEMPLATES] Got envelopes', response);
+      console.log('[TEMPLATES] Got templates', response);
       this.templates = response.result;
       this.count = response.total;
       this.loading = false;
     }
     catch (e) {
-      console.log('[ENVELOPES] Error with preview session', e);
+      console.log('[TEMPLATES] Error with preview session', e);
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
@@ -131,15 +666,35 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     // return hasPermission && canPreview;
     return hasPermission;
   }
+  deleteTemplate(template) {
+    this.confirmDelete = null;
+    deleteTemplate(this.endpoint, template.id)
+      .then(() => {
+      var _a;
+      console.log('[TEMPLATES] Deleted template', template);
+      (_a = this.templateDeleted) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: template });
+      return this.queryTemplates();
+    })
+      .catch(e => {
+      var _a, _b, _c;
+      console.log('[TEMPLATES] Error deleting template', template);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    });
+  }
   render() {
-    if (this.loading) {
-      return (h(Host, { style: { minHeight: '300px' } }, h("verdocs-loader", null)));
-    }
-    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => {
+    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-name", value: this.name, autocomplete: "off", placeholder: "Filter by Name...", onFocusout: (e) => {
         this.name = e.target.value;
-      } })), h("div", { class: "flex flex-row gap-3 items-center" }, h("div", { class: "filter" }, h("verdocs-text-input", { id: "verdocs-filter-containing", value: this.containing, autocomplete: "off", placeholder: "Fields Containing...", onInput: (e) => {
-        this.containing = e.target.value;
-      } }))), h("div", { class: "flex flex-1" })), this.templates.slice(0, this.items || 100).map(summary => {
+        return this.queryTemplates();
+      } })), h("verdocs-quick-filter", { label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
+        this.sharing = e.detail.value;
+        return this.queryTemplates();
+      } }), h("verdocs-quick-filter", { label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
+        this.starred = e.detail.value;
+        return this.queryTemplates();
+      } }), h("verdocs-quick-filter", { label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
+        this.sort = e.detail.value;
+        return this.queryTemplates();
+      } }), this.loading && h("verdocs-spinner", { mode: "dark", size: 24 }), h("div", { style: { display: 'flex', flex: '1' } })), this.templates.map(summary => {
       const MENU_OPTIONS = [
         //  [disabled]="!canSendEnvelope"
         { label: 'Preview / Send', id: 'createdoc', disabled: !this.canPreview(summary) },
@@ -155,119 +710,75 @@ const VerdocsTemplatesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         { label: 'Edit', id: 'edit', disabled: !this.canEdit(summary) },
         { label: 'Delete', id: 'delete', disabled: !this.canDelete(summary) },
       ];
-      return (h("div", { class: "template", onClick: () => { } }, h("span", { innerHTML: TemplateIcon }), h("div", { class: "name" }, summary.name), h("div", { class: "spacer" }), h("div", { style: { marginTop: '12px' } }, h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, summary) })))
-      //
-      // <div class="envelope" key={envelope.id} onClick={() => this.viewEnvelope?.emit({endpoint: this.endpoint, envelope})}>
-      //   <div class="inner">
-      //     <verdocs-checkbox
-      //       checked={this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1}
-      //       onClick={e => e.stopPropagation()} // So this doesn't trigger navigation
-      //       onInput={(e: any) => {
-      //         if (e.target.checked) {
-      //           this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];
-      //         } else {
-      //           this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
-      //         }
-      //       }}
-      //     />
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <span innerHTML={DocumentIcon} />
-      //
-      //     <div class="envelope-name">
-      //       {envelope.name}:&nbsp; <div class="envelope-recipients">{envelope.recipients.map(r => r.full_name).join(', ')}</div>
-      //     </div>
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <verdocs-status-indicator envelope={envelope} style={{width: '125px'}} />
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <div class="last-modified">{new Date(envelope.updated_at).toLocaleString()}</div>
-      //
-      //     <div class="vert-spacer" />
-      //
-      //     <verdocs-dropdown
-      //       options={[
-      //         {label: 'View Envelope', id: 'view'},
-      //         {label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish},
-      //         {label: 'Download', id: 'download'},
-      //         {label: 'Cancel', id: 'cancel', disabled: !userCanCancel},
-      //       ]}
-      //       onOptionSelected={e => {
-      //         switch (e.detail.id) {
-      //           case 'view':
-      //             this.viewEnvelope?.emit({endpoint: this.endpoint, envelope});
-      //             break;
-      //           case 'finish':
-      //             this.finishLater?.emit({endpoint: this.endpoint, envelope});
-      //             break;
-      //           case 'download':
-      //             this.downloadEnvelope(envelope);
-      //             break;
-      //           case 'cancel':
-      //             if (window.confirm('Are you sure you want to cancel this envelope?')) {
-      //               cancelEnvelope(this.endpoint, envelope.id)
-      //                 .then(r => {
-      //                   console.log('Cancel result', r);
-      //                   VerdocsToast('Envelope canceled');
-      //                 })
-      //                 .catch(e => {
-      //                   console.log('cxl error', e);
-      //                   VerdocsToast('Unable to cancel envelope: ' + e.messabge, {style: 'error'});
-      //                 });
-      //             }
-      //             break;
-      //         }
-      //       }}
-      //     />
-      //   </div>
-      // </div>
-      );
-    }), !this.templates.length ? (h("div", { class: "mt-4 border-2 px-20 py-20 text-center" }, "No matching templates found. Please adjust your filters and try again.")) : (h("div", null)
-    // <Pagination page={this.page} total={this.count} onSelectPage={setPage} />
-    )));
+      return (h("div", { class: "template", onClick: () => {
+          var _a;
+          (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: summary });
+        } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: summary, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("span", { innerHTML: TemplateIcon }), h("div", { class: "name" }, summary.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon }), summary.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, h("span", { innerHTML: CalendarIcon }), h("span", { style: { marginRight: '5px' } }, "Last Used:"), summary.last_used_at ? formatDistance(new Date(summary.last_used_at), new Date()) : 'Never'), h("div", { class: "spacer ownership-spacer" }), summary.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !summary.is_public && !summary.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !summary.is_public && summary.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, summary) }))));
+    }), !this.templates.length ? (h("div", { class: "empty-text" }, "No matching templates found. Please adjust your filters and try again.")) : (h("div", { style: { marginTop: '10px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: 10, itemCount: this.count, onSelectPage: e => {
+        this.selectedPage = e.detail.selectedPage;
+        return this.queryTemplates();
+      } }))), this.confirmDelete && (h("verdocs-ok-dialog", { heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
   }
   static get style() { return verdocsTemplatesListCss; }
 }, [0, "verdocs-templates-list", {
     "endpoint": [16],
-    "items": [2],
-    "view": [513],
-    "page": [514],
+    "sharing": [1537],
+    "starred": [1537],
+    "sort": [1537],
+    "name": [1537],
+    "selectedPage": [1538, "selected-page"],
     "count": [32],
     "loading": [32],
-    "name": [32],
-    "containing": [32],
-    "sharing": [32],
-    "starred": [32],
-    "sort": [32],
-    "selectedTemplates": [32],
+    "confirmDelete": [32],
     "templates": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-templates-list", "verdocs-dropdown", "verdocs-help-icon", "verdocs-loader", "verdocs-text-input"];
+  const components = ["verdocs-templates-list", "verdocs-button", "verdocs-dropdown", "verdocs-help-icon", "verdocs-ok-dialog", "verdocs-pagination", "verdocs-quick-filter", "verdocs-spinner", "verdocs-template-star", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-templates-list":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsTemplatesList$1);
       }
       break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
     case "verdocs-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$9();
       }
       break;
     case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-quick-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "verdocs-loader":
+    case "verdocs-template-star":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }