voom-presenters 2.0.3 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d840d92aace441f5618199bac0a7035c81f9598d201aa6b75065c59a351410d
-  data.tar.gz: 4595652fbd9340df29a912d2374166f761d5f62cd28480c50aac09b4ccb4b5ad
+  metadata.gz: b17d9ebbc37dcb3cfac3e2aa5421adb40b7f1bd74a5632a7da0917af5e1c7908
+  data.tar.gz: 1eda103b83777c5a72af1420ee0d8f10c0346a0b0f2052a5263009ebb9e5fe89
 SHA512:
-  metadata.gz: 49323725469caa0f8b1d1268217882727c7133a9077fbcd2105e6e276e7487a3911126a15338e36d538ee91ebb75031030afebae66e20338fedf027a87d5cb5b
-  data.tar.gz: 18872cff6fa887c6698b2710c97ebaffd4be80800e3067a1c9fe641ad9a1f31ca0cc000f7d28cfb912bffa4ae4a0169196b611173e34cbfa3b4962f2533bf033
+  metadata.gz: eb9908b33ad14d4de3d8d4d34a6cddf680f4ebb397c024dd2be76332d4e9fad5b6ba74d418494519e88e327b060238a78613f63ae74ddce4cc46336ea1b22f78
+  data.tar.gz: 8a405a60bf6ace8cee644c28bddb5df16c97163b6bb00c4a2d44f2e280eef10c80b2c678e88ea95b1adfcd70fdbcc4ec470b5c59bd81505bda8f70e14b8eda7e

data/CHANGELOG.md

@@ -1,9 +1,15 @@
-## [2.0.3](https://github.com/rx/presenters/compare/v2.0.2...v2.0.3) (2021-03-11)
+# [2.1.0](https://github.com/rx/presenters/compare/v2.0.3...v2.1.0) (2021-03-17)
 
 
 ### Bug Fixes
 
-* double file edit prints caused by multiple file watchers ([cecd3fe](https://github.com/rx/presenters/commit/cecd3fe0efbb3c73a5885e0c62346f2513bccc2b))
+* requested PR changes - fix demo, removed commented code and unused ([daeb63f](https://github.com/rx/presenters/commit/daeb63f2a348dd049eef827501667902b00a6f3f))
+* Update mark-up and styles for multi-select component to fix z-index ([564a593](https://github.com/rx/presenters/commit/564a593c5c3aa2c00108dce71c8575e3b46666ad))
+
+
+### Features
+
+* Add multiple selection dropdown component ([9bf6798](https://github.com/rx/presenters/commit/9bf67985f8d1869f2d37ffec1c195298e8c9597d))
 
 # Changelog
 

data/app/demo/components/multi_selects.pom

@@ -0,0 +1,29 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:multi_selects) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Multi Select Fields'
+
+  indented_grid do
+    content do
+      multi_select do
+        label 'Multi Select Field'
+        check_option value: 'value1', text: 'First value', selected: true
+        check_option value: 'value2', text: 'Second value', selected: true
+        check_option value: 'value3', text: 'Third value', selected: true
+      end
+
+      multi_select do
+        label 'One Selection'
+        check_option value: 'value1', text: 'First value', selected: true
+        check_option value: 'value2', text: 'Second value', selected: false
+        check_option value: 'value3', text: 'Third value', selected: false
+      end
+
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/nav/menu.pom

@@ -27,6 +27,7 @@ Voom::Presenters.define('component_menu') do
       number_fields
       maps
       menus
+      multi_selects
       progress
       selects
       sliders

data/app/demo/components/selects.pom

@@ -26,7 +26,8 @@ Voom::Presenters.define(:selects) do
 
       select outlined: false do
         label 'Alternate style ...'
-        option do
+        option
+        option selected: true do
           value 'value1'
           text 'First value'
         end

data/lib/voom/presenters/dsl/components/mixins/selects.rb

@@ -8,6 +8,12 @@ module Voom
               self << Components::Select.new(parent: self,
                                              **attribs, &block)
             end
+
+            def multi_select(**attribs, &block)
+              self << Components::MultiSelect.new(parent: self,
+                                                  **attribs, &block)
+            end
+
           end
         end
       end

data/lib/voom/presenters/dsl/components/multi_select.rb

@@ -0,0 +1,56 @@
+module Voom
+  module Presenters
+    module DSL
+      module Components
+        class MultiSelect < Select
+
+          def initialize(**attribs_, &block)
+            super(type: :multi_select, **attribs_, &block)
+            @required = attribs.delete(:required)
+            @full_width = attribs.delete(:full_width){ true }
+            @outlined = attribs.delete(:outlined){ true }
+            @options = []
+            expand!
+          end
+
+          def check_option(**attribs, &block)
+            @options << CheckOption.new(parent: self,
+                                    name: @name,
+                                    tag: @tag,
+                                    **attribs.delete_if{ |k,v| [:tag, :name].include?(k) }, &block)
+          end
+
+          class CheckOption < EventBase
+
+            attr_reader :selected, :disabled
+
+            def initialize(**attribs_, &block)
+              super(type: :multi_select_option, **attribs_, &block)
+              @value =     attribs.delete(:value)
+              @text =      attribs.delete(:text)
+              @selected =  attribs.delete(:selected){ true }
+              @disabled =  attribs.delete(:disabled)
+              self.checkbox(name: "#{attribs[:name]}[]",
+                            value: @value,
+                            text: @text,
+                            tag: tag,
+                            checked: @selected,
+                            disabled: @disabled,
+                            &block)
+              expand!
+            end
+
+            def checkbox(**attributes, &block)
+              return @checkbox if locked?
+              @checkbox = Components::Checkbox.new(parent: self,
+                                                   **attributes,
+                                                   &block)
+            end
+
+          end
+
+        end
+      end
+    end
+  end
+end

data/lib/voom/presenters/dsl/components/select.rb

@@ -63,9 +63,6 @@ module Voom
               @text = text
             end
 
-            def _selected?
-              @selected
-            end
           end
         end
       end

data/lib/voom/presenters/version.rb

@@ -1,7 +1,7 @@
 module Voom
   module Presenters
     module Version
-      VERSION = '2.0.3'
+      VERSION = '2.1.0'
     end
   end
 end

data/public/bundle.css

@@ -7335,7 +7335,7 @@ svg.mdc-button__icon {
   /* @alternate */
   background-color: var(--mdc-theme-secondary, #E58D36); }
 
-@keyframes mdc-checkbox-fade-in-background-uda093c27 {
+@keyframes mdc-checkbox-fade-in-background-u8a3e297b {
   0% {
     border-color: rgba(0, 0, 0, 0.54);
     background-color: transparent; }
@@ -7347,7 +7347,7 @@ svg.mdc-button__icon {
     /* @alternate */
     background-color: var(--mdc-theme-secondary, #E58D36); } }
 
-@keyframes mdc-checkbox-fade-out-background-uda093c27 {
+@keyframes mdc-checkbox-fade-out-background-u8a3e297b {
   0%,
   80% {
     border-color: #E58D36;
@@ -7361,10 +7361,10 @@ svg.mdc-button__icon {
     background-color: transparent; } }
 
 .mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-in-background-uda093c27; }
+  animation-name: mdc-checkbox-fade-in-background-u8a3e297b; }
 
 .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-out-background-uda093c27; }
+  animation-name: mdc-checkbox-fade-out-background-u8a3e297b; }
 
 .mdc-checkbox__checkmark {
   color: #fff; }
@@ -12419,7 +12419,7 @@ a.mdc-list-item {
   opacity: 1;
   will-change: initial; }
 
-.mdc-select {
+.mdc-select, .v-multi-select-container .v-multi-select {
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
   --mdc-ripple-top: 0;
@@ -12434,121 +12434,123 @@ a.mdc-list-item {
   overflow: hidden;
   /* @alternate */
   will-change: opacity, transform, color; }
-  .mdc-select:not(.mdc-select--disabled) {
+  .mdc-select:not(.mdc-select--disabled), .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) {
     background-color: whitesmoke; }
-  .mdc-select::before, .mdc-select::after {
+  .mdc-select::before, .v-multi-select-container .v-multi-select::before, .mdc-select::after, .v-multi-select-container .v-multi-select::after {
     position: absolute;
     border-radius: 50%;
     opacity: 0;
     pointer-events: none;
     content: ""; }
-  .mdc-select::before {
+  .mdc-select::before, .v-multi-select-container .v-multi-select::before {
     transition: opacity 15ms linear, background-color 15ms linear;
     z-index: 1; }
-  .mdc-select.mdc-ripple-upgraded::before {
+  .mdc-select.mdc-ripple-upgraded::before, .v-multi-select-container .mdc-ripple-upgraded.v-multi-select::before {
     transform: scale(var(--mdc-ripple-fg-scale, 1)); }
-  .mdc-select.mdc-ripple-upgraded::after {
+  .mdc-select.mdc-ripple-upgraded::after, .v-multi-select-container .mdc-ripple-upgraded.v-multi-select::after {
     top: 0;
     /* @noflip */
     left: 0;
     transform: scale(0);
     transform-origin: center center; }
-  .mdc-select.mdc-ripple-upgraded--unbounded::after {
+  .mdc-select.mdc-ripple-upgraded--unbounded::after, .v-multi-select-container .mdc-ripple-upgraded--unbounded.v-multi-select::after {
     top: var(--mdc-ripple-top, 0);
     /* @noflip */
     left: var(--mdc-ripple-left, 0); }
-  .mdc-select.mdc-ripple-upgraded--foreground-activation::after {
+  .mdc-select.mdc-ripple-upgraded--foreground-activation::after, .v-multi-select-container .mdc-ripple-upgraded--foreground-activation.v-multi-select::after {
     animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; }
-  .mdc-select.mdc-ripple-upgraded--foreground-deactivation::after {
+  .mdc-select.mdc-ripple-upgraded--foreground-deactivation::after, .v-multi-select-container .mdc-ripple-upgraded--foreground-deactivation.v-multi-select::after {
     animation: mdc-ripple-fg-opacity-out 150ms;
     transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); }
-  .mdc-select::before, .mdc-select::after {
+  .mdc-select::before, .v-multi-select-container .v-multi-select::before, .mdc-select::after, .v-multi-select-container .v-multi-select::after {
     top: calc(50% - 100%);
     /* @noflip */
     left: calc(50% - 100%);
     width: 200%;
     height: 200%; }
-  .mdc-select.mdc-ripple-upgraded::after {
+  .mdc-select.mdc-ripple-upgraded::after, .v-multi-select-container .mdc-ripple-upgraded.v-multi-select::after {
     width: var(--mdc-ripple-fg-size, 100%);
     height: var(--mdc-ripple-fg-size, 100%); }
-  .mdc-select::before, .mdc-select::after {
+  .mdc-select::before, .v-multi-select-container .v-multi-select::before, .mdc-select::after, .v-multi-select-container .v-multi-select::after {
     background-color: rgba(0, 0, 0, 0.87); }
-  .mdc-select:hover::before {
+  .mdc-select:hover::before, .v-multi-select-container .v-multi-select:hover::before {
     opacity: 0.04; }
-  .mdc-select:not(.mdc-ripple-upgraded):focus::before, .mdc-select.mdc-ripple-upgraded--background-focused::before {
+  .mdc-select:not(.mdc-ripple-upgraded):focus::before, .v-multi-select-container .v-multi-select:not(.mdc-ripple-upgraded):focus::before, .mdc-select.mdc-ripple-upgraded--background-focused::before, .v-multi-select-container .mdc-ripple-upgraded--background-focused.v-multi-select::before {
     transition-duration: 75ms;
     opacity: 0.12; }
-  .mdc-select:not(.mdc-select--disabled) .mdc-select__native-control,
-  .mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
+  .mdc-select:not(.mdc-select--disabled) .mdc-select__native-control, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) .mdc-select__native-control,
+  .mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text,
+  .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) .mdc-select__selected-text {
     color: rgba(0, 0, 0, 0.87); }
-  .mdc-select:not(.mdc-select--disabled) .mdc-floating-label {
+  .mdc-select:not(.mdc-select--disabled) .mdc-floating-label, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) .mdc-floating-label {
     color: rgba(0, 0, 0, 0.6); }
-  .mdc-select:not(.mdc-select--disabled) .mdc-select__native-control,
-  .mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
+  .mdc-select:not(.mdc-select--disabled) .mdc-select__native-control, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) .mdc-select__native-control,
+  .mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text,
+  .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) .mdc-select__selected-text {
     border-bottom-color: rgba(0, 0, 0, 0.42); }
-  .mdc-select:not(.mdc-select--disabled) + .mdc-select-helper-text {
+  .mdc-select:not(.mdc-select--disabled) + .mdc-select-helper-text, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) + .mdc-select-helper-text {
     color: rgba(0, 0, 0, 0.6); }
-  .mdc-select, .mdc-select__native-control {
+  .mdc-select, .v-multi-select-container .v-multi-select, .mdc-select__native-control {
     border-radius: 4px 4px 0 0; }
-  .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-line-ripple {
+  .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-line-ripple, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled).mdc-select--focused .mdc-line-ripple {
     background-color: #5488b2;
     /* @alternate */
     background-color: var(--mdc-theme-primary, #5488b2); }
-  .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
+  .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
     color: rgba(84, 136, 178, 0.87); }
-  .mdc-select:not(.mdc-select--disabled) .mdc-select__native-control:hover {
+  .mdc-select:not(.mdc-select--disabled) .mdc-select__native-control:hover, .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) .mdc-select__native-control:hover {
     border-bottom-color: rgba(0, 0, 0, 0.87); }
-  .mdc-select .mdc-floating-label--float-above {
+  .mdc-select .mdc-floating-label--float-above, .v-multi-select-container .v-multi-select .mdc-floating-label--float-above {
     transform: translateY(-70%) scale(0.75); }
-  .mdc-select .mdc-floating-label {
+  .mdc-select .mdc-floating-label, .v-multi-select-container .v-multi-select .mdc-floating-label {
     /* @noflip */
     left: 16px;
     /* @noflip */
     right: initial;
     top: 21px;
     pointer-events: none; }
-    [dir="rtl"] .mdc-select .mdc-floating-label, .mdc-select .mdc-floating-label[dir="rtl"] {
+    [dir="rtl"] .mdc-select .mdc-floating-label, [dir="rtl"] .v-multi-select-container .v-multi-select .mdc-floating-label, .v-multi-select-container [dir="rtl"] .v-multi-select .mdc-floating-label, .mdc-select .mdc-floating-label[dir="rtl"], .v-multi-select-container .v-multi-select .mdc-floating-label[dir="rtl"] {
       /* @noflip */
       left: initial;
       /* @noflip */
       right: 16px; }
-  .mdc-select.mdc-select--with-leading-icon .mdc-floating-label {
+  .mdc-select.mdc-select--with-leading-icon .mdc-floating-label, .v-multi-select-container .mdc-select--with-leading-icon.v-multi-select .mdc-floating-label {
     /* @noflip */
     left: 48px;
     /* @noflip */
     right: initial; }
-    [dir="rtl"] .mdc-select.mdc-select--with-leading-icon .mdc-floating-label, .mdc-select.mdc-select--with-leading-icon .mdc-floating-label[dir="rtl"] {
+    [dir="rtl"] .mdc-select.mdc-select--with-leading-icon .mdc-floating-label, [dir="rtl"] .v-multi-select-container .mdc-select--with-leading-icon.v-multi-select .mdc-floating-label, .v-multi-select-container [dir="rtl"] .mdc-select--with-leading-icon.v-multi-select .mdc-floating-label, .mdc-select.mdc-select--with-leading-icon .mdc-floating-label[dir="rtl"], .v-multi-select-container .mdc-select--with-leading-icon.v-multi-select .mdc-floating-label[dir="rtl"] {
       /* @noflip */
       left: initial;
       /* @noflip */
       right: 48px; }
-  .mdc-select.mdc-select--outlined .mdc-floating-label {
+  .mdc-select.mdc-select--outlined .mdc-floating-label, .v-multi-select-container .mdc-select--outlined.v-multi-select .mdc-floating-label {
     /* @noflip */
     left: 4px;
     /* @noflip */
     right: initial;
     top: 17px; }
-    [dir="rtl"] .mdc-select.mdc-select--outlined .mdc-floating-label, .mdc-select.mdc-select--outlined .mdc-floating-label[dir="rtl"] {
+    [dir="rtl"] .mdc-select.mdc-select--outlined .mdc-floating-label, [dir="rtl"] .v-multi-select-container .mdc-select--outlined.v-multi-select .mdc-floating-label, .v-multi-select-container [dir="rtl"] .mdc-select--outlined.v-multi-select .mdc-floating-label, .mdc-select.mdc-select--outlined .mdc-floating-label[dir="rtl"], .v-multi-select-container .mdc-select--outlined.v-multi-select .mdc-floating-label[dir="rtl"] {
       /* @noflip */
       left: initial;
       /* @noflip */
       right: 4px; }
-  .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label {
+  .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label, .v-multi-select-container .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label {
     /* @noflip */
     left: 36px;
     /* @noflip */
     right: initial; }
-    [dir="rtl"] .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label, .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir="rtl"] {
+    [dir="rtl"] .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label, [dir="rtl"] .v-multi-select-container .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label, .v-multi-select-container [dir="rtl"] .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label, .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir="rtl"], .v-multi-select-container .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label[dir="rtl"] {
       /* @noflip */
       left: initial;
       /* @noflip */
       right: 36px; }
-    .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above {
+    .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above, .v-multi-select-container .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label--float-above {
       /* @noflip */
       left: 36px;
       /* @noflip */
       right: initial; }
-      [dir="rtl"] .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above, .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir="rtl"] {
+      [dir="rtl"] .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above, [dir="rtl"] .v-multi-select-container .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label--float-above, .v-multi-select-container [dir="rtl"] .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label--float-above, .mdc-select.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir="rtl"], .v-multi-select-container .mdc-select--outlined.mdc-select--with-leading-icon.v-multi-select .mdc-floating-label--float-above[dir="rtl"] {
         /* @noflip */
         left: initial;
         /* @noflip */
@@ -12577,11 +12579,11 @@ a.mdc-list-item {
       transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
   .mdc-select__native-control {
     padding-top: 20px; }
-  .mdc-select.mdc-select--focused .mdc-line-ripple::after {
+  .mdc-select.mdc-select--focused .mdc-line-ripple::after, .v-multi-select-container .mdc-select--focused.v-multi-select .mdc-line-ripple::after {
     transform: scale(1, 2);
     opacity: 1; }
 
-.mdc-select + .mdc-select-helper-text {
+.mdc-select + .mdc-select-helper-text, .v-multi-select-container .v-multi-select + .mdc-select-helper-text {
   margin-right: 12px;
   margin-left: 12px; }
 
@@ -12941,7 +12943,7 @@ select {
   line-height: 1.15;
   margin: 0; }
 
-.v-select {
+.v-select, .v-multi-select-container .v-multi-select {
   margin-top: 16px;
   margin-bottom: 8px; }
 
@@ -15885,7 +15887,7 @@ button.mdc-chip {
   /* @alternate */
   background-color: var(--mdc-theme-primary, #5488b2); }
 
-@keyframes mdc-checkbox-fade-in-background-ua911a2c8 {
+@keyframes mdc-checkbox-fade-in-background-u0555ed94 {
   0% {
     border-color: rgba(0, 0, 0, 0.54);
     background-color: transparent; }
@@ -15897,7 +15899,7 @@ button.mdc-chip {
     /* @alternate */
     background-color: var(--mdc-theme-primary, #5488b2); } }
 
-@keyframes mdc-checkbox-fade-out-background-ua911a2c8 {
+@keyframes mdc-checkbox-fade-out-background-u0555ed94 {
   0%,
   80% {
     border-color: #5488b2;
@@ -15913,12 +15915,12 @@ button.mdc-chip {
 .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-in-background-ua911a2c8; }
+  animation-name: mdc-checkbox-fade-in-background-u0555ed94; }
 
 .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-out-background-ua911a2c8; }
+  animation-name: mdc-checkbox-fade-out-background-u0555ed94; }
 
 .mdc-data-table .mdc-list-item__graphic {
   margin-right: 0px; }
@@ -15953,13 +15955,13 @@ button.mdc-chip {
 .v-paging__per-page-label {
   margin-right: 20px; }
 
-.v-paging__per-page-value .v-select {
+.v-paging__per-page-value .v-select, .v-paging__per-page-value .v-multi-select-container .v-multi-select, .v-multi-select-container .v-paging__per-page-value .v-multi-select {
   width: auto;
   height: auto; }
-  .v-paging__per-page-value .v-select .mdc-select__native-control {
+  .v-paging__per-page-value .v-select .mdc-select__native-control, .v-paging__per-page-value .v-multi-select-container .v-multi-select .mdc-select__native-control, .v-multi-select-container .v-paging__per-page-value .v-multi-select .mdc-select__native-control {
     padding-top: 0px;
     border-bottom: none; }
-    .v-paging__per-page-value .v-select .mdc-select__native-control:not(.mdc-select--disabled) {
+    .v-paging__per-page-value .v-select .mdc-select__native-control:not(.mdc-select--disabled), .v-paging__per-page-value .v-multi-select-container .v-multi-select .mdc-select__native-control:not(.mdc-select--disabled), .v-multi-select-container .v-paging__per-page-value .v-multi-select .mdc-select__native-control:not(.mdc-select--disabled) {
       color: rgba(0, 0, 0, 0.54); }
 
 .v-paging__per-page + .v-paging__count {
@@ -15988,6 +15990,39 @@ button.mdc-chip {
     border-bottom: none;
     border-top: none; }
 
+.v-multi-select-container .v-multi-select--options-list {
+  position: absolute;
+  width: 100%;
+  top: 71px;
+  border: 1px solid #C2C2C2;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  z-index: 1;
+  overflow: visible; }
+  .v-multi-select-container .v-multi-select--options-list > div {
+    display: block;
+    text-align: left; }
+    .v-multi-select-container .v-multi-select--options-list > div label {
+      line-height: 3em; }
+
+.v-multi-select-container .v-multi-select {
+  overflow: visible;
+  background-color: #FFFFFF; }
+  .v-multi-select-container .v-multi-select .v-multi-select--current-values {
+    padding: 19px;
+    overflow: hidden; }
+  .v-multi-select-container .v-multi-select:not(.mdc-select--disabled) {
+    background-color: #FFFFFF; }
+  .v-multi-select-container .v-multi-select:hover {
+    background: transparent; }
+    .v-multi-select-container .v-multi-select:hover .mdc-notched-outline .mdc-notched-outline__leading,
+    .v-multi-select-container .v-multi-select:hover .mdc-notched-outline .mdc-notched-outline__notch,
+    .v-multi-select-container .v-multi-select:hover .mdc-notched-outline .mdc-notched-outline__trailing {
+      border-color: rgba(0, 0, 0, 0.87); }
+
+.v-multi-select-container .mdc-select:before, .v-multi-select-container .v-multi-select:before {
+  background-color: transparent; }
+
 .v-expansion {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
   .v-expansion__summary {
@@ -18068,7 +18103,7 @@ i:focus.v-datetime--clear {
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
   font-size: 10px; }
 
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
   font-size: 18px; }
 
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {