@dereekb/dbx-form 0.0.1

package/src/lib/formly/field/_field.scss

@@ -0,0 +1,33 @@
+@use './checklist/checklist';
+@use './component/component';
+@use './selection/selection';
+@use './texteditor/texteditor';
+@use './value/value';
+@use './wrapper/wrapper';
+
+@mixin all-field-core() {
+  @include checklist.core();
+  @include component.core();
+  @include selection.all-selection-core();
+  @include texteditor.core();
+  @include value.all-value-core();
+  @include wrapper.core();
+}
+
+@mixin all-field-typography($typography-config) {
+  @include checklist.typography($typography-config);
+  @include component.typography($typography-config);
+  @include selection.all-selection-typography($typography-config);
+  @include texteditor.typography($typography-config);
+  @include value.all-value-typography($typography-config);
+  @include wrapper.typography($typography-config);
+}
+
+@mixin all-field-theme($theme-config) {
+  @include checklist.theme($theme-config);
+  @include component.theme($theme-config);
+  @include selection.all-selection-theme($theme-config);
+  @include texteditor.theme($theme-config);
+  @include value.all-value-theme($theme-config);
+  @include wrapper.theme($theme-config);
+}

package/src/lib/formly/field/checklist/_checklist.scss

@@ -0,0 +1,26 @@
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-checklist') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/checklist/checklist.item_TODO.scss

@@ -0,0 +1,57 @@
+@import 'shared';
+
+$dbx-checklist-item-spacing: 8px;
+
+.dbx-checklist-item-wrapper {
+
+}
+
+.dbx-checklist-item {
+  @include mat-elevation(1);
+  margin-bottom: 8px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+
+  .dbx-checklist-item-check {
+    flex: auto 0 0;
+    // margin-right: $dbx-checklist-item-spacing;
+    padding: 12px;
+  }
+  
+  .dbx-checklist-item-content-wrapper {
+    height: 100%;
+    width: 100%;
+  }
+
+  .dbx-checklist-item-content {
+    display: flex;
+    align-items: center;
+
+    min-height: 44px;
+    flex: auto 1 1;
+    padding: $dbx-checklist-item-spacing 0;
+    padding-left: $dbx-checklist-item-spacing;
+    border-left: 1px solid black;
+  }
+
+}
+
+.dbx-default-checklist-item-field {
+
+  .item-label {
+    font-size: 1.35em;
+    line-height: 1.35em;
+  }
+  
+  .item-sublabel {
+
+  }
+  
+  .item-description {
+
+  }
+  
+}

package/src/lib/formly/field/component/_component.scss

@@ -0,0 +1,26 @@
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-component') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/fields_TODO.scss

@@ -0,0 +1,4 @@
+
+.form-wrapped-component {
+  margin: 12px 0;
+}

package/src/lib/formly/field/selection/_selection.scss

@@ -0,0 +1,17 @@
+@use './pickable/pickable';
+@use './searchable/searchable';
+
+@mixin all-selection-core() {
+  @include pickable.core();
+  @include searchable.core();
+}
+
+@mixin all-selection-typography($typography-config) {
+  @include pickable.typography($typography-config);
+  @include searchable.typography($typography-config);
+}
+
+@mixin all-selection-theme($theme-config) {
+  @include pickable.theme($theme-config);
+  @include searchable.theme($theme-config);
+}

package/src/lib/formly/field/selection/generic_TODO.scss

@@ -0,0 +1,36 @@
+@import 'shared';
+
+.dbx-searchable-field {
+  .s-chip-sublabel {
+    margin-left: 4px;
+  }
+}
+
+.dbx-searchable-field-form-field {
+  width: 100%;
+
+  .participant-name {
+    margin-left: 4px;
+  }
+}
+
+.form-repeat-section {
+  .form-repeat-section-field {
+    h4 {
+      margin: 0;
+      display: inline;
+    }
+  }
+}
+
+.searchable-field-form-loading {
+  margin: -18px;
+}
+
+.dbx-pickable-item-field, .dbx-pickable-item-field-filter-field {
+  width: 100%;
+}
+
+.dbx-pickable-item-field-chips {
+  padding: 8px;
+}

package/src/lib/formly/field/selection/pickable/_pickable.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-selection-pickable') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/selection/searchable/_searchable.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-selection-searchable') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/texteditor/_texteditor.scss

@@ -0,0 +1,26 @@
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-texteditor') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/texteditor/texteditor_TODO.scss

@@ -0,0 +1,32 @@
+@import 'shared';
+
+.dbx-texteditor-field-compact {
+  .dbx-texteditor-field-input {
+    min-height: 120px;
+    height: 300px;
+    max-height: calc(var(--vh100) * 0.5);
+  }
+}
+
+.dbx-texteditor-field-input {
+  // height: 400px;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+.dbx-texteditor-field-menu {
+  @include mat-elevation(3);
+}
+
+.dbx-texteditor-field-label {}
+
+.dbx-texteditor-field {
+
+  &.NgxEditor__Wrapper {
+    border: 0;
+  }
+
+  margin-bottom: 12px;
+}
+
+// More styling changes in styles.scss

package/src/lib/formly/field/value/_value.scss

@@ -0,0 +1,33 @@
+@use './array/array';
+@use './boolean/boolean';
+@use './date/date';
+@use './enum/enum';
+@use './phone/phone';
+@use './text/text';
+
+@mixin all-value-core() {
+  @include array.core();
+  @include boolean.core();
+  @include date.core();
+  @include enum.core();
+  @include phone.core();
+  @include text.core();
+}
+
+@mixin all-value-typography($typography-config) {
+  @include array.typography($typography-config);
+  @include boolean.typography($typography-config);
+  @include date.typography($typography-config);
+  @include enum.typography($typography-config);
+  @include phone.typography($typography-config);
+  @include text.typography($typography-config);
+}
+
+@mixin all-value-theme($theme-config) {
+  @include array.theme($theme-config);
+  @include boolean.theme($theme-config);
+  @include date.theme($theme-config);
+  @include enum.theme($theme-config);
+  @include phone.theme($theme-config);
+  @include text.theme($theme-config);
+}

package/src/lib/formly/field/value/array/_array.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-array') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/value/boolean/_boolean.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-boolean') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/value/date/_date.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-date') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/value/date/date_TODO.scss

@@ -0,0 +1,27 @@
+@import 'shared';
+
+.dbx-datetime-field {
+  width: 100%;
+}
+
+$dbx-datetime-button-width: 40px;
+
+.dbx-datetime-row {
+  .dbx-datetime-row-field {
+    width: calc(100% - #{$dbx-datetime-button-width});
+  }
+}
+
+.add-time-button {
+  margin-top: 3px;
+  width: 100%;
+}
+
+.add-time-button-wrapper {
+  margin: auto;
+  margin-bottom: 4px;
+}
+
+.dbx-datetime-hint-row {
+  // margin-left: 12px;
+}

package/src/lib/formly/field/value/enum/_enum.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-enum') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/value/phone/_phone.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-phone') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/value/phone/phone_TODO.scss

@@ -0,0 +1,10 @@
+@import 'shared';
+
+.dbx-international-phone-field,
+.dbx-international-phone-form-field {
+  width: 100%;
+}
+
+.dbx-international-phone-form-field {
+  margin-top: 1px;
+}

package/src/lib/formly/field/value/text/_text.scss

@@ -0,0 +1,26 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-text') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/wrapper/_wrapper.scss

@@ -0,0 +1,26 @@
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-wrapper') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/src/lib/formly/field/wrapper/wrapper_TODO.scss

@@ -0,0 +1,34 @@
+@import 'shared';
+
+.form-section {
+  margin-bottom: $form-section-margin;
+
+  h3,h4 {
+    margin-bottom: 0;
+  }
+
+  .form-section-content {
+    // padding-left: 12px;
+  }
+
+}
+
+.form-wrapped-component {
+  margin: $form-section-margin 0;
+}
+
+.form-info-section-info {
+  margin-left: 4px;
+}
+
+.form-flex-section {}
+
+.form-expandable-section-button {
+  text-decoration: underline;
+  margin-right: 8px;
+  margin-bottom: 6px;
+}
+
+.form-toggle-wrapper {
+  margin-bottom: $form-section-margin;
+}