@theseam/ui-common 0.2.9

package/styles/bootstrap/_bs-utilities.scss

@@ -0,0 +1,5 @@
+// Required to import before bootstrap css rule stylesheets.
+@import "~bootstrap/scss/_functions";
+@import "bs-variables"; // Our bootstrap variable customizations
+@import "~bootstrap/scss/_variables";
+@import "~bootstrap/scss/_mixins";

package/styles/bootstrap/_bs-variables.scss

@@ -0,0 +1,141 @@
+//
+// This file should only contain changes to bootstrap variables
+//
+
+$enable-validation-icons: false !default;
+$enable-prefers-reduced-motion-media-query: false !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+
+$blue:    #357ebd !default;
+$light-blue: #67b2fd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #f57a15 !default;
+$yellow:  #ffc107 !default;
+$green:   #55c83c !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $orange !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+$lightgray:     $gray-300 !default;
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark,
+    // Custom
+    "lightgray":  $lightgray,
+    "lightblue":  $light-blue
+  ),
+  $theme-colors
+);
+
+$body-color:    $gray-900 !default;
+$border-color:  $gray-300 !default;
+$table-border-color:  $gray-300 !default;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-x:         1.25rem !default;
+
+$input-btn-padding-x-sm:      0.75rem !default;
+
+
+// Modals
+
+$modal-inner-padding:               0.5rem !default;
+
+$modal-header-padding-y:            0.5rem !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   .75rem !default;
+$alert-padding-y-slim:              .25rem !default; //Custom
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .50rem !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-border-width:          1px !default;

package/styles/common/_forms.scss

@@ -0,0 +1,15 @@
+// Disable Edge password eye icon
+input[type=password].no-native-eye::-ms-reveal,
+input[type=password].no-native-eye::-ms-clear
+{
+    display: none;
+}
+
+// Disable number spinner
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+}

package/styles/common/_global.scss

@@ -0,0 +1,9 @@
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100vh;
+  font-family: 'Mada', sans-serif;
+}
+

package/styles/common/_hacks.scss

@@ -0,0 +1,14 @@
+.cdk-overlay-pane {
+  // HACK: MSEdge is allowing a child to position itself below a parent with
+  // `z-index`, so this should fix the modals by keeping the content above the
+  // overlay with 1 index above bootstrap modal `z-index`.
+  .os-padding {
+    z-index: $zindex-modal + 1;
+  }
+
+  // HACK: Scrollbar was getting placed behind the backdrop making it
+  // unreachable.
+  .os-scrollbar{
+    z-index: $zindex-modal + 2;
+  }
+}

package/styles/common/_table.scss

@@ -0,0 +1,124 @@
+// We use bootstrap for our table styles, so if you are changing/fixing on
+// bootstrap tables are styled then you should put the code in the correct
+// location in 'ui-common/src/styles/bootstrap'.
+//
+//
+
+
+// # Text ellipsis in `td`
+//
+// For this to work the text needs to be wrapped in a block element, such as a
+// div. With the attribute `title` or `td-text` matching the elements content.
+//
+// > You should use the `title` attribute, since it will also help accessability,
+// > unless there is a reason not to have a title. A an example of a situation
+// > where you would want to use `td-text` would be a cell where the text has an
+// > icon in the text, because this trick renders the attribute text in the
+// > `::after` rule and hides the elements content.
+//
+// ## Examples:
+//
+// ```html
+// <td>
+//  <div title="This is the td cell content">
+//   This is the td cell content
+//  </div>
+// </td>
+// ```
+//
+// ```html
+// <td>
+//  <div td-text="This is the td cell content">
+//   This is the td cell content
+//  </div>
+// </td>
+// ```
+//
+// ----------------------------------------------------------------------------
+//
+// Uses a css trick to make text overflow ellipsis to work in `<td>` elements
+// without using `max-width`, or percentage column widths, or `table-layout:
+// fixed` etc.
+//
+// Solution source:
+// - Description: https://stackoverflow.com/a/44452722
+// - Example: https://jsfiddle.net/tturadqq/
+//
+// ----------------------------------------------------------------------------
+// ## Solution summary incase comment gets removed from stackoverflow
+//
+// ### Step 1: Just let the table auto-layout do its thing.
+//
+// > When there's one or more columns with a lot of text, it will shrink the
+// > other columns as much as possible, then wrap the text of the long columns:
+//
+// ### Step 2: Wrap cell contents in a div, then set that div to max-height: 1.1em
+//
+// > (the extra 0.1em is for characters which render a bit below the text base,
+// > like the tail of 'g' and 'y')
+//
+// ### Step 3: Set title on the divs
+//
+// > This is good for accessibility, and is necessary for the little trick we'll
+// > use in a moment.
+//
+// ### Step 4: Add a CSS ::after on the div
+//
+// > This is the tricky bit. We set a CSS ::after, with content: attr(title),
+// > then position that on top of the div and set text-overflow: ellipsis
+//
+// ### Step 5: Set the colour of the div text to transparent
+//
+.td-text-truncate[title],
+.td-text-truncate[td-text] {
+  /*
+    Using 22px, because 1.1em wasn't large enough for our font size and the ways
+    I tried to calculate the height caused it to be slightly larger/smaller. If
+    the hard-coded max-height is an issue we can change it to a dynamic
+    calculation, which should be close, but may cause a slight height jump when
+    overflow happens.
+
+    TODO: Find our if there is an accurate way to calculate the correct
+      max-height dynamically without using js.
+  */
+  max-height: 22px;
+
+  overflow: hidden;
+  position: relative;
+  color: transparent;
+
+  &[title] {
+    // This allows a title to still be used that doesn't match the content if
+    // the `td-text` attribute is also set.
+    &:not([td-text])::after {
+      content: attr(title);
+    }
+  }
+
+  &[td-text]::after {
+    content: attr(td-text);
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    color: $body-color;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+table:not(.table-sm) {
+  .td-text-truncate[title],
+  .td-text-truncate[td-text] {
+    max-height: 24px;
+  }
+}
+
+.datatable-action-button:hover {
+  color: $primary;
+  background-color: $table-border-color;
+}

package/styles/common/_text.scss

@@ -0,0 +1 @@
+.text-decoration-underine { text-decoration: underline !important; }

package/styles/theme.scss

@@ -0,0 +1,19 @@
+/* You can add global styles to this file, and also import other style files */
+@import '~@angular/cdk/overlay-prebuilt';
+@import '~overlayscrollbars/css/OverlayScrollbars.min';
+
+@import './variables';
+
+@import './bootstrap/bootstrap';
+
+@import './common/forms';
+@import './common/global';
+@import './common/hacks';
+@import './common/text';
+@import './common/table';
+
+@import '~ngx-toastr/toastr-bs4-alert';
+
+@import './vendor/vendor';
+
+@import './storybook-fixes'

package/styles/utilities.scss

@@ -0,0 +1,14 @@
+// Utilities
+//
+// Use this script if you need to import global scss variables/mixins/functions
+// into components.
+//
+// NOTE: This script should not contain or import any scripts containing rules,
+// only things that are used by rules at compile time. Anything that outputs a
+// css rule will get duplicated in each component that imports this script if
+// so, because the components sccs styles are compiled independently to add
+// angulars scope attributes.
+//
+
+@import './variables';
+@import './bootstrap/bs-utilities';

package/styles/vendor/_vendor.scss

@@ -0,0 +1,3 @@
+@import './ngx-datatable/ngx-datatable';
+@import './ng-select/_ng-select-bs4';
+@import './quill/quill';

package/styles/vendor/ng-select/_ng-select-bs4.scss

@@ -0,0 +1,445 @@
+@mixin rtl {
+  @at-root [dir="rtl"] #{&} {
+      @content
+  }
+}
+
+$color-selected: #f5faff;
+.ng-select {
+    &.ng-select-opened {
+        >.ng-select-container {
+            color: #495057;
+            background: #fff;
+            // border-color: #80bdff;
+            // box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+            .ng-arrow {
+                top: -2px;
+                border-color: transparent transparent #495058;
+                border-width: 0 5px 5px;
+                &:hover {
+                    border-color: transparent transparent #495058;
+                }
+            }
+        }
+        &.ng-select-bottom {
+            >.ng-select-container {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+        &.ng-select-top {
+            >.ng-select-container {
+                border-top-right-radius: 0;
+                border-top-left-radius: 0;
+            }
+        }
+    }
+    &.ng-select-focused {
+        // &:not(.ng-select-opened)>.ng-select-container {
+        //     border-color: #80bdff;
+        //     box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+        // }
+
+        color: $input-focus-color;
+        background-color: $input-focus-bg;
+        border-color: $input-focus-border-color;
+        outline: 0;
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+          box-shadow: $input-box-shadow, $input-focus-box-shadow;
+        } @else {
+          box-shadow: $input-focus-box-shadow;
+        }
+    }
+    &.ng-select-disabled {
+        >.ng-select-container {
+            background-color: #e9ecef;
+        }
+    }
+    &:not(.ng-empty-string-value) .ng-has-value .ng-placeholder {
+        display: none;
+    }
+    .ng-select-container {
+        color: #495057 !important;
+        background-color: #fff;
+        border-radius: 0.25rem;
+        border: 1px solid #ced4da;
+        min-height: 36px;
+        align-items: center;
+        .ng-value-container {
+            align-items: center;
+            height: 36px;
+            padding-left: 10px;
+            @include rtl {
+                padding-right: 10px;
+                padding-left: 0
+            }
+            .ng-placeholder {
+                color: #6c757d;
+            }
+        }
+    }
+    &.ng-select-single {
+        .ng-select-container {
+            height: calc(2.25rem + 2px);;
+            .ng-value-container {
+                .ng-input {
+                    top: 5px;
+                    left: 0;
+                    padding-left: 10px;
+                    padding-right: 50px;
+                    @include rtl {
+                        padding-right: 10px;
+                        padding-left: 50px;
+                    }
+                }
+                input {
+                    color: #495057;
+                }
+            }
+        }
+    }
+    &.ng-select-multiple {
+        &.ng-select-disabled {
+            >.ng-select-container .ng-value-container .ng-value {
+                background-color: #e9ecef;
+                border: 1px solid #ced4da;
+                .ng-value-label {
+                    padding: 0 5px;
+                }
+            }
+        }
+        .ng-select-container {
+            .ng-value-container {
+                padding-top: 5px;
+                padding-left: 7px;
+                @include rtl {
+                    padding-right: 7px;
+                    padding-left: 0
+                }
+                .ng-value {
+                    font-size: 0.9em;
+                    margin-bottom: 5px;
+                    background-color: $color-selected;
+                    border-radius: 2px;
+                    border: 1px solid #c2e0ff;
+                    margin-right: 5px;
+                    @include rtl {
+                        margin-right: 0;
+                        margin-left: 5px;
+                    }
+                    &.ng-value-disabled {
+                        background-color: #e9ecef;
+                        border: 1px solid #ced4da;
+                        .ng-value-label {
+                            padding-left: 5px;
+                            @include rtl {
+                                padding-left: 0;
+                                padding-right: 5px;
+                            }
+                        }
+                    }
+                    .ng-value-label {
+                        display: inline-block;
+                        padding: 0 5px 0 5px;
+                    }
+                    .ng-value-icon {
+                        display: inline-block;
+                        padding: 0 5px;
+                        &:hover {
+                            background-color: #d8eafd;
+                        }
+                        &.left {
+                            border-right: 1px solid #c2e0ff;
+                            @include rtl {
+                                border-left: 1px solid #c2e0ff;
+                                border-right: none;
+                            }
+                        }
+                        &.right {
+                            border-left: 1px solid #c2e0ff;
+                            @include rtl {
+                                border-left: 0;
+                                border-right: 1px solid #c2e0ff;
+                            }
+                        }
+                    }
+                }
+                .ng-input {
+                    padding: 0 0 3px 3px;
+                    @include rtl {
+                        padding: 0 3px 3px 0;
+                    }
+                    input {
+                        color:green !important;
+                    }
+                }
+                .ng-placeholder {
+                    top: 5px;
+                    padding-bottom: 5px;
+                    padding-left: 3px;
+                    @include rtl {
+                        padding-right: 3px;
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+    }
+    .ng-clear-wrapper {
+        color: #999;
+        .ng-clear {
+            &:hover {
+                color: #D0021B;
+            }
+        }
+    }
+    .ng-spinner-zone {
+        padding: 5px 5px 0 0;
+
+        @include rtl {
+            padding: 5px 0 0 5px;
+        }
+    }
+    .ng-arrow-wrapper {
+        width: 25px;
+        padding-right: 5px;
+        @include rtl {
+            padding-left: 5px;
+            padding-right: 0;
+        }
+        &:hover {
+            .ng-arrow {
+                border-top-color: #495058;
+            }
+        }
+        .ng-arrow {
+            border-color: #495058 transparent transparent;
+            border-style: solid;
+            border-width: 5px 5px 2.5px;
+         }
+    }
+}
+.ng-dropdown-panel {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+    left: 0;
+    &.ng-select-bottom {
+        top: 100%;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+        border-top-color: #e6e6e6;
+        margin-top: -1px;
+        .ng-dropdown-panel-items {
+            .ng-option {
+                &:last-child {
+                    border-bottom-right-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                }
+            }
+        }
+    }
+    &.ng-select-top {
+        bottom: 100%;
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+        border-bottom-color: #e6e6e6;
+        margin-bottom: -1px;
+        .ng-dropdown-panel-items {
+            .ng-option {
+                &:first-child {
+                    border-top-right-radius: 4px;
+                    border-top-left-radius: 4px;
+                }
+            }
+        }
+    }
+    .ng-dropdown-header {
+        border-bottom: 1px solid #ccc;
+        padding: 5px 7px;
+    }
+    .ng-dropdown-footer {
+        border-top: 1px solid #ccc;
+        padding: 5px 7px;
+    }
+    .ng-dropdown-panel-items {
+        margin-bottom: 1px;
+        .ng-optgroup {
+            user-select: none;
+            padding: 8px 10px;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 0.54);
+            cursor: pointer;
+            &.ng-option-disabled {
+                cursor: default;
+            }
+            &.ng-option-marked {
+                background-color: #ebf5ff;
+            }
+            &.ng-option-selected {
+                background-color: $color-selected;
+                font-weight: 600;
+            }
+        }
+        .ng-option {
+            background-color: #fff;
+            color: #495057;
+            padding: 8px 10px;
+            &.ng-option-selected {
+                color: #495057;
+                background-color: $color-selected;
+                .ng-option-label {
+                    font-weight: 600;
+                }
+            }
+            &.ng-option-marked {
+                background-color: #ebf5ff;
+                color: #495057;
+            }
+            &.ng-option-disabled {
+                color: #cccccc;
+            }
+            &.ng-option-child {
+                padding-left: 22px;
+                @include rtl {
+                    padding-right: 22px;
+                    padding-left: 0;
+                }
+            }
+            .ng-tag-label {
+                font-size: 80%;
+                font-weight: 400;
+                padding-right: 5px;
+                @include rtl {
+                    padding-left: 5px;
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+
+    @include rtl {
+        direction: rtl;
+        text-align: right;
+    }
+}
+
+.ng-select {
+  &.form-control {
+    height: auto;
+    padding: 0;
+
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
+
+    .ng-select-container {
+      height: auto;
+      border: 0;
+    }
+
+    &.ng-select-focused {
+      &.is-valid {
+        border-color: $form-feedback-valid-color;
+        box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-valid-color, .25);
+
+        ~ .valid-feedback,
+        ~ .valid-tooltip {
+          display: block;
+        }
+      }
+
+      &.is-invalid {
+        border-color: $form-feedback-invalid-color;
+        box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
+
+        ~ .invalid-feedback,
+        ~ .invalid-tooltip {
+          display: block;
+        }
+      }
+
+    }
+
+    .ng-value-container {
+      .ng-input {
+        input {
+          // Placeholder
+          &::placeholder {
+            color: $input-placeholder-color;
+            // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+            opacity: 1;
+          }
+
+          // Disabled and read-only inputs
+          //
+          // HTML5 says that controls under a fieldset > legend:first-child won't be
+          // disabled if the fieldset is disabled. Due to implementation difficulty, we
+          // don't honor that edge case; we style them as disabled anyway.
+          &:disabled,
+          &[readonly] {
+            background-color: $input-disabled-bg;
+            // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ng-dropdown-panel {
+  height: auto;
+  padding: 0;
+}
+
+
+
+// NOTE: The following classes are experiment and may be changed or removed.
+.ng-select {
+  &.ng-select-single {
+    &.ng-select-fit {
+      .ng-select-container {
+        min-width: 150px;
+
+        .ng-value-container {
+          .ng-value {
+            white-space: normal;
+          }
+        }
+      }
+    }
+
+    &.ng-select-value-grow-h:not(.ng-select-filtered) {
+      .ng-select-container {
+        .ng-value-container,
+        .ng-value {
+          min-height: 24px;
+          height: auto;
+        }
+      }
+    }
+
+    &.ng-select-option-grow-h {
+      .ng-dropdown-panel {
+        .ng-dropdown-panel-items {
+          .ng-option {
+            white-space: normal;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ng-dropdown-panel.ng-select-fit {
+  max-width: 800px;
+  width: auto !important;
+
+  .ng-dropdown-panel-items {
+
+    .ng-option {
+      white-space: normal;
+    }
+  }
+}