@getflip/swirl-components 0.13.0 → 0.14.1

package/dist/collection/components/swirl-option-list/swirl-option-list.js

@@ -1,12 +1,8 @@
-import { Component, Element, Event, h, Host, Prop, State, Watch, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { closestPassShadow, querySelectorAllDeep, } from "../../utils";
 import Sortable from "sortablejs";
 export class SwirlOptionList {
   constructor() {
-    this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
-    this.assistiveTextItemMoving = "Current position:";
-    this.assistiveTextItemMoved = "Item moved. New position:";
-    this.value = [];
     this.onFocus = async () => {
       // prevent focus from canceling the drag event in Safari
       await new Promise((resolve) => setTimeout(resolve));
@@ -107,6 +103,16 @@ export class SwirlOptionList {
       this.itemDrop.emit({ oldIndex: this.draggingStartIndex, newIndex });
       this.draggingStartIndex = undefined;
     };
+    this.allowDrag = undefined;
+    this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
+    this.assistiveTextItemMoving = "Current position:";
+    this.assistiveTextItemMoved = "Item moved. New position:";
+    this.disabled = undefined;
+    this.label = undefined;
+    this.optionListId = undefined;
+    this.multiSelect = undefined;
+    this.value = [];
+    this.assistiveText = undefined;
   }
   componentDidLoad() {
     this.updateItems();
@@ -302,222 +308,231 @@ export class SwirlOptionList {
   render() {
     const ariaMultiselectable = this.multiSelect ? "true" : undefined;
     const tabIndex = this.disabled ? -1 : 0;
-    return (h(Host, null,
-      h("swirl-visually-hidden", { role: "alert" }, this.assistiveText),
-      h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex },
-        h("slot", null))));
+    return (h(Host, null, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", null))));
   }
   static get is() { return "swirl-option-list"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-option-list.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-option-list.css"]
-  }; }
-  static get properties() { return {
-    "allowDrag": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-drag",
-      "reflect": false
-    },
-    "assistiveTextItemGrabbed": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "assistive-text-item-grabbed",
-      "reflect": false,
-      "defaultValue": "\"Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.\""
-    },
-    "assistiveTextItemMoving": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "assistive-text-item-moving",
-      "reflect": false,
-      "defaultValue": "\"Current position:\""
-    },
-    "assistiveTextItemMoved": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "assistive-text-item-moved",
-      "reflect": false,
-      "defaultValue": "\"Item moved. New position:\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "optionListId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-option-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-option-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "allowDrag": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-drag",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "assistiveTextItemGrabbed": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "assistive-text-item-grabbed",
+        "reflect": false,
+        "defaultValue": "\"Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.\""
       },
-      "attribute": "option-list-id",
-      "reflect": false
-    },
-    "multiSelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "assistiveTextItemMoving": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "assistive-text-item-moving",
+        "reflect": false,
+        "defaultValue": "\"Current position:\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "assistiveTextItemMoved": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "assistive-text-item-moved",
+        "reflect": false,
+        "defaultValue": "\"Item moved. New position:\""
       },
-      "attribute": "multi-select",
-      "reflect": false
-    },
-    "value": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "assistiveText": {}
-  }; }
-  static get events() { return [{
-      "method": "itemDrop",
-      "name": "itemDrop",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "optionListId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "option-list-id",
+        "reflect": false
       },
-      "complexType": {
-        "original": "{ oldIndex: number; newIndex: number }",
-        "resolved": "{ oldIndex: number; newIndex: number; }",
-        "references": {}
-      }
-    }, {
-      "method": "valueChange",
-      "name": "valueChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multiSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multi-select",
+        "reflect": false
       },
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "assistiveText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemDrop",
+        "name": "itemDrop",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ oldIndex: number; newIndex: number }",
+          "resolved": "{ oldIndex: number; newIndex: number; }",
+          "references": {}
+        }
+      }, {
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "allowDrag",
-      "methodName": "watchAllowDrag"
-    }, {
-      "propName": "disabled",
-      "methodName": "watchDisabled"
-    }, {
-      "propName": "multiSelect",
-      "methodName": "watchMultiSelect"
-    }, {
-      "propName": "value",
-      "methodName": "watchValue"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "allowDrag",
+        "methodName": "watchAllowDrag"
+      }, {
+        "propName": "disabled",
+        "methodName": "watchDisabled"
+      }, {
+        "propName": "multiSelect",
+        "methodName": "watchMultiSelect"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
 }