@itfin/components 1.0.116 → 1.2.1

package/src/components/button/Button.vue

@@ -2,6 +2,53 @@
 @import '../../assets/scss/main';
 //@import '~bootstrap/scss/buttons';
 
+:root {
+  --itf-button-basic-bg-color: rgba(9, 30, 66, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .support-dark {
+    --itf-button-basic-bg-color: rgba(246, 225, 189, 0.08);
+
+    .itf-button.btn {
+      &.btn-secondary {
+        &, &.disabled {
+          background-color: $dark-btn-secondary-color;
+          border-color: $dark-btn-secondary-color;
+        }
+
+        &:active, &:focus {
+          background-color: lighten($dark-btn-secondary-color, 5%);
+          border-color: lighten($dark-btn-secondary-color, 5%);
+        }
+        &:hover {
+          background-color: lighten($dark-btn-secondary-color, 10%);
+          border-color: lighten($dark-btn-secondary-color, 10%);
+        }
+      }
+      &.btn-primary {
+        &, &.disabled {
+          background-color: $dark-btn-primary-color;
+          border-color: $dark-btn-primary-color;
+          color: $body-color;
+        }
+
+        &:active, &:focus {
+          color: $body-color;
+          background-color: darken($dark-btn-primary-color, 5%);
+          border-color: darken($dark-btn-primary-color, 5%);
+          box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
+        }
+        &:hover {
+          color: $body-color;
+          background-color: darken($dark-btn-primary-color, 10%);
+          border-color: darken($dark-btn-primary-color, 10%);
+        }
+      }
+    }
+  }
+}
+
 .itf-button.btn {
   display: inline-flex;
   align-items: center;
@@ -42,11 +89,7 @@
   }
   &.btn-basic {
     &:hover, &.active {
-      background-color: rgba(9, 30, 66, 0.08);
-
-      @media (prefers-color-scheme: notdark) {
-        background-color: rgba(246, 225, 189, 0.08);
-      }
+      background-color: var(--itf-button-basic-bg-color);
     }
   }
   &.btn-icon {
@@ -68,43 +111,6 @@
       }
     }
   }
-
-  @media (prefers-color-scheme: notdark) {
-    &.btn-secondary {
-      &, &.disabled {
-        background-color: $dark-btn-secondary-color;
-        border-color: $dark-btn-secondary-color;
-      }
-
-      &:active, &:focus {
-        background-color: lighten($dark-btn-secondary-color, 5%);
-        border-color: lighten($dark-btn-secondary-color, 5%);
-      }
-      &:hover {
-        background-color: lighten($dark-btn-secondary-color, 10%);
-        border-color: lighten($dark-btn-secondary-color, 10%);
-      }
-    }
-    &.btn-primary {
-      &, &.disabled {
-        background-color: $dark-btn-primary-color;
-        border-color: $dark-btn-primary-color;
-        color: $body-color;
-      }
-
-      &:active, &:focus {
-        color: $body-color;
-        background-color: darken($dark-btn-primary-color, 5%);
-        border-color: darken($dark-btn-primary-color, 5%);
-        box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
-      }
-      &:hover {
-        color: $body-color;
-        background-color: darken($dark-btn-primary-color, 10%);
-        border-color: darken($dark-btn-primary-color, 10%);
-      }
-    }
-  }
 }
 </style>
 <!---template>

package/src/components/datepicker/DatePicker.vue

@@ -54,6 +54,16 @@
 @import '../../assets/scss/directives/tooltip';
 @import '../../assets/scss/input-addon';
 
+@media (prefers-color-scheme: dark) {
+  .support-dark .itf-datepicker {
+    &__dropdown {
+      background-color: $dark-body-bg;
+      border-color: $dark-border-color;
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+  }
+}
+
 .itf-datepicker {
   &.with-addon .addon-end {
     pointer-events: all;
@@ -75,12 +85,6 @@
       // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $input-btn-focus-box-shadow;
     }
-
-    @media (prefers-color-scheme: notdark) {
-      background-color: $dark-body-bg;
-      border-color: $dark-border-color;
-      box-shadow: 0 0 0 2px $dark-input-focus-border;
-    }
   }
 }
 </style>

package/src/components/datepicker/datepicker.scss

@@ -1,7 +1,29 @@
 @import '../../assets/scss/variables';
-/* -------------------------------------------------
-    Datepicker vars
-   ------------------------------------------------- */
+
+
+
+@media (prefers-color-scheme: dark) {
+  .support-dark .air-datepicker {
+    --adp-background-color: #{$dark-body-bg};
+    --adp-color-current-date: #{$dark-primary};
+    --adp-cell-background-color-selected: #{$dark-primary};
+    --adp-cell-background-color-selected-hover: #{lighten($dark-primary, 10%)};
+    --adp-day-name-color: #bfbfbf;
+    --adp-color: #dedede;
+    --adp-color-other-month: #4a4a4a;
+    --adp-cell-background-color-in-range: #{$dark-input-focus-border-color};
+    --adp-background-color-hover: #{darken($dark-primary, 25%)};
+    --adp-border-color-inner: #{lighten($dark-body-bg, 25%)};
+
+    --adp-background-color-selected-other-month-focused: #{$dark-primary};
+    --adp-background-color-selected-other-month: #{lighten($dark-primary, 10%)};
+
+    .air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- {
+      color: $dark-body-bg;
+    }
+  }
+}
+
 .air-datepicker {
   --adp-width: 246px; // Day cell width will be equal to 34px
   --adp-z-index: 100;
@@ -39,26 +61,6 @@
   //--adp-border-color-inline: #d7d7d7;
   --adp-border-color-inline: transparent;
 
-  @media (prefers-color-scheme: notdark) {
-    --adp-background-color: #{$dark-body-bg};
-    --adp-color-current-date: #{$dark-primary};
-    --adp-cell-background-color-selected: #{$dark-primary};
-    --adp-cell-background-color-selected-hover: #{lighten($dark-primary, 10%)};
-    --adp-day-name-color: #bfbfbf;
-    --adp-color: #dedede;
-    --adp-color-other-month: #4a4a4a;
-    --adp-cell-background-color-in-range: #{$dark-input-focus-border-color};
-    --adp-background-color-hover: #{darken($dark-primary, 25%)};
-    --adp-border-color-inner: #{lighten($dark-body-bg, 25%)};
-
-    --adp-background-color-selected-other-month-focused: #{$dark-primary};
-    --adp-background-color-selected-other-month: #{lighten($dark-primary, 10%)};
-
-    .air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- {
-      color: $dark-body-bg;
-    }
-  }
-
   --adp-nav-height: 32px;
   --adp-nav-arrow-color: var(--adp-color-secondary);
   --adp-nav-color-secondary: var(--adp-color-secondary);

package/src/components/modal/Modal.vue

@@ -120,7 +120,7 @@ class itfModal extends Vue {
       this.$el.parentNode.removeChild(this.$el);
       document.body.appendChild(this.$el); // should append only to body
     }
-    const { default: Modal } = await import('bootstrap/js/src/modal.js');
+    const { default: Modal } = await import('bootstrap/js/src/modal');
     this.modalEl = new Modal(this.$el, { backdrop: 'static' });
     this.onVisibleChanged(this.value);
     this.bindEvents();

package/src/components/pdf-viewer/pdfjs-dist/cmaps/CNS2-V.bcmap

@@ -1,3 +1,3 @@
-�RCopyright 1990-2009 Adobe Systems Incorporated.
+�RCopyright 1990-2009 Adobe Systems Incorporated.
 All rights reserved.
-See ./LICENSE�CNS2-H
+See ./LICENSE�CNS2-H

package/src/components/pdf-viewer/pdfjs-dist/cmaps/ETenms-B5-H.bcmap

@@ -1,3 +1,3 @@
-�RCopyright 1990-2009 Adobe Systems Incorporated.
+�RCopyright 1990-2009 Adobe Systems Incorporated.
 All rights reserved.
-See ./LICENSE�	ETen-B5-H`
 ^

+See ./LICENSE�	ETen-B5-H`
 ^

package/src/components/pdf-viewer/styles/_colors.scss

@@ -35,8 +35,8 @@
   --pdf-button-hover-bg-color: #{mix($primary, $body-bg, 50%)};
 }
 
-@media (prefers-color-scheme: notdark) {
-  .pdf-app {
+@media (prefers-color-scheme: dark) {
+  .support-dark .pdf-app {
     --pdf-app-background-color: #{$pdf-app-background-color-light};
     --pdf-sidebar-content-color: #{$pdf-sidebar-content-color-light};
     --pdf-toolbar-sidebar-color: #{$pdf-toolbar-sidebar-color-light};

package/src/components/popover/Popover.vue

@@ -47,7 +47,9 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';
+import {
+  Vue, Component, Prop, Watch, PropSync,
+} from 'vue-property-decorator';
 
 let globalModalIndex = 0; // base modal z-index
 
@@ -58,14 +60,18 @@ export default @Component({
 })
 class itfPopover extends Vue {
   @PropSync('visible') value;
+
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
+
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
+
   @Prop({ type: String, default: '' }) customClass;
 
   modalId = '';
+
   modalEl = null;
 
-  beforeDestroy () {
+  beforeDestroy() {
     this.hide();
   }
 
@@ -91,7 +97,7 @@ class itfPopover extends Vue {
       return;
     }
     const el = this.$refs.popover;
-    const { default: Popover } = await import('bootstrap/js/src/popover.js');
+    const { default: Popover } = await import('bootstrap/js/src/popover');
 
     const context = this.$el.closest('.itf-append-context') || document.body;
     this.modalEl = new Popover(this.$el, {

package/src/components/select/Dropdown.vue

@@ -55,7 +55,7 @@ export default @Component({
   name: 'itfDropdown',
   components: {}
 })
-class itfSegmentedControl extends Vue {
+class itfDropdown extends Vue {
   @Prop({ type: Number, default: undefined }) dropdownWidth;
   @Prop({ type: [Array, String, Number], default: undefined }) value;
   @Prop({ type: Boolean }) isValueEmpty;

package/src/components/select/Select.vue

@@ -146,8 +146,6 @@
 <style lang="scss">
 @import '../../assets/scss/variables';
 @import '../../assets/scss/directives/loading';
-@import '~bootstrap/scss/badge';
-@import '~bootstrap/scss/dropdown';
 @import '../../assets/scss/components/variables';
 @import '../../assets/scss/components/component';
 @import '../../assets/scss/components/animations';
@@ -248,7 +246,7 @@ export default {
      * Contains the currently selected value. Very similar to a
      * `value` attribute on an <input>. You can listen for changes
      * with the 'input' event.
-     * @type {Object||String||null}
+     * @type {Object|String|null}
      */
     // eslint-disable-next-line vue/require-default-prop,vue/require-prop-types
     value: {},
@@ -402,7 +400,7 @@ export default {
      * `selected-option` slots.
      *
      * @type {Function}
-     * @param  {Object || String} option
+     * @param  {Object | String} option
      * @return {String}
      */
     getOptionLabel: {
@@ -434,7 +432,7 @@ export default {
      * The result of this function *must* be unique.
      *
      * @type {Function}
-     * @param  {Object || String} option
+     * @param  {Object | String} option
      * @return {String}
      */
     getOptionKey: {
@@ -509,7 +507,7 @@ export default {
      * match the current search text. Used to determine
      * if the option should be displayed.
      * @type   {Function}
-     * @param  {Object || String} option
+     * @param  {Object | String} option
      * @param  {String} label
      * @param  {String} search
      * @return {Boolean}
@@ -1235,7 +1233,7 @@ export default {
      * Determine if an option exists
      * within this.optionList array.
      *
-     * @param  {Object || String} option
+     * @param  {Object | String} option
      * @return {boolean}
      */
     optionExists(option) {
@@ -1256,7 +1254,7 @@ export default {
      * If push-tags is true, push the
      * given option to `this.pushedTags`.
      *
-     * @param  {Object || String} option
+     * @param  {Object | String} option
      * @return {void}
      */
     pushTag(option) {

package/src/components/table/Table.vue

@@ -71,7 +71,7 @@
 <style lang="scss">
 @import '../../assets/scss/variables';
 
-html {
+:root {
   --itf-table-background-color: #fff;
   --itf-table-sticky-top: 0;
   --itf-table-border-color: #e1e4e7;
@@ -82,8 +82,10 @@ html {
   --itf-table-row-cursor: default;
   --itf-table-sticky-shadow1: rgb(0 0 0 / 16%);
   --itf-table-sticky-shadow2: rgb(0 0 0 / 23%);
+}
 
-  @media (prefers-color-scheme: notdark) {
+@media (prefers-color-scheme: dark) {
+  .support-dark {
     --itf-table-background-color: #{$dark-body-bg};
     --itf-table-border-color: #666;
     --itf-table-hover-color: #111;