@bpmn-io/form-js-viewer 1.5.0-alpha.0 → 1.6.0

package/dist/assets/form-js-base.css

@@ -13,6 +13,7 @@
   --color-grey-225-10-93: hsl(225, 10%, 93%);
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
+  --color-grey-0-0-88: hsl(0, 0%, 88%);
 
   --color-blue-219-100-53: hsl(219, 99%, 53%);
   --color-blue-219-100-53-05: hsla(219, 99%, 53%, 0.5);
@@ -52,10 +53,9 @@
   --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
   --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
-  --color-layer: var(
-    --cds-layer, 
-    var(--cds-layer-01, var(--color-white)) 
-  );
+  --color-layer: var(--cds-layer,
+      var(--cds-layer-01, var(--color-white)));
+  --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
 
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
@@ -71,6 +71,7 @@
     var(--cds-border-strong-01, var(--color-grey-225-10-55))
   );
   --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
+  --color-borders-table: var(--color-borders-group);
   --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
   --color-borders-adornment: var(
     --cds-border-subtle, 
@@ -109,6 +110,7 @@
   --border-definition: 1px solid var(--color-borders);
   --border-definition-adornment: 1px solid var(--color-borders-adornment);
   --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
+  --button-warning-outline-definition: 2px solid var(--color-warning);
   --border-definition-disabled: 1px solid var(--color-borders-disabled);
   --border-definition-readonly: 1px solid var(--color-borders-readonly);
 
@@ -319,47 +321,47 @@
   color: var(--color-text-lighter);
 }
 
-.fjs-container .fjs-form-field-group {
+.fjs-container .fjs-form-field-grouplike {
   padding: 10px 6px 0 6px;
   margin: 0 10px;
 }
 
-.fjs-container .fjs-form-field-group .cds--grid {
+.fjs-container .fjs-form-field-grouplike .cds--grid {
   padding: 4px 16px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
-.fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
+.fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-left: -6px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
-.fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
+.fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-right: -6px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-left: 11px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-right: 11px;
 }
 
-.fjs-container .fjs-form-field-group.fjs-outlined {
+.fjs-container .fjs-form-field-grouplike.fjs-outlined {
   outline: solid var(--color-borders-group) 2px;
 }
 
-.fjs-container .fjs-form-field-group label {
+.fjs-container .fjs-form-field-grouplike label {
   font-size: var(--font-size-label);
 }
 
-.fjs-container .fjs-form-field-group .fjs-form-field-group .cds--grid {
+.fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .cds--grid {
   padding-left: 2rem;
   padding-right: 2rem;
 }
 
-.fjs-container .fjs-form-field-group > label {
+.fjs-container .fjs-form-field-grouplike > label {
   font-size: var(--font-size-group);
   line-height: var(--line-height-input);
   margin-left: 7px;
@@ -799,6 +801,27 @@
   cursor: default;
 }
 
+.fjs-container .fjs-form-field-text table {
+  border-collapse: collapse;
+  width: auto;
+}
+
+.fjs-container .fjs-form-field-text table,
+.fjs-container .fjs-form-field-text th,
+.fjs-container .fjs-form-field-text td {
+  border: 1px solid var(--color-borders-table); 
+  padding: 8px;
+}
+
+.fjs-container .fjs-form-field-text th {
+  font-weight: bold; 
+}
+
+.fjs-container .fjs-form-field-text td {
+  white-space: nowrap;
+}
+
+
 .fjs-container .fjs-taglist-anchor,
 .fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {
@@ -965,6 +988,211 @@
   margin: 4px 0;
 }
 
+.fjs-container .fjs-iframe {
+  margin: 4px 0;
+  width: 100%;
+  border: 1px solid var(--color-borders-readonly);
+}
+
+.fjs-container .fjs-iframe-placeholder {
+  margin: 4px 0;
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  background: var(--color-background-readonly);
+  color: var(--color-text-light);
+  border: 1px solid var(--color-borders-readonly);
+}
+
+.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+.fjs-container .fjs-form-field-table {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+
+.fjs-container .fjs-table-middle-container {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  border: 1px solid var(--color-borders-group);
+  border-radius: 3px;
+}
+
+.fjs-container .fjs-table-middle-container.fjs-table-empty {
+  border: none;
+  color: var(--color-text-disabled);
+  padding-left: 16px;
+}
+
+.fjs-container .fjs-table-inner-container {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+
+.fjs-container .fjs-table {
+  overflow-y: auto;
+  border-collapse: collapse;
+}
+
+.fjs-container .fjs-table-head {
+  background-color: var(--color-layer-accent);
+}
+
+.fjs-container .fjs-table-th {
+  min-width: 120px;
+  cursor: pointer;
+}
+
+.fjs-container .fjs-table-th-label {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.fjs-container .fjs-table-th:focus {
+  outline: var(--outline-definition);
+  outline-offset: -1px;
+}
+
+.fjs-container .fjs-table-th,
+.fjs-container .fjs-table-td {
+  text-align: left;
+  height: 32px;
+  padding: 0 16px;
+}
+
+.fjs-container .fjs-table-body .fjs-table-tr:not(:last-child) {
+  border-bottom: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav-button {
+  border: unset;
+  background: unset;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav-button:first-of-type {
+  margin-left: 16px;
+}
+
+.fjs-container .fjs-table-nav-button:focus {
+  outline: var(--outline-definition);
+  outline-offset: -1px;
+}
+
+.fjs-container .fjs-table-nav-button svg {
+  width: 16px;
+}
+
+.fjs-container .fjs-table-sort-icon-asc,
+.fjs-container .fjs-table-sort-icon-desc {
+  width: 16px;
+}
+
+.fjs-container .fjs-repeat-row-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.fjs-container .fjs-repeat-row-rows {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove {
+  display: flex;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  width: 32px;
+  color: var(--color-icon-base);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
+  outline: none;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove .fjs-repeat-row-remove-icon-container {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  align-items: center;
+  justify-content: center;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
+  outline: var(--button-warning-outline-definition);
+}
+
+.fjs-container .fjs-repeat-row-container:hover .fjs-repeat-render-footer-spacer {
+  width: 24px;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:hover,
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
+  color: var(--color-warning);
+}
+
+.fjs-container .fjs-repeat-render-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 4px;
+}
+
+.fjs-container .fjs-repeat-render-footer.fjs-remove-allowed {
+  margin-right: 32px;
+  justify-content: space-between;
+}
+
+.fjs-container .fjs-repeat-render-footer button {
+  background: none;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+}
+
+.fjs-container .fjs-repeat-render-footer button svg {
+  margin-right: 4px;
+}
+
 /**
 * Flatpickr style adjustments
 */