@unicef-polymer/etools-form-builder 3.0.0-rc.9 → 3.1.0

package/dist/lib/styles/card-styles.js

@@ -1,154 +1,150 @@
 import { css } from 'lit';
 // language=CSS
-export const CardStyles = css `
-  .card-title-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 60px;
-    padding: 0 10px 0 25px;
-  }
-
-  .card-title-box.with-bottom-line {
-    border-bottom: 1px solid #9c9c9c;
-  }
-
-  .card-title-box .card-title {
-    flex: auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 18px;
-  }
-
-  .card-title-box .card-title.counter {
-    font-size: 20px;
-    font-weight: 500;
-  }
-
-  .card-title-box .buttons-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-
-  .panel-button {
-    opacity: 0.45;
-    transition: 0.15s;
-  }
-
-  .panel-button:hover {
-    opacity: 0.57;
-  }
-
-  .card-content {
-    padding: 0 10px;
-  }
-
-  .editable-row {
-    position: relative;
-  }
-
-  .editable-row .hover-block {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    line-height: 48px;
-    background-color: #eeeeee;
-    z-index: 100;
-  }
-
-  .editable-row .hover-block paper-icon-button {
-    color: rgba(0, 0, 0, 0.54);
-    padding-left: 5px;
-  }
-
-  .editable-row:hover > .hover-block {
-    display: block;
-    cursor: pointer;
-  }
-
-  .col-data {
-    height: auto;
-    min-height: 47px;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    overflow: hidden;
-    margin-right: 5px;
-  }
-
-  .col-data:last-child {
-    margin-right: 0;
-  }
-
-  .col-data.edited-col {
-    cursor: pointer;
-  }
-
-  .col-data .two-line-truncate {
-    height: 38px;
-    overflow: hidden;
-  }
-
-  .col-data.truncated,
-  .col-data .truncate {
-    flex-wrap: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .col-data .flexible-text {
-    display: block;
-    margin: 4px 0;
-  }
-
-  .row-details-content {
-    font-size: 12px;
-    padding-right: 100px;
-  }
-
-  .row-details-content .rdc-title {
-    display: inline-block;
-    color: var(--list-secondary-text-color, #757575);
-    font-weight: bold;
-    margin-bottom: 5px;
-  }
-
-  etools-data-table-row {
-    --list-divider-color: #e0e0e0;
-    --list-icon-color: rgba(0, 0, 0, 0.54);
-  }
-
-  etools-data-table-header {
-    --list-divider-color: 1px solid rgba(244, 243, 242, 0.26);
-    --list-bg-color: #f2eee8;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
-  }
-
-  .card-container {
-    padding: 0;
-  }
-
-  .remove-title {
-    padding: 16px 25px 15px;
-    font-size: 17px;
-    color: rgba(0, 0, 0, 0.87);
-    font-weight: 500;
-    line-height: 28px;
-  }
-
-  paper-textarea {
-    overflow: hidden;
-  }
-
-  a.link-cell {
-    font-weight: 500;
-    text-decoration: none;
-    color: var(--primary-color);
-  }
+export const CardStyles = css `
+  .card-title-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 60px;
+    padding: 0 10px 0 25px;
+  }
+
+  .card-title-box.with-bottom-line {
+    border-bottom: 1px solid #9c9c9c;
+  }
+
+  .card-title-box .card-title {
+    flex: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--etools-font-size-18, 18px);
+  }
+
+  .card-title-box .card-title.counter {
+    font-size: var(--etools-font-size-20, 20px);
+    font-weight: 500;
+  }
+
+  .card-title-box .buttons-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .panel-button {
+    opacity: 0.45;
+    transition: 0.15s;
+  }
+
+  .panel-button:hover {
+    opacity: 0.57;
+  }
+
+  .card-content {
+    padding: 0 10px;
+  }
+
+  .editable-row {
+    position: relative;
+  }
+
+  .editable-row .hover-block {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 48px;
+    background-color: #eeeeee;
+    z-index: 100;
+  }
+
+  .editable-row .hover-block etools-icon-button {
+    color: rgba(0, 0, 0, 0.54);
+    padding-left: 5px;
+  }
+
+  .editable-row:hover > .hover-block {
+    display: block;
+    cursor: pointer;
+  }
+
+  .col-data {
+    height: auto;
+    min-height: 47px;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+    margin-right: 5px;
+  }
+
+  .col-data:last-child {
+    margin-right: 0;
+  }
+
+  .col-data.edited-col {
+    cursor: pointer;
+  }
+
+  .col-data .two-line-truncate {
+    height: 38px;
+    overflow: hidden;
+  }
+
+  .col-data.truncated,
+  .col-data .truncate {
+    flex-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .col-data .flexible-text {
+    display: block;
+    margin: 4px 0;
+  }
+
+  .row-details-content {
+    font-size: var(--etools-font-size-12, 12px);
+    padding-right: 100px;
+  }
+
+  .row-details-content .rdc-title {
+    display: inline-block;
+    color: var(--list-secondary-text-color, #757575);
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  etools-data-table-row {
+    --list-divider-color: #e0e0e0;
+    --list-icon-color: rgba(0, 0, 0, 0.54);
+  }
+
+  etools-data-table-header {
+    --list-divider-color: 1px solid rgba(244, 243, 242, 0.26);
+    --list-bg-color: #f2eee8;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
+  }
+
+  .card-container {
+    padding: 0;
+  }
+
+  .remove-title {
+    padding: 16px 25px 15px;
+    font-size: var(--etools-font-size-16, 16px);
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    line-height: 28px;
+  }
+
+  a.link-cell {
+    font-weight: 500;
+    text-decoration: none;
+    color: var(--primary-color);
+  }
 `;

package/dist/lib/styles/dialog.styles.js

@@ -1,86 +1,86 @@
 import { html } from 'lit';
 // language=HTML
-export const DialogStyles = html `
-  <style>
-    #form-attachments-dialog etools-dialog etools-loading {
-      font-size: 14px;
-    }
-
-    #form-attachments-dialog etools-dialog[no-padding] {
-      --etools-dialog-scrollable: {
-        padding-top: 0 !important;
-      }
-    }
-
-    #form-attachments-dialog etools-dialog {
-      --etools-dialog-primary-color: var(--primary-color);
-      --sl-color-primary-500: var(--primary-color);
-      --etools-dialog-content: {
-        min-height: 80px;
-        padding-bottom: 8px !important;
-        padding-top: 0px !important;
-      }
-    }
-
-    #form-attachments-dialog etools-dialog::part(ed-scrollable) {
-      margin-top: 0;
-      padding-top: 12px !important;
-    }
-
-    #form-attachments-dialog etools-dialog::part(ecp-header-title) {
-      padding: 8px 45px 8px 24px;
-    }
-
-    #form-attachments-dialog etools-dialog::part(ed-button-styles) {
-      margin-top: 0;
-    }
-
-    #form-attachments-dialog etools-dialog > etools-loading {
-      margin-bottom: -56px;
-    }
-
-    #form-attachments-dialog etools-content-panel {
-      position: relative;
-    }
-
-    #form-attachments-dialog etools-content-panel::part(ecp-header-title) {
-      font-weight: 500;
-      line-height: 48px;
-      padding: 0 30px;
-    }
-
-    #form-attachments-dialog etools-content-panel::part(ecp-toggle-btn) {
-      position: absolute;
-      top: 3px;
-      left: 13px;
-      width: 45px;
-      height: 45px;
-    }
-
-    #form-attachments-dialog etools-dialog .container {
-      padding: 14px;
-    }
-
-    #form-attachments-dialog etools-dialog .content {
-      padding: 0 14px;
-    }
-
-    #form-attachments-dialog etools-dialog {
-      --etools-dialog-confirmation-content: {
-        min-height: 0;
-        margin-top: 0;
-        margin-right: 0;
-      }
-
-      --etools-dialog-content: {
-        width: 100%;
-        max-width: 100% !important;
-
-        overflow-x: hidden;
-        overflow-y: auto;
-        display: block;
-        margin-top: 0;
-      }
-    }
-  </style>
+export const DialogStyles = html `
+  <style>
+    #form-attachments-dialog etools-dialog etools-loading {
+      font-size: var(--etools-font-size-14, 14px);
+    }
+
+    #form-attachments-dialog etools-dialog[no-padding] {
+      --etools-dialog-scrollable: {
+        padding-top: 0 !important;
+      }
+    }
+
+    #form-attachments-dialog etools-dialog {
+      --etools-dialog-primary-color: var(--primary-color);
+      --sl-color-primary-500: var(--primary-color);
+      --etools-dialog-content: {
+        min-height: 80px;
+        padding-bottom: 8px !important;
+        padding-top: 0px !important;
+      }
+    }
+
+    #form-attachments-dialog etools-dialog::part(ed-scrollable) {
+      margin-top: 0;
+      padding-top: 12px !important;
+    }
+
+    #form-attachments-dialog etools-dialog::part(ecp-header-title) {
+      padding: 8px 45px 8px 24px;
+    }
+
+    #form-attachments-dialog etools-dialog::part(ed-button-styles) {
+      margin-top: 0;
+    }
+
+    #form-attachments-dialog etools-dialog > etools-loading {
+      margin-bottom: -56px;
+    }
+
+    #form-attachments-dialog etools-content-panel {
+      position: relative;
+    }
+
+    #form-attachments-dialog etools-content-panel::part(ecp-header-title) {
+      font-weight: 500;
+      line-height: 48px;
+      padding: 0 30px;
+    }
+
+    #form-attachments-dialog etools-content-panel::part(ecp-toggle-btn) {
+      position: absolute;
+      top: 3px;
+      left: 13px;
+      width: 45px;
+      height: 45px;
+    }
+
+    #form-attachments-dialog etools-dialog .container {
+      padding: 14px;
+    }
+
+    #form-attachments-dialog etools-dialog .content {
+      padding: 0 14px;
+    }
+
+    #form-attachments-dialog etools-dialog {
+      --etools-dialog-confirmation-content: {
+        min-height: 0;
+        margin-top: 0;
+        margin-right: 0;
+      }
+
+      --etools-dialog-content: {
+        width: 100%;
+        max-width: 100% !important;
+
+        overflow-x: hidden;
+        overflow-y: auto;
+        display: block;
+        margin-top: 0;
+      }
+    }
+  </style>
 `;

package/dist/lib/styles/elevation-styles.d.ts

@@ -1,9 +1,9 @@
 import { CSSResult } from 'lit';
 /**
- * LitElement css version for used paper-material-styles
+ * LitElement css version for used material-styles
  * TODO:
  *  - use only in new litElements
  *  - add more elevations if needed
- *  - replace all paper-material-styles with this css module
+ *  - replace all material-styles with this css module
  */
 export declare const elevationStyles: CSSResult;

package/dist/lib/styles/elevation-styles.js

@@ -1,43 +1,43 @@
 import { css } from 'lit';
 /**
- * LitElement css version for used paper-material-styles
+ * LitElement css version for used material-styles
  * TODO:
  *  - use only in new litElements
  *  - add more elevations if needed
- *  - replace all paper-material-styles with this css module
+ *  - replace all material-styles with this css module
  */
 // language=CSS
-export const elevationStyles = css `
-  .elevation,
-  :host(.elevation) {
-    display: block;
-    position: relative;
-  }
-
-  .elevation[elevation='1'],
-  :host(.elevation[elevation='1']) {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-  }
-
-  .elevation[elevation='2'],
-  :host(.elevation[elevation='2']) {
-    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
-  }
-
-  .elevation[elevation='3'],
-  :host(.elevation[elevation='3']) {
-    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
-  }
-
-  .elevation[elevation='4'],
-  :host(.elevation[elevation='4']) {
-    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
-      0 5px 5px -3px rgba(0, 0, 0, 0.4);
-  }
-
-  .elevation[elevation='5'],
-  :host(.elevation[elevation='5']) {
-    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
-      0 8px 10px -5px rgba(0, 0, 0, 0.4);
-  }
+export const elevationStyles = css `
+  .elevation,
+  :host(.elevation) {
+    display: block;
+    position: relative;
+  }
+
+  .elevation[elevation='1'],
+  :host(.elevation[elevation='1']) {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  }
+
+  .elevation[elevation='2'],
+  :host(.elevation[elevation='2']) {
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+  }
+
+  .elevation[elevation='3'],
+  :host(.elevation[elevation='3']) {
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
+  }
+
+  .elevation[elevation='4'],
+  :host(.elevation[elevation='4']) {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
+      0 5px 5px -3px rgba(0, 0, 0, 0.4);
+  }
+
+  .elevation[elevation='5'],
+  :host(.elevation[elevation='5']) {
+    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+      0 8px 10px -5px rgba(0, 0, 0, 0.4);
+  }
 `;