From ddd4d9275c91598dc5923e98d4a74bfbd0fac334 Mon Sep 17 00:00:00 2001 From: Jonas Knobloch Date: Thu, 17 Oct 2024 15:58:00 +0200 Subject: [PATCH] Add search icons --- .../Private/App/Components/SearchIcon.js | 150 ++++++++++++++++ .../Private/App/Components/VisualSearch.js | 1 + Resources/Private/App/app.js | 3 +- .../Private/Partials/Visualsearch/Search.html | 6 +- Resources/Public/visualsearch.min.js | 166 ++++++++++++++++-- 5 files changed, 303 insertions(+), 23 deletions(-) create mode 100644 Resources/Private/App/Components/SearchIcon.js diff --git a/Resources/Private/App/Components/SearchIcon.js b/Resources/Private/App/Components/SearchIcon.js new file mode 100644 index 0000000..38102ac --- /dev/null +++ b/Resources/Private/App/Components/SearchIcon.js @@ -0,0 +1,150 @@ +import {LitElement, html, css} from 'lit'; + +export class SearchIcon extends LitElement { + static styles = css` + :host { + display: flex; + min-width: 14px; + min-height: 14px; + width: 14px; + height: 14px; + align-items: center; + justify-content: center; + transform: scale(calc(14/24)); + } + + .search { + box-sizing: border-box; + position: relative; + display: block; + width: 16px; + height: 16px; + border: 2px solid; + border-radius: 100%; + margin-left: -4px; + margin-top: -4px; + max-width: 100%; + max-height: 100%; + } + + .search::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 3px; + width: 2px; + height: 8px; + background: currentcolor; + transform: rotate(-45deg); + top: 10px; + left: 12px; + } + + .sort, + .sort::after, + .sort::before { + display: block; + box-sizing: border-box; + height: 2px; + border-radius: 4px; + background: currentcolor; + } + + .sort { + position: relative; + width: 8px; + } + + .sort::after, + .sort::before { + content: ""; + position: absolute; + } + + .sort::before { + width: 12px; + top: -4px; + left: -2px; + } + + .sort::after { + width: 4px; + top: 4px; + left: 2px; + } + + .clear { + min-width: 10px; + min-height: 12px; + } + + .clear { + box-sizing: border-box; + position: relative; + display: block; + width: 10px; + height: 12px; + border: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0, + inset 2px 0 0; + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + margin-top: 4px; + } + + .clear::after, + .clear::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + } + + .clear::after { + background: currentcolor; + border-radius: 3px; + width: 16px; + height: 2px; + top: -4px; + left: -5px; + min-width: 16px; + min-height: 2px; + } + + .clear::before { + width: 10px; + height: 4px; + border: 2px solid; + border-bottom: transparent; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + top: -7px; + left: -2px; + min-width: 10px; + min-height: 4px; + } + `; + + static get properties() { + return { + icon: {type: String}, + }; + } + + constructor() { + super(); + + this.icon = 'close'; + } + + render() { + return html` + + `; + } +} + +customElements.define('search-icon', SearchIcon); diff --git a/Resources/Private/App/Components/VisualSearch.js b/Resources/Private/App/Components/VisualSearch.js index 4fa4662..92ec822 100644 --- a/Resources/Private/App/Components/VisualSearch.js +++ b/Resources/Private/App/Components/VisualSearch.js @@ -261,6 +261,7 @@ export class VisualSearch extends LitElement { border: 1px solid var(--visual-search-color, black); border-radius: 4px; cursor: pointer; + padding: 4px; } .vs-search__controls button:hover, .select-button-wrapper:hover > button { diff --git a/Resources/Private/App/app.js b/Resources/Private/App/app.js index af0f845..3744b4d 100644 --- a/Resources/Private/App/app.js +++ b/Resources/Private/App/app.js @@ -1,3 +1,4 @@ import {VisualSearch} from "./Components/VisualSearch"; import {SearchFacet} from "./Components/SearchFacet"; -import {DebugLog} from "./Components/DebugLog"; \ No newline at end of file +import {DebugLog} from "./Components/DebugLog"; +import {SearchIcon} from "./Components/SearchIcon"; \ No newline at end of file diff --git a/Resources/Private/Partials/Visualsearch/Search.html b/Resources/Private/Partials/Visualsearch/Search.html index c0b3999..d3dcf2f 100644 --- a/Resources/Private/Partials/Visualsearch/Search.html +++ b/Resources/Private/Partials/Visualsearch/Search.html @@ -9,9 +9,9 @@ query-action="{f:uri.action(action: 'query', controller: 'SearchState', package: 'KayStrobach.VisualSearch')}" query="{search:query(name: searchName)}" sorting="{search:settings(name: searchName, key: 'sorting')}"> - {f:translate(id:"button.search", package:"KayStrobach.VisualSearch")} - {f:translate(id:"button.sort", package:"KayStrobach.VisualSearch")} - {f:translate(id:"button.clear", package:"KayStrobach.VisualSearch")} + + +
diff --git a/Resources/Public/visualsearch.min.js b/Resources/Public/visualsearch.min.js index e88142a..b178282 100644 --- a/Resources/Public/visualsearch.min.js +++ b/Resources/Public/visualsearch.min.js @@ -1,6 +1,6 @@ -(()=>{var N=globalThis,F=N.ShadowRoot&&(N.ShadyCSS===void 0||N.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,z=Symbol(),st=new WeakMap,k=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==z)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(F&&t===void 0){let s=e!==void 0&&e.length===1;s&&(t=st.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&st.set(e,t))}return t}toString(){return this.cssText}},it=r=>new k(typeof r=="string"?r:r+"",void 0,z),_=(r,...t)=>{let e=r.length===1?r[0]:t.reduce((s,i,o)=>s+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+r[o+1],r[0]);return new k(e,r,z)},D=(r,t)=>{if(F)r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let s=document.createElement("style"),i=N.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,r.appendChild(s)}},M=F?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(let s of t.cssRules)e+=s.cssText;return it(e)})(r):r;var{is:mt,defineProperty:_t,getOwnPropertyDescriptor:yt,getOwnPropertyNames:$t,getOwnPropertySymbols:At,getPrototypeOf:xt}=Object,j=globalThis,rt=j.trustedTypes,wt=rt?rt.emptyScript:"",St=j.reactiveElementPolyfillSupport,C=(r,t)=>r,q={toAttribute(r,t){switch(t){case Boolean:r=r?wt:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},nt=(r,t)=>!mt(r,t),ot={attribute:!0,type:String,converter:q,reflect:!1,hasChanged:nt};Symbol.metadata??=Symbol("metadata"),j.litPropertyMetadata??=new WeakMap;var b=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=ot){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){let s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&_t(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){let{get:i,set:o}=yt(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get(){return i?.call(this)},set(n){let c=i?.call(this);o.call(this,n),this.requestUpdate(t,c,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??ot}static _$Ei(){if(this.hasOwnProperty(C("elementProperties")))return;let t=xt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(C("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(C("properties"))){let e=this.properties,s=[...$t(e),...At(e)];for(let i of s)this.createProperty(i,e[i])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(let[e,s]of this.elementProperties){let i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let s=new Set(t.flat(1/0).reverse());for(let i of s)e.unshift(M(i))}else t!==void 0&&e.push(M(t));return e}static _$Eu(t,e){let s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return D(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EC(t,e){let s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){let o=(s.converter?.toAttribute!==void 0?s.converter:q).toAttribute(e,s.type);this._$Em=t,o==null?this.removeAttribute(i):this.setAttribute(i,o),this._$Em=null}}_$AK(t,e){let s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){let o=s.getPropertyOptions(i),n=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:q;this._$Em=i,this[i]=n.fromAttribute(e,o.type),this._$Em=null}}requestUpdate(t,e,s){if(t!==void 0){if(s??=this.constructor.getPropertyOptions(t),!(s.hasChanged??nt)(this[t],e))return;this.P(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,s){this._$AL.has(t)||this._$AL.set(t,e),s.reflect===!0&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[i,o]of this._$Ep)this[i]=o;this._$Ep=void 0}let s=this.constructor.elementProperties;if(s.size>0)for(let[i,o]of s)o.wrapped!==!0||this._$AL.has(i)||this[i]===void 0||this.P(i,this[i],o)}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(e)):this._$EU()}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach(e=>this._$EC(e,this[e])),this._$EU()}updated(t){}firstUpdated(t){}};b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[C("elementProperties")]=new Map,b[C("finalized")]=new Map,St?.({ReactiveElement:b}),(j.reactiveElementVersions??=[]).push("2.0.4");var G=globalThis,I=G.trustedTypes,at=I?I.createPolicy("lit-html",{createHTML:r=>r}):void 0,dt="$lit$",m=`lit$${Math.random().toFixed(9).slice(2)}$`,ft="?"+m,Et=`<${ft}>`,A=document,T=()=>A.createComment(""),U=r=>r===null||typeof r!="object"&&typeof r!="function",Z=Array.isArray,kt=r=>Z(r)||typeof r?.[Symbol.iterator]=="function",B=`[ -\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,lt=/-->/g,ct=/>/g,y=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ -\f\r"'\`<>=]|("|')|))|$)`,"g"),ht=/'/g,ut=/"/g,gt=/^(?:script|style|textarea|title)$/i,X=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),d=X(1),Ht=X(2),Nt=X(3),x=Symbol.for("lit-noChange"),u=Symbol.for("lit-nothing"),pt=new WeakMap,$=A.createTreeWalker(A,129);function bt(r,t){if(!Z(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return at!==void 0?at.createHTML(t):t}var Ct=(r,t)=>{let e=r.length-1,s=[],i,o=t===2?"":t===3?"":"",n=P;for(let c=0;c"?(n=i??P,l=-1):p[1]===void 0?l=-2:(l=n.lastIndex-p[2].length,h=p[1],n=p[3]===void 0?y:p[3]==='"'?ut:ht):n===ut||n===ht?n=y:n===lt||n===ct?n=P:(n=y,i=void 0);let v=n===y&&r[c+1].startsWith("/>")?" ":"";o+=n===P?a+Et:l>=0?(s.push(h),a.slice(0,l)+dt+a.slice(l)+m+v):a+m+(l===-2?c:v)}return[bt(r,o+(r[e]||"")+(t===2?"":t===3?"":"")),s]},O=class r{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,n=0,c=t.length-1,a=this.parts,[h,p]=Ct(t,e);if(this.el=r.createElement(h,s),$.currentNode=this.el.content,e===2||e===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(i=$.nextNode())!==null&&a.length0){i.textContent=I?I.emptyScript:"";for(let v=0;v2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=u}_$AI(t,e=this,s,i){let o=this.strings,n=!1;if(o===void 0)t=w(this,t,e,0),n=!U(t)||t!==this._$AH&&t!==x,n&&(this._$AH=t);else{let c=t,a,h;for(t=o[0],a=0;a{let s=e?.renderBefore??t,i=s._$litPart$;if(i===void 0){let o=e?.renderBefore??null;s._$litPart$=i=new R(t.insertBefore(T(),o),o,void 0,e??{})}return i._$AI(r),i};var f=class extends b{constructor(){super(...arguments),this.renderOptions={host:this},this.o=void 0}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.o=vt(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.o?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.o?.setConnected(!1)}render(){return x}};f._$litElement$=!0,f.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:f});var Tt=globalThis.litElementPolyfillSupport;Tt?.({LitElement:f});(globalThis.litElementVersions??=[]).push("4.1.0");var L=class r{constructor(t,e,s,i,o){this.value=t,this.label=e,this.inputType=s}static fromObject(t,e){return t&&(e=e||new r,t.hasOwnProperty("value")&&(e.value=t.value),t.hasOwnProperty("label")&&(e.label=t.label),t.hasOwnProperty("inputType")&&(e.inputType=t.inputType)),e}static validate(t){return typeof t.value=="string"&&typeof t.label=="string"}},E=class r{constructor(t,e){this.value=t,this.label=e}static fromObject(t,e){return t&&(e=e||new r,t.hasOwnProperty("value")&&(e.value=t.value),t.hasOwnProperty("label")&&(e.label=t.label)),e}static validate(t){return typeof t.value=="string"&&typeof t.label=="string"}},Y=class extends f{static get properties(){return{facets:{type:Array},values:{type:Array},selectedFacets:{type:Array},autocomplete:{type:Array,state:!0},showDebugLog:{type:Boolean,attribute:"debug"},nestedFacets:{type:Boolean,attribute:"nested-facets"},search:{type:String,attribute:!0},query:{type:Object,attribute:!0},sorting:{type:Object,attribute:!0},facetsAction:{type:String,attribute:"facets-action"},valueAction:{type:String,attribute:"value-action"},queryAction:{type:String,attribute:"query-action"}}}constructor(){super(),this.facets=[],this.values=[],this.selectedFacets=[],this.autocomplete=[],this.showDebugLog=!1,this.nestedFacets=!1,this.query=null,this.sorting=null}connectedCallback(){super.connectedCallback(),console.log(this.query),this.loadStateFromQuery()}static styles=_` +(()=>{var N=globalThis,F=N.ShadowRoot&&(N.ShadyCSS===void 0||N.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,I=Symbol(),it=new WeakMap,k=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==I)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(F&&t===void 0){let s=e!==void 0&&e.length===1;s&&(t=it.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&it.set(e,t))}return t}toString(){return this.cssText}},rt=r=>new k(typeof r=="string"?r:r+"",void 0,I),g=(r,...t)=>{let e=r.length===1?r[0]:t.reduce((s,i,o)=>s+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+r[o+1],r[0]);return new k(e,r,I)},D=(r,t)=>{if(F)r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let s=document.createElement("style"),i=N.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,r.appendChild(s)}},M=F?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(let s of t.cssRules)e+=s.cssText;return rt(e)})(r):r;var{is:yt,defineProperty:_t,getOwnPropertyDescriptor:$t,getOwnPropertyNames:xt,getOwnPropertySymbols:At,getPrototypeOf:wt}=Object,z=globalThis,ot=z.trustedTypes,St=ot?ot.emptyScript:"",Et=z.reactiveElementPolyfillSupport,C=(r,t)=>r,q={toAttribute(r,t){switch(t){case Boolean:r=r?St:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},at=(r,t)=>!yt(r,t),nt={attribute:!0,type:String,converter:q,reflect:!1,hasChanged:at};Symbol.metadata??=Symbol("metadata"),z.litPropertyMetadata??=new WeakMap;var m=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=nt){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){let s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&_t(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){let{get:i,set:o}=$t(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get(){return i?.call(this)},set(n){let c=i?.call(this);o.call(this,n),this.requestUpdate(t,c,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??nt}static _$Ei(){if(this.hasOwnProperty(C("elementProperties")))return;let t=wt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(C("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(C("properties"))){let e=this.properties,s=[...xt(e),...At(e)];for(let i of s)this.createProperty(i,e[i])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(let[e,s]of this.elementProperties){let i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let s=new Set(t.flat(1/0).reverse());for(let i of s)e.unshift(M(i))}else t!==void 0&&e.push(M(t));return e}static _$Eu(t,e){let s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return D(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EC(t,e){let s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){let o=(s.converter?.toAttribute!==void 0?s.converter:q).toAttribute(e,s.type);this._$Em=t,o==null?this.removeAttribute(i):this.setAttribute(i,o),this._$Em=null}}_$AK(t,e){let s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){let o=s.getPropertyOptions(i),n=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:q;this._$Em=i,this[i]=n.fromAttribute(e,o.type),this._$Em=null}}requestUpdate(t,e,s){if(t!==void 0){if(s??=this.constructor.getPropertyOptions(t),!(s.hasChanged??at)(this[t],e))return;this.P(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,s){this._$AL.has(t)||this._$AL.set(t,e),s.reflect===!0&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[i,o]of this._$Ep)this[i]=o;this._$Ep=void 0}let s=this.constructor.elementProperties;if(s.size>0)for(let[i,o]of s)o.wrapped!==!0||this._$AL.has(i)||this[i]===void 0||this.P(i,this[i],o)}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(e)):this._$EU()}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach(e=>this._$EC(e,this[e])),this._$EU()}updated(t){}firstUpdated(t){}};m.elementStyles=[],m.shadowRootOptions={mode:"open"},m[C("elementProperties")]=new Map,m[C("finalized")]=new Map,Et?.({ReactiveElement:m}),(z.reactiveElementVersions??=[]).push("2.0.4");var G=globalThis,j=G.trustedTypes,lt=j?j.createPolicy("lit-html",{createHTML:r=>r}):void 0,ft="$lit$",y=`lit$${Math.random().toFixed(9).slice(2)}$`,bt="?"+y,kt=`<${bt}>`,x=document,T=()=>x.createComment(""),U=r=>r===null||typeof r!="object"&&typeof r!="function",Z=Array.isArray,Ct=r=>Z(r)||typeof r?.[Symbol.iterator]=="function",B=`[ +\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ct=/-->/g,ht=/>/g,_=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ +\f\r"'\`<>=]|("|')|))|$)`,"g"),pt=/'/g,dt=/"/g,gt=/^(?:script|style|textarea|title)$/i,X=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),u=X(1),Nt=X(2),Ft=X(3),A=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),ut=new WeakMap,$=x.createTreeWalker(x,129);function mt(r,t){if(!Z(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return lt!==void 0?lt.createHTML(t):t}var Pt=(r,t)=>{let e=r.length-1,s=[],i,o=t===2?"":t===3?"":"",n=P;for(let c=0;c"?(n=i??P,l=-1):d[1]===void 0?l=-2:(l=n.lastIndex-d[2].length,h=d[1],n=d[3]===void 0?_:d[3]==='"'?dt:pt):n===dt||n===pt?n=_:n===ct||n===ht?n=P:(n=_,i=void 0);let v=n===_&&r[c+1].startsWith("/>")?" ":"";o+=n===P?a+kt:l>=0?(s.push(h),a.slice(0,l)+ft+a.slice(l)+y+v):a+y+(l===-2?c:v)}return[mt(r,o+(r[e]||"")+(t===2?"":t===3?"":"")),s]},O=class r{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,n=0,c=t.length-1,a=this.parts,[h,d]=Pt(t,e);if(this.el=r.createElement(h,s),$.currentNode=this.el.content,e===2||e===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(i=$.nextNode())!==null&&a.length0){i.textContent=j?j.emptyScript:"";for(let v=0;v2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(t,e=this,s,i){let o=this.strings,n=!1;if(o===void 0)t=w(this,t,e,0),n=!U(t)||t!==this._$AH&&t!==A,n&&(this._$AH=t);else{let c=t,a,h;for(t=o[0],a=0;a{let s=e?.renderBefore??t,i=s._$litPart$;if(i===void 0){let o=e?.renderBefore??null;s._$litPart$=i=new R(t.insertBefore(T(),o),o,void 0,e??{})}return i._$AI(r),i};var f=class extends m{constructor(){super(...arguments),this.renderOptions={host:this},this.o=void 0}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.o=vt(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.o?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.o?.setConnected(!1)}render(){return A}};f._$litElement$=!0,f.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:f});var Ut=globalThis.litElementPolyfillSupport;Ut?.({LitElement:f});(globalThis.litElementVersions??=[]).push("4.1.0");var L=class r{constructor(t,e,s,i,o){this.value=t,this.label=e,this.inputType=s}static fromObject(t,e){return t&&(e=e||new r,t.hasOwnProperty("value")&&(e.value=t.value),t.hasOwnProperty("label")&&(e.label=t.label),t.hasOwnProperty("inputType")&&(e.inputType=t.inputType)),e}static validate(t){return typeof t.value=="string"&&typeof t.label=="string"}},E=class r{constructor(t,e){this.value=t,this.label=e}static fromObject(t,e){return t&&(e=e||new r,t.hasOwnProperty("value")&&(e.value=t.value),t.hasOwnProperty("label")&&(e.label=t.label)),e}static validate(t){return typeof t.value=="string"&&typeof t.label=="string"}},Y=class extends f{static get properties(){return{facets:{type:Array},values:{type:Array},selectedFacets:{type:Array},autocomplete:{type:Array,state:!0},showDebugLog:{type:Boolean,attribute:"debug"},nestedFacets:{type:Boolean,attribute:"nested-facets"},search:{type:String,attribute:!0},query:{type:Object,attribute:!0},sorting:{type:Object,attribute:!0},facetsAction:{type:String,attribute:"facets-action"},valueAction:{type:String,attribute:"value-action"},queryAction:{type:String,attribute:"query-action"}}}constructor(){super(),this.facets=[],this.values=[],this.selectedFacets=[],this.autocomplete=[],this.showDebugLog=!1,this.nestedFacets=!1,this.query=null,this.sorting=null}connectedCallback(){super.connectedCallback(),console.log(this.query),this.loadStateFromQuery()}static styles=g` :host { display: flex; flex-direction: column; @@ -37,7 +37,7 @@ } .vs-search__dropdown { - z-index: 100; // TODO add property + z-index: 100; /* TODO add property */ display: flex; visibility: hidden; flex-direction: column; @@ -125,18 +125,19 @@ border: 1px solid var(--visual-search-color, black); border-radius: 4px; cursor: pointer; + padding: 4px; } .vs-search__controls button:hover, .select-button-wrapper:hover > button { background-color: var(--visual-search-background-color-focus, lightgray); color: var(--visual-search-color-focus, black); } - `;render(){return d` - ${this.showDebugLog?d``:""} + `;render(){return u` + ${this.showDebugLog?u``:""}
- ${this.selectedFacets.length>0?d` + ${this.selectedFacets.length>0?u`
    - ${Array.from(this.selectedFacets).map((t,e)=>d` + ${Array.from(this.selectedFacets).map((t,e)=>u`
    • - ${this.autocomplete.map((t,e)=>d` + ${this.autocomplete.map((t,e)=>u`
    • - ${this.sorting?d` + ${this.sorting?u`
      @@ -185,7 +186,7 @@
- `}_mode(){return this.selectedFacets.length>0&&this.selectedFacets.at(-1).value==null}_input(){let t=this.renderRoot?this.renderRoot.querySelector("input"):null;return t===null&&this._log("input not found"),t}_sort(){return this.renderRoot.querySelector("#sorting")}_log(t){let e=new CustomEvent("debug",{detail:{message:t}});this.renderRoot.dispatchEvent(e)}complete(t){this._log("complete: "+t.label),this._mode()?this.pushValue(t.obj):this.pushFacet(t.obj)}handleFocus(t){t.target.value===""&&this.completeTerm("")}handleBlur(){}handleKeyDown(t){if(t.key==="Enter")if(this._mode()){if(t.target.value==="")return;this.pushValue(new E(t.target.value,t.target.value))}else this.storeQuery(this.collectQuery()).then(()=>{window.location.reload()});t.key==="Backspace"&&t.target.value===""&&this.popFacet()}handleKeyUp(t){}handleTab(t){t.key!=="Tab"||t.shiftKey||(t.preventDefault(),this._input().focus())}handleInput(t){this.completeTerm(t.target.value)}focusInput(){this._input()&&this._input().focus()}clearInput(){this._input()&&(this._input().value="")}completeTerm(t){let e=(s,...i)=>{s(...i).then(()=>{this.updateAutocomplete()}).catch(o=>{this._log(o)})};this.storeQuery(this.collectQuery()).then(()=>{this._mode()?e(this.fetchValues.bind(this),this.selectedFacets.at(-1).facet.value,"",t):e(this.fetchFacets.bind(this),"",t)})}loadStateFromQuery(){for(let t of this.query.facets)this.selectedFacets.push({facet:new L(t.facet,t.facetLabel),value:new E(t.value,t.valueLabel)})}updateAutocomplete(){this._mode()?this.autocomplete=this.values.map(t=>({value:t.value,label:t.label,obj:t})):this.autocomplete=this.facets.map(t=>({value:t.value,label:t.label,obj:t}))}pushFacet(t){this.selectedFacets.push({facet:t,value:null}),this.requestUpdate(),t.inputType&&(this._input().type=t.inputType),this.clearInput(),this.autocomplete=[],this.renderRoot.activeElement!==this._input()?this.focusInput():this.completeTerm("")}pushValue(t){this.selectedFacets.at(-1).value=t,this.requestUpdate(),this._input().type="text",this.clearInput(),this.autocomplete=[],this.renderRoot.activeElement!==this._input()?this.focusInput():this.completeTerm("")}popFacet(){let t=this.selectedFacets.pop();return this.requestUpdate(),this._input().type="text",this.completeTerm(""),t}popValue(){if(this.selectedFacets.length===0)return;let t=this.selectedFacets.at(-1).value;return this.selectedFacets.at(-1).value=null,this.requestUpdate(),this._input().type="text",this.completeTerm(""),t}submit(){this._mode()&&this.popFacet(),this.storeQuery(this.collectQuery()).then(()=>{window.location.reload()})}clear(){this._input().value="",this._sort()&&(this._sort().value=""),this.selectedFacets=[],this.autocomplete=[]}deleteFacet(t){this.selectedFacets.splice(t,1),this.requestUpdate(),this.completeTerm(this._input().value)}async fetchFacets(t,e){let s=new URL(this.facetsAction,window.location.origin);return s.searchParams.set("search",this.search),t===void 0&&(t=""),e===void 0&&(e=""),s.searchParams.set("query",t),s.searchParams.set("term",e),fetch(s,{method:"GET",headers:{Accept:"application/json"}}).then(o=>{if(!o.ok)throw new Error(o.statusText);return o.json()}).then(o=>{let n=o.map(c=>L.fromObject(c));n.every(L.validate)||this._log("invalid facets"),this.facets=n})}async fetchValues(t,e,s){let i=new URL(this.valueAction,window.location.origin);return i.searchParams.set("search",this.search),t===void 0&&(t=""),e===void 0&&(e=""),s===void 0&&(s=""),i.searchParams.set("facet",t),i.searchParams.set("query",e),i.searchParams.set("term",s),fetch(i,{method:"GET",headers:{Accept:"application/json"}}).then(n=>{if(!n.ok)throw new Error(n.statusText);return n.json()}).then(n=>{let c=n.map(a=>E.fromObject(a));c.every(E.validate)||this._log("invalid values"),this.values=c})}async storeQuery(t){let e=new URL(this.queryAction,window.location.origin);t===void 0&&(t={});let s={method:"PUT",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({query:t})};return fetch(e,s).then(i=>{if(!i.ok)throw new Error(i.statusText);return i.json()})}collectQuery(){let t=this.selectedFacets.reduce((e,s)=>(s.value==null||e.push({facetLabel:s.facet.label,facet:s.facet.value,valueLabel:s.value.label,value:s.value.value}),e),[]);return{identifier:this.search,sorting:this._sort()?this._sort().value:"",facets:t}}encodeQuery(t){return btoa(encodeURIComponent(JSON.stringify(this.collectQuery().facets)))}};customElements.define("visual-search",Y);var tt=class extends f{static styles=_` + `}_mode(){return this.selectedFacets.length>0&&this.selectedFacets.at(-1).value==null}_input(){let t=this.renderRoot?this.renderRoot.querySelector("input"):null;return t===null&&this._log("input not found"),t}_sort(){return this.renderRoot.querySelector("#sorting")}_log(t){let e=new CustomEvent("debug",{detail:{message:t}});this.renderRoot.dispatchEvent(e)}complete(t){this._log("complete: "+t.label),this._mode()?this.pushValue(t.obj):this.pushFacet(t.obj)}handleFocus(t){t.target.value===""&&this.completeTerm("")}handleBlur(){}handleKeyDown(t){if(t.key==="Enter")if(this._mode()){if(t.target.value==="")return;this.pushValue(new E(t.target.value,t.target.value))}else this.storeQuery(this.collectQuery()).then(()=>{window.location.reload()});t.key==="Backspace"&&t.target.value===""&&this.popFacet()}handleKeyUp(t){}handleTab(t){t.key!=="Tab"||t.shiftKey||(t.preventDefault(),this._input().focus())}handleInput(t){this.completeTerm(t.target.value)}focusInput(){this._input()&&this._input().focus()}clearInput(){this._input()&&(this._input().value="")}completeTerm(t){let e=(s,...i)=>{s(...i).then(()=>{this.updateAutocomplete()}).catch(o=>{this._log(o)})};this.storeQuery(this.collectQuery()).then(()=>{this._mode()?e(this.fetchValues.bind(this),this.selectedFacets.at(-1).facet.value,"",t):e(this.fetchFacets.bind(this),"",t)})}loadStateFromQuery(){for(let t of this.query.facets)this.selectedFacets.push({facet:new L(t.facet,t.facetLabel),value:new E(t.value,t.valueLabel)})}updateAutocomplete(){this._mode()?this.autocomplete=this.values.map(t=>({value:t.value,label:t.label,obj:t})):this.autocomplete=this.facets.map(t=>({value:t.value,label:t.label,obj:t}))}pushFacet(t){this.selectedFacets.push({facet:t,value:null}),this.requestUpdate(),t.inputType&&(this._input().type=t.inputType),this.clearInput(),this.autocomplete=[],this.renderRoot.activeElement!==this._input()?this.focusInput():this.completeTerm("")}pushValue(t){this.selectedFacets.at(-1).value=t,this.requestUpdate(),this._input().type="text",this.clearInput(),this.autocomplete=[],this.renderRoot.activeElement!==this._input()?this.focusInput():this.completeTerm("")}popFacet(){let t=this.selectedFacets.pop();return this.requestUpdate(),this._input().type="text",this.completeTerm(""),t}popValue(){if(this.selectedFacets.length===0)return;let t=this.selectedFacets.at(-1).value;return this.selectedFacets.at(-1).value=null,this.requestUpdate(),this._input().type="text",this.completeTerm(""),t}submit(){this._mode()&&this.popFacet(),this.storeQuery(this.collectQuery()).then(()=>{window.location.reload()})}clear(){this._input().value="",this._sort()&&(this._sort().value=""),this.selectedFacets=[],this.autocomplete=[]}deleteFacet(t){this.selectedFacets.splice(t,1),this.requestUpdate(),this.completeTerm(this._input().value)}async fetchFacets(t,e){let s=new URL(this.facetsAction,window.location.origin);return s.searchParams.set("search",this.search),t===void 0&&(t=""),e===void 0&&(e=""),s.searchParams.set("query",t),s.searchParams.set("term",e),fetch(s,{method:"GET",headers:{Accept:"application/json"}}).then(o=>{if(!o.ok)throw new Error(o.statusText);return o.json()}).then(o=>{let n=o.map(c=>L.fromObject(c));n.every(L.validate)||this._log("invalid facets"),this.facets=n})}async fetchValues(t,e,s){let i=new URL(this.valueAction,window.location.origin);return i.searchParams.set("search",this.search),t===void 0&&(t=""),e===void 0&&(e=""),s===void 0&&(s=""),i.searchParams.set("facet",t),i.searchParams.set("query",e),i.searchParams.set("term",s),fetch(i,{method:"GET",headers:{Accept:"application/json"}}).then(n=>{if(!n.ok)throw new Error(n.statusText);return n.json()}).then(n=>{let c=n.map(a=>E.fromObject(a));c.every(E.validate)||this._log("invalid values"),this.values=c})}async storeQuery(t){let e=new URL(this.queryAction,window.location.origin);t===void 0&&(t={});let s={method:"PUT",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({query:t})};return fetch(e,s).then(i=>{if(!i.ok)throw new Error(i.statusText);return i.json()})}collectQuery(){let t=this.selectedFacets.reduce((e,s)=>(s.value==null||e.push({facetLabel:s.facet.label,facet:s.facet.value,valueLabel:s.value.label,value:s.value.value}),e),[]);return{identifier:this.search,sorting:this._sort()?this._sort().value:"",facets:t}}encodeQuery(t){return btoa(encodeURIComponent(JSON.stringify(this.collectQuery().facets)))}};customElements.define("visual-search",Y);var tt=class extends f{static styles=g` :host { display: inline-flex; align-items: center; @@ -231,7 +232,7 @@ border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom: transparent; - margin-top: calc(-8px * 0.6); // -12px; + margin-top: calc(-8px * 0.6); /* -12px; */ background: transparent; min-width: 12px; min-height: 11px; @@ -283,10 +284,10 @@ .close::after { transform: rotate(-45deg); } - `;static get properties(){return{facetLabel:{type:String,attribute:"facet-label"},facet:{type:String,attribute:!0},valueLabel:{type:String,attribute:"value-label"},value:{type:String,attribute:!0},disabled:{type:Boolean,attribute:!0}}}constructor(){super(),this.disabled=!1}_handleClick(){this.dispatchEvent(new CustomEvent("facet-delete",{bubbles:!0,composed:!0}))}render(){return d` + `;static get properties(){return{facetLabel:{type:String,attribute:"facet-label"},facet:{type:String,attribute:!0},valueLabel:{type:String,attribute:"value-label"},value:{type:String,attribute:!0},disabled:{type:Boolean,attribute:!0}}}constructor(){super(),this.disabled=!1}_handleClick(){this.dispatchEvent(new CustomEvent("facet-delete",{bubbles:!0,composed:!0}))}render(){return u` ${this.facetLabel}: ${this.valueLabel} - ${this.value?d``:""} - `}};customElements.define("search-facet",tt);var et=class extends f{static get properties(){return{_log:{type:Array}}}constructor(){super(),this._log=[]}connectedCallback(){super.connectedCallback(),this.parentNode.addEventListener("debug",t=>this._debug(t.detail))}static styles=_` + ${this.value?u``:""} + `}};customElements.define("search-facet",tt);var et=class extends f{static get properties(){return{_log:{type:Array}}}constructor(){super(),this._log=[]}connectedCallback(){super.connectedCallback(),this.parentNode.addEventListener("debug",t=>this._debug(t.detail))}static styles=g` :host { display: inline-block; width: 100%; @@ -306,11 +307,138 @@ li { list-style: none; } - `;render(){return d` + `;render(){return u`
    - ${this._log.reverse().map(t=>d`
  • ${t.time} ${t.message}
    • `)} + ${this._log.reverse().map(t=>u`
  • ${t.time} ${t.message}
    • `)}
- `}_debug(t){this._log.push({time:new Date().toLocaleTimeString(void 0,{hour12:!1}),message:t.message}),this.requestUpdate()}};customElements.define("debug-log",et);})(); + `}_debug(t){this._log.push({time:new Date().toLocaleTimeString(void 0,{hour12:!1}),message:t.message}),this.requestUpdate()}};customElements.define("debug-log",et);var st=class extends f{static styles=g` + :host { + display: flex; + min-width: 14px; + min-height: 14px; + width: 14px; + height: 14px; + align-items: center; + justify-content: center; + transform: scale(calc(14/24)); + } + + .search { + box-sizing: border-box; + position: relative; + display: block; + width: 16px; + height: 16px; + border: 2px solid; + border-radius: 100%; + margin-left: -4px; + margin-top: -4px; + max-width: 100%; + max-height: 100%; + } + + .search::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 3px; + width: 2px; + height: 8px; + background: currentcolor; + transform: rotate(-45deg); + top: 10px; + left: 12px; + } + + .sort, + .sort::after, + .sort::before { + display: block; + box-sizing: border-box; + height: 2px; + border-radius: 4px; + background: currentcolor; + } + + .sort { + position: relative; + width: 8px; + } + + .sort::after, + .sort::before { + content: ""; + position: absolute; + } + + .sort::before { + width: 12px; + top: -4px; + left: -2px; + } + + .sort::after { + width: 4px; + top: 4px; + left: 2px; + } + + .clear { + min-width: 10px; + min-height: 12px; + } + + .clear { + box-sizing: border-box; + position: relative; + display: block; + width: 10px; + height: 12px; + border: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0, + inset 2px 0 0; + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + margin-top: 4px; + } + + .clear::after, + .clear::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + } + + .clear::after { + background: currentcolor; + border-radius: 3px; + width: 16px; + height: 2px; + top: -4px; + left: -5px; + min-width: 16px; + min-height: 2px; + } + + .clear::before { + width: 10px; + height: 4px; + border: 2px solid; + border-bottom: transparent; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + top: -7px; + left: -2px; + min-width: 10px; + min-height: 4px; + } + `;static get properties(){return{icon:{type:String}}}constructor(){super(),this.icon="close"}render(){return u` + + `}};customElements.define("search-icon",st);})(); /*! Bundled license information: @lit/reactive-element/css-tag.js: