jsl-ui 9.18.3 → 9.18.4

package/lib/ui/drop.down.css

@@ -0,0 +1,472 @@
+/*!
+ * Selectr 2.4.12
+ * http://mobius.ovh/docs/selectr
+ *
+ * Released under the MIT license
+ */
+.jsl-container {
+	position: relative;
+}
+
+.jsl-container li {
+	list-style: none;
+}
+
+.jsl-hidden {
+	position: absolute;
+	overflow: hidden;
+	clip: rect(0px, 0px, 0px, 0px);
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0 none;
+}
+
+.jsl-visible {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	z-index: 11;
+}
+
+.jsl-desktop.multiple .jsl-visible {
+	display: none;
+}
+
+.jsl-desktop.multiple.native-open .jsl-visible {
+	top: 100%;
+	min-height: 200px !important;
+	height: auto;
+	opacity: 1;
+	display: block;
+}
+
+.jsl-container.multiple.jsl-mobile .jsl-selected {
+	z-index: 0;
+}
+
+.jsl-selected {
+	position: relative;
+	z-index: 1;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 4px 22px 4px 4px;
+	cursor: pointer;
+	border: 1px solid #999;
+	border-radius: 2px;
+	background-color: #fff;
+}
+
+.jsl-selected::before {
+	position: absolute;
+	top: 50%;
+	right: 10px;
+	width: 0;
+	height: 0;
+	content: '';
+	-o-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+	-ms-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+	-moz-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+	-webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+			transform: rotate(0deg) translate3d(0px, -50%, 0px);
+	border-width: 4px 4px 0 4px;
+	border-style: solid;
+	border-color: #6c7a86 transparent transparent;
+}
+
+.jsl-container.open .jsl-selected::before,
+.jsl-container.native-open .jsl-selected::before {
+	border-width: 0 4px 4px 4px;
+	border-style: solid;
+	border-color: transparent transparent #6c7a86;
+}
+
+.jsl-label {
+	display: none;
+	overflow: hidden;
+	width: 100%;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.jsl-placeholder {
+	color: #6c7a86;
+}
+
+.jsl-tags {
+	margin: 0;
+	padding: 0;
+	white-space: normal;
+}
+
+.has-selected .jsl-tags {
+	margin: 0 0 -2px;
+}
+
+.jsl-tag {
+	list-style: none;
+	position: relative;
+	float: left;
+	padding: 0px 25px 0px 8px;
+	margin: 0 2px 2px 0;
+	cursor: default;
+	color: #fff;
+	border: medium none;
+	border-radius: 10px;
+	background: #acb7bf none repeat scroll 0 0;
+}
+
+.jsl-container.multiple.has-selected .jsl-selected {
+	padding: 2px 28px 2px 2px;
+}
+
+.jsl-options-container {
+	position: absolute;
+	z-index: 10000;
+	top: calc(100% - 1px);
+	left: 0;
+	display: none;
+	box-sizing: border-box;
+	width: 100%;
+	border-width: 0 1px 1px;
+	border-style: solid;
+	border-color: transparent #999 #999;
+	border-radius: 0 0 3px 3px;
+	background-color: #fff;
+}
+
+.jsl-container.open .jsl-options-container {
+	display: block;
+}
+
+.jsl-input-container {
+	position: relative;
+	display: none;
+}
+
+.jsl-clear,
+.jsl-input-clear,
+.jsl-tag-remove {
+	position: absolute;
+	top: 50%;
+	right: 22px;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	cursor: pointer;
+	-o-transform: translate3d(0px, -50%, 0px);
+	-ms-transform: translate3d(0px, -50%, 0px);
+	-moz-transform: translate3d(0px, -50%, 0px);
+	-webkit-transform: translate3d(0px, -50%, 0px);
+			transform: translate3d(0px, -50%, 0px);
+	border: medium none;
+	background-color: transparent;
+	z-index: 11;
+}
+
+.jsl-clear,
+.jsl-input-clear {
+	display: none;
+}
+
+.jsl-container.has-selected .jsl-clear,
+.jsl-input-container.active .jsl-input-clear {
+	display: block;
+}
+
+.jsl-selected .jsl-tag-remove {
+	right: 2px;
+}
+
+.jsl-clear::before,
+.jsl-clear::after,
+.jsl-input-clear::before,
+.jsl-input-clear::after,
+.jsl-tag-remove::before,
+.jsl-tag-remove::after {
+	position: absolute;
+	top: 5px;
+	left: 9px;
+	width: 2px;
+	height: 10px;
+	content: ' ';
+	background-color: #6c7a86;
+}
+
+.jsl-tag-remove::before,
+.jsl-tag-remove::after {
+	top: 4px;
+	width: 3px;
+	height: 12px;
+	background-color: #fff;
+}
+
+.jsl-clear:before,
+.jsl-input-clear::before,
+.jsl-tag-remove::before {
+	-o-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+
+.jsl-clear:after,
+.jsl-input-clear::after,
+.jsl-tag-remove::after {
+	-o-transform: rotate(-45deg);
+	-ms-transform: rotate(-45deg);
+	-moz-transform: rotate(-45deg);
+	-webkit-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+}
+
+.jsl-input-container.active,
+.jsl-input-container.active .jsl-clear {
+	display: block;
+}
+
+.jsl-input {
+	top: 5px;
+	left: 5px;
+	box-sizing: border-box;
+	width: calc(100% - 30px);
+	margin: 4px 5px;
+	padding: 7px 30px 7px 9px;
+	border: 1px solid #999;
+	border-radius: 3px;
+}
+
+.jsl-notice {
+	display: none;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 8px 16px;
+	border-top: 1px solid #999;
+	border-radius: 0 0 3px 3px;
+	background-color: #fff;
+}
+
+.jsl-container.notice .jsl-notice {
+	display: block;
+}
+
+.jsl-container.notice .jsl-selected {
+	border-radius: 3px 3px 0 0;
+}
+
+.jsl-options {
+	position: relative;
+	top: calc(100% + 2px);
+	display: none;
+	overflow-x: auto;
+	overflow-y: auto;
+	max-height: 200px;
+	margin: 0;
+	padding: 0;
+}
+
+.jsl-container.open .jsl-options,
+.jsl-container.open .jsl-input-container,
+.jsl-container.notice .jsl-options-container {
+	display: block;
+}
+
+.jsl-option {
+	position: relative;
+	display: block;
+	padding: 3px 4px 4px 2px;
+	list-style: outside none none;
+	cursor: pointer;
+	font-weight: normal;
+}
+
+.jsl-options.optgroups > .jsl-option {
+	padding-left: 25px;
+}
+
+.jsl-optgroup {
+	font-weight: bold;
+	padding: 0;
+}
+
+.jsl-optgroup--label {
+	font-weight: bold;
+	margin-top: 10px;
+	padding: 5px 15px;
+}
+
+.jsl-match {
+	text-decoration: underline;
+}
+
+.jsl-option.selected {
+	background-color: #ddd;
+}
+
+.jsl-option.active {
+	color: #fff;
+	background-color: #5897fb;
+}
+
+.jsl-option.disabled {
+	opacity: 0.4;
+}
+
+.jsl-option.excluded {
+	display: none;
+}
+
+.jsl-container.open .jsl-selected {
+	border-color: #999 #999 transparent #999;
+	border-radius: 3px 3px 0 0;
+}
+
+.jsl-container.open .jsl-selected::after {
+	-o-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+	-ms-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+	-moz-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+	-webkit-transform: rotate(180deg) translate3d(0px, 50%, 0px);
+	transform: rotate(180deg) translate3d(0px, 50%, 0px);
+}
+
+.jsl-disabled {
+	opacity: .6;
+}
+
+.jsl-empty,
+.has-selected .jsl-placeholder {
+	display: none;
+}
+
+.has-selected .jsl-label {
+	display: block;
+}
+
+/* TAGGABLE */
+.taggable .jsl-selected {
+	padding: 4px 28px 4px 4px;
+}
+
+.taggable .jsl-selected::after {
+	display: table;
+	content: " ";
+	clear: both;
+}
+
+.taggable .jsl-label {
+	width: auto;
+}
+
+.taggable .jsl-tags {
+	float: left;
+	display: block;
+}
+
+.taggable .jsl-placeholder {
+	display: none;
+}
+
+.input-tag {
+	float: left;
+	min-width: 90px;
+	width: auto;
+}
+
+.jsl-tag-input {
+	border: medium none;
+	padding: 3px 10px;
+	width: 100%;
+	font-family: inherit;
+	font-weight: inherit;
+	font-size: inherit;
+}
+
+.jsl-input-container.loading::after {
+	position: absolute;
+	top: 50%;
+	right: 20px;
+	width: 20px;
+	height: 20px;
+	content: '';
+	-o-transform: translate3d(0px, -50%, 0px);
+	-ms-transform: translate3d(0px, -50%, 0px);
+	-moz-transform: translate3d(0px, -50%, 0px);
+	-webkit-transform: translate3d(0px, -50%, 0px);
+	transform: translate3d(0px, -50%, 0px);
+
+	-o-transform-origin: 50% 0 0;
+	-ms-transform-origin: 50% 0 0;
+	-moz-transform-origin: 50% 0 0;
+	-webkit-transform-origin: 50% 0 0;
+	transform-origin: 50% 0 0;
+
+	-moz-animation: 500ms linear 0s normal forwards infinite running spin;
+	-webkit-animation: 500ms linear 0s normal forwards infinite running spin;
+	animation: 500ms linear 0s normal forwards infinite running spin;
+	border-width: 3px;
+	border-style: solid;
+	border-color: #aaa #ddd #ddd;
+	border-radius: 50%;
+}
+
+@-webkit-keyframes spin {
+	0% {
+		-webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+		transform: rotate(0deg) translate3d(0px, -50%, 0px);
+	}
+	100% {
+		-webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px);
+		transform: rotate(360deg) translate3d(0px, -50%, 0px);
+	}
+}
+@keyframes spin {
+	0% {
+		-webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
+		transform: rotate(0deg) translate3d(0px, -50%, 0px);
+	}
+	100% {
+		-webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px);
+		transform: rotate(360deg) translate3d(0px, -50%, 0px);
+	}
+}
+.jsl-container.open.inverted .jsl-selected {
+	border-color: transparent #999 #999;
+	border-radius: 0 0 3px 3px;
+}
+
+.jsl-container.inverted .jsl-options-container {
+	border-width: 1px 1px 0;
+	border-color: #999 #999 transparent;
+	border-radius: 3px 3px 0 0;
+	background-color: #fff;
+}
+
+.jsl-container.inverted .jsl-options-container {
+	top: auto;
+	bottom: calc(100% - 1px);
+}
+
+.jsl-container ::-webkit-input-placeholder {
+	color: #6c7a86;
+	opacity: 1;
+}
+
+.jsl-container ::-moz-placeholder {
+	color: #6c7a86;
+	opacity: 1;
+}
+
+.jsl-container :-ms-input-placeholder {
+	color: #6c7a86;
+	opacity: 1;
+}
+
+.jsl-container ::placeholder {
+	color: #6c7a86;
+	opacity: 1;
+}

package/lib/ui/drop.down.d.ts

@@ -0,0 +1,52 @@
+/*!
+ * Selectr 2.4.12
+ * http://mobius.ovh/docs/selectr
+ *
+ * Released under the MIT license
+ */
+import "./drop.down.css";
+export interface IDropDown {
+    setValue: (value: string | string[]) => void;
+    getValue: (toObject?: boolean, toJson?: boolean) => string | string[];
+    add: (data: {
+        value: string;
+        text: string;
+    } | Array<{
+        value: string;
+        text: string;
+    }>, skipDuplicate?: boolean) => void;
+    remove: (element: number | string | any[]) => void;
+    removeAll: () => void;
+    serialize: (toJson?: boolean) => any;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    clear: () => void;
+    disable: (submitValue?: boolean) => void;
+    enable: () => void;
+    destroy: () => void;
+}
+export interface IDropDownOptions {
+    defaultSelected?: boolean;
+    multiple?: boolean;
+    data?: any[];
+    pagination?: number;
+    sortSelected?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    allowDeselect?: boolean;
+    width?: number | string;
+    placeholder?: string;
+    taggable?: boolean;
+    maxSelections?: number;
+    tagSeperators?: string[];
+    tagPlaceholder?: string;
+    renderOption?: (option: any) => string;
+    renderSelection?: (option: any) => string;
+    closeOnScroll?: boolean;
+    customClass?: string;
+    messages?: {
+        [index: string]: string;
+    };
+}
+export declare let DropDown: (input: string | HTMLElement, config?: IDropDownOptions) => IDropDown;