@fluid-topics/ft-select 0.3.0 → 0.3.3
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/build/ft-select.js +7 -2
- package/build/ft-select.light.js +7 -2
- package/build/ft-select.min.js +7 -2
- package/package.json +9 -9
package/build/ft-select.js
CHANGED
|
@@ -142,7 +142,7 @@ export class FtSelect extends FtLitElement {
|
|
|
142
142
|
@keydown=${(e) => this.onOptionKeyDown(e, option)}
|
|
143
143
|
@click=${() => this.selectOption(option)}>
|
|
144
144
|
<ft-ripple ?primary=${selected} ?activated=${selected}></ft-ripple>
|
|
145
|
-
|
|
145
|
+
<span>${option.label}</span>
|
|
146
146
|
</div>
|
|
147
147
|
`;
|
|
148
148
|
}
|
|
@@ -165,7 +165,7 @@ export class FtSelect extends FtLitElement {
|
|
|
165
165
|
positionOptionsMenu() {
|
|
166
166
|
this.optionsMenu.style.top = this.mainPanel.getBoundingClientRect().top + this.mainPanel.getBoundingClientRect().height + "px";
|
|
167
167
|
this.optionsMenu.style.left = this.mainPanel.getBoundingClientRect().left + "px";
|
|
168
|
-
this.optionsMenu.style.
|
|
168
|
+
this.optionsMenu.style.width = this.mainPanel.getBoundingClientRect().width + "px";
|
|
169
169
|
}
|
|
170
170
|
contentAvailableCallback(props) {
|
|
171
171
|
var _a, _b;
|
|
@@ -401,6 +401,11 @@ FtSelect.styles = [
|
|
|
401
401
|
align-items: center;
|
|
402
402
|
}
|
|
403
403
|
|
|
404
|
+
.ft-select--option span {
|
|
405
|
+
text-overflow: ellipsis;
|
|
406
|
+
overflow: hidden;
|
|
407
|
+
}
|
|
408
|
+
|
|
404
409
|
.ft-select--helper-text {
|
|
405
410
|
padding: 0 12px 0 16px;
|
|
406
411
|
color: ${FtSelectCssVariables.helperColor};
|
package/build/ft-select.light.js
CHANGED
|
@@ -430,9 +430,9 @@ const W=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===W)return null==t?void 0:t
|
|
|
430
430
|
@keydown=${e=>this.onOptionKeyDown(e,t)}
|
|
431
431
|
@click=${()=>this.selectOption(t)}>
|
|
432
432
|
<ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
|
|
433
|
-
|
|
433
|
+
<span>${t.label}</span>
|
|
434
434
|
</div>
|
|
435
|
-
`}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.
|
|
435
|
+
`}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,l;let n;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),n=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),n=null!==(l=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==l?l:this.firstOption}null==n||n.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}je.elementDefinitions={"ft-input-label":ne,"ft-typography":oe,"ft-ripple":xe,"ft-icon":Se},je.styles=[Qt,Vt,i.css`
|
|
436
436
|
*:focus {
|
|
437
437
|
outline: none;
|
|
438
438
|
}
|
|
@@ -566,6 +566,11 @@ const W=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===W)return null==t?void 0:t
|
|
|
566
566
|
align-items: center;
|
|
567
567
|
}
|
|
568
568
|
|
|
569
|
+
.ft-select--option span {
|
|
570
|
+
text-overflow: ellipsis;
|
|
571
|
+
overflow: hidden;
|
|
572
|
+
}
|
|
573
|
+
|
|
569
574
|
.ft-select--helper-text {
|
|
570
575
|
padding: 0 12px 0 16px;
|
|
571
576
|
color: ${Ce.helperColor};
|
package/build/ft-select.min.js
CHANGED
|
@@ -524,9 +524,9 @@ class ri extends mt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error
|
|
|
524
524
|
@keydown=${e=>this.onOptionKeyDown(e,t)}
|
|
525
525
|
@click=${()=>this.selectOption(t)}>
|
|
526
526
|
<ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
|
|
527
|
-
|
|
527
|
+
<span>${t.label}</span>
|
|
528
528
|
</div>
|
|
529
|
-
`}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.
|
|
529
|
+
`}updated(t){var e;super.updated(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1,this.dispatchEvent(new CustomEvent("change",{detail:null===(e=this.selectedOption)||void 0===e?void 0:e.value}))),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,n;let r;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),r=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),r=null!==(n=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==n?n:this.firstOption}null==r||r.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){this.selectedOption=t;for(let e of this.options)e.selected=e===t}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}mi.elementDefinitions={"ft-input-label":qe,"ft-typography":Ze,"ft-ripple":ni,"ft-icon":xi},mi.styles=[_e,We,d`
|
|
530
530
|
*:focus {
|
|
531
531
|
outline: none;
|
|
532
532
|
}
|
|
@@ -660,6 +660,11 @@ class ri extends mt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error
|
|
|
660
660
|
align-items: center;
|
|
661
661
|
}
|
|
662
662
|
|
|
663
|
+
.ft-select--option span {
|
|
664
|
+
text-overflow: ellipsis;
|
|
665
|
+
overflow: hidden;
|
|
666
|
+
}
|
|
667
|
+
|
|
663
668
|
.ft-select--helper-text {
|
|
664
669
|
padding: 0 12px 0 16px;
|
|
665
670
|
color: ${gi.helperColor};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-select",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"description": "Value selector for a predefined list of choices",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -11,20 +11,20 @@
|
|
|
11
11
|
"web": "build/ft-select.min.js",
|
|
12
12
|
"typings": "build/index",
|
|
13
13
|
"files": [
|
|
14
|
-
"build
|
|
15
|
-
"build
|
|
14
|
+
"build/**/*.ts",
|
|
15
|
+
"build/**/*.js"
|
|
16
16
|
],
|
|
17
17
|
"repository": {
|
|
18
18
|
"type": "git",
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-icon": "
|
|
23
|
-
"@fluid-topics/ft-input-label": "
|
|
24
|
-
"@fluid-topics/ft-ripple": "
|
|
25
|
-
"@fluid-topics/ft-typography": "
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "
|
|
22
|
+
"@fluid-topics/ft-icon": "0.3.3",
|
|
23
|
+
"@fluid-topics/ft-input-label": "0.3.3",
|
|
24
|
+
"@fluid-topics/ft-ripple": "0.3.3",
|
|
25
|
+
"@fluid-topics/ft-typography": "0.3.3",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "0.3.3",
|
|
27
27
|
"lit": "2.2.8"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "b8846f1a72db01834c7217897043ef8cbf7d06fb"
|
|
30
30
|
}
|