Initial version
This commit is contained in:
parent
ee29598c54
commit
2f7bb699de
123
package-lock.json
generated
Normal file
123
package-lock.json
generated
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
{
|
||||||
|
"name": "@tp/tp-dropdown",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"requires": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@lit/reactive-element": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-0TKSIuJHXNLM0k98fi0AdMIdUoHIYlDHTP+0Vruc2SOs4T6vU1FinXgSvYd8mSrkt+8R+qdRAXvjpqrMXMyBgw=="
|
||||||
|
},
|
||||||
|
"@tp/helpers": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-f6pDPw4QpjWnmVkYgOHjMXQXtGB4vbA45eZV9DjCF9OoCXsa+Pz32H2rLQRKbdpsfFllywOBI+GMGPYDJyrG/Q=="
|
||||||
|
},
|
||||||
|
"@tp/tp-icon": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@tp%2ftp-icon/-/tp-icon-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-/ETh6OPsDmU38niE68ngpZEMc/yaGhbvpuvZW67a1noQHiHOjW+kznhiqNYgV/x4AIxuslgvYquiGfWq+00a4Q==",
|
||||||
|
"requires": {
|
||||||
|
"@tp/tp-tooltip": "^1.0.0",
|
||||||
|
"lit": "^2.2.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lit": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==",
|
||||||
|
"requires": {
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-element": "^3.2.0",
|
||||||
|
"lit-html": "^2.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@tp/tp-input": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@tp%2ftp-input/-/tp-input-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-PeygdnQt56pk89FJ6wU2iaKzxkNObrvDGHl/2WXPiQ67AX1kNFxBkJLgaGnTfTXqUYWxuGiY6fE8RilgkWZoyA==",
|
||||||
|
"requires": {
|
||||||
|
"@tp/helpers": "^1.0.0",
|
||||||
|
"lit": "^2.2.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lit": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==",
|
||||||
|
"requires": {
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-element": "^3.2.0",
|
||||||
|
"lit-html": "^2.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@tp/tp-media-query": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@tp%2ftp-media-query/-/tp-media-query-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-hxwkqgLDGXFmjQEMWxExJW/If1ppFerK9S5+I/P7qCKm3PMRDgafFvAPTpFLtqH3GYQ9z+uAAi2ZSNKqJ9Z7QQ==",
|
||||||
|
"requires": {
|
||||||
|
"lit": "^2.2.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lit": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==",
|
||||||
|
"requires": {
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-element": "^3.2.0",
|
||||||
|
"lit-html": "^2.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@tp/tp-tooltip": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@tp%2ftp-tooltip/-/tp-tooltip-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-UtrIK5KWcEiC+HnHOVbgg90j4RjHn3e9ehOBYPZsm6zO+tT7pQJJYFOtJqBW+DDV7jVfH3AvGKCxtzNiJXYvDw==",
|
||||||
|
"requires": {
|
||||||
|
"@tp/helpers": "^1.0.0",
|
||||||
|
"lit": "^2.2.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lit": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-FDyxUuczo6cJJY/2Bkgfh1872U4ikUvmK1Cb6+lYC1CW+QOo8CaWXCpvPKFzYsz0ojUxoruBLVrECc7VI2f1dQ==",
|
||||||
|
"requires": {
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-element": "^3.2.0",
|
||||||
|
"lit-html": "^2.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@types/trusted-types": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
|
||||||
|
},
|
||||||
|
"lit-element": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
|
||||||
|
"requires": {
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-html": "^2.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lit-html": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-dJnevgV8VkCuOXLWrjQopDE8nSy8CzipZ/ATfYQv7z7Dct4abblcKecf50gkIScuwCTzKvRLgvTgV0zzagW4gA==",
|
||||||
|
"requires": {
|
||||||
|
"@types/trusted-types": "^2.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
package.json
12
package.json
@ -1,18 +1,22 @@
|
|||||||
{
|
{
|
||||||
"name": "@tp/tp-element",
|
"name": "@tp/tp-dropdown",
|
||||||
"version": "0.0.1",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "tp-element.js",
|
"main": "tp-dropdown.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
|
"url": "https://gitea.codeblob.work/tp-elements/tp-dropdown.git"
|
||||||
},
|
},
|
||||||
"author": "trading_peter",
|
"author": "trading_peter",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tp/helpers": "^1.0.1",
|
||||||
|
"@tp/tp-icon": "^1.0.0",
|
||||||
|
"@tp/tp-input": "^1.0.3",
|
||||||
|
"@tp/tp-media-query": "^1.0.0",
|
||||||
"lit": "^2.2.0"
|
"lit": "^2.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
823
tp-dropdown.js
Normal file
823
tp-dropdown.js
Normal file
@ -0,0 +1,823 @@
|
|||||||
|
/**
|
||||||
|
@license
|
||||||
|
Copyright (c) 2022 trading_peter
|
||||||
|
This program is available under Apache License Version 2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import '@tp/tp-icon/tp-icon.js';
|
||||||
|
import '@tp/tp-input/tp-input.js';
|
||||||
|
import '@tp/tp-media-query/tp-media-query.js';
|
||||||
|
import { LitElement, html, svg, css } from 'lit';
|
||||||
|
import { FormElement } from '@tp/helpers/form-element.js';
|
||||||
|
import { Position } from '@tp/helpers/position.js';
|
||||||
|
import { DomQuery } from '@tp/helpers/dom-query.js';
|
||||||
|
import { EventHelpers } from '@tp/helpers/event-helpers.js';
|
||||||
|
import { closest } from '@tp/helpers/closest.js';
|
||||||
|
import { ControlState } from '@tp/helpers/control-state.js';
|
||||||
|
import { isDefined } from '@tp/helpers/isDefined.js';
|
||||||
|
|
||||||
|
const mixins = [
|
||||||
|
FormElement,
|
||||||
|
Position,
|
||||||
|
DomQuery,
|
||||||
|
EventHelpers,
|
||||||
|
ControlState
|
||||||
|
];
|
||||||
|
|
||||||
|
const BaseElement = mixins.reduce((baseClass, mixin) => {
|
||||||
|
return mixin(baseClass);
|
||||||
|
}, LitElement);
|
||||||
|
|
||||||
|
class TpDropdown extends BaseElement {
|
||||||
|
static get styles() {
|
||||||
|
return [
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
--shadow-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||||
|
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
border: solid 1px #9E9E9E;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([invalid]) .selector {
|
||||||
|
border: solid 1px #B71C1C;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([focused]) .selector {
|
||||||
|
border: solid 1px #039BE5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([no-overflow]) #selItem {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector #selItem {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filter {
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 7px 10px;
|
||||||
|
border-bottom: solid 1px #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filter tp-icon {
|
||||||
|
--tp-icon-width: 16px;
|
||||||
|
--tp-icon-height: 16px;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#filter tp-icon:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon-wrap {
|
||||||
|
/* Prevents the toggle icon from overflowing out of the control while it's rotated. */
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleIcon {
|
||||||
|
transition: opacity 0.3s, transform 0.2s;
|
||||||
|
transform-origin: center center;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleIcon[open] {
|
||||||
|
transform: rotate(180deg) !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:hover) #toggleIcon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#list {
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0ms;
|
||||||
|
opacity: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#list[open] {
|
||||||
|
pointer-events: all;
|
||||||
|
transition: opacity 180ms;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #FAFAFA;
|
||||||
|
height: auto;
|
||||||
|
box-shadow: var(--shadow-2dp);
|
||||||
|
}
|
||||||
|
|
||||||
|
#itemList {
|
||||||
|
display: block;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="option"] {
|
||||||
|
padding: 5px 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="option"]:hover {
|
||||||
|
background: #E0F7FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="option"]:focus {
|
||||||
|
background: #EEEEEE;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="option"][selected] {
|
||||||
|
background: #4FC3F7;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="option"]:first-of-type {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="option"]:last-of-type {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-item-label {
|
||||||
|
padding: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-item-label:hover {
|
||||||
|
background: #039BE5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2px;
|
||||||
|
left: 5px;
|
||||||
|
right: 0;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #B71C1C;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([invalid]) .error-message {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 0) and (max-width: 480px) {
|
||||||
|
|
||||||
|
:host(:not([not-responsive])) #list {
|
||||||
|
top: 40px !important;
|
||||||
|
bottom: 40px !important;
|
||||||
|
left: 40px !important;
|
||||||
|
right: 40px !important;
|
||||||
|
max-width: none !important;
|
||||||
|
min-width: auto !important;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([not-responsive])) #itemList {
|
||||||
|
max-height: none !important;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([not-responsive])) #filter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 12px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([not-responsive])) div[role="option"] {
|
||||||
|
padding: 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([not-responsive])) div[role="option"]:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { label, isOpen, errorMessage, filterPlaceholder, extensible, filterable, items} = this;
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<tp-media-query query="(min-width: 0) and (max-width: 480px)" @media-query-update=${this._queryUpdated}></tp-media-query>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="selector" part="selector">
|
||||||
|
<div id="selItem">${label}</div>
|
||||||
|
<div class="error-message">${errorMessage}</div>
|
||||||
|
<div class="toggle-icon-wrap">
|
||||||
|
<tp-icon id="toggleIcon" ?open="${isOpen}" .icon=${TpDropdown.selectorIcon}></tp-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="list" ?open="${isOpen}">
|
||||||
|
<tp-input part="filter" exportparts="wrap:filterWrap" placeholder=${filterPlaceholder} id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
|
||||||
|
<input type="text">
|
||||||
|
<tp-icon id="filterIcon" .icon=${extensible ? TpDropdown.addIcon : TpDropdown.filterIcon} slot="suffix"></tp-icon>
|
||||||
|
</tp-input>
|
||||||
|
<div id="itemList" part="list">
|
||||||
|
${items.map(item => this._filter(item) ? html`
|
||||||
|
<div part="item" role="option" .value=${item.value} tabindex=${isOpen ? '0' : '-1'}>${item.label}</div>
|
||||||
|
` : null)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
items: { type: Array },
|
||||||
|
isOpen: { type: Boolean },
|
||||||
|
responsive: { type: Boolean },
|
||||||
|
value: { type: String },
|
||||||
|
default: { type: String },
|
||||||
|
label: { type: String },
|
||||||
|
errorMessage: { type: String },
|
||||||
|
filterable: { type: Boolean },
|
||||||
|
filterPlaceholder: { type: String },
|
||||||
|
// Allow to add unknown items to the list (New items aren't added to the items array by the component. Listen for the `add-item` event to do that).
|
||||||
|
extensible: { type: Boolean },
|
||||||
|
// If true, the dropdown fires the `add-item` event also on blur. Works only if `extensible` is set.
|
||||||
|
autoExtend: { type: Boolean, },
|
||||||
|
focused: { type: Boolean, reflect: true, },
|
||||||
|
readonly: { type: Boolean, reflect: true },
|
||||||
|
/*
|
||||||
|
* Stores the first known value of the `value` property that is not falsy.
|
||||||
|
* If `items` changes and no longer holds the originally selected item,
|
||||||
|
* the dropdown will clear the selection. Nevertheless `_memorizedValue`
|
||||||
|
* still holds the old value of `value`. If `items` brings back the originally
|
||||||
|
* selected entry, the old `value` will be restored with `_memorizedValue`
|
||||||
|
* and the item will be selected again.
|
||||||
|
*
|
||||||
|
* Dropdown basically restores it's selection state if the right item comes
|
||||||
|
* back again.
|
||||||
|
*/
|
||||||
|
_memorizedValue: { type: String },
|
||||||
|
_filterTerm: { type: String }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static get selectorIcon() {
|
||||||
|
return svg`<path fill="var(--tp-dropdown-selector-icon-color, #000000)" d="M7,10L12,15L17,10H7Z" />`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get filterIcon() {
|
||||||
|
return svg`
|
||||||
|
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="var(--tp-dropdown-filter-icon-color)" d="M15.9996 15.2877L15.2925 15.9948L21.2958 21.9981L22.0029 21.291L15.9996 15.2877Z"></path>
|
||||||
|
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="var(--tp-dropdown-filter-icon-color)" fill="none" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z"></path>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get addIcon() {
|
||||||
|
return svg`
|
||||||
|
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="var(--tp-dropdown-add-icon-color)" d="M3 12H21"></path>
|
||||||
|
<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="var(--tp-dropdown-add-icon-color)" d="M12 3V21"></path>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.items = [];
|
||||||
|
this._onDocClickHandler = () => this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
if (this._boundSetListPosition) {
|
||||||
|
window.removeEventListener('resize', this._boundSetListPosition);
|
||||||
|
document.removeEventListener('scroll', this._boundSetListPosition);
|
||||||
|
}
|
||||||
|
document.removeEventListener('click', this._onDocClickHandler, true);
|
||||||
|
this.unlisten(this, 'keydown', '_onKeyDown');
|
||||||
|
this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
|
||||||
|
this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
|
||||||
|
}
|
||||||
|
|
||||||
|
firstUpdated() {
|
||||||
|
super.firstUpdated();
|
||||||
|
this.listen(this, 'click', '_onClick');
|
||||||
|
}
|
||||||
|
|
||||||
|
updated(changes) {
|
||||||
|
super.updated(changes);
|
||||||
|
|
||||||
|
if (changes.has('default')) {
|
||||||
|
this._setDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (changes.has('focused')) {
|
||||||
|
this._focusChanged(this.focused, changes.get('focused'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (changes.has('value')) {
|
||||||
|
this._valueChanged();
|
||||||
|
this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_queryUpdated(e) {
|
||||||
|
this.responsive = e.detail;
|
||||||
|
}
|
||||||
|
|
||||||
|
_focusChanged(newState, oldState) {
|
||||||
|
if (newState) {
|
||||||
|
this.listen(this, 'keydown', '_onKeyDown');
|
||||||
|
this.listen(this.$.filter, 'keydown', '_onKeyDownFilter');
|
||||||
|
this.listen(this.$.filterIcon, 'click', '_filterIconClicked');
|
||||||
|
|
||||||
|
if (this.filterable) {
|
||||||
|
this.$.filter.focus();
|
||||||
|
}
|
||||||
|
} else if (oldState) {
|
||||||
|
this.unlisten(this, 'keydown', '_onKeyDown');
|
||||||
|
this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
|
||||||
|
this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
|
||||||
|
|
||||||
|
if (!newState) {
|
||||||
|
if (oldState && this.$.filter.value !== '') {
|
||||||
|
if (this.extensible && this.autoExtend) {
|
||||||
|
this._addItem();
|
||||||
|
} else if (!this._selectByLabel(this.$.filter.value)) {
|
||||||
|
if (!this.value) {
|
||||||
|
this.$.filter.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_setDefault() {
|
||||||
|
if ((this.value === null || this.value === undefined) && this._hasItem(this.default)) {
|
||||||
|
this.value = this.default;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
_hasItem(value) {
|
||||||
|
if (value === undefined) return false;
|
||||||
|
return Array.isArray(this.items) && this.items.find(item => item.value.toString() === value.toString()) !== undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
_valueChanged() {
|
||||||
|
if (this._setDefault()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show selection in selector.
|
||||||
|
const idx = this.items.findIndex(item => item.value === this.value);
|
||||||
|
if (idx > -1) {
|
||||||
|
this.label = this.items[idx].label;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.invalid = false;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
var ariaSel = this.shadowRoot.querySelector('div[aria-selected]');
|
||||||
|
var item = this.shadowRoot.querySelector('div[selected]');
|
||||||
|
if (ariaSel) {
|
||||||
|
ariaSel.removeAttribute('aria-selected');
|
||||||
|
}
|
||||||
|
if (item) {
|
||||||
|
item.setAttribute('aria-selected', true);
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
_checkValue(newValue, oldValue) {
|
||||||
|
if (newValue === null || newValue === undefined) {
|
||||||
|
this.$.itemList.selection = null;
|
||||||
|
this.label = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Opens the menu.
|
||||||
|
*/
|
||||||
|
open() {
|
||||||
|
if (this.readonly) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._responsive) {
|
||||||
|
window.history.pushState({ is: 'tp-dropdown' }, null);
|
||||||
|
this.listen(window, 'popstate', 'close');
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no items, we only open the list if the control is extensible.
|
||||||
|
if (this.items.length === 0) {
|
||||||
|
if (this.extensible || this.filterable) {
|
||||||
|
this.$.filter.focus();
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this._boundSetListPosition) {
|
||||||
|
this._boundSetListPosition = this._setListPosition.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-calc list position if window size is changed or document is scrolled.
|
||||||
|
// This is very important for smartphones with onscreen keyboards popping up.
|
||||||
|
window.addEventListener('resize', this._boundSetListPosition);
|
||||||
|
document.addEventListener('scroll', this._boundSetListPosition, { passive: true });
|
||||||
|
document.addEventListener('click', this._onDocClickHandler, true);
|
||||||
|
this.listen(this.$.filter, 'click', '_filterClicked');
|
||||||
|
|
||||||
|
this._setListPosition();
|
||||||
|
|
||||||
|
this.isOpen = true;
|
||||||
|
this.$.selItem.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
_filterClicked(e) {
|
||||||
|
this._dontClose = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes the menu.
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
if (this.isOpen) {
|
||||||
|
this._closeJob = setTimeout(() => {
|
||||||
|
this._close();
|
||||||
|
if (window.history.state && window.history.state.is === 'tp-dropdown') {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_close() {
|
||||||
|
var idx = this.items.findIndex(item => item.value === this.value);
|
||||||
|
|
||||||
|
if (idx === -1) {
|
||||||
|
this.label = '';
|
||||||
|
} else {
|
||||||
|
this.label = this.items[idx].label;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isOpen = false;
|
||||||
|
window.removeEventListener('resize', this._boundSetListPosition);
|
||||||
|
document.removeEventListener('scroll', this._boundSetListPosition);
|
||||||
|
document.removeEventListener('click', this._onDocClickHandler, true);
|
||||||
|
this.unlisten(this.$.filter, 'click', '_filterClicked');
|
||||||
|
|
||||||
|
this._filterTerm = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the menu.
|
||||||
|
*/
|
||||||
|
toggle() {
|
||||||
|
if (this.isOpen) {
|
||||||
|
this._close();
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_setListPosition() {
|
||||||
|
var rect = this.getBoundingClientRect();
|
||||||
|
var filterHeight = this.filterable ? this.$.filter.getBoundingClientRect().height : 0;
|
||||||
|
var winHeight = window.innerHeight;
|
||||||
|
|
||||||
|
var spaceBottom = winHeight - rect.top - rect.height - filterHeight;
|
||||||
|
this.$.itemList.style.maxHeight = (spaceBottom - 20) + 'px';
|
||||||
|
this.$.list.style.maxWidth = rect.width + 'px';
|
||||||
|
this.$.list.style.minWidth = rect.width + 'px';
|
||||||
|
|
||||||
|
var useTopLayout = spaceBottom < 150;
|
||||||
|
|
||||||
|
if (useTopLayout) {
|
||||||
|
this.$.itemList.style.maxHeight = (rect.top - 20) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
this._posFixed(this, this.$.list, {
|
||||||
|
spacing: 0,
|
||||||
|
valign: useTopLayout ? 'top' : 'bottom',
|
||||||
|
halign: 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Make list only take as much height as possible in responsive mode.
|
||||||
|
setTimeout(() => {
|
||||||
|
var lastItem = this.$.itemList.querySelector('div[role="option"]:last-of-type');
|
||||||
|
if (lastItem) {
|
||||||
|
this.$.list.style.maxHeight = lastItem.getBoundingClientRect().top + 'px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validate the control.
|
||||||
|
*
|
||||||
|
* @return {Boolean} False if invalid, else true.
|
||||||
|
*/
|
||||||
|
validate() {
|
||||||
|
if (!isDefined(this.value) && this.required) {
|
||||||
|
this.invalid = true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.invalid = false;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset the control if a parent era-form is reset.
|
||||||
|
*/
|
||||||
|
reset() {
|
||||||
|
this.invalid = false;
|
||||||
|
this._memorizedValue = undefined;
|
||||||
|
this._filterTerm = '';
|
||||||
|
if (this.default !== undefined) {
|
||||||
|
this.value = this.default;
|
||||||
|
} else {
|
||||||
|
this.value = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_itemsChanged() {
|
||||||
|
// In case `items` was set to null or undefined.
|
||||||
|
if (!this.items) {
|
||||||
|
this.items = [];
|
||||||
|
this.value = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const memValueDefined = this._memorizedValue !== null && this._memorizedValue !== undefined;
|
||||||
|
const foundValue = this.items.findIndex(item => item.value === this.value) > -1;
|
||||||
|
const foundMemVal = memValueDefined ? this.items.findIndex(item => item.value === this._memorizedValue) > -1 : false;
|
||||||
|
|
||||||
|
if (!foundValue && foundMemVal) {
|
||||||
|
this.value = this._memorizedValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!memValueDefined) {
|
||||||
|
this._memorizedValue = this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!foundValue && !foundMemVal) {
|
||||||
|
this.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._setDefault();
|
||||||
|
|
||||||
|
// Reset filter.
|
||||||
|
this._filterTerm = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
_filter(item) {
|
||||||
|
if (!this._filterTerm) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return new RegExp('.*' + this._filterTerm.toLowerCase() + '.*').test(item.label.toLowerCase());
|
||||||
|
}
|
||||||
|
|
||||||
|
_filterIconClicked() {
|
||||||
|
if (this.extensible) {
|
||||||
|
this._addItem();
|
||||||
|
}
|
||||||
|
this._filterTerm = '';
|
||||||
|
this.$.filter.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
_onClick(e) {
|
||||||
|
if (this._dontClose) {
|
||||||
|
setTimeout(() => {
|
||||||
|
clearTimeout(this._closeJob);
|
||||||
|
}, 20);
|
||||||
|
this._dontClose = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
const itemEl = closest(e.composedPath()[0], 'div[role="option"]');
|
||||||
|
if (itemEl === undefined) {
|
||||||
|
// We didn't click a item, so cancel the global close trigger.
|
||||||
|
setTimeout(() => {
|
||||||
|
clearTimeout(this._closeJob);
|
||||||
|
}, 20);
|
||||||
|
} else {
|
||||||
|
this.value = itemEl.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
var rootTarget = e.composedPath()[0];
|
||||||
|
|
||||||
|
// Toggle list only if it's not open or when the toggle icon is clicked or the click wasn't on the selector input.
|
||||||
|
if (!this.isOpen || closest(rootTarget, '#toggleIcon', true) !== undefined || (!closest(rootTarget, '#filter', true))) {
|
||||||
|
this.toggle();
|
||||||
|
this._setListFocus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_onKeyDown(e) {
|
||||||
|
if (this.readonly) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._isEsc(e)) {
|
||||||
|
if (this.isOpen) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.close();
|
||||||
|
this.focus();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._isEnter(e)) {
|
||||||
|
if (this.isOpen) {
|
||||||
|
if (this.extensible && !this.$.itemList.querySelector('div[role="option"]:focus')) {
|
||||||
|
this._addItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
this._selectItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toggle();
|
||||||
|
|
||||||
|
if (this.isOpen && this.filterable) {
|
||||||
|
this.$.filter.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isOpen) {
|
||||||
|
if (this._isDownKey(e)) {
|
||||||
|
this._focusNextItem();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._isUpKey(e)) {
|
||||||
|
this._focusPrevItem();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this._isDownKey(e)) {
|
||||||
|
if (this.value === undefined && this.items && this.items.length > 0) {
|
||||||
|
this.$.itemList.select(0);
|
||||||
|
} else {
|
||||||
|
this.$.itemList.selectNext();
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._isUpKey(e)) {
|
||||||
|
if (this.value === undefined && this.items && this.items.length > 0) {
|
||||||
|
this.$.itemList.select(this.items.length - 1);
|
||||||
|
} else {
|
||||||
|
this.$.itemList.selectPrevious();
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_isUpKey(e) {
|
||||||
|
return e.keyCode === 38;
|
||||||
|
}
|
||||||
|
|
||||||
|
_isDownKey(e) {
|
||||||
|
return e.keyCode === 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
_isEsc(e) {
|
||||||
|
return e.keyCode === 27;
|
||||||
|
}
|
||||||
|
|
||||||
|
_isEnter(e) {
|
||||||
|
return e.keyCode === 13;
|
||||||
|
}
|
||||||
|
|
||||||
|
_onKeyDownFilter(e) {
|
||||||
|
if (this._isEsc(e)) { //esc
|
||||||
|
if (this._filterTerm) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
this._filterTerm = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._isUpKey(e) || this._isDownKey(e)) {
|
||||||
|
this._setListFocus();
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a new item to the list if the element is extensible.
|
||||||
|
_addItem() {
|
||||||
|
var label = this.$.filter.value;
|
||||||
|
if (label !== '') {
|
||||||
|
if (!this._selectByLabel(label)) {
|
||||||
|
this.fire('add-item', { label: label });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_selectByLabel(label) {
|
||||||
|
label = String(label).toLowerCase();
|
||||||
|
if (Array.isArray(this.items)) {
|
||||||
|
for (var i = 0, li = this.items.length; i < li; ++i) {
|
||||||
|
if (String(this.items[i].label).toLowerCase() === String(label)) {
|
||||||
|
this.value = this.items[i].id;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
_selectItem() {
|
||||||
|
var item = this.$.itemList.querySelector('div[role="option"]:focus');
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
this.value = item.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_setListFocus() {
|
||||||
|
var item = this.$.itemList.querySelector('div[role="option"].iron-selected') || this.$.itemList.querySelector('div[role="option"]');
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
item.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_focusNextItem() {
|
||||||
|
var item = this.$.itemList.querySelector('div[role="option"]:focus');
|
||||||
|
if (!item) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var next = item.nextElementSibling;
|
||||||
|
|
||||||
|
if (!next || next.tagName !== 'DIV') {
|
||||||
|
next = this.$.itemList.querySelector('div[role="option"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (next) {
|
||||||
|
next.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_focusPrevItem() {
|
||||||
|
var item = this.$.itemList.querySelector('div[role="option"]:focus');
|
||||||
|
if (!item) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var next = item.previousElementSibling;
|
||||||
|
|
||||||
|
if (!next || next.tagName !== 'DIV') {
|
||||||
|
next = this.$.itemList.querySelector('div[role="option"]:last-of-type');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (next) {
|
||||||
|
next.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('tp-dropdown', TpDropdown);
|
||||||
@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
@license
|
|
||||||
Copyright (c) 2022 trading_peter
|
|
||||||
This program is available under Apache License Version 2.0
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { LitElement, html, css } from 'lit';
|
|
||||||
|
|
||||||
class TpElement extends LitElement {
|
|
||||||
static get styles() {
|
|
||||||
return [
|
|
||||||
css`
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { } = this;
|
|
||||||
|
|
||||||
return html`
|
|
||||||
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return { };
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('tp-element', TpElement);
|
|
||||||
Loading…
Reference in New Issue
Block a user