fix(suggest): progess-spinner

tobago-example/tobago-example-demo/src/main/webapp/content/900-test/in/suggest/spinner/Spinner.xhtml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:f="jakarta.faces.core"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+  <tc:in id="standardInput">
+    <tc:suggest query="#{suggestController.query}" delay="200000">
+      <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
+    </tc:suggest>
+  </tc:in>
+
+  <tc:in id="groupInput">
+    <f:facet name="before">before</f:facet>
+    <f:facet name="after">after</f:facet>
+    <tc:suggest query="#{suggestController.query}" delay="200000">
+      <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
+    </tc:suggest>
+  </tc:in>
+
+  <tc:button id="openPopupButton" label="open popup">
+    <tc:operation for="popup" name="show"/>
+  </tc:button>
+  <tc:popup id="popup">
+    <tc:in id="popupInput">
+      <tc:suggest query="#{suggestController.query}" delay="200000">
+        <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
+      </tc:suggest>
+    </tc:in>
+  </tc:popup>
+</ui:composition>

tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectManyList/server-side-filtering/spinner/Spinner.xhtml

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:f="jakarta.faces.core"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+  <tc:selectManyList id="standardSelectManyList"
+                     value="#{selectListServerFilterController.selectedSolarObjects}"
+                     footer="#{selectListServerFilterController.footerTextMany}">
+    <tc:selectItemsFiltered value="#{selectListServerFilterController.solarObjectsMany}"
+                            var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"
+                            query="#{selectListServerFilterController.queryMany}"
+                            delay="2000000">
+    </tc:selectItemsFiltered>
+  </tc:selectManyList>
+
+  <tc:selectManyList id="groupSelectManyList"
+                     value="#{selectListServerFilterController.selectedSolarObjects}"
+                     footer="#{selectListServerFilterController.footerTextMany}">
+    <f:facet name="before">before</f:facet>
+    <f:facet name="after">after</f:facet>
+    <tc:selectItemsFiltered value="#{selectListServerFilterController.solarObjectsMany}"
+                            var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"
+                            query="#{selectListServerFilterController.queryMany}"
+                            delay="2000000">
+    </tc:selectItemsFiltered>
+  </tc:selectManyList>
+
+  <tc:button id="openPopupButton" label="open popup">
+    <tc:operation for="popup" name="show"/>
+  </tc:button>
+  <tc:popup id="popup">
+    <tc:selectManyList id="popupSelectManyList"
+                       value="#{selectListServerFilterController.selectedSolarObjects}"
+                       footer="#{selectListServerFilterController.footerTextMany}">
+      <tc:selectItemsFiltered value="#{selectListServerFilterController.solarObjectsMany}"
+                              var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"
+                              query="#{selectListServerFilterController.queryMany}"
+                              delay="2000000">
+      </tc:selectItemsFiltered>
+    </tc:selectManyList>
+  </tc:popup>
+</ui:composition>

tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectOneList/server-side-filtering/spinner/Spinner.xhtml

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:f="jakarta.faces.core"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+  <tc:selectOneList id="standardSelectOneList"
+                     value="#{selectListServerFilterController.selectedSolarObjects}"
+                     footer="#{selectListServerFilterController.footerTextMany}">
+    <tc:selectItemsFiltered value="#{selectListServerFilterController.solarObjectsMany}"
+                            var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"
+                            query="#{selectListServerFilterController.queryMany}"
+                            delay="2000000">
+    </tc:selectItemsFiltered>
+  </tc:selectOneList>
+
+  <tc:selectOneList id="groupSelectOneList"
+                     value="#{selectListServerFilterController.selectedSolarObjects}"
+                     footer="#{selectListServerFilterController.footerTextMany}">
+    <f:facet name="before">before</f:facet>
+    <f:facet name="after">after</f:facet>
+    <tc:selectItemsFiltered value="#{selectListServerFilterController.solarObjectsMany}"
+                            var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"
+                            query="#{selectListServerFilterController.queryMany}"
+                            delay="2000000">
+    </tc:selectItemsFiltered>
+  </tc:selectOneList>
+
+  <tc:button id="openPopupButton" label="open popup">
+    <tc:operation for="popup" name="show"/>
+  </tc:button>
+  <tc:popup id="popup">
+    <tc:selectOneList id="popupSelectOneList"
+                       value="#{selectListServerFilterController.selectedSolarObjects}"
+                       footer="#{selectListServerFilterController.footerTextMany}">
+      <tc:selectItemsFiltered value="#{selectListServerFilterController.solarObjectsMany}"
+                              var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"
+                              query="#{selectListServerFilterController.queryMany}"
+                              delay="2000000">
+      </tc:selectItemsFiltered>
+    </tc:selectOneList>
+  </tc:popup>
+</ui:composition>

tobago-example/tobago-example-demo/src/test/typescript/selectManyList.test.ts

@@ -48,3 +48,69 @@ test.describe("900-test/2100-selectManyList/deselect/deselect.xhtml", () => {
     await expect(jupiter).not.toBeVisible();
   });
 });
+
+test.describe("900-test/selectManyList/server-side-filtering/spinner/Spinner.xhtml", () => {
+
+  test.beforeEach(async ({page}, testInfo) => {
+    await page.goto("/content/900-test/selectManyList/server-side-filtering/spinner/Spinner.xhtml");
+  });
+
+  test("Spinner position: standard", async ({page}) => {
+    const input = page.locator("tobago-select-many-list[id='page:mainForm:standardSelectManyList']");
+    const field = input.locator(".tobago-select-field");
+    const filter = input.locator("input[id='page:mainForm:standardSelectManyList::filter']");
+    const spinner = input.locator(".spinner");
+
+    await filter.fill("show spinner");
+    await expect(filter).toBeVisible();
+
+    const fieldBox = await field.boundingBox();
+    const spinnerBox = await spinner.boundingBox();
+    expect(fieldBox.x).toBeLessThanOrEqual(spinnerBox.x);
+    expect(fieldBox.x + fieldBox.width).toBeGreaterThanOrEqual(spinnerBox.x + spinnerBox.width);
+    expect(fieldBox.y).toBeLessThanOrEqual(spinnerBox.y);
+    expect(fieldBox.y + fieldBox.height).toBeGreaterThanOrEqual(spinnerBox.y + spinnerBox.height);
+  });
+
+  test("Spinner position: input group", async ({page}) => {
+    const input = page.locator("tobago-select-many-list[id='page:mainForm:groupSelectManyList']");
+    const field = input.locator(".tobago-select-field");
+    const filter = input.locator("input[id='page:mainForm:groupSelectManyList::filter']");
+    const spinner = input.locator(".spinner");
+
+    await filter.fill("show spinner");
+    await expect(filter).toBeVisible();
+
+    const fieldBox = await field.boundingBox();
+    const spinnerBox = await spinner.boundingBox();
+    expect(fieldBox.x).toBeLessThanOrEqual(spinnerBox.x);
+    expect(fieldBox.x + fieldBox.width).toBeGreaterThanOrEqual(spinnerBox.x + spinnerBox.width);
+    expect(fieldBox.y).toBeLessThanOrEqual(spinnerBox.y);
+    expect(fieldBox.y + fieldBox.height).toBeGreaterThanOrEqual(spinnerBox.y + spinnerBox.height);
+  });
+
+  test("Spinner position: popup", async ({page}) => {
+    const button = page.locator("button[id='page:mainForm:openPopupButton']");
+    const popup = page.locator("[id='page:mainForm:popup']");
+    const collapse = page.locator("input[id='page:mainForm:popup::collapse']");
+    const input = page.locator("tobago-select-many-list[id='page:mainForm:popup:popupSelectManyList']");
+    const field = input.locator(".tobago-select-field");
+    const filter = input.locator("input[id='page:mainForm:popup:popupSelectManyList::filter']");
+    const spinner = input.locator(".spinner");
+
+    await button.click();
+    await expect(popup).toContainClass("show");
+    await expect(collapse).toHaveValue("false");
+    await expect(field).toBeVisible();
+
+    await filter.fill("show spinner");
+    await expect(spinner).toBeVisible();
+
+    const fieldBox = await field.boundingBox();
+    const spinnerBox = await spinner.boundingBox();
+    expect(fieldBox.x).toBeLessThanOrEqual(spinnerBox.x);
+    expect(fieldBox.x + fieldBox.width).toBeGreaterThanOrEqual(spinnerBox.x + spinnerBox.width);
+    expect(fieldBox.y).toBeLessThanOrEqual(spinnerBox.y);
+    expect(fieldBox.y + fieldBox.height).toBeGreaterThanOrEqual(spinnerBox.y + spinnerBox.height);
+  });
+});

tobago-example/tobago-example-demo/src/test/typescript/selectOneList.test.ts

@@ -0,0 +1,86 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {expect, test} from "@playwright/test";
+
+test.describe("900-test/selectOneList/server-side-filtering/spinner/Spinner.xhtml", () => {
+
+  test.beforeEach(async ({page}, testInfo) => {
+    await page.goto("/content/900-test/selectOneList/server-side-filtering/spinner/Spinner.xhtml");
+  });
+
+  test("Spinner position: standard", async ({page}) => {
+    const input = page.locator("tobago-select-one-list[id='page:mainForm:standardSelectOneList']");
+    const field = input.locator(".tobago-select-field");
+    const filter = input.locator("input[id='page:mainForm:standardSelectOneList::filter']");
+    const spinner = input.locator(".spinner");
+
+    await filter.fill("show spinner");
+    await expect(filter).toBeVisible();
+
+    const fieldBox = await field.boundingBox();
+    const spinnerBox = await spinner.boundingBox();
+    expect(fieldBox.x).toBeLessThanOrEqual(spinnerBox.x);
+    expect(fieldBox.x + fieldBox.width).toBeGreaterThanOrEqual(spinnerBox.x + spinnerBox.width);
+    expect(fieldBox.y).toBeLessThanOrEqual(spinnerBox.y);
+    expect(fieldBox.y + fieldBox.height).toBeGreaterThanOrEqual(spinnerBox.y + spinnerBox.height);
+  });
+
+  test("Spinner position: input group", async ({page}) => {
+    const input = page.locator("tobago-select-one-list[id='page:mainForm:groupSelectOneList']");
+    const field = input.locator(".tobago-select-field");
+    const filter = input.locator("input[id='page:mainForm:groupSelectOneList::filter']");
+    const spinner = input.locator(".spinner");
+
+    await filter.fill("show spinner");
+    await expect(filter).toBeVisible();
+
+    const fieldBox = await field.boundingBox();
+    const spinnerBox = await spinner.boundingBox();
+    expect(fieldBox.x).toBeLessThanOrEqual(spinnerBox.x);
+    expect(fieldBox.x + fieldBox.width).toBeGreaterThanOrEqual(spinnerBox.x + spinnerBox.width);
+    expect(fieldBox.y).toBeLessThanOrEqual(spinnerBox.y);
+    expect(fieldBox.y + fieldBox.height).toBeGreaterThanOrEqual(spinnerBox.y + spinnerBox.height);
+  });
+
+  test("Spinner position: popup", async ({page}) => {
+    const button = page.locator("button[id='page:mainForm:openPopupButton']");
+    const popup = page.locator("[id='page:mainForm:popup']");
+    const collapse = page.locator("input[id='page:mainForm:popup::collapse']");
+    const input = page.locator("tobago-select-one-list[id='page:mainForm:popup:popupSelectOneList']");
+    const field = input.locator(".tobago-select-field");
+    const filter = input.locator("input[id='page:mainForm:popup:popupSelectOneList::filter']");
+    const spinner = input.locator(".spinner");
+
+    await button.click();
+    await expect(popup).toContainClass("show");
+    await expect(collapse).toHaveValue("false");
+    await expect(field).toBeVisible();
+
+    await filter.fill("show spinner");
+    await expect(spinner).toBeVisible();
+
+    const fieldBox = await field.boundingBox();
+    const spinnerBox = await spinner.boundingBox();
+    expect(fieldBox.x).toBeLessThanOrEqual(spinnerBox.x);
+    expect(fieldBox.x + fieldBox.width).toBeGreaterThanOrEqual(spinnerBox.x + spinnerBox.width);
+    expect(fieldBox.y).toBeLessThanOrEqual(spinnerBox.y);
+    expect(fieldBox.y + fieldBox.height).toBeGreaterThanOrEqual(spinnerBox.y + spinnerBox.height);
+  });
+});