@fluid-topics/ft-select 0.0.88 → 0.1.2
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/README.md +1 -1
- package/build/ft-select.d.ts +1 -0
- package/build/ft-select.js +9 -2
- package/build/ft-select.min.js +4 -4
- package/package.json +6 -6
package/README.md
CHANGED
package/build/ft-select.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
|
|
|
38
38
|
selectedOption?: FtSelectOptionProperties;
|
|
39
39
|
private optionsDisplayed;
|
|
40
40
|
private focusOptions;
|
|
41
|
+
private container?;
|
|
41
42
|
private mainPanel?;
|
|
42
43
|
private firstOption?;
|
|
43
44
|
private focusedOption?;
|
package/build/ft-select.js
CHANGED
|
@@ -52,7 +52,7 @@ let FtSelect = class FtSelect extends FtLitElement {
|
|
|
52
52
|
this.options = [];
|
|
53
53
|
this.optionsDisplayed = false;
|
|
54
54
|
this.focusOptions = false;
|
|
55
|
-
this.hideOptions = () => this.optionsDisplayed =
|
|
55
|
+
this.hideOptions = (e) => this.optionsDisplayed = this.optionsDisplayed && e.composedPath().includes(this.container);
|
|
56
56
|
}
|
|
57
57
|
// language=CSS
|
|
58
58
|
getStyles() {
|
|
@@ -109,6 +109,10 @@ let FtSelect = class FtSelect extends FtLitElement {
|
|
|
109
109
|
--ft-input-label-vertical-spacing: var(--ft-select-vertical-spacing, 4px);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
.ft-select:not(.ft-select--disabled):focus-within mwc-icon {
|
|
113
|
+
color: var(--ft-color-primary, #2196F3);
|
|
114
|
+
}
|
|
115
|
+
|
|
112
116
|
.ft-select:not(.ft-select--disabled):focus-within ft-input-label {
|
|
113
117
|
--ft-input-label-border-color: var(--ft-color-primary, #2196F3);
|
|
114
118
|
--ft-input-label-text-color: var(--ft-color-primary, #2196F3);
|
|
@@ -190,7 +194,7 @@ let FtSelect = class FtSelect extends FtLitElement {
|
|
|
190
194
|
"ft-select--no-label": !this.label
|
|
191
195
|
};
|
|
192
196
|
return html `
|
|
193
|
-
<div class="${classMap(classes)}"
|
|
197
|
+
<div class="${classMap(classes)}" part="container">
|
|
194
198
|
<div class="ft-select--main-panel" part="main-panel">
|
|
195
199
|
<ft-input-label text="${this.label}"
|
|
196
200
|
part="label"
|
|
@@ -376,6 +380,9 @@ __decorate([
|
|
|
376
380
|
__decorate([
|
|
377
381
|
state()
|
|
378
382
|
], FtSelect.prototype, "focusOptions", void 0);
|
|
383
|
+
__decorate([
|
|
384
|
+
query(".ft-select")
|
|
385
|
+
], FtSelect.prototype, "container", void 0);
|
|
379
386
|
__decorate([
|
|
380
387
|
query(".ft-select--input-panel")
|
|
381
388
|
], FtSelect.prototype, "mainPanel", void 0);
|
package/build/ft-select.min.js
CHANGED
|
@@ -74,12 +74,12 @@ const lt=1,ct=2,pt=t=>(...e)=>({_$litDirective$:t,values:e});class dt{constructo
|
|
|
74
74
|
* @license
|
|
75
75
|
* Copyright 2021 Google LLC
|
|
76
76
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
77
|
-
*/;class kt extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:r}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const o=this.renderOptions.creationScope=this.attachShadow({...r,customElements:t.registry});return n(o,this.constructor.elementStyles),o}}}(tt)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),R`${t.map((t=>R`<style>${t}</style>`))} ${this.getTemplate()}`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}
|
|
77
|
+
*/;class kt extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:r}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const o=this.renderOptions.creationScope=this.attachShadow({...r,customElements:t.registry});return n(o,this.constructor.elementStyles),o}}}(tt)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),R`${t.map((t=>R`<style>${t}</style>`))} ${this.getTemplate()}`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}a`.ft-no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`
|
|
78
78
|
/**
|
|
79
79
|
* @license
|
|
80
80
|
* Copyright 2017 Google LLC
|
|
81
81
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
82
|
-
|
|
82
|
+
*/;class St extends dt{constructor(t){if(super(t),this.it=D,t.type!==ct)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===D||null==t)return this.vt=void 0,this.it=t;if(t===F)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.vt;this.it=t;const e=[t];return e.raw=e,this.vt={_$litType$:this.constructor.resultType,strings:e,values:[]}}}var Ot,$t;St.directiveName="unsafeHTML",St.resultType=1,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===($t=null===(Ot=window.safari)||void 0===Ot?void 0:Ot.pushNotification)||void 0===$t||$t.toString());
|
|
83
83
|
/**
|
|
84
84
|
* @license
|
|
85
85
|
* Copyright 2020 Google LLC
|
|
@@ -327,7 +327,7 @@ const le=a`.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-
|
|
|
327
327
|
* Copyright 2020 Google LLC
|
|
328
328
|
* SPDX-License-Identifier: Apache-2.0
|
|
329
329
|
*/
|
|
330
|
-
class pe{constructor(t){this.startPress=e=>{t().then((t=>{t&&t.startPress(e)}))},this.endPress=()=>{t().then((t=>{t&&t.endPress()}))},this.startFocus=()=>{t().then((t=>{t&&t.startFocus()}))},this.endFocus=()=>{t().then((t=>{t&&t.endFocus()}))},this.startHover=()=>{t().then((t=>{t&&t.startHover()}))},this.endHover=()=>{t().then((t=>{t&&t.endHover()}))}}}var de=function(t,e,i,r){for(var o,a=arguments.length,n=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(n=(a<3?o(n):a>3?o(e,i,n):o(e,i))||n);return a>3&&n&&Object.defineProperty(e,i,n),n};let fe=class extends kt{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1}getStyles(){return a`:host{display:contents;--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-content, #000));--mdc-ripple-press-opacity:var(--ft-opacity-color-content-on-surface-pressed, 0.1);--mdc-ripple-hover-opacity:var(--ft-opacity-color-content-on-surface-hover, 0.04);--mdc-ripple-focus-opacity:var(--ft-opacity-color-content-on-surface-focused, 0.12);--mdc-ripple-selected-opacity:var(--ft-opacity-color-content-on-surface-selected, 0.08);--mdc-ripple-activated-opacity:var(--ft-opacity-color-content-on-surface-dragged, 0.08)}mwc-ripple.ft-ripple--secondary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-secondary, #FFCC80))}mwc-ripple.ft-ripple--primary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-primary, #2196F3))}`}getTemplate(){return R`<mwc-ripple class="${this.primary?"ft-ripple--primary":this.secondary?"ft-ripple--secondary":""}" ?unbounded="${this.unbounded}" ?activated="${this.activated}" ?selected="${this.selected}" ?disabled="${this.disabled}"></mwc-ripple>`}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple()}endRipple(){var t,e,i;null===(t=this.rippleHandlers)||void 0===t||t.endHover(),null===(e=this.rippleHandlers)||void 0===e||e.endFocus(),null===(i=this.rippleHandlers)||void 0===i||i.endPress()}connectedCallback(){var t;super.connectedCallback();const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentNode;if(e){const t=new pe((async()=>this.mwcRipple)),i=e=>i=>{window.addEventListener(e,t.endPress,{once:!0}),t.startPress(i)},r=i("mouseup"),o=i("touchend"),a=t=>{["Enter"," "].includes(t.key)&&i("keyup")()};e.addEventListener("mouseenter",t.startHover),e.addEventListener("mouseleave",t.endHover),e.addEventListener("mousedown",r),e.addEventListener("touchstart",o),e.addEventListener("keydown",a),e.addEventListener("focus",t.startFocus),e.addEventListener("blur",t.endFocus),this.onDisconnect=()=>{e.removeEventListener("mouseenter",t.startHover),e.removeEventListener("mouseleave",t.endHover),e.removeEventListener("mousedown",r),e.removeEventListener("touchstart",o),e.removeEventListener("keydown",a),e.removeEventListener("focus",t.startFocus),e.removeEventListener("blur",t.endFocus)},this.rippleHandlers=t}}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};fe.elementDefinitions={"mwc-ripple":ce},de([ot({type:Boolean})],fe.prototype,"primary",void 0),de([ot({type:Boolean})],fe.prototype,"secondary",void 0),de([ot({type:Boolean})],fe.prototype,"unbounded",void 0),de([ot({type:Boolean})],fe.prototype,"activated",void 0),de([ot({type:Boolean})],fe.prototype,"selected",void 0),de([ot({type:Boolean})],fe.prototype,"disabled",void 0),de([nt("mwc-ripple")],fe.prototype,"mwcRipple",void 0),fe=de([xt("ft-ripple")],fe);
|
|
330
|
+
class pe{constructor(t){this.startPress=e=>{t().then((t=>{t&&t.startPress(e)}))},this.endPress=()=>{t().then((t=>{t&&t.endPress()}))},this.startFocus=()=>{t().then((t=>{t&&t.startFocus()}))},this.endFocus=()=>{t().then((t=>{t&&t.endFocus()}))},this.startHover=()=>{t().then((t=>{t&&t.startHover()}))},this.endHover=()=>{t().then((t=>{t&&t.endHover()}))}}}var de=function(t,e,i,r){for(var o,a=arguments.length,n=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(n=(a<3?o(n):a>3?o(e,i,n):o(e,i))||n);return a>3&&n&&Object.defineProperty(e,i,n),n};let fe=class extends kt{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1}getStyles(){return a`:host{display:contents;--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-content, #000));--mdc-ripple-press-opacity:var(--ft-opacity-color-content-on-surface-pressed, 0.1);--mdc-ripple-hover-opacity:var(--ft-opacity-color-content-on-surface-hover, 0.04);--mdc-ripple-focus-opacity:var(--ft-opacity-color-content-on-surface-focused, 0.12);--mdc-ripple-selected-opacity:var(--ft-opacity-color-content-on-surface-selected, 0.08);--mdc-ripple-activated-opacity:var(--ft-opacity-color-content-on-surface-dragged, 0.08)}mwc-ripple.ft-ripple--secondary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-secondary, #FFCC80))}mwc-ripple.ft-ripple--primary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-primary, #2196F3))}`}getTemplate(){return R`<mwc-ripple class="${this.primary?"ft-ripple--primary":this.secondary?"ft-ripple--secondary":""}" ?unbounded="${this.unbounded}" ?activated="${this.activated}" ?selected="${this.selected}" ?disabled="${this.disabled}"></mwc-ripple>`}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple()}endRipple(){var t,e,i;null===(t=this.rippleHandlers)||void 0===t||t.endHover(),null===(e=this.rippleHandlers)||void 0===e||e.endFocus(),null===(i=this.rippleHandlers)||void 0===i||i.endPress()}connectedCallback(){var t;super.connectedCallback();const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentNode;if(e){const t=new pe((async()=>this.mwcRipple)),i=(...e)=>i=>{e.forEach((e=>window.addEventListener(e,t.endPress,{once:!0}))),t.startPress(i)},r=i("mouseup"),o=i("touchend","touchcancel"),a=t=>{["Enter"," "].includes(t.key)&&i("keyup")()};e.addEventListener("mouseenter",t.startHover),e.addEventListener("mouseleave",t.endHover),e.addEventListener("mousedown",r),e.addEventListener("touchstart",o),e.addEventListener("keydown",a),e.addEventListener("focus",t.startFocus),e.addEventListener("blur",t.endFocus),this.onDisconnect=()=>{e.removeEventListener("mouseenter",t.startHover),e.removeEventListener("mouseleave",t.endHover),e.removeEventListener("mousedown",r),e.removeEventListener("touchstart",o),e.removeEventListener("keydown",a),e.removeEventListener("focus",t.startFocus),e.removeEventListener("blur",t.endFocus)},this.rippleHandlers=t}}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};fe.elementDefinitions={"mwc-ripple":ce},de([ot({type:Boolean})],fe.prototype,"primary",void 0),de([ot({type:Boolean})],fe.prototype,"secondary",void 0),de([ot({type:Boolean})],fe.prototype,"unbounded",void 0),de([ot({type:Boolean})],fe.prototype,"activated",void 0),de([ot({type:Boolean})],fe.prototype,"selected",void 0),de([ot({type:Boolean})],fe.prototype,"disabled",void 0),de([nt("mwc-ripple")],fe.prototype,"mwcRipple",void 0),fe=de([xt("ft-ripple")],fe);
|
|
331
331
|
/**
|
|
332
332
|
* @license
|
|
333
333
|
* Copyright 2021 Google LLC
|
|
@@ -338,4 +338,4 @@ const ue=a`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:
|
|
|
338
338
|
* @license
|
|
339
339
|
* Copyright 2018 Google LLC
|
|
340
340
|
* SPDX-License-Identifier: Apache-2.0
|
|
341
|
-
*/;let he=class extends tt{render(){return R`<span><slot></slot></span>`}};he.styles=[ue],he=qt([it("mwc-icon")],he);var ve=function(t,e,i,r){for(var o,a=arguments.length,n=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(n=(a<3?o(n):a>3?o(e,i,n):o(e,i))||n);return a>3&&n&&Object.defineProperty(e,i,n),n};t.FtSelectOption=class extends kt{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1}getTemplate(){return R``}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}},t.FtSelectOption.elementDefinitions={},ve([ot({type:String})],t.FtSelectOption.prototype,"label",void 0),ve([ot({type:Object,converter:t=>t})],t.FtSelectOption.prototype,"value",void 0),ve([ot({type:Boolean,reflect:!0})],t.FtSelectOption.prototype,"selected",void 0),t.FtSelectOption=ve([xt("ft-select-option")],t.FtSelectOption),t.FtSelect=class extends kt{constructor(){super(...arguments),this.label="",this.helper="",this.outlined=!1,this.disabled=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.hideOptions=()
|
|
341
|
+
*/;let he=class extends tt{render(){return R`<span><slot></slot></span>`}};he.styles=[ue],he=qt([it("mwc-icon")],he);var ve=function(t,e,i,r){for(var o,a=arguments.length,n=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(o=t[s])&&(n=(a<3?o(n):a>3?o(e,i,n):o(e,i))||n);return a>3&&n&&Object.defineProperty(e,i,n),n};t.FtSelectOption=class extends kt{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1}getTemplate(){return R``}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}},t.FtSelectOption.elementDefinitions={},ve([ot({type:String})],t.FtSelectOption.prototype,"label",void 0),ve([ot({type:Object,converter:t=>t})],t.FtSelectOption.prototype,"value",void 0),ve([ot({type:Boolean,reflect:!0})],t.FtSelectOption.prototype,"selected",void 0),t.FtSelectOption=ve([xt("ft-select-option")],t.FtSelectOption),t.FtSelect=class extends kt{constructor(){super(...arguments),this.label="",this.helper="",this.outlined=!1,this.disabled=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.hideOptions=t=>this.optionsDisplayed=this.optionsDisplayed&&t.composedPath().includes(this.container)}getStyles(){return[Dt,It,a`:focus{outline:0}.ft-select{display:flex;flex-direction:column;align-items:stretch}.ft-select--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-select-vertical-spacing,4px) + var(--ft-select-label-size,11px) + var(--ft-select-selected-option-size,14px))}.ft-select--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;padding-left:16px;padding-right:8px;gap:8px}.ft-select--input-panel,.ft-select--option{color:var(--ft-color-on-surface,rgba(0,0,0,.87));--ft-opacity-color-content-on-surface-hover:0.08;--ft-opacity-color-content-on-surface-dragged:0.04}.ft-select--disabled .ft-select--input-panel,.ft-select--disabled .ft-select--option{color:var(--ft-color-on-surface-disabled,rgba(0,0,0,.38))}.ft-select:not(.ft-select--disabled) .ft-select--input-panel{cursor:pointer}ft-input-label{--ft-input-label-font-size:var(--ft-select-selected-option-size, 14px);--ft-input-label-raised-font-size:var(--ft-select-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-select-vertical-spacing, 4px)}.ft-select:not(.ft-select--disabled):focus-within mwc-icon{color:var(--ft-color-primary,#2196f3)}.ft-select:not(.ft-select--disabled):focus-within ft-input-label{--ft-input-label-border-color:var(--ft-color-primary, #2196F3);--ft-input-label-text-color:var(--ft-color-primary, #2196F3)}.ft-select--selected-option{display:block;flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--ft-typography-font-size:var(--ft-select-selected-option-size, 14px);--ft-typography-line-height:var(--ft-select-selected-option-size, 14px)}mwc-icon{flex-shrink:0}slot{display:none}.ft-select--filled .ft-select--input-panel{border-radius:var(--ft-border-radius-S,4px) var(--ft-border-radius-S,4px) 0 0}.ft-select--filled:not(.ft-select--no-label) .ft-select--selected-option{align-self:stretch;padding-top:calc(var(--ft-select-label-size,11px) + 2 * var(--ft-select-vertical-spacing,4px))}.ft-select--outlined .ft-select--input-panel{border-radius:var(--ft-border-radius-S,4px)}.ft-select--options{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ft-color-surface,#fff);z-index:var(--ft-select-options-z-index,1);box-shadow:var(--ft-elevation-02,0 4px 10px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.14),0 0 1px 0 rgba(0,0,0,.06))}.ft-select--options-displayed .ft-select--options{display:block}.ft-select--option{position:relative;padding:4px 16px;min-height:32px;display:flex;align-items:center}.ft-select--helper-text{padding:0 12px 0 16px;color:var(--ft-select-helper-color,var(--ft-color-on-surface-medium,rgba(0,0,0,.6)))}`]}getTemplate(){var t,e,i,r,o;let a=!this.disabled&&this.optionsDisplayed&&this.hasOptions,n=this.disabled||!this.hasOptions;const s={"ft-select":!0,"ft-select--filled":!this.outlined,"ft-select--outlined":this.outlined,"ft-select--disabled":n,"ft-select--options-displayed":a,"ft-select--has-value":null!=(null===(t=this.selectedOption)||void 0===t?void 0:t.value),"ft-select--no-label":!this.label};return R`<div class="${ft(s)}" part="container"><div class="ft-select--main-panel" part="main-panel"><ft-input-label text="${this.label}" part="label" ?disabled="${n}" ?outlined="${this.outlined}" ?raised="${null!=(null===(e=this.selectedOption)||void 0===e?void 0:e.value)||a}"></ft-input-label><div class="ft-select--input-panel" part="selected-value" tabindex="${n?"-1":"0"}" @click="${()=>this.optionsDisplayed=!this.optionsDisplayed}" @keydown="${this.onMainPanelKeyDown}" aria-label="${this.label}" aria-haspopup="listbox" aria-expanded="${a}">${this.outlined?null:R`<ft-ripple ?disabled="${n}" activated></ft-ripple>`}<ft-typography variant="body1" class="ft-select--selected-option">${null!=(null===(i=this.selectedOption)||void 0===i?void 0:i.value)&&null!==(o=null===(r=this.selectedOption)||void 0===r?void 0:r.label)&&void 0!==o?o:""}</ft-typography><mwc-icon>${a?"expand_less":"expand_more"}</mwc-icon></div><div class="ft-select--options" part="options" @keydown="${this.onOptionsKeyDown}" innerrole="listbox">${wt(this.options,(t=>t.value),(t=>this.renderOption(t)))}</div></div>${this.helper?R`<ft-typography class="ft-select--helper-text" variant="caption">${this.helper}</ft-typography>`:void 0}</div><slot @slotchange="${this.updateOptionsFromSlot}" @option-change="${this.updateOptionsFromSlot}"></slot>`}renderOption(t){let e=this.selectedOption===t;return R`<div class="${ft({"ft-select--option":!0,"ft-select--option-selected":e,"ft-typography--body2":!0})}" part="option" tabindex="0" @keydown="${e=>this.onOptionKeyDown(e,t)}" @click="${()=>this.selectOption(t)}"><ft-ripple ?primary="${e}" ?activated="${e}"></ft-ripple>${t.label}</div>`}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})))}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 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,r,o,a;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!==(r=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==r?r:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),n=null!==(a=null===(o=this.focusedOption)||void 0===o?void 0:o.nextElementSibling)&&void 0!==a?a: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)}},t.FtSelect.elementDefinitions={"ft-input-label":Nt,"ft-typography":Pt,"ft-ripple":fe,"mwc-icon":he},ve([ot({type:String})],t.FtSelect.prototype,"label",void 0),ve([ot({type:String})],t.FtSelect.prototype,"helper",void 0),ve([ot({type:Boolean})],t.FtSelect.prototype,"outlined",void 0),ve([ot({type:Boolean})],t.FtSelect.prototype,"disabled",void 0),ve([ot({type:Array})],t.FtSelect.prototype,"options",void 0),ve([at()],t.FtSelect.prototype,"selectedOption",void 0),ve([at()],t.FtSelect.prototype,"optionsDisplayed",void 0),ve([at()],t.FtSelect.prototype,"focusOptions",void 0),ve([nt(".ft-select")],t.FtSelect.prototype,"container",void 0),ve([nt(".ft-select--input-panel")],t.FtSelect.prototype,"mainPanel",void 0),ve([nt(".ft-select--option:first-child")],t.FtSelect.prototype,"firstOption",void 0),ve([nt(".ft-select--option:focus")],t.FtSelect.prototype,"focusedOption",void 0),ve([nt(".ft-select--option.ft-select--option-selected")],t.FtSelect.prototype,"selectedOptionElement",void 0),ve([nt(".ft-select--option:last-child")],t.FtSelect.prototype,"lastOption",void 0),ve([nt("slot")],t.FtSelect.prototype,"optionsSlot",void 0),t.FtSelect=ve([xt("ft-select")],t.FtSelect),Object.defineProperty(t,"t",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Value selector for a predefined list of choices",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-input-label": "^0.
|
|
23
|
-
"@fluid-topics/ft-ripple": "^0.
|
|
24
|
-
"@fluid-topics/ft-typography": "^0.
|
|
25
|
-
"@fluid-topics/ft-wc-utils": "^0.
|
|
22
|
+
"@fluid-topics/ft-input-label": "^0.1.2",
|
|
23
|
+
"@fluid-topics/ft-ripple": "^0.1.2",
|
|
24
|
+
"@fluid-topics/ft-typography": "^0.1.2",
|
|
25
|
+
"@fluid-topics/ft-wc-utils": "^0.1.2",
|
|
26
26
|
"@material/mwc-icon": "^0.25.3",
|
|
27
27
|
"lit": "^2.0.2"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "45bcba88593eeafbe100e92f2ad27ca4d439f351"
|
|
30
30
|
}
|