@leavittsoftware/web 1.0.0 → 1.2.0

package/titanium/chip-multi-select/chip-multi-select.js

@@ -47,47 +47,47 @@ let TitaniumChipMultiSelect = class TitaniumChipMultiSelect extends LitElement {
         this.validator.reset();
     }
     static { this.styles = [
-        css `
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      titanium-input-validator {
-        display: block;
-        width: 100%;
-      }
-
-      slot-container {
-        display: flex;
-        flex-wrap: wrap;
-        grid-gap: 12px;
-        align-items: center;
-      }
-
-      ::slotted(md-outlined-button) {
-        line-height: 0;
-      }
-
-      span {
-        font-size: 13px;
-      }
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      titanium-input-validator {
+        display: block;
+        width: 100%;
+      }
+
+      slot-container {
+        display: flex;
+        flex-wrap: wrap;
+        grid-gap: 12px;
+        align-items: center;
+      }
+
+      ::slotted(md-outlined-button) {
+        line-height: 0;
+      }
+
+      span {
+        font-size: 13px;
+      }
     `,
     ]; }
     render() {
-        return html `
-      <titanium-input-validator
-        ?disabled=${this.disabled}
-        .evaluator=${() => !this.required || !!this.hasItems}
-        ?required=${this.required}
-        .label=${this.label}
-        .supportingText=${this.supportingText}
-      >
-        <slot-container>
-          <slot></slot>
-          ${!this.hasItems ? html ` <span>${this.noItemsText}</span>` : ''}
-        </slot-container>
-      </titanium-input-validator>
+        return html `
+      <titanium-input-validator
+        ?disabled=${this.disabled}
+        .evaluator=${() => !this.required || !!this.hasItems}
+        ?required=${this.required}
+        .label=${this.label}
+        .supportingText=${this.supportingText}
+      >
+        <slot-container>
+          <slot></slot>
+          ${!this.hasItems ? html ` <span>${this.noItemsText}</span>` : ''}
+        </slot-container>
+      </titanium-input-validator>
     `;
     }
 };

package/titanium/data-table/data-table-header.js

@@ -64,103 +64,103 @@ let TitaniumDataTableHeader = class TitaniumDataTableHeader extends LitElement {
             }
         });
     }
-    static { this.styles = css `
-    :host {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-
-      cursor: pointer;
-
-      font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-      -webkit-font-smoothing: antialiased;
-      font-size: 14px;
-      padding: 8px;
-      line-height: 28px;
-      font-weight: 500;
-    }
-
-    :host(:not([width])) {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    }
-
-    :host(:not([width])[large]) {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    :host([no-sort]) {
-      cursor: inherit;
-    }
-
-    :host([center]) {
-      justify-content: center;
-    }
-
-    :host([center])::before {
-      width: 18px;
-    }
-
-    :host([right]) {
-      flex-direction: row-reverse;
-      text-align: right;
-    }
-
-    md-icon {
-      display: block;
-      height: 18px;
-      width: 18px;
-      font-size: 18px;
-      margin-left: 4px;
-      flex-shrink: 0;
-      transform-origin: center;
-      transition: transform 150ms ease;
-    }
-
-    :host([no-sort]) md-icon {
-      display: none;
-    }
-
-    :host([right]) md-icon {
-      margin-right: 4px;
-      margin-left: 0;
-    }
-
-    md-icon {
-      visibility: hidden;
-    }
-
-    :host([active][sort-direction='asc']) md-icon {
-      transform: rotate(-180deg);
-    }
-
-    :host([active][sort-direction='asc']) md-icon,
-    :host([active][sort-direction='desc']) md-icon {
-      visibility: visible;
-    }
-
-    :host([narrow][desktop]) {
-      display: none;
-    }
+    static { this.styles = css `
+    :host {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      cursor: pointer;
+
+      font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
+      -webkit-font-smoothing: antialiased;
+      font-size: 14px;
+      padding: 8px;
+      line-height: 28px;
+      font-weight: 500;
+    }
+
+    :host(:not([width])) {
+      -ms-flex: 3;
+      -webkit-flex: 3;
+      flex: 3;
+    }
+
+    :host(:not([width])[large]) {
+      -ms-flex: 5;
+      -webkit-flex: 5;
+      flex: 5;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    :host([no-sort]) {
+      cursor: inherit;
+    }
+
+    :host([center]) {
+      justify-content: center;
+    }
+
+    :host([center])::before {
+      width: 18px;
+    }
+
+    :host([right]) {
+      flex-direction: row-reverse;
+      text-align: right;
+    }
+
+    md-icon {
+      display: block;
+      height: 18px;
+      width: 18px;
+      font-size: 18px;
+      margin-left: 4px;
+      flex-shrink: 0;
+      transform-origin: center;
+      transition: transform 150ms ease;
+    }
+
+    :host([no-sort]) md-icon {
+      display: none;
+    }
+
+    :host([right]) md-icon {
+      margin-right: 4px;
+      margin-left: 0;
+    }
+
+    md-icon {
+      visibility: hidden;
+    }
+
+    :host([active][sort-direction='asc']) md-icon {
+      transform: rotate(-180deg);
+    }
+
+    :host([active][sort-direction='asc']) md-icon,
+    :host([active][sort-direction='desc']) md-icon {
+      visibility: visible;
+    }
+
+    :host([narrow][desktop]) {
+      display: none;
+    }
   `; }
     render() {
-        return html `
-      ${this.title}
-      <md-icon>arrow_downward</md-icon>
+        return html `
+      ${this.title}
+      <md-icon>arrow_downward</md-icon>
     `;
     }
 };

package/titanium/data-table/data-table-item.js

@@ -283,173 +283,173 @@ let TitaniumDataTableItem = class TitaniumDataTableItem extends LitElement {
         document.addEventListener(moveEvent, moveItemHandler);
         moveItemHandler(event);
     }
-    static { this.styles = css `
-    :host {
-      display: block;
-
-      -webkit-touch-callout: none;
-      user-select: none;
-      text-decoration: none;
-
-      font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-      -webkit-font-smoothing: antialiased;
-
-      transition: none;
-      margin-top: -1px;
-      box-sizing: border-box;
-      border-bottom: 1px var(--md-sys-color-outline-variant) solid;
-      border-top: 1px var(--md-sys-color-outline-variant) solid;
-      position: relative;
-    }
-
-    :host(:not([disable-select])[selected]) {
-      background-color: var(--md-sys-color-secondary-container);
-    }
-
-    :host(:not([disable-select]):not([selected]):hover) {
-      background-color: rgb(from var(--md-sys-color-on-surface, #1d1b20) r g b / 0.08);
-    }
-
-    :host([enable-dragging]) {
-      cursor: grab;
-    }
-
-    md-icon[drag] {
-      display: none;
-      color: var(--md-sys-color-outline, #dadce0);
-      margin-right: -24px;
-    }
-
-    :host([enable-dragging]:hover) md-icon[drag] {
-      display: block;
-    }
-
-    :host([dragged]) {
-      box-shadow:
-        0 3px 6px rgba(0, 0, 0, 0.16),
-        0 3px 6px rgba(0, 0, 0, 0.23);
-      transition: none;
-      overflow: hidden;
-      z-index: 1 !important;
-    }
-
-    /* Only have transition under dragging, because we don't want nudged
-     * items to transition into place once dragging is complete */
-    :host([dragging]:not([dragged])) {
-      transition: transform 0.2s ease-out;
-    }
-
-    /* :host {
-      transition: transform 0.2s ease-out;
-    } */
-
-    :host main {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      min-height: 48px;
-    }
-
-    /* Do not apply :hover style on touch devices */
-    @media (hover: hover) and (pointer: fine) {
-      :host([enable-dragging]) div[item-footer] ::slotted(*) {
-        pointer-events: none;
-      }
-    }
-
-    ::slotted(row-item) {
-      display: block;
-      font-size: 14px;
-      line-height: 18px;
-      font-weight: 400;
-      padding: 4px 8px;
-      margin: 0;
-    }
-
-    ::slotted(row-item:last-of-type) {
-      padding-right: 24px;
-    }
-
-    ::slotted(row-item:not([width])) {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    }
-
-    ::slotted(row-item:not([width])[large]) {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    }
-
-    ::slotted(row-item[center]) {
-      text-align: center;
-    }
-
-    ::slotted(row-item[image]) {
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-    }
-
-    ::slotted(row-item[right]) {
-      text-align: right;
-    }
-
-    md-checkbox {
-      flex-shrink: 0;
-      align-self: center;
-      margin: 0 14px 0 20px;
-    }
-
-    :host([disable-select]) ::slotted(row-item:first-of-type) {
-      padding-left: 24px;
-    }
-
-    :host([narrow]) ::slotted(row-item[desktop]) {
-      display: none;
-    }
-
-    @media (max-width: 768px) {
-      :host([enable-dragging]) md-icon[drag] {
-        display: block;
-      }
-    }
-
-    [hidden] {
-      display: none;
-    }
+    static { this.styles = css `
+    :host {
+      display: block;
+
+      -webkit-touch-callout: none;
+      user-select: none;
+      text-decoration: none;
+
+      font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
+      -webkit-font-smoothing: antialiased;
+
+      transition: none;
+      margin-top: -1px;
+      box-sizing: border-box;
+      border-bottom: 1px var(--md-sys-color-outline-variant) solid;
+      border-top: 1px var(--md-sys-color-outline-variant) solid;
+      position: relative;
+    }
+
+    :host(:not([disable-select])[selected]) {
+      background-color: var(--md-sys-color-secondary-container);
+    }
+
+    :host(:not([disable-select]):not([selected]):hover) {
+      background-color: rgb(from var(--md-sys-color-on-surface, #1d1b20) r g b / 0.08);
+    }
+
+    :host([enable-dragging]) {
+      cursor: grab;
+    }
+
+    md-icon[drag] {
+      display: none;
+      color: var(--md-sys-color-outline, #dadce0);
+      margin-right: -24px;
+    }
+
+    :host([enable-dragging]:hover) md-icon[drag] {
+      display: block;
+    }
+
+    :host([dragged]) {
+      box-shadow:
+        0 3px 6px rgba(0, 0, 0, 0.16),
+        0 3px 6px rgba(0, 0, 0, 0.23);
+      transition: none;
+      overflow: hidden;
+      z-index: 1 !important;
+    }
+
+    /* Only have transition under dragging, because we don't want nudged
+     * items to transition into place once dragging is complete */
+    :host([dragging]:not([dragged])) {
+      transition: transform 0.2s ease-out;
+    }
+
+    /* :host {
+      transition: transform 0.2s ease-out;
+    } */
+
+    :host main {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      min-height: 48px;
+    }
+
+    /* Do not apply :hover style on touch devices */
+    @media (hover: hover) and (pointer: fine) {
+      :host([enable-dragging]) div[item-footer] ::slotted(*) {
+        pointer-events: none;
+      }
+    }
+
+    ::slotted(row-item) {
+      display: block;
+      font-size: 14px;
+      line-height: 18px;
+      font-weight: 400;
+      padding: 4px 8px;
+      margin: 0;
+    }
+
+    ::slotted(row-item:last-of-type) {
+      padding-right: 24px;
+    }
+
+    ::slotted(row-item:not([width])) {
+      -ms-flex: 3;
+      -webkit-flex: 3;
+      flex: 3;
+    }
+
+    ::slotted(row-item:not([width])[large]) {
+      -ms-flex: 5;
+      -webkit-flex: 5;
+      flex: 5;
+    }
+
+    ::slotted(row-item[center]) {
+      text-align: center;
+    }
+
+    ::slotted(row-item[image]) {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    ::slotted(row-item[right]) {
+      text-align: right;
+    }
+
+    md-checkbox {
+      flex-shrink: 0;
+      align-self: center;
+      margin: 0 14px 0 20px;
+    }
+
+    :host([disable-select]) ::slotted(row-item:first-of-type) {
+      padding-left: 24px;
+    }
+
+    :host([narrow]) ::slotted(row-item[desktop]) {
+      display: none;
+    }
+
+    @media (max-width: 768px) {
+      :host([enable-dragging]) md-icon[drag] {
+        display: block;
+      }
+    }
+
+    [hidden] {
+      display: none;
+    }
   `; }
     render() {
-        return html `
-      <style>
-        :host([nudge-down]:not([dragged])) {
-          transform: translate3d(0, ${this.nudgeHeight}px, 0);
-        }
-
-        :host([nudge-up]:not([dragged])) {
-          transform: translate3d(0, -${this.nudgeHeight}px, 0);
-        }
-      </style>
-      <main part="main">
+        return html `
+      <style>
+        :host([nudge-down]:not([dragged])) {
+          transform: translate3d(0, ${this.nudgeHeight}px, 0);
+        }
+
+        :host([nudge-up]:not([dragged])) {
+          transform: translate3d(0, -${this.nudgeHeight}px, 0);
+        }
+      </style>
+      <main part="main">
         ${this.disableSelect
             ? ''
-            : html `
-              <md-icon drag>drag_indicator</md-icon>
-              <md-checkbox
-                .checked=${this.selected}
-                @mousedown=${(e) => e.stopPropagation()}
-                @touchstart=${(e) => e.stopPropagation()}
-                @dblclick=${(e) => e.stopPropagation()}
-                @change=${(e) => this.#setSelected(e.target.checked)}
-              ></md-checkbox>
-            `}
-
-        <slot></slot>
-      </main>
-      <div item-footer part="item-footer-container">
-        <slot name="item-footer"></slot>
-      </div>
+            : html `
+              <md-icon drag>drag_indicator</md-icon>
+              <md-checkbox
+                .checked=${this.selected}
+                @mousedown=${(e) => e.stopPropagation()}
+                @touchstart=${(e) => e.stopPropagation()}
+                @dblclick=${(e) => e.stopPropagation()}
+                @change=${(e) => this.#setSelected(e.target.checked)}
+              ></md-checkbox>
+            `}
+
+        <slot></slot>
+      </main>
+      <div item-footer part="item-footer-container">
+        <slot name="item-footer"></slot>
+      </div>
     `;
     }
 };