UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines 5.28 kB
import{r as t,c as e,h as a,F as i,g as s}from"./p-c5b7f45e.js";import{f as r,g as o,C as n}from"./p-6b4b7af1.js";import{d as l}from"./p-58421494.js";import{f as c}from"./p-caf80cd7.js";import"./p-a4e6e35b.js";const p=class{constructor(a){t(this,a),this.calciteFilterChange=e(this,"calciteFilterChange",7),this.disabled=!1,this.empty=!0,this.filter=l((t=>{const e=new RegExp(t,"ig");if(0===this.data.length)return console.warn("No data was passed to calcite-filter.\n The data property expects an array of objects"),void this.calciteFilterChange.emit([]);const a=(t,e)=>{let i=!1;return c(t,(t=>{"function"!=typeof t&&(Array.isArray(t)||"object"==typeof t&&null!==t?a(t,e)&&(i=!0):e.test(t)&&(i=!0))})),i},i=this.data.filter((t=>a(t,e)));this.calciteFilterChange.emit(i)}),250),this.inputHandler=t=>{const e=t.target;this.empty=""===e.value,this.filter(e.value)},this.keyDownHandler=({key:t})=>{"Escape"===t&&this.clear()},this.clear=()=>{this.textInput.value="",this.empty=!0,this.calciteFilterChange.emit(this.data),this.setFocus()}}async setFocus(){r(this.textInput)}render(){const t="rtl"===o(this.el),{disabled:e}=this;return a(i,null,e?a("calcite-scrim",null):null,a("div",{class:"container"},a("label",{class:t?n.rtl:null},a("input",{"aria-label":this.intlLabel||"filter",disabled:this.disabled,onInput:this.inputHandler,onKeyDown:this.keyDownHandler,placeholder:this.placeholder,ref:t=>{this.textInput=t},type:"text",value:""}),a("div",{class:"search-icon"},a("calcite-icon",{icon:"search",scale:"s"}))),this.empty?null:a("button",{"aria-label":this.intlClear||"Clear filter",class:"clear-button",onClick:this.clear},a("calcite-icon",{icon:"x"}))))}get el(){return s(this)}};p.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;width:100%}.container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem}label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden;position:relative;width:100%;margin-left:0.25rem;margin-right:0.25rem;margin-top:0;margin-bottom:0}input[type=text]{background-color:transparent;border-style:none;font-family:inherit;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size--2);line-height:1rem;margin-bottom:0.25rem;width:100%;padding-top:0.25rem;padding-bottom:0.25rem;padding-right:0.25rem;padding-left:1.5rem;-webkit-transition:padding 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;transition:padding 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;transition:padding 150ms ease-in-out, box-shadow 150ms ease-in-out;transition:padding 150ms ease-in-out, box-shadow 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out}input[type=text]::-ms-clear{display:none}.search-icon{display:-ms-flexbox;display:flex;left:0;position:absolute;color:var(--calcite-ui-text-2);-webkit-transition:left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;transition:left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out}.calcite--rtl .search-icon{right:0}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-left:0.25rem;padding-right:0.25rem;-webkit-box-shadow:0 2px 0 var(--calcite-ui-brand);box-shadow:0 2px 0 var(--calcite-ui-brand)}input[type=text]:focus~.search-icon{left:calc(1rem * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:0.25rem;padding-right:1.5rem}.calcite--rtl input[type=text]:focus{padding-right:1.25rem}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(1rem * -1)}.clear-button{color:var(--calcite-ui-text-2);background-color:transparent;border-width:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";export{p as calcite_filter}