p3x-redis-ui-material
Version:
💿 The p3x-redis-ui-material web interface that connects to the p3x-redis-ui-server via http and socket.io
1 lines • 4.63 kB
JavaScript
"use strict";(self.webpackChunkp3x_redis_ui_material=self.webpackChunkp3x_redis_ui_material||[]).push([[7541],{29515(e,t,n){n.d(t,{CommandPaletteDialogComponent:()=>v});var i=n(63924),s=n(71016),l=n(64961),a=n(86623),r=n(33825),c=n(73761),o=n(90918),d=n(23232),p=n(2816),m=n(51218),h=n(24698);const u=["searchInput"],x=(e,t)=>t.label;function f(e,t){if(1&e){const e=m.RV6();m.j41(0,"div",7),m.bIt("click",(function(){const t=h.eBV(e).$implicit,n=m.XpG();return h.Njj(n.execute(t))})),m.j41(1,"span",8),m.EFF(2),m.k0s(),m.j41(3,"kbd",9),m.EFF(4),m.k0s()()}if(2&e){const e=t.$implicit,n=t.$index,i=m.XpG();m.AVh("p3xr-command-palette-item-active",n===i.selectedIndex),m.R7$(2),m.JRh(e.description),m.R7$(2),m.JRh(e.label)}}function g(e,t){if(1&e&&(m.j41(0,"div",6),m.EFF(1),m.k0s()),2&e){let e;const t=m.XpG();m.R7$(),m.SpI(" ",(null==(e=t.strings().label)?null:e.noResults)||"No results"," ")}}class v{dialogRef;i18n;shortcutsService;searchInput;search="";selectedIndex=0;strings;allItems=[];filtered=[];constructor(e,t,n){this.dialogRef=e,this.i18n=t,this.shortcutsService=n,this.strings=this.i18n.strings}ngOnInit(){const e=this.strings(),t=new Set;this.allItems=[];for(const n of this.shortcutsService.getShortcuts())t.has(n.descriptionKey)||(t.add(n.descriptionKey),this.allItems.push({label:n.label,description:e?.label?.[n.descriptionKey]||n.descriptionKey,shortcut:n}));this.filtered=[...this.allItems]}ngAfterViewInit(){setTimeout((()=>this.searchInput?.nativeElement?.focus()),50)}onKeydown(e){"ArrowDown"===e.key?(e.preventDefault(),this.selectedIndex=Math.min(this.selectedIndex+1,this.filtered.length-1)):"ArrowUp"===e.key?(e.preventDefault(),this.selectedIndex=Math.max(this.selectedIndex-1,0)):"Enter"===e.key?(e.preventDefault(),this.filtered[this.selectedIndex]&&this.execute(this.filtered[this.selectedIndex])):"Escape"===e.key?this.dialogRef.close():this.filter()}filter(){const e=this.search.toLowerCase().trim();this.filtered=e?this.allItems.filter((t=>t.description.toLowerCase().includes(e)||t.label.toLowerCase().includes(e))):[...this.allItems],this.selectedIndex=0}execute(e){this.dialogRef.close(),e.shortcut.action()}static ɵfac=function(e){return new(e||v)(m.rXU(l.CP),m.rXU(d.W),m.rXU(p.t))};static ɵcmp=m.VBU({type:v,selectors:[["p3xr-command-palette-dialog"]],viewQuery:function(e,t){if(1&e&&m.GBs(u,5),2&e){let e;m.mGM(e=m.lsd())&&(t.searchInput=e.first)}},decls:10,vars:3,consts:[["searchInput",""],[1,"p3xr-command-palette"],[1,"p3xr-command-palette-search"],["matInput","","autocomplete","off",3,"ngModelChange","keydown","ngModel","placeholder"],[1,"p3xr-command-palette-list"],[1,"p3xr-command-palette-item",3,"p3xr-command-palette-item-active"],[1,"p3xr-command-palette-empty"],[1,"p3xr-command-palette-item",3,"click"],[1,"p3xr-command-palette-desc"],[1,"p3xr-kbd"]],template:function(e,t){if(1&e){const e=m.RV6();m.j41(0,"div",1)(1,"div",2)(2,"mat-icon"),m.EFF(3,"search"),m.k0s(),m.j41(4,"input",3,0),m.mxI("ngModelChange",(function(n){return h.eBV(e),m.DH7(t.search,n)||(t.search=n),h.Njj(n)})),m.bIt("keydown",(function(e){return t.onKeydown(e)})),m.k0s()(),m.j41(6,"div",4),m.Z7z(7,f,5,4,"div",5,x),m.nVh(9,g,2,1,"div",6),m.k0s()()}if(2&e){let e;m.R7$(4),m.R50("ngModel",t.search),m.Y8G("placeholder",(null==(e=t.strings().label)?null:e.commandPalette)||"Command Palette"),m.R7$(3),m.Dyx(t.filtered),m.R7$(2),m.vxM(0===t.filtered.length?9:-1)}},dependencies:[i.MD,s.YN,s.me,s.BC,s.vS,l.hM,a.Fg,r.m_,r.An,c.fS,c.fg,o.RG],styles:[".p3xr-command-palette[_ngcontent-%COMP%] { width: 100%; min-width: 400px; }\n .p3xr-command-palette-search[_ngcontent-%COMP%] {\n display: flex; align-items: center; gap: 8px; padding: 12px 16px;\n border-bottom: 1px solid var(--p3xr-list-border, rgba(0,0,0,0.12));\n }\n .p3xr-command-palette-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1; border: none; outline: none; background: transparent;\n color: inherit; font-size: 16px; font-family: inherit;\n }\n .p3xr-command-palette-list[_ngcontent-%COMP%] { max-height: 300px; overflow-y: auto; }\n .p3xr-command-palette-item[_ngcontent-%COMP%] {\n display: flex; align-items: center; justify-content: space-between;\n padding: 10px 16px; cursor: pointer;\n }\n .p3xr-command-palette-item[_ngcontent-%COMP%]:hover, .p3xr-command-palette-item-active[_ngcontent-%COMP%] {\n background: var(--p3xr-hover-bg, rgba(0,0,0,0.04));\n }\n .p3xr-command-palette-empty[_ngcontent-%COMP%] { padding: 16px; text-align: center; opacity: 0.5; }"]})}}}]);