@drecchia/tom-select 2.5.2-virtual-scroll.0 → 2.5.2-virtual-scroll.1

package/dist/js/tom-select.popular.js

@@ -1,5 +1,5 @@
 /**
-* Tom Select v2.5.2
+* Tom Select v2.5.2-virtual-scroll.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 

package/dist/js/tom-select.popular.min.js

@@ -1,5 +1,5 @@
 /**
-* Tom Select v2.5.2
+* Tom Select v2.5.2-virtual-scroll.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).TomSelect=e()}(this,function(){"use strict"

package/dist/scss/_dropdown.scss

@@ -0,0 +1,99 @@
+.#{$select-ns}-dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+	border: $select-dropdown-border;
+	background: $select-color-dropdown;
+	margin: 0.25rem 0 0;
+	border-top: 0 none;
+	box-sizing: border-box;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 10%);
+	border-radius: 0 0 $select-border-radius $select-border-radius;
+
+	[data-selectable] {
+		cursor: pointer;
+		overflow: hidden;
+
+		.highlight {
+			background: $select-color-highlight;
+			border-radius: 1px;
+		}
+	}
+
+	.option,
+	.optgroup-header,
+	.no-results,
+	.create {
+		padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+	}
+
+	.option, [data-disabled], [data-disabled] [data-selectable].option {
+		cursor: inherit;
+		opacity: 0.5;
+	}
+
+	[data-selectable].option {
+		opacity: 1;
+		cursor: pointer;
+	}
+
+	.optgroup:first-child .optgroup-header {
+		border-top: 0 none;
+	}
+
+	.optgroup-header {
+		color: $select-color-optgroup-text;
+		background: $select-color-optgroup;
+		cursor: default;
+	}
+
+	.active {
+		background-color: $select-color-dropdown-item-active;
+		color: $select-color-dropdown-item-active-text;
+
+		&.create {
+			color: $select-color-dropdown-item-create-active-text;
+		}
+	}
+
+	.create {
+		color: $select-color-dropdown-item-create-text;
+	}
+
+	.spinner{
+		display: inline-block;
+		width: $select-spinner-size;
+		height: $select-spinner-size;
+		margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+
+
+		&::after {
+			content: " ";
+			display: block;
+			width: $select-spinner-size * .8;
+			height: $select-spinner-size * .8;
+			margin: $select-spinner-size * .1;
+			border-radius: 50%;
+			border: $select-spinner-border-size solid $select-spinner-border-color;
+			border-color: $select-spinner-border-color transparent $select-spinner-border-color transparent;
+			animation: lds-dual-ring 1.2s linear infinite;
+		}
+		@keyframes lds-dual-ring {
+			0% {
+				transform: rotate(0deg);
+			}
+
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	overflow: hidden auto;
+	max-height: $select-max-height-dropdown;
+	scroll-behavior: smooth;
+}

package/dist/scss/_items.scss

@@ -0,0 +1,114 @@
+.#{$select-ns}-control {
+	border: $select-border;
+	padding: $select-padding-y $select-padding-x;
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+	box-sizing: border-box;
+	box-shadow: $select-shadow-input;
+	border-radius: $select-border-radius;
+	display: flex;
+	flex-wrap: wrap;
+
+	.#{$select-ns}-wrapper.multi.has-items & {
+		$padding-x: $select-padding-x;
+		$padding-top: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
+		$padding-bottom: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
+
+		padding: $padding-top $padding-x $padding-bottom;
+	}
+
+	.full & {
+		background-color: $select-color-input-full;
+	}
+
+	.disabled &,
+	.disabled & * {
+		cursor: default !important;
+	}
+
+	.focus & {
+		box-shadow: $select-shadow-input-focus;
+	}
+
+	> * {
+		vertical-align: baseline;
+		display: inline-block;
+	}
+
+	.#{$select-ns}-wrapper.multi & > div {
+		cursor: pointer;
+		margin: 0 $select-margin-item-x $select-margin-item-y 0;
+		padding: $select-padding-item-y $select-padding-item-x;
+		background: $select-color-item;
+		color: $select-color-item-text;
+		border: $select-width-item-border solid $select-color-item-border;
+		overflow: auto;
+
+		&.active {
+			background: $select-color-item-active;
+			color: $select-color-item-active-text;
+			border: $select-width-item-border solid $select-color-item-active-border;
+		}
+	}
+
+	.#{$select-ns}-wrapper.multi.disabled & > div {
+		&, &.active {
+			color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
+			background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
+			border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+		}
+	}
+
+	> input {
+		flex: 1 1 auto;
+		min-width: 7rem;
+		display: inline-block !important;
+		padding: 0 !important;
+		min-height: 0 !important;
+		max-height: none !important;
+		max-width: 100% !important;
+		margin: 0 !important;
+		text-indent: 0 !important;
+		border: 0 none !important;
+		background: none !important;
+		line-height: inherit !important;
+		user-select: auto !important;
+		box-shadow: none !important;
+
+		&::-ms-clear {
+			display: none;
+		}
+
+		&:focus { outline: none !important; }
+	}
+
+	.has-items & > input{
+		margin: $select-caret-margin !important;
+	}
+
+	&.rtl {
+		text-align: right;
+		&.single .#{$select-ns}-control:after {
+			left: $select-arrow-offset;
+			right: auto;
+		}
+		.#{$select-ns}-control > input {
+			margin: $select-caret-margin-rtl !important;
+		}
+	}
+
+	.disabled & {
+		opacity: $select-opacity-disabled;
+		background-color: $select-color-disabled;
+	}
+
+	// hide input, while retaining its focus, and maintain layout so users can still click on the space to bring the display back
+	// visibility:hidden can prevent the input from receiving focus
+	.input-hidden & > input {
+		opacity: 0;
+		position: absolute;
+		left: -10000px;
+	}
+}

package/dist/scss/plugins/checkbox_options.scss

@@ -0,0 +1,11 @@
+.plugin-checkbox_options:not(.rtl) {
+	.option input {
+		margin-right: 0.5rem;
+	}
+}
+
+.plugin-checkbox_options.rtl {
+	.option input {
+		margin-left: 0.5rem;
+	}
+}

package/dist/scss/plugins/clear_button.scss

@@ -0,0 +1,33 @@
+/* stylelint-disable function-name-case */
+
+.plugin-clear_button {
+	--ts-pr-clear-button: 1em;
+
+	.clear-button{
+		opacity: 0;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+		margin-right: 0 !important;
+		background: transparent !important;
+		transition: opacity 0.5s;
+		cursor: pointer;
+	}
+
+	&.form-select .clear-button,
+	&.single .clear-button {
+
+		@if variable-exists(select-padding-dropdown-item-x) {
+			right: Max(var(--ts-pr-caret), #{$select-padding-dropdown-item-x});
+		}
+		@else{
+			right: Max(var(--ts-pr-caret), calc(#{$select-padding-x} - #{$select-padding-item-x}));
+		}
+	}
+
+	&.focus.has-items .clear-button,
+	&:not(.disabled):hover.has-items .clear-button{
+		opacity: 1;
+	}
+}

package/dist/scss/plugins/drag_drop.scss

@@ -0,0 +1,10 @@
+.#{$select-ns}-wrapper.plugin-drag_drop {
+	.ts-dragging{
+		color:transparent !important;
+	}
+		
+	.ts-dragging > * {
+		visibility:hidden !important;
+	}
+
+}

package/dist/scss/plugins/dropdown_header.scss

@@ -0,0 +1,24 @@
+.#{$select-ns}-wrapper{
+	.dropdown-header {
+		position: relative;
+		padding: ($select-padding-dropdown-item-y * 2) $select-padding-dropdown-item-x;
+		border-bottom: 1px solid $select-color-border;
+		background: color-mix($select-color-dropdown, $select-color-border, 85%);
+		border-radius: $select-border-radius $select-border-radius 0 0;
+	}
+
+	.dropdown-header-close {
+		position: absolute;
+		right: $select-padding-dropdown-item-x;
+		top: 50%;
+		color: $select-color-text;
+		opacity: 0.4;
+		margin-top: -12px;
+		line-height: 20px;
+		font-size: 20px !important;
+	}
+
+	.dropdown-header-close:hover {
+		color: darken($select-color-text, 25%);
+	}
+}

package/dist/scss/plugins/dropdown_input.scss

@@ -0,0 +1,43 @@
+.plugin-dropdown_input{
+
+	&.focus.dropdown-active .#{$select-ns}-control{
+		box-shadow: none;
+		border: $select-border;
+		@if variable-exists(input-box-shadow) {
+			box-shadow: $input-box-shadow;
+		}
+	}
+
+	.dropdown-input {
+		border: 1px solid $select-color-border;
+		border-width: 0 0 1px;
+		display: block;
+		padding: $select-padding-y $select-padding-x;
+		box-shadow: $select-shadow-input;
+		width: 100%;
+		background: transparent;
+	}
+
+	&.focus .#{$select-ns}-dropdown .dropdown-input{
+		@if variable-exists(input-focus-border-color) {
+			border-color: $input-focus-border-color;
+			outline: 0;
+			@if $enable-shadows {
+				box-shadow: $input-box-shadow, $input-focus-box-shadow;
+			} @else {
+				box-shadow: $input-focus-box-shadow;
+			}
+		}
+	}
+
+	.items-placeholder{
+		border: 0 none !important;
+		box-shadow: none !important;
+		width: 100%;
+	}
+
+	&.has-items .items-placeholder,
+	&.dropdown-active .items-placeholder{
+		display: none !important;
+	}
+}

package/dist/scss/plugins/input_autogrow.scss

@@ -0,0 +1,15 @@
+.#{$select-ns}-wrapper.plugin-input_autogrow{
+
+	&.has-items .#{$select-ns}-control > input {
+		min-width: 0;
+	}
+	
+	&.has-items.focus .#{$select-ns}-control > input {
+		flex: none;
+		min-width: 4px;
+
+		&::placeholder {
+			color:transparent;
+		}
+	}
+}

package/dist/scss/plugins/optgroup_columns.scss

@@ -0,0 +1,25 @@
+.#{$select-ns}-dropdown.plugin-optgroup_columns {
+	.ts-dropdown-content{
+		display: flex;
+	}
+
+	.optgroup {
+		border-right: 1px solid #f2f2f2;
+		border-top: 0 none;
+		flex-grow: 1;
+		flex-basis: 0;
+		min-width: 0;
+	}
+
+	.optgroup:last-child {
+		border-right: 0 none;
+	}
+
+	.optgroup::before {
+		display: none;
+	}
+
+	.optgroup-header {
+		border-top: 0 none;
+	}
+}

package/dist/scss/plugins/remove_button.scss

@@ -0,0 +1,70 @@
+.#{$select-ns}-wrapper.plugin-remove_button{
+	.item {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.item .remove {
+		color: inherit;
+		text-decoration: none;
+		vertical-align: middle;
+		display: inline-block;
+		padding: 0 $select-padding-item-x;
+		border-radius: 0 2px 2px 0;
+		box-sizing: border-box;
+	}
+
+	.item .remove:hover {
+		background: rgba(0, 0, 0, 5%);
+	}
+
+	&.disabled .item .remove:hover {
+		background: none;
+	}
+
+
+	.remove-single {
+		position: absolute;
+		right: 0;
+		top: 0;
+		font-size: 23px;
+	}
+}
+
+.#{$select-ns}-wrapper.plugin-remove_button:not(.rtl){
+	.item {
+		padding-right:	0 !important;
+	}
+
+	.item .remove {
+		border-left: 1px solid $select-color-item-border;
+		margin-left: $select-padding-item-x;
+	}
+
+	.item.active .remove {
+		border-left-color: $select-color-item-active-border;
+	}
+
+	&.disabled .item .remove {
+		border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+	}
+}
+
+.#{$select-ns}-wrapper.plugin-remove_button.rtl {
+	.item {
+		padding-left:	0 !important;
+	}
+	
+	.item .remove {
+		border-right: 1px solid $select-color-item-border;
+		margin-right: $select-padding-item-x;
+	}
+
+	.item.active .remove {
+		border-right-color: $select-color-item-active-border;
+	}
+
+	&.disabled .item .remove {
+		border-right-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+	}
+}

package/dist/scss/tom-select.bootstrap4.scss

@@ -0,0 +1,218 @@
+/**
+ * Tom Select Bootstrap 4
+ */
+
+// Import Bootstrap 4 functions and variables
+$state-valid: map-get($form-validation-states,'valid') !default;
+$state-invalid: map-get($form-validation-states,'invalid') !default;
+$enable-shadows: true !default;
+$select-font-family: inherit !default;
+$select-font-size: inherit !default;
+$select-line-height: $input-btn-line-height !default; // formerly line-height-computed
+
+$select-color-text: gray("800") !default; // $gray-800
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !default;
+$select-color-input-error: map-get($state-invalid,'color') !default;
+$select-color-input-error-focus: darken($select-color-input-error, 10%) !default;
+$select-color-disabled: $input-disabled-bg !default;
+$select-color-item: #efefef !default;
+$select-color-item-border: $border-color !default;
+$select-color-item-active: $component-active-bg !default;
+$select-color-item-active-text: #fff !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0%) !default;
+$select-color-optgroup: $dropdown-bg !default;
+$select-color-optgroup-text: $dropdown-header-color !default;
+$select-color-optgroup-border: $dropdown-divider-bg !default;
+$select-color-dropdown: $dropdown-bg !default;
+$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 80%) !default;
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-opacity-disabled: 0.5 !default;
+$select-border: 1px solid $input-border-color !default;
+$select-border-radius: $input-border-radius !default;
+$select-width-item-border: 0 !default;
+$select-padding-x: $input-btn-padding-x !default;
+$select-padding-y: $input-btn-padding-y !default;
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
+$select-padding-dropdown-item-y: 3px !default;
+$select-padding-item-x: 5px !default;
+$select-padding-item-y: 1px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
+$select-arrow-size: 5px !default;
+$select-arrow-color: $select-color-text !default;
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
+
+@import "tom-select";
+@include ts-caret;
+
+.#{$select-ns}-wrapper.form-control,
+.#{$select-ns}-wrapper.form-select {
+	padding:0 !important;
+}
+
+.#{$select-ns}-dropdown,
+.#{$select-ns}-dropdown.form-control {
+	height: auto;
+	padding: 0;
+	z-index: $zindex-dropdown;
+	background: $select-color-dropdown;
+	border: 1px solid $dropdown-border-color; // $dropdown-fallback-border
+	border-radius: $border-radius;
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
+}
+
+.#{$select-ns}-dropdown {
+	.optgroup-header {
+		font-size: $font-size-sm;
+		line-height: $line-height-base;
+	}
+
+	.optgroup:first-child::before {
+		display: none;
+	}
+
+	.optgroup::before {
+		content: ' ';
+		display: block;
+		height: 0;
+		margin: $dropdown-divider-margin-y 0;
+		overflow: hidden;
+		border-top: 1px solid $dropdown-divider-bg;
+		margin-left: $select-padding-dropdown-item-x * -1;
+		margin-right: $select-padding-dropdown-item-x * -1;
+	}
+
+	.create {
+		padding-left: $select-padding-dropdown-item-x;
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	padding: 5px 0;
+}
+
+.#{$select-ns}-control {
+	min-height: $input-height;
+	@include box-shadow($input-box-shadow);
+	@include transition($input-transition);
+
+	display:flex;
+	align-items: center;
+
+	.focus & {
+		border-color: $input-focus-border-color;
+		outline: 0;
+		@if $enable-shadows {
+			box-shadow: $input-box-shadow, $input-focus-box-shadow;
+		} @else {
+			box-shadow: $input-focus-box-shadow;
+		}
+	}
+	
+	input::placeholder {
+		color: #a7aeb8;
+		opacity: 1;
+	}
+}
+
+.is-invalid .#{$select-ns}-control,
+.was-validated .invalid .#{$select-ns}-control{
+	border-color: $select-color-input-error;
+
+	.focus & {
+		border-color: $select-color-input-error-focus;
+		box-shadow: 0 0 0 $input-focus-width rgba($select-color-input-error, .25);
+	}
+}
+
+.is-valid .#{$select-ns}-control {
+	$_color: map-get($state-valid,'color');
+
+	border-color: $_color;
+
+	.focus & {
+		border-color: $_color;
+		box-shadow: 0 0 0 $input-focus-width rgba($_color, .25);
+	}
+}
+
+.#{$select-ns}-wrapper {
+	.input-group-sm > &,
+	&.form-control-sm {
+
+		.#{$select-ns}-control {
+			min-height: $input-height-sm;
+			padding: 0 .75rem;
+
+			// padding: $input-padding-y-sm $input-padding-x-sm;
+			@include border-radius($input-border-radius-sm);
+			@include font-size($input-font-size-sm);
+		}
+
+		&.has-items .#{$select-ns}-control {
+			min-height: $input-height-sm !important;
+			font-size: $input-font-size-sm;
+			padding-bottom: 0;
+		}
+	}
+
+	.input-group-sm > &.multi.has-items,
+	&.form-control-sm.multi.has-items {
+		.#{$select-ns}-control {
+			// padding-top = ($input-height-sm - border-width - item-height) / 2;
+			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
+			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
+			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+
+			padding-top: $ts-select-padding-sm !important;
+		}
+	}
+
+	&.multi {
+		&.has-items .#{$select-ns}-control {
+			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+
+			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
+		}
+		.#{$select-ns}-control > div {
+			border-radius: calc(#{$select-border-radius} - 1px);
+		}
+	}
+
+	.input-group-lg > & >,
+	&.form-control-lg {
+	.#{$select-ns}-control {
+			min-height: $input-height-lg;
+			@include border-radius($input-border-radius-lg);
+			@include font-size($input-font-size-lg);
+		}
+	}
+}
+
+.form-control.#{$select-ns}-wrapper {
+	padding: 0;
+	height: auto;
+	border: none;
+	background: none;
+	border-radius: 0;
+}
+
+.input-group {
+	& > .#{$select-ns}-wrapper {
+		flex-grow: 1;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}