@3t-transform/threeteeui 0.2.119 → 0.2.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/tttx-multiselect-box.cjs.entry.js +1 -1
- package/dist/cjs/tttx-select-box.cjs.entry.js +1 -1
- package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.css +3 -0
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.css +3 -0
- package/dist/components/tttx-multiselect-box.js +1 -1
- package/dist/components/tttx-select-box2.js +1 -1
- package/dist/esm/tttx-multiselect-box.entry.js +1 -1
- package/dist/esm/tttx-select-box.entry.js +1 -1
- package/dist/tttx/{p-3511ae30.entry.js → p-71a8ab3d.entry.js} +1 -1
- package/dist/tttx/{p-85a1e8cd.entry.js → p-d21cec88.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-fdc30724.js');
|
|
|
6
6
|
const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
|
|
7
7
|
require('./_commonjsHelpers-537d719a.js');
|
|
8
8
|
|
|
9
|
-
const tttxMultiselectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}";
|
|
9
|
+
const tttxMultiselectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector *{font-weight:400}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}";
|
|
10
10
|
|
|
11
11
|
const TttxMultiselectBox = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ const index = require('./index-fdc30724.js');
|
|
|
6
6
|
const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
|
|
7
7
|
require('./_commonjsHelpers-537d719a.js');
|
|
8
8
|
|
|
9
|
-
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
9
|
+
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.dropdown-selector *{font-weight:400}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
10
10
|
|
|
11
11
|
const TttxSelectBox = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './tttx-button2.js';
|
|
|
4
4
|
import { d as defineCustomElement$3 } from './tttx-icon2.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './tttx-standalone-input2.js';
|
|
6
6
|
|
|
7
|
-
const tttxMultiselectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}";
|
|
7
|
+
const tttxMultiselectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector *{font-weight:400}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}";
|
|
8
8
|
|
|
9
9
|
const TttxMultiselectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
|
|
|
3
3
|
import { d as defineCustomElement$2 } from './tttx-icon2.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './tttx-standalone-input2.js';
|
|
5
5
|
|
|
6
|
-
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
6
|
+
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.dropdown-selector *{font-weight:400}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
7
7
|
|
|
8
8
|
const TttxSelectBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
|
|
|
2
2
|
import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-68752a19.js';
|
|
3
3
|
import './_commonjsHelpers-9943807e.js';
|
|
4
4
|
|
|
5
|
-
const tttxMultiselectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}";
|
|
5
|
+
const tttxMultiselectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector *{font-weight:400}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}";
|
|
6
6
|
|
|
7
7
|
const TttxMultiselectBox = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g
|
|
|
2
2
|
import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-68752a19.js';
|
|
3
3
|
import './_commonjsHelpers-9943807e.js';
|
|
4
4
|
|
|
5
|
-
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
5
|
+
const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.dropdown-selector *{font-weight:400}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
|
|
6
6
|
|
|
7
7
|
const TttxSelectBox = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as o,h as i,F as e,H as s,g as n}from"./p-d490353a.js";import{p as d,d as r}from"./p-88ee2406.js";import"./p-112455b1.js";const l=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",3),this.toggleOpen=o(this,"toggleOpen",3),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){this.setOptionsData();const t=this._optionsData.filter((t=>t.value==this.selectedValue));this.selectedItem=t.length>0?t[0]:void 0}}async setOptionsData(){this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData}async setSelectedItem(t){if(!t)return;const o=this._optionsData.find((o=>o.value.toLowerCase()===t.toLowerCase()));o&&(this.selectedValue=o.value,this.selectedItem=o)}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onItemSelected(t){this.selectedItem=t,this.selectItemEvent.emit(this.selectedItem),this.handleBlur()}dropdownSelectorContent(){let t,o;const s=i("tttx-icon",{icon:this.open?"expand_less":"expand_more",color:"black"});let n=i("div",{class:"dropdown-selector-chevron"},s);return this.selectedItem?this.selectedItem.html?(t=i("div",{title:this.selectedItem.label,class:"truncated-text",innerHTML:this.selectedItem.html}),i(e,null,t,n)):(t=i("div",{title:this.selectedItem.label,class:"truncated-text"},this.selectedItem.label),this.selectedItem.description&&(o=i("div",{class:"description"},i("p",null,this.selectedItem.description)),n=i("div",{class:"dropdown-selector-chevron-offset"},s)),i(e,null,i("div",{class:"left-wrapper"},t,o),n)):(t=i("div",{class:"placeholder"},this.placeholder),i(e,null,t,n))}dropdownOption(t){const o=this.searchEnabled&&-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),e=this.selectedItem&&t.value===this.selectedItem.value;if(t.html){const s=d.sanitize(t.html,r);return i("div",{class:`dropdown-option ${o?"hidden":""} ${e?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label,innerHTML:s})}return t.description?i("div",{class:`dropdown-option ${o?"hidden":""} ${e?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},t.label,i("div",{class:"description-dd"},i("p",null,t.description))):i("div",{class:`dropdown-option ${o?"hidden":""} ${e?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},t.label)}handleSearchInput(t){this.searchTerm=t.target.value}calculateDropdownMenuOffset(){const t=this.el.shadowRoot.querySelector(".dropdown-selector"),o=this.dropdownSelector.getBoundingClientRect().bottom;let i=Math.min(368,36*this._optionsData.length)+8;this.searchEnabled&&(i+=52);const e=t.getBoundingClientRect();this.bodyOffset=o+i>window.innerHeight?{top:window.innerHeight-(i+16)+"px",position:"fixed",width:`${t.offsetWidth}px`,zIndex:"10"}:{position:"fixed",left:e.left,top:e.top,width:e.width-2+"px",zIndex:"10"}}render(){if(this.optionsData)return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",ref:t=>this.dropdownSelector=t,onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent()),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({width:`${this.dropdownSelector.offsetWidth}px`},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},this._optionsData.map((t=>this.dropdownOption(t))))))))}get el(){return n(this)}static get watchers(){return{optionsData:["setOptionsData"]}}};l.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{l as tttx_select_box}
|
|
1
|
+
import{r as t,c as o,h as i,F as e,H as s,g as n}from"./p-d490353a.js";import{p as d,d as r}from"./p-88ee2406.js";import"./p-112455b1.js";const l=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",3),this.toggleOpen=o(this,"toggleOpen",3),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){this.setOptionsData();const t=this._optionsData.filter((t=>t.value==this.selectedValue));this.selectedItem=t.length>0?t[0]:void 0}}async setOptionsData(){this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData}async setSelectedItem(t){if(!t)return;const o=this._optionsData.find((o=>o.value.toLowerCase()===t.toLowerCase()));o&&(this.selectedValue=o.value,this.selectedItem=o)}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onItemSelected(t){this.selectedItem=t,this.selectItemEvent.emit(this.selectedItem),this.handleBlur()}dropdownSelectorContent(){let t,o;const s=i("tttx-icon",{icon:this.open?"expand_less":"expand_more",color:"black"});let n=i("div",{class:"dropdown-selector-chevron"},s);return this.selectedItem?this.selectedItem.html?(t=i("div",{title:this.selectedItem.label,class:"truncated-text",innerHTML:this.selectedItem.html}),i(e,null,t,n)):(t=i("div",{title:this.selectedItem.label,class:"truncated-text"},this.selectedItem.label),this.selectedItem.description&&(o=i("div",{class:"description"},i("p",null,this.selectedItem.description)),n=i("div",{class:"dropdown-selector-chevron-offset"},s)),i(e,null,i("div",{class:"left-wrapper"},t,o),n)):(t=i("div",{class:"placeholder"},this.placeholder),i(e,null,t,n))}dropdownOption(t){const o=this.searchEnabled&&-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),e=this.selectedItem&&t.value===this.selectedItem.value;if(t.html){const s=d.sanitize(t.html,r);return i("div",{class:`dropdown-option ${o?"hidden":""} ${e?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label,innerHTML:s})}return t.description?i("div",{class:`dropdown-option ${o?"hidden":""} ${e?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},t.label,i("div",{class:"description-dd"},i("p",null,t.description))):i("div",{class:`dropdown-option ${o?"hidden":""} ${e?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},t.label)}handleSearchInput(t){this.searchTerm=t.target.value}calculateDropdownMenuOffset(){const t=this.el.shadowRoot.querySelector(".dropdown-selector"),o=this.dropdownSelector.getBoundingClientRect().bottom;let i=Math.min(368,36*this._optionsData.length)+8;this.searchEnabled&&(i+=52);const e=t.getBoundingClientRect();this.bodyOffset=o+i>window.innerHeight?{top:window.innerHeight-(i+16)+"px",position:"fixed",width:`${t.offsetWidth}px`,zIndex:"10"}:{position:"fixed",left:e.left,top:e.top,width:e.width-2+"px",zIndex:"10"}}render(){if(this.optionsData)return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",ref:t=>this.dropdownSelector=t,onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent()),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({width:`${this.dropdownSelector.offsetWidth}px`},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},this._optionsData.map((t=>this.dropdownOption(t))))))))}get el(){return n(this)}static get watchers(){return{optionsData:["setOptionsData"]}}};l.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.dropdown-selector *{font-weight:400}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:relative;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{l as tttx_select_box}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as o,h as i,H as e,g as s}from"./p-d490353a.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",7),this.toggleOpen=o(this,"toggleOpen",7),this.changesApplied=o(this,"changesApplied",7),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.htmlVisibleValue=void 0,this.visibleValue=void 0,this.open=!1,this.unsavedSelectedItems=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}handleOptionsDataChange(){this.unsavedSelectedItems="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData}safelyCloneArray(t){return JSON.parse(JSON.stringify(t))}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onCancel(){this.open=!1,this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData),this.toggleOpen.emit(!1)}applyChanges(){this.open=!1,this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems))}onItemSelected(t){const o=this.unsavedSelectedItems.findIndex((o=>o.value===t.value));this.unsavedSelectedItems[o]=Object.assign(Object.assign({},t),{selected:!t.selected}),this.unsavedSelectedItems=[...this.unsavedSelectedItems],this.selectItemEvent.emit(t)}dropdownSelectorContent(){if(!this._optionsData.find((t=>t.selected)))return i("div",{class:"placeholder"},this.placeholder);if(this.htmlVisibleValue){const t=n.sanitize(this.visibleValue,d);return i("div",{class:"dropdown-selector-html-content",innerHTML:t})}return i("div",null,this.visibleValue)}optionFoundInSearchTerm(t){return-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase())}dropdownOption(t){const o=this.searchEnabled&&this.optionFoundInSearchTerm(t),e=t.selected?"check_box":"check_box_outline_blank",s=t.selected?"blue":"grey";if(t.html){const r=n.sanitize(t.html,d);return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:e,color:s,class:"checkbox-icon"}),i("div",{innerHTML:r}))}return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:e,color:s,class:"checkbox-icon"}),i("div",{class:"plaintext-option"},t.label))}handleSearchInput(t){this.searchTerm=t.target.value}calculateDropdownMenuOffset(){const t=this.el.shadowRoot.querySelector(".dropdown-selector"),o=t.getBoundingClientRect().bottom,i=t.getBoundingClientRect();let e=Math.min(288,36*this._optionsData.length)+45+8;this.searchEnabled&&(e+=52),this.bodyOffset=o+e>window.innerHeight?{top:window.innerHeight-(e+16)+"px",position:"fixed",width:`${t.offsetWidth}px`,zIndex:"10"}:{position:"fixed",left:i.left,top:i.top,width:i.width-2+"px",zIndex:"10"}}render(){if(!this.optionsData)return;this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,this.unsavedSelectedItems||(this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData));const t=this.open?"expand_less":"expand_more";return i(e,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",placeholder:"Search",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this),inline:!0})),i("div",{class:"dropdown-options-list"},this.unsavedSelectedItems.map((t=>this.dropdownOption(t)))),i("div",{class:"footer"},i("tttx-button",{design:"primary",onClick:this.applyChanges.bind(this)},"Apply"),i("tttx-button",{onClick:this.onCancel.bind(this)},"Cancel"))))))}get el(){return s(this)}static get watchers(){return{optionsData:["handleOptionsDataChange"]}}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}';export{r as tttx_multiselect_box}
|
|
1
|
+
import{r as t,c as o,h as i,H as e,g as s}from"./p-d490353a.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",7),this.toggleOpen=o(this,"toggleOpen",7),this.changesApplied=o(this,"changesApplied",7),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.htmlVisibleValue=void 0,this.visibleValue=void 0,this.open=!1,this.unsavedSelectedItems=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}handleOptionsDataChange(){this.unsavedSelectedItems="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData}safelyCloneArray(t){return JSON.parse(JSON.stringify(t))}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onCancel(){this.open=!1,this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData),this.toggleOpen.emit(!1)}applyChanges(){this.open=!1,this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems))}onItemSelected(t){const o=this.unsavedSelectedItems.findIndex((o=>o.value===t.value));this.unsavedSelectedItems[o]=Object.assign(Object.assign({},t),{selected:!t.selected}),this.unsavedSelectedItems=[...this.unsavedSelectedItems],this.selectItemEvent.emit(t)}dropdownSelectorContent(){if(!this._optionsData.find((t=>t.selected)))return i("div",{class:"placeholder"},this.placeholder);if(this.htmlVisibleValue){const t=n.sanitize(this.visibleValue,d);return i("div",{class:"dropdown-selector-html-content",innerHTML:t})}return i("div",null,this.visibleValue)}optionFoundInSearchTerm(t){return-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase())}dropdownOption(t){const o=this.searchEnabled&&this.optionFoundInSearchTerm(t),e=t.selected?"check_box":"check_box_outline_blank",s=t.selected?"blue":"grey";if(t.html){const r=n.sanitize(t.html,d);return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:e,color:s,class:"checkbox-icon"}),i("div",{innerHTML:r}))}return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:e,color:s,class:"checkbox-icon"}),i("div",{class:"plaintext-option"},t.label))}handleSearchInput(t){this.searchTerm=t.target.value}calculateDropdownMenuOffset(){const t=this.el.shadowRoot.querySelector(".dropdown-selector"),o=t.getBoundingClientRect().bottom,i=t.getBoundingClientRect();let e=Math.min(288,36*this._optionsData.length)+45+8;this.searchEnabled&&(e+=52),this.bodyOffset=o+e>window.innerHeight?{top:window.innerHeight-(e+16)+"px",position:"fixed",width:`${t.offsetWidth}px`,zIndex:"10"}:{position:"fixed",left:i.left,top:i.top,width:i.width-2+"px",zIndex:"10"}}render(){if(!this.optionsData)return;this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,this.unsavedSelectedItems||(this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData));const t=this.open?"expand_less":"expand_more";return i(e,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",placeholder:"Search",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this),inline:!0})),i("div",{class:"dropdown-options-list"},this.unsavedSelectedItems.map((t=>this.dropdownOption(t)))),i("div",{class:"footer"},i("tttx-button",{design:"primary",onClick:this.applyChanges.bind(this)},"Apply"),i("tttx-button",{onClick:this.onCancel.bind(this)},"Cancel"))))))}get el(){return s(this)}static get watchers(){return{optionsData:["handleOptionsDataChange"]}}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector *{font-weight:400}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}';export{r as tttx_multiselect_box}
|
package/dist/tttx/tttx.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-d490353a.js";export{s as setNonce}from"./p-d490353a.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-c45c095c",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-837a4008",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64],setSelectOptions:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-d490353a.js";export{s as setNonce}from"./p-d490353a.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-c45c095c",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-837a4008",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64],setSelectOptions:[64]}]]],["p-d21cec88",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-0a1a9da5",[[1,"tttx-dialog",{header:[1],type:[1],size:[1],open:[4],allowOverflow:[4,"allow-overflow"],closeEnabled:[4,"close-enabled"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-1ecf24cc",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-4e2bc070",[[1,"tttx-tree-view",{data:[1040],firstSelected:[1028,"first-selected"],treeData:[32],selectedId:[32]}]]],["p-065ad72e",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-2f46fcbc",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-706901da",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-d59980ee",[[1,"tttx-checkbox-group"]]],["p-02017641",[[4,"tttx-checkbox-group-caption"]]],["p-866047c1",[[4,"tttx-checkbox-group-heading"]]],["p-e0ed9a93",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-06a0f85e",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-bdee8c29",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-bf48f423",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-54cedeca",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-0bd3d6cd",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-30da2278",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-0d962a44",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-71a8ab3d",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32],setSelectedItem:[64]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-872cd825",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-36f0dc1d",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
|