@dereekb/dbx-form 0.0.1

package/src/lib/formly/form_TODO.scss

@@ -0,0 +1,153 @@
+$dbx-form-container-margin: 10px;
+
+.dbx-formly {
+  margin: $dbx-form-container-margin 0;
+}
+
+.dbx-form-spacer {
+  margin-top: 24px;  
+}
+
+// OLD. Remove
+$form-submit-view-margin: 8px;
+$material-form-margin: 16px;
+
+// MARK: Form Container
+.dbx-form-container {
+  margin: $dbx-form-container-margin 0;
+}
+
+// .dbx-form-container-form-view {}
+
+// MARK: Form View
+.dbx-form-view-padded {
+  padding: 0 $material-form-margin;
+}
+
+.required-text {
+  content: "*";
+  color: red;
+  // color: mat-color($tallynote-dbx-warn);
+}
+
+.dbx-form-view {
+  // margin-bottom: $material-form-margin;
+
+}
+
+.dbx-form-view-tools {
+  text-align: right;
+}
+
+.dbx-form-view-control {
+  width: 100%;
+}
+
+// .dbx-form-view-sub-form {}
+
+.mat-input-element {
+  margin: 0; // Safari Fix
+}
+
+.mat-form-field {
+  margin: 8px 0px 16px;
+}
+
+.mat-input-placeholder {
+  text-transform: capitalize;
+}
+
+.required {
+
+  .mat-checkbox-label::after,
+  .mat-input-placeholder::after {
+    @extend .required-text;
+  }
+}
+
+.capitalized-field {
+  .mat-input-element {
+    text-transform: capitalize;
+  }
+}
+
+.dbx-form-view-checkbox-control {
+  margin: 12px 0;
+  padding-left: 15px;
+
+  .mat-checkbox-label {
+    text-transform: capitalize;
+  }
+}
+
+.form-select-align {
+  padding-top: 24px;
+}
+
+.form-anti-padding {
+  margin-top: -20px;
+}
+
+.warning {
+  color: red;
+  // color: mat-color($tallynote-dbx-warn);
+}
+
+.dbx-form-view-help {
+  font-size: 75%;
+  color: grey;
+}
+
+.dbx-form-view-hint {
+  font-size: 75%;
+  margin-top: 3px;
+}
+
+// MARK: Tabs
+.mat-tab-header {
+  margin-bottom: $material-form-margin;
+}
+
+.dbx-form-view-tab-page {
+  padding: 12px 0;
+}
+
+// MARK: Input
+.mat-form-field {
+
+  .form-suffix-button {
+    width: 1.8em;
+    height: 1.8em;
+    margin-top: -0.6em;
+  }
+
+}
+
+// MARK: Controls
+.select-form-control {
+  width: 100%;
+}
+
+.form-suffix-button {
+  .mat-icon-button {
+    width: 2em;
+    height: 2em;
+
+    .mat-icon {
+      width: 1.8em;
+      height: 1.8em;
+    }
+  }
+}
+
+.date-form-control {
+
+  .mat-datepicker-toggle {
+
+    .mat-icon-button {
+      height: 2em;
+      width: 2em;
+    }
+
+  }
+}

package/src/lib/layout/_layout.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-layout') {
+    $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/style/_all-core.scss

@@ -0,0 +1,12 @@
+@use '../form/form';
+@use '../formly/formly';
+@use '../layout/layout';
+@use '../formly/field/field';
+
+// Includes all theming config
+@mixin all-component-core() {
+  @include form.core();
+  @include formly.core();
+  @include field.all-field-core();
+  @include layout.core();
+}

package/src/lib/style/_all-theme.scss

@@ -0,0 +1,12 @@
+@use '../form/form';
+@use '../formly/formly';
+@use '../layout/layout';
+@use '../formly/field/field';
+
+// Includes all theming config
+@mixin all-component-themes($theme-config) {
+  @include form.theme($theme-config);
+  @include formly.theme($theme-config);
+  @include field.all-field-theme($theme-config);
+  @include layout.theme($theme-config);
+}

package/src/lib/style/_all-typography.scss

@@ -0,0 +1,12 @@
+@use '../form/form';
+@use '../formly/formly';
+@use '../layout/layout';
+@use '../formly/field/field';
+
+// Includes all of the typographic styles.
+@mixin all-component-typographies($typography-config) {
+  @include form.typography($typography-config);
+  @include formly.typography($typography-config);
+  @include field.all-field-typography($typography-config);
+  @include layout.typography($typography-config);
+}

package/src/lib/style/_config.scss

@@ -0,0 +1,20 @@
+@use "sass:map";
+@use './variables';
+
+// theme
+@function define-dbx-form-theme-config($theme-config, $input-dbx-form-theme-config: null) {
+
+  @if ($input-dbx-form-theme-config == null) {
+    $input-dbx-form-theme-config: ();
+  }
+  
+  $dbx-form-theme-config: ();
+
+  @return map.merge($theme-config, (
+    'dbx-form': $dbx-form-theme-config
+  ));
+}
+
+@function get-dbx-form-theme-config($theme-config) {
+  @return map.get($theme-config, 'dbx-form');
+}

package/src/lib/style/_core.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use './all-core';
+@use './all-typography';
+@use './config';
+
+@mixin core($typography-config, $theme-config: null) {
+  @include all-core.all-component-core();
+  @include all-typography.all-component-typographies($typography-config);
+}

package/src/lib/style/_mixin.scss

@@ -0,0 +1,3 @@
+@use "sass:map";
+@use './config';
+@use './variables';

package/src/lib/style/_theming.scss

@@ -0,0 +1,19 @@
+@forward '@angular/material'show define-light-theme,
+define-dark-theme,
+define-palette,
+get-contrast-color-from-palette,
+get-color-from-palette,
+get-color-config,
+get-typography-config,
+get-density-config,
+elevation;
+
+@forward 'node_modules/@angular/material/core/theming/theming'
+show private-check-duplicate-theme-styles,
+$theme-ignore-duplication-warnings;
+
+@forward 'node_modules/@angular/material/core/typography/typography-utils';
+
+@forward './config';
+@forward './variables';
+@forward './mixin';

package/src/lib/style/_variables.scss

@@ -0,0 +1 @@
+@use "sass:map";