katalyst-tables 3.5.5 → 3.6.0

data/app/assets/builds/katalyst/tables.js

@@ -725,6 +725,7 @@ class QueryController extends Controller {
 
   closeModal() {
     delete this.modalTarget.dataset.open;
+    this.query.setAttribute("aria-expanded", false);
 
     if (document.activeElement === this.query) document.activeElement.blur();
 
@@ -733,6 +734,7 @@ class QueryController extends Controller {
 
   openModal() {
     this.modalTarget.dataset.open = true;
+    this.query.setAttribute("aria-expanded", true);
 
     document.addEventListener("selectionchange", this.selection);
   }
@@ -761,25 +763,26 @@ class QueryController extends Controller {
       delete this.pending;
     }
 
-    // prevent an unnecessary `?q=` parameter from appearing in the URL
+    // add/remove current cursor position
+    if (hasFocus && this.query.value !== "") {
+      this.position.value = position;
+      this.position.disabled = false;
+    } else {
+      this.position.value = "";
+      this.position.disabled = true;
+    }
+
+    // prevent an unnecessary `?q=&p=0` parameter from appearing in the URL
     if (this.query.value === "") {
       this.query.disabled = true;
 
       // restore input and focus after form submission
       setTimeout(() => {
         this.query.disabled = false;
+        this.position.disabled = false;
         if (hasFocus) this.query.focus();
       }, 0);
     }
-
-    // add/remove current cursor position
-    if (hasFocus && position) {
-      this.position.value = position;
-      this.position.disabled = false;
-    } else {
-      this.position.value = "";
-      this.position.disabled = true;
-    }
   }
 
   update = () => {
@@ -801,8 +804,85 @@ class QueryController extends Controller {
     }
   }
 
+  moveToPreviousSuggestion() {
+    const prev = this.previousSuggestion || this.lastSuggestion;
+
+    if (prev) this.makeSuggestionActive(prev);
+  }
+
+  moveToNextSuggestion() {
+    const next = this.nextSuggestion || this.firstSuggestion;
+
+    if (next) this.makeSuggestionActive(next);
+  }
+
+  selectFirstSuggestion(e) {
+    // This is caused by pressing the tab key. We don't want to move focus.
+    // Ideally we don't want to always prevent the user from tabbing. We will address this later
+    e.preventDefault();
+
+    this.firstSuggestion?.dispatchEvent(new CustomEvent("query:select"));
+  }
+
+  selectActiveSuggestion() {
+    if (!this.activeSuggestion) {
+      this.closeModal();
+      return;
+    }
+
+    this.activeSuggestion.dispatchEvent(new CustomEvent("query:select"));
+  }
+
+  selectSuggestion(e) {
+    this.query.dispatchEvent(
+      new CustomEvent("replaceToken", {
+        detail: { token: e.params.value, position: this.query.selectionStart },
+      }),
+    );
+
+    this.clearActiveSuggestion();
+  }
+
+  makeSuggestionActive(node) {
+    if (this.activeSuggestion) {
+      this.activeSuggestion.setAttribute("aria-selected", "false");
+    }
+
+    this.query.setAttribute("aria-activedescendant", node.id);
+    node.setAttribute("aria-selected", "true");
+  }
+
+  clearActiveSuggestion() {
+    if (this.activeSuggestion) {
+      this.activeSuggestion.setAttribute("aria-selected", "false");
+      this.query.removeAttribute("aria-activedescendant");
+    }
+  }
+
+  get activeSuggestion() {
+    return this.modalTarget.querySelector(
+      `#${this.query.getAttribute("aria-activedescendant")}`,
+    );
+  }
+
+  get previousSuggestion() {
+    return this.activeSuggestion?.previousElementSibling;
+  }
+
+  get nextSuggestion() {
+    return this.activeSuggestion?.nextElementSibling;
+  }
+
+  get firstSuggestion() {
+    return this.modalTarget.querySelector("#suggestions li:first-of-type");
+  }
+
+  get lastSuggestion() {
+    return this.modalTarget.querySelector("#suggestions li:last-of-type");
+  }
+
   get query() {
-    return this.element.querySelector("[role=searchbox]");
+    return this.element.querySelector("[role=combobox]");
   }
 
   get position() {
@@ -838,6 +918,49 @@ class QueryInputController extends Controller {
       this.highlightTarget.appendChild(token.render());
     });
   }
+
+  replaceToken(e) {
+    let tokenToAdd = e.detail.token.toString();
+
+    // wrap in quotes if it contains a spaces or special characters
+    if (/\s/.exec(tokenToAdd)) {
+      tokenToAdd = `"${tokenToAdd}"`;
+    }
+
+    const indexPosition = e.detail.position;
+    let caretPosition = indexPosition + tokenToAdd.length;
+    let sliceStart = indexPosition;
+    let sliceEnd = indexPosition;
+
+    // detect if position has a token already, if so, replace it
+    const existingToken = new Parser()
+      .parse(this.queryValue)
+      .tokenAtPosition(indexPosition);
+    if (existingToken) {
+      // We don't want to include the trailing space as we are replacing an existing value
+      tokenToAdd = tokenToAdd.trim();
+
+      // Slice up to the beginning of the tokens value (not the initial caret position)
+      sliceStart = existingToken.startOfValue();
+
+      // Slice after the end of the tokens value
+      sliceEnd = existingToken.endOfValue();
+
+      // The end position of the newly added token
+      caretPosition = sliceStart + tokenToAdd.length;
+    }
+
+    // Replace any text within sliceStart and sliceEnd with tokenToAdd
+    this.inputTarget.value =
+      this.queryValue.slice(0, sliceStart) +
+      tokenToAdd +
+      this.queryValue.slice(sliceEnd);
+
+    // Re focus the input at the end of the newly added token
+    this.update();
+    this.inputTarget.focus();
+    this.inputTarget.setSelectionRange(caretPosition, caretPosition);
+  }
 }
 
 class Parser {
@@ -871,13 +994,13 @@ class Parser {
   skipWhitespace(query) {
     if (!query.scan(/\s+/)) return;
 
-    return new Token(query.matched());
+    return new Token(query.matched(), query.position);
   }
 
   takeUntagged(query) {
     if (!query.scan(/\S+/)) return;
 
-    return new Untagged(query.matched());
+    return new Untagged(query.matched(), query.position);
   }
 
   takeTagged(query) {
@@ -889,13 +1012,13 @@ class Parser {
     const value =
       this.takeArrayValue(query) || this.takeSingleValue(query) || new Token();
 
-    return new Tagged(key, separator, value);
+    return new Tagged(key, separator, value, query.position);
   }
 
   takeArrayValue(query) {
     if (!query.scan(/\[\s*/)) return;
 
-    const start = new Token(query.matched());
+    const start = new Token(query.matched(), query.position);
     const values = (this.values = []);
 
     while (!query.isEos()) {
@@ -904,17 +1027,17 @@ class Parser {
     }
 
     query.scan(/\s*]/);
-    const end = new Token(query.matched());
+    const end = new Token(query.matched(), query.position);
 
     this.values = null;
 
-    return new Array$1(start, values, end);
+    return new ArrayToken(start, values, end);
   }
 
   takeDelimiter(query) {
     if (!query.scan(/\s*,\s*/)) return;
 
-    return new Token(query.matched());
+    return new Token(query.matched(), query.position);
   }
 
   takeSingleValue(query) {
@@ -924,24 +1047,49 @@ class Parser {
   takeQuotedValue(query) {
     if (!query.scan(/"([^"]*)"/)) return;
 
-    return new Value(query.matched());
+    return new Value(query.matched(), query.position);
   }
 
   takeUnquotedValue(query) {
     if (!query.scan(/[^ \],]*/)) return;
 
-    return new Value(query.matched());
+    return new Value(query.matched(), query.position);
+  }
+
+  tokenAtPosition(position) {
+    return this.tokens
+      .filter((t) => t instanceof Tagged || t instanceof Untagged)
+      .find((t) => t.range.includes(position));
   }
 }
 
 class Token {
-  constructor(value = "") {
+  constructor(value = "", position) {
     this.value = value;
+    this.length = this.value.length;
+    this.start = position - this.length;
+    this.end = this.start + this.length;
+    this.range = this.arrayRange(this.start, this.end);
   }
 
   render() {
     return document.createTextNode(this.value);
   }
+
+  arrayRange(start, stop) {
+    return Array.from(
+      { length: stop - start + 1 },
+      (value, index) => start + index,
+    );
+  }
+
+  startOfValue() {
+    return this.start;
+  }
+
+  endOfValue() {
+    return this.end;
+  }
 }
 
 class Value extends Token {
@@ -955,12 +1103,16 @@ class Value extends Token {
 }
 
 class Tagged extends Token {
-  constructor(key, separator, value) {
+  constructor(key, separator, value, position) {
     super();
 
     this.key = key;
     this.separator = separator;
     this.value = value;
+    this.length = key.length + separator.length + value.value.length;
+    this.start = position - this.length;
+    this.end = this.start + this.length;
+    this.range = this.arrayRange(this.start, this.end);
   }
 
   render() {
@@ -977,6 +1129,14 @@ class Tagged extends Token {
 
     return span;
   }
+
+  startOfValue() {
+    return this.value.startOfValue();
+  }
+
+  endOfValue() {
+    return this.value.endOfValue();
+  }
 }
 
 class Untagged extends Token {
@@ -988,13 +1148,18 @@ class Untagged extends Token {
   }
 }
 
-let Array$1 = class Array extends Token {
+class ArrayToken extends Token {
   constructor(start, values, end) {
     super();
 
     this.start = start;
     this.values = values;
     this.end = end;
+    this.range = this.arrayRange(start.start, end.range[end.length]);
+    this.length =
+      start.length +
+      values.reduce((length, value) => length + value.length, 0) +
+      end.length;
   }
 
   render() {
@@ -1012,7 +1177,15 @@ let Array$1 = class Array extends Token {
 
     return array;
   }
-};
+
+  startOfValue() {
+    return this.start.start;
+  }
+
+  endOfValue() {
+    return this.end.end;
+  }
+}
 
 class StringScanner {
   constructor(input) {

data/app/assets/builds/katalyst/tables.min.js

@@ -1,2 +1,2 @@
-import{Controller as e}from"@hotwired/stimulus";class t{constructor(e,t,s){this.cursorOffset=t.offsetY,this.initialPosition=t.target.offsetTop-e.offsetTop,this.targetId=s}updateCursor(e,t,s,i){this.listOffset=e.getBoundingClientRect().top;let a=s.clientY-this.listOffset-this.cursorOffset;this.#e(e,t,a,i)}updateScroll(e,t,s){const i=this.listOffset;this.listOffset=e.getBoundingClientRect().top;const a=i-this.listOffset,r=this.position+a;this.#e(e,t,r,s)}#e(e,t,s,i){s=Math.max(s,0),s=Math.min(s,e.offsetHeight-t.offsetHeight),this.position=s;i(s-this.initialPosition)}}class s extends e{static outlets=["tables--selection--form"];static values={params:Object,checked:Boolean};tablesSelectionFormOutletConnected(e){e.visible(this.id,!0),this.checkedValue=e.isSelected(this.id)}disconnect(){this.hasTablesSelectionFormOutlet&&this.tablesSelectionFormOutlet.visible(this.id,!1)}change(e){e.preventDefault(),this.checkedValue=this.tablesSelectionFormOutlet.toggle(this.id)}get id(){return this.paramsValue.id}paramsValueChanged(e,t){this.hasTablesSelectionFormOutlet&&(t.id!==e.id&&this.tablesSelectionFormOutlet.visible(t.id,!1),this.tablesSelectionFormOutlet.visible(e.id,!0),this.checkedValue=this.tablesSelectionFormOutlet.isSelected(e.id),this.update())}checkedValueChanged(){this.hasTablesSelectionFormOutlet&&(this.checkedValue=this.tablesSelectionFormOutlet.isSelected(this.id),this.update())}async update(){return this.updating||=Promise.resolve().then((()=>{this.#t(),delete this.updating})),this.updating}#t(){this.element.querySelector("input").checked=this.checkedValue,this.dispatch("select",{detail:{id:this.id,selected:this.checkedValue}})}}class i{constructor(){this.tokens=[],this.values=null}parse(e){const t=new h(e);for(;!t.isEos();){this.push(this.skipWhitespace(t));const e=this.takeTagged(t)||this.takeUntagged(t);if(!this.push(e))break}return this}push(e){return e&&(this.values?this.values.push(e):this.tokens.push(e)),!!e}skipWhitespace(e){if(e.scan(/\s+/))return new a(e.matched())}takeUntagged(e){if(e.scan(/\S+/))return new l(e.matched())}takeTagged(e){if(!e.scan(/(\w+(?:\.\w+)?)(:\s*)/))return;const t=e.valueAt(1),s=e.valueAt(2),i=this.takeArrayValue(e)||this.takeSingleValue(e)||new a;return new n(t,s,i)}takeArrayValue(e){if(!e.scan(/\[\s*/))return;const t=new a(e.matched()),s=this.values=[];for(;!e.isEos()&&this.push(this.takeSingleValue(e))&&this.push(this.takeDelimiter(e)););e.scan(/\s*]/);const i=new a(e.matched());return this.values=null,new o(t,s,i)}takeDelimiter(e){if(e.scan(/\s*,\s*/))return new a(e.matched())}takeSingleValue(e){return this.takeQuotedValue(e)||this.takeUnquotedValue(e)}takeQuotedValue(e){if(e.scan(/"([^"]*)"/))return new r(e.matched())}takeUnquotedValue(e){if(e.scan(/[^ \],]*/))return new r(e.matched())}}class a{constructor(e=""){this.value=e}render(){return document.createTextNode(this.value)}}class r extends a{render(){const e=document.createElement("span");return e.className="value",e.innerText=this.value,e}}class n extends a{constructor(e,t,s){super(),this.key=e,this.separator=t,this.value=s}render(){const e=document.createElement("span");e.className="tag";const t=document.createElement("span");return t.className="key",t.innerText=this.key,e.appendChild(t),e.appendChild(document.createTextNode(this.separator)),e.appendChild(this.value.render()),e}}class l extends a{render(){const e=document.createElement("span");return e.className="untagged",e.innerText=this.value,e}}let o=class extends a{constructor(e,t,s){super(),this.start=e,this.values=t,this.end=s}render(){const e=document.createElement("span");return e.className="array-values",e.appendChild(this.start.render()),this.values.forEach((t=>{const s=document.createElement("span");s.appendChild(t.render()),e.appendChild(s)})),e.appendChild(this.end.render()),e}};class h{constructor(e){this.input=e,this.position=0,this.last=null}isEos(){return this.position>=this.input.length}scan(e){const t=e.exec(this.input.substring(this.position));return 0===t?.index?(this.last=t,this.position+=t[0].length,!0):(this.last={},!1)}matched(){return this.last&&this.last[0]}valueAt(e){return this.last&&this.last[e]}}const u=[{identifier:"tables--orderable--item",controllerConstructor:class extends e{static values={params:Object};connect(){var e;this.index=(e=this.row,Array.from(e.parentElement.children).indexOf(e))}paramsValueChanged(e){this.id=e.id_value}dragUpdate(e){this.dragOffset=e,this.row.style.position="relative",this.row.style.top=e+"px",this.row.style.zIndex="1",this.row.toggleAttribute("dragging",!0)}updateVisually(e){this.row.style.position="relative",this.row.style.top=this.row.offsetHeight*(e-this.dragIndex)+"px"}updateIndex(e){this.index=e}params(e){const{id_name:t,id_value:s,index_name:i}=this.paramsValue;return[{name:`${e}[${s}][${t}]`,value:this.id},{name:`${e}[${s}][${i}]`,value:this.index}]}reset(){delete this.dragOffset,this.row.removeAttribute("style"),this.row.removeAttribute("dragging")}get hasChanges(){return this.paramsValue.index_value!==this.index}get dragIndex(){return this.dragOffset&&0!==this.dragOffset?this.index+Math.round(this.dragOffset/this.row.offsetHeight):this.index}get comparisonIndex(){return this.dragOffset?this.dragIndex+(this.dragOffset>0?.5:-.5):this.index}get row(){return this.element.parentElement}}},{identifier:"tables--orderable--list",controllerConstructor:class extends e{static outlets=["tables--orderable--item","tables--orderable--form"];startDragging(e){this.dragState=e,document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup),window.addEventListener("scroll",this.scroll,!0),this.element.style.position="relative"}stopDragging(){const e=this.dragState;return delete this.dragState,document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),window.removeEventListener("scroll",this.scroll,!0),this.element.removeAttribute("style"),this.tablesOrderableItemOutlets.forEach((e=>e.reset())),e}drop(){const e=this.dragItem;if(!e)return;const t=e.dragIndex,s=this.tablesOrderableItemOutlets[t];s&&(t<e.index?s.row.insertAdjacentElement("beforebegin",e.row):t>e.index&&s.row.insertAdjacentElement("afterend",e.row),this.tablesOrderableItemOutlets.forEach(((e,t)=>e.updateIndex(t))),this.commitChanges())}commitChanges(){this.tablesOrderableFormOutlet.clear(),this.tablesOrderableItemOutlets.forEach((e=>{e.hasChanges&&this.tablesOrderableFormOutlet.add(e)})),this.tablesOrderableFormOutlet.submit()}mousedown(e){if(this.isDragging)return;const s=this.#s(e.target);s&&(e.preventDefault(),this.startDragging(new t(this.element,e,s.id)),this.dragState.updateCursor(this.element,s.row,e,this.animate))}mousemove=e=>{this.isDragging&&(e.preventDefault(),this.ticking||(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState?.updateCursor(this.element,this.dragItem.row,e,this.animate)}))))};scroll=e=>{this.isDragging&&!this.ticking&&(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState?.updateScroll(this.element,this.dragItem.row,this.animate)})))};mouseup=e=>{this.isDragging&&(this.drop(),this.stopDragging(),this.tablesOrderableFormOutlets.forEach((e=>delete e.dragState)))};tablesOrderableFormOutletConnected(e,t){e.dragState&&this.startDragging(e.dragState)}tablesOrderableFormOutletDisconnected(e,t){this.isDragging&&(e.dragState=this.stopDragging())}beforeMorphAttribute(e){switch(e.detail.attributeName){case"dragging":e.preventDefault();break;case"style":"TBODY"!==e.target.tagName&&"TR"!==e.target.tagName||e.preventDefault()}}animate=e=>{const t=this.dragItem;t.dragUpdate(e),this.#i.forEach(((e,s)=>{e!==t&&e.updateVisually(s)}))};get isDragging(){return!!this.dragState}get dragItem(){return this.isDragging?this.tablesOrderableItemOutlets.find((e=>e.id===this.dragState.targetId)):null}get#i(){return this.tablesOrderableItemOutlets.toSorted(((e,t)=>e.comparisonIndex-t.comparisonIndex))}#s(e){return this.tablesOrderableItemOutlets.find((t=>t.element===e))}}},{identifier:"tables--orderable--form",controllerConstructor:class extends e{static values={scope:String};add(e){e.params(this.scopeValue).forEach((({name:e,value:t})=>{this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${e}" value="${t}" data-generated>`)}))}submit(){0!==this.inputs.length&&this.element.requestSubmit()}clear(){this.inputs.forEach((e=>e.remove()))}get inputs(){return this.element.querySelectorAll("input[data-generated]")}}},{identifier:"tables--selection--form",controllerConstructor:class extends e{static values={count:Number,primaryKey:{type:String,default:"id"}};static targets=["count","singular","plural"];connect(){this.countValue=this.inputs.length}toggle(e){const t=this.input(e);return t?t.remove():this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${this.primaryKeyValue}[]" value="${e}">`),this.countValue=this.visibleInputs.length,!t}visible(e,t){const s=this.input(e);return s&&(s.disabled=!t),this.countValue=this.visibleInputs.length,!s}isSelected(e){return!!this.input(e)}get inputs(){return this.element.querySelectorAll(`input[name="${this.primaryKeyValue}[]"]`)}get visibleInputs(){return Array.from(this.inputs).filter((e=>!e.disabled))}input(e){return this.element.querySelector(`input[name="${this.primaryKeyValue}[]"][value="${e}"]`)}countValueChanged(e){this.element.toggleAttribute("hidden",0===e),this.countTarget.textContent=e,this.singularTarget.toggleAttribute("hidden",1!==e),this.pluralTarget.toggleAttribute("hidden",1===e)}}},{identifier:"tables--selection--item",controllerConstructor:s},{identifier:"tables--selection--table",controllerConstructor:class extends e{static targets=["header","item"];static outlets=["tables--selection--form"];itemTargetConnected(e){this.update()}itemTargetDisconnected(e){this.update()}toggleHeader(e){this.items.forEach((t=>{t.checkedValue!==e.target.checked&&(t.checkedValue=this.tablesSelectionFormOutlet.toggle(t.id))}))}async update(){return this.updating||=Promise.resolve().then((()=>{this.#t(),delete this.updating})),this.updating}#t(){let e=0,t=0;this.items.forEach((s=>{e++,s.checkedValue&&t++})),this.headerInput.checked=e>0&&t===e,this.headerInput.indeterminate=t>0&&t!==e}get headerInput(){return this.headerTarget.querySelector("input")}get items(){return this.itemTargets.map((e=>this.#a(e))).filter((e=>e))}#a(e){return this.application.getControllerForElementAndIdentifier(e,"tables--selection--item")}}},{identifier:"tables--query",controllerConstructor:class extends e{static targets=["modal"];disconnect(){delete this.pending,document.removeEventListener("selectionchange",this.selection)}focus(){document.activeElement!==this.query&&(this.query.addEventListener("focusin",(e=>{e.target.setSelectionRange(-1,-1)}),{once:!0}),this.query.focus())}closeModal(){delete this.modalTarget.dataset.open,document.activeElement===this.query&&document.activeElement.blur(),document.removeEventListener("selectionchange",this.selection)}openModal(){this.modalTarget.dataset.open=!0,document.addEventListener("selectionchange",this.selection)}clear(){""===this.query.value?this.closeModal():(this.query.value="",this.query.dispatchEvent(new Event("input")),this.query.dispatchEvent(new Event("change")),this.update())}submit(){const e=this.isFocused,t=e&&this.query.selectionStart;this.pending&&(clearTimeout(this.pending),delete this.pending),""===this.query.value&&(this.query.disabled=!0,setTimeout((()=>{this.query.disabled=!1,e&&this.query.focus()}),0)),e&&t?(this.position.value=t,this.position.disabled=!1):(this.position.value="",this.position.disabled=!0)}update=()=>{this.pending&&clearTimeout(this.pending),this.pending=setTimeout((()=>{this.element.requestSubmit()}),300)};selection=()=>{this.isFocused&&this.query.value.length>0&&this.update()};beforeMorphAttribute(e){if("data-open"===e.detail.attributeName)e.preventDefault()}get query(){return this.element.querySelector("[role=searchbox]")}get position(){return this.element.querySelector("input[name=p]")}get isFocused(){return this.query===document.activeElement}}},{identifier:"tables--query-input",controllerConstructor:class extends e{static targets=["input","highlight"];static values={query:String};connect(){this.queryValue=this.inputTarget.value,this.element.dataset.connected=""}disconnect(){delete this.element.dataset.connected}update(){this.queryValue=this.inputTarget.value}queryValueChanged(e){this.highlightTarget.innerHTML="",(new i).parse(e).tokens.forEach((e=>{this.highlightTarget.appendChild(e.render())}))}}}];export{u as default};
+import{Controller as e}from"@hotwired/stimulus";class t{constructor(e,t,s){this.cursorOffset=t.offsetY,this.initialPosition=t.target.offsetTop-e.offsetTop,this.targetId=s}updateCursor(e,t,s,i){this.listOffset=e.getBoundingClientRect().top;let n=s.clientY-this.listOffset-this.cursorOffset;this.#e(e,t,n,i)}updateScroll(e,t,s){const i=this.listOffset;this.listOffset=e.getBoundingClientRect().top;const n=i-this.listOffset,a=this.position+n;this.#e(e,t,a,s)}#e(e,t,s,i){s=Math.max(s,0),s=Math.min(s,e.offsetHeight-t.offsetHeight),this.position=s;i(s-this.initialPosition)}}class s extends e{static outlets=["tables--selection--form"];static values={params:Object,checked:Boolean};tablesSelectionFormOutletConnected(e){e.visible(this.id,!0),this.checkedValue=e.isSelected(this.id)}disconnect(){this.hasTablesSelectionFormOutlet&&this.tablesSelectionFormOutlet.visible(this.id,!1)}change(e){e.preventDefault(),this.checkedValue=this.tablesSelectionFormOutlet.toggle(this.id)}get id(){return this.paramsValue.id}paramsValueChanged(e,t){this.hasTablesSelectionFormOutlet&&(t.id!==e.id&&this.tablesSelectionFormOutlet.visible(t.id,!1),this.tablesSelectionFormOutlet.visible(e.id,!0),this.checkedValue=this.tablesSelectionFormOutlet.isSelected(e.id),this.update())}checkedValueChanged(){this.hasTablesSelectionFormOutlet&&(this.checkedValue=this.tablesSelectionFormOutlet.isSelected(this.id),this.update())}async update(){return this.updating||=Promise.resolve().then((()=>{this.#t(),delete this.updating})),this.updating}#t(){this.element.querySelector("input").checked=this.checkedValue,this.dispatch("select",{detail:{id:this.id,selected:this.checkedValue}})}}class i{constructor(){this.tokens=[],this.values=null}parse(e){const t=new u(e);for(;!t.isEos();){this.push(this.skipWhitespace(t));const e=this.takeTagged(t)||this.takeUntagged(t);if(!this.push(e))break}return this}push(e){return e&&(this.values?this.values.push(e):this.tokens.push(e)),!!e}skipWhitespace(e){if(e.scan(/\s+/))return new n(e.matched(),e.position)}takeUntagged(e){if(e.scan(/\S+/))return new l(e.matched(),e.position)}takeTagged(e){if(!e.scan(/(\w+(?:\.\w+)?)(:\s*)/))return;const t=e.valueAt(1),s=e.valueAt(2),i=this.takeArrayValue(e)||this.takeSingleValue(e)||new n;return new r(t,s,i,e.position)}takeArrayValue(e){if(!e.scan(/\[\s*/))return;const t=new n(e.matched(),e.position),s=this.values=[];for(;!e.isEos()&&this.push(this.takeSingleValue(e))&&this.push(this.takeDelimiter(e)););e.scan(/\s*]/);const i=new n(e.matched(),e.position);return this.values=null,new o(t,s,i)}takeDelimiter(e){if(e.scan(/\s*,\s*/))return new n(e.matched(),e.position)}takeSingleValue(e){return this.takeQuotedValue(e)||this.takeUnquotedValue(e)}takeQuotedValue(e){if(e.scan(/"([^"]*)"/))return new a(e.matched(),e.position)}takeUnquotedValue(e){if(e.scan(/[^ \],]*/))return new a(e.matched(),e.position)}tokenAtPosition(e){return this.tokens.filter((e=>e instanceof r||e instanceof l)).find((t=>t.range.includes(e)))}}class n{constructor(e="",t){this.value=e,this.length=this.value.length,this.start=t-this.length,this.end=this.start+this.length,this.range=this.arrayRange(this.start,this.end)}render(){return document.createTextNode(this.value)}arrayRange(e,t){return Array.from({length:t-e+1},((t,s)=>e+s))}startOfValue(){return this.start}endOfValue(){return this.end}}class a extends n{render(){const e=document.createElement("span");return e.className="value",e.innerText=this.value,e}}class r extends n{constructor(e,t,s,i){super(),this.key=e,this.separator=t,this.value=s,this.length=e.length+t.length+s.value.length,this.start=i-this.length,this.end=this.start+this.length,this.range=this.arrayRange(this.start,this.end)}render(){const e=document.createElement("span");e.className="tag";const t=document.createElement("span");return t.className="key",t.innerText=this.key,e.appendChild(t),e.appendChild(document.createTextNode(this.separator)),e.appendChild(this.value.render()),e}startOfValue(){return this.value.startOfValue()}endOfValue(){return this.value.endOfValue()}}class l extends n{render(){const e=document.createElement("span");return e.className="untagged",e.innerText=this.value,e}}class o extends n{constructor(e,t,s){super(),this.start=e,this.values=t,this.end=s,this.range=this.arrayRange(e.start,s.range[s.length]),this.length=e.length+t.reduce(((e,t)=>e+t.length),0)+s.length}render(){const e=document.createElement("span");return e.className="array-values",e.appendChild(this.start.render()),this.values.forEach((t=>{const s=document.createElement("span");s.appendChild(t.render()),e.appendChild(s)})),e.appendChild(this.end.render()),e}startOfValue(){return this.start.start}endOfValue(){return this.end.end}}class u{constructor(e){this.input=e,this.position=0,this.last=null}isEos(){return this.position>=this.input.length}scan(e){const t=e.exec(this.input.substring(this.position));return 0===t?.index?(this.last=t,this.position+=t[0].length,!0):(this.last={},!1)}matched(){return this.last&&this.last[0]}valueAt(e){return this.last&&this.last[e]}}const h=[{identifier:"tables--orderable--item",controllerConstructor:class extends e{static values={params:Object};connect(){var e;this.index=(e=this.row,Array.from(e.parentElement.children).indexOf(e))}paramsValueChanged(e){this.id=e.id_value}dragUpdate(e){this.dragOffset=e,this.row.style.position="relative",this.row.style.top=e+"px",this.row.style.zIndex="1",this.row.toggleAttribute("dragging",!0)}updateVisually(e){this.row.style.position="relative",this.row.style.top=this.row.offsetHeight*(e-this.dragIndex)+"px"}updateIndex(e){this.index=e}params(e){const{id_name:t,id_value:s,index_name:i}=this.paramsValue;return[{name:`${e}[${s}][${t}]`,value:this.id},{name:`${e}[${s}][${i}]`,value:this.index}]}reset(){delete this.dragOffset,this.row.removeAttribute("style"),this.row.removeAttribute("dragging")}get hasChanges(){return this.paramsValue.index_value!==this.index}get dragIndex(){return this.dragOffset&&0!==this.dragOffset?this.index+Math.round(this.dragOffset/this.row.offsetHeight):this.index}get comparisonIndex(){return this.dragOffset?this.dragIndex+(this.dragOffset>0?.5:-.5):this.index}get row(){return this.element.parentElement}}},{identifier:"tables--orderable--list",controllerConstructor:class extends e{static outlets=["tables--orderable--item","tables--orderable--form"];startDragging(e){this.dragState=e,document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup),window.addEventListener("scroll",this.scroll,!0),this.element.style.position="relative"}stopDragging(){const e=this.dragState;return delete this.dragState,document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),window.removeEventListener("scroll",this.scroll,!0),this.element.removeAttribute("style"),this.tablesOrderableItemOutlets.forEach((e=>e.reset())),e}drop(){const e=this.dragItem;if(!e)return;const t=e.dragIndex,s=this.tablesOrderableItemOutlets[t];s&&(t<e.index?s.row.insertAdjacentElement("beforebegin",e.row):t>e.index&&s.row.insertAdjacentElement("afterend",e.row),this.tablesOrderableItemOutlets.forEach(((e,t)=>e.updateIndex(t))),this.commitChanges())}commitChanges(){this.tablesOrderableFormOutlet.clear(),this.tablesOrderableItemOutlets.forEach((e=>{e.hasChanges&&this.tablesOrderableFormOutlet.add(e)})),this.tablesOrderableFormOutlet.submit()}mousedown(e){if(this.isDragging)return;const s=this.#s(e.target);s&&(e.preventDefault(),this.startDragging(new t(this.element,e,s.id)),this.dragState.updateCursor(this.element,s.row,e,this.animate))}mousemove=e=>{this.isDragging&&(e.preventDefault(),this.ticking||(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState?.updateCursor(this.element,this.dragItem.row,e,this.animate)}))))};scroll=e=>{this.isDragging&&!this.ticking&&(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState?.updateScroll(this.element,this.dragItem.row,this.animate)})))};mouseup=e=>{this.isDragging&&(this.drop(),this.stopDragging(),this.tablesOrderableFormOutlets.forEach((e=>delete e.dragState)))};tablesOrderableFormOutletConnected(e,t){e.dragState&&this.startDragging(e.dragState)}tablesOrderableFormOutletDisconnected(e,t){this.isDragging&&(e.dragState=this.stopDragging())}beforeMorphAttribute(e){switch(e.detail.attributeName){case"dragging":e.preventDefault();break;case"style":"TBODY"!==e.target.tagName&&"TR"!==e.target.tagName||e.preventDefault()}}animate=e=>{const t=this.dragItem;t.dragUpdate(e),this.#i.forEach(((e,s)=>{e!==t&&e.updateVisually(s)}))};get isDragging(){return!!this.dragState}get dragItem(){return this.isDragging?this.tablesOrderableItemOutlets.find((e=>e.id===this.dragState.targetId)):null}get#i(){return this.tablesOrderableItemOutlets.toSorted(((e,t)=>e.comparisonIndex-t.comparisonIndex))}#s(e){return this.tablesOrderableItemOutlets.find((t=>t.element===e))}}},{identifier:"tables--orderable--form",controllerConstructor:class extends e{static values={scope:String};add(e){e.params(this.scopeValue).forEach((({name:e,value:t})=>{this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${e}" value="${t}" data-generated>`)}))}submit(){0!==this.inputs.length&&this.element.requestSubmit()}clear(){this.inputs.forEach((e=>e.remove()))}get inputs(){return this.element.querySelectorAll("input[data-generated]")}}},{identifier:"tables--selection--form",controllerConstructor:class extends e{static values={count:Number,primaryKey:{type:String,default:"id"}};static targets=["count","singular","plural"];connect(){this.countValue=this.inputs.length}toggle(e){const t=this.input(e);return t?t.remove():this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${this.primaryKeyValue}[]" value="${e}">`),this.countValue=this.visibleInputs.length,!t}visible(e,t){const s=this.input(e);return s&&(s.disabled=!t),this.countValue=this.visibleInputs.length,!s}isSelected(e){return!!this.input(e)}get inputs(){return this.element.querySelectorAll(`input[name="${this.primaryKeyValue}[]"]`)}get visibleInputs(){return Array.from(this.inputs).filter((e=>!e.disabled))}input(e){return this.element.querySelector(`input[name="${this.primaryKeyValue}[]"][value="${e}"]`)}countValueChanged(e){this.element.toggleAttribute("hidden",0===e),this.countTarget.textContent=e,this.singularTarget.toggleAttribute("hidden",1!==e),this.pluralTarget.toggleAttribute("hidden",1===e)}}},{identifier:"tables--selection--item",controllerConstructor:s},{identifier:"tables--selection--table",controllerConstructor:class extends e{static targets=["header","item"];static outlets=["tables--selection--form"];itemTargetConnected(e){this.update()}itemTargetDisconnected(e){this.update()}toggleHeader(e){this.items.forEach((t=>{t.checkedValue!==e.target.checked&&(t.checkedValue=this.tablesSelectionFormOutlet.toggle(t.id))}))}async update(){return this.updating||=Promise.resolve().then((()=>{this.#t(),delete this.updating})),this.updating}#t(){let e=0,t=0;this.items.forEach((s=>{e++,s.checkedValue&&t++})),this.headerInput.checked=e>0&&t===e,this.headerInput.indeterminate=t>0&&t!==e}get headerInput(){return this.headerTarget.querySelector("input")}get items(){return this.itemTargets.map((e=>this.#n(e))).filter((e=>e))}#n(e){return this.application.getControllerForElementAndIdentifier(e,"tables--selection--item")}}},{identifier:"tables--query",controllerConstructor:class extends e{static targets=["modal"];disconnect(){delete this.pending,document.removeEventListener("selectionchange",this.selection)}focus(){document.activeElement!==this.query&&(this.query.addEventListener("focusin",(e=>{e.target.setSelectionRange(-1,-1)}),{once:!0}),this.query.focus())}closeModal(){delete this.modalTarget.dataset.open,this.query.setAttribute("aria-expanded",!1),document.activeElement===this.query&&document.activeElement.blur(),document.removeEventListener("selectionchange",this.selection)}openModal(){this.modalTarget.dataset.open=!0,this.query.setAttribute("aria-expanded",!0),document.addEventListener("selectionchange",this.selection)}clear(){""===this.query.value?this.closeModal():(this.query.value="",this.query.dispatchEvent(new Event("input")),this.query.dispatchEvent(new Event("change")),this.update())}submit(){const e=this.isFocused,t=e&&this.query.selectionStart;this.pending&&(clearTimeout(this.pending),delete this.pending),e&&""!==this.query.value?(this.position.value=t,this.position.disabled=!1):(this.position.value="",this.position.disabled=!0),""===this.query.value&&(this.query.disabled=!0,setTimeout((()=>{this.query.disabled=!1,this.position.disabled=!1,e&&this.query.focus()}),0))}update=()=>{this.pending&&clearTimeout(this.pending),this.pending=setTimeout((()=>{this.element.requestSubmit()}),300)};selection=()=>{this.isFocused&&this.query.value.length>0&&this.update()};beforeMorphAttribute(e){if("data-open"===e.detail.attributeName)e.preventDefault()}moveToPreviousSuggestion(){const e=this.previousSuggestion||this.lastSuggestion;e&&this.makeSuggestionActive(e)}moveToNextSuggestion(){const e=this.nextSuggestion||this.firstSuggestion;e&&this.makeSuggestionActive(e)}selectFirstSuggestion(e){e.preventDefault(),this.firstSuggestion?.dispatchEvent(new CustomEvent("query:select"))}selectActiveSuggestion(){this.activeSuggestion?this.activeSuggestion.dispatchEvent(new CustomEvent("query:select")):this.closeModal()}selectSuggestion(e){this.query.dispatchEvent(new CustomEvent("replaceToken",{detail:{token:e.params.value,position:this.query.selectionStart}})),this.clearActiveSuggestion()}makeSuggestionActive(e){this.activeSuggestion&&this.activeSuggestion.setAttribute("aria-selected","false"),this.query.setAttribute("aria-activedescendant",e.id),e.setAttribute("aria-selected","true")}clearActiveSuggestion(){this.activeSuggestion&&(this.activeSuggestion.setAttribute("aria-selected","false"),this.query.removeAttribute("aria-activedescendant"))}get activeSuggestion(){return this.modalTarget.querySelector(`#${this.query.getAttribute("aria-activedescendant")}`)}get previousSuggestion(){return this.activeSuggestion?.previousElementSibling}get nextSuggestion(){return this.activeSuggestion?.nextElementSibling}get firstSuggestion(){return this.modalTarget.querySelector("#suggestions li:first-of-type")}get lastSuggestion(){return this.modalTarget.querySelector("#suggestions li:last-of-type")}get query(){return this.element.querySelector("[role=combobox]")}get position(){return this.element.querySelector("input[name=p]")}get isFocused(){return this.query===document.activeElement}}},{identifier:"tables--query-input",controllerConstructor:class extends e{static targets=["input","highlight"];static values={query:String};connect(){this.queryValue=this.inputTarget.value,this.element.dataset.connected=""}disconnect(){delete this.element.dataset.connected}update(){this.queryValue=this.inputTarget.value}queryValueChanged(e){this.highlightTarget.innerHTML="",(new i).parse(e).tokens.forEach((e=>{this.highlightTarget.appendChild(e.render())}))}replaceToken(e){let t=e.detail.token.toString();/\s/.exec(t)&&(t=`"${t}"`);const s=e.detail.position;let n=s+t.length,a=s,r=s;const l=(new i).parse(this.queryValue).tokenAtPosition(s);l&&(t=t.trim(),a=l.startOfValue(),r=l.endOfValue(),n=a+t.length),this.inputTarget.value=this.queryValue.slice(0,a)+t+this.queryValue.slice(r),this.update(),this.inputTarget.focus(),this.inputTarget.setSelectionRange(n,n)}}}];export{h as default};
 //# sourceMappingURL=tables.min.js.map