@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-order.js

@@ -0,0 +1,560 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/widgets/webwriter-order.ts
+import { css as css2, html as html2 } from "lit";
+import { LitElementWw as LitElementWw2, option as option2 } from "@webwriter/lit";
+import { customElement as customElement2, property as property2, query as query2, queryAssignedElements as queryAssignedElements2 } from "lit/decorators.js";
+import SlButton2 from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlIcon2 from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/plus.svg
+var plus_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
+
+// src/widgets/webwriter-choice.ts
+import { html, css } from "lit";
+import { LitElementWw, option, action } from "@webwriter/lit";
+import { customElement, property, queryAssignedElements, query } from "lit/decorators.js";
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+import SlRadio from "@shoelace-style/shoelace/dist/components/radio/radio.component.js";
+import SlCheckbox from "@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js";
+import SlRadioButton from "@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js";
+import SlRadioGroup from "@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/plus-square.svg
+var plus_square_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">%0A  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/plus-circle.svg
+var plus_circle_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">%0A  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
+
+// src/widgets/webwriter-choice.ts
+function shuffle(a) {
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+var _itemsSlotEl_dec, _value_dec, _items_dec, _addItem_dec, _slotEl_dec, _randomOrder_dec, _layout_dec, _mode_dec, _a, _WebwriterChoice_decorators, _init, _mode, _randomOrder, _slotEl, _items, _value, _itemsSlotEl;
+_WebwriterChoice_decorators = [customElement("webwriter-choice")];
+var WebwriterChoice = class extends (_a = LitElementWw, _mode_dec = [property({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  options: [
+    { value: "truefalse", label: { "en": "True/False" } },
+    { value: "single", label: { "en": "Single Choice" } },
+    { value: "multiple", label: { "en": "Multiple Choice" } }
+  ]
+})], _layout_dec = [property({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  options: [
+    { value: "list", label: { "en": "List" } },
+    { value: "tiles", label: { "en": "Tiles" } }
+  ]
+})], _randomOrder_dec = [property({ type: Boolean, attribute: true, reflect: true }), option({
+  type: Boolean,
+  label: { "en": "Random Choice Order" }
+})], _slotEl_dec = [query("slot")], _addItem_dec = [action()], _items_dec = [queryAssignedElements()], _value_dec = [property({ type: Array, attribute: false })], _itemsSlotEl_dec = [query("#items-slot")], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _mode, __runInitializers(_init, 8, this, "single")), __runInitializers(_init, 11, this);
+    __privateAdd(this, _randomOrder, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _slotEl, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _items, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _value, []);
+    __publicField(this, "handleControlChange", (e) => {
+      if (this.mode === "single") {
+        const item = e.target;
+        const otherItems = this.items.filter((el) => el !== item);
+        otherItems.forEach((el) => this.isContentEditable ? el.valid = false : el.active = false);
+      }
+      this.applyValue();
+      this.dispatchEvent(new CustomEvent("ww-answer-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    __privateAdd(this, _itemsSlotEl, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+  }
+  get layout() {
+    return this.children?.item(0)?.getAttribute("layout") ?? "list";
+  }
+  set layout(value) {
+    this.querySelectorAll("webwriter-choice-item").forEach((el) => el.setAttribute("layout", value));
+    this.requestUpdate("layout");
+  }
+  get solution() {
+    const validIDs = this.items.filter((item) => item.valid).map((item) => item.id);
+    return validIDs.length ? validIDs : void 0;
+  }
+  set solution(value) {
+    this.items.forEach((item) => value.includes(item.id) ? item.valid = true : null);
+  }
+  reportSolution() {
+    if (!this.solution) {
+      this.items.forEach((item) => item.valid = true);
+      return;
+    }
+    this.items.forEach((item) => item.valid = (this.solution ?? []).includes(item.id));
+  }
+  reset() {
+    this.items.forEach((item) => {
+      item.valid = void 0;
+      item.active = false;
+    });
+    this.shuffleItems();
+  }
+  addItem() {
+    const choiceItem = this.ownerDocument.createElement("webwriter-choice-item");
+    const p = this.ownerDocument.createElement("p");
+    choiceItem.appendChild(p);
+    choiceItem.setAttribute("layout", this.layout);
+    this.appendChild(choiceItem);
+    this.ownerDocument.getSelection().setBaseAndExtent(p, 0, p, 0);
+  }
+  shuffleItems() {
+    const items = this.slotEl.assignedElements();
+    const n = items.length;
+    const nums = shuffle([...new Array(n).keys()]);
+    items.forEach((el, i) => el.style.order = String(nums[i]));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const observer = new MutationObserver(() => {
+      if (!this.contentEditable && this.randomOrder) {
+        this.shuffleItems();
+      }
+    });
+    observer.observe(this, { childList: true });
+  }
+  firstUpdated(_changedProperties) {
+    if (!this.contentEditable && this.randomOrder) {
+      this.shuffleItems();
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  set value(value) {
+    __privateSet(this, _value, value);
+    this.items.forEach((item, i) => {
+      this.isContentEditable ? item.valid = __privateGet(this, _value).includes(i) : item.active = __privateGet(this, _value).includes(i);
+    });
+  }
+  applyValue() {
+    __privateSet(this, _value, this.items.map((item, i) => [item.valid, i]).filter(([valid]) => valid).map(([_, i]) => i));
+  }
+  handleSlotChange(e) {
+    this.requestUpdate();
+  }
+  willUpdate(changed) {
+    if (changed.has("mode") && this.mode === "single") {
+      this.items.filter((el) => this.isContentEditable ? el.valid : el.active).slice(1).forEach((el) => this.isContentEditable ? el.valid = false : el.active = false);
+    }
+    if (changed.has("mode") && this.mode === "truefalse") {
+      this.items.forEach((el) => el.remove());
+    }
+  }
+  render() {
+    return html`
+      ${this.mode === "truefalse" ? html`
+          <sl-radio-group>
+            <sl-radio-button value="true">True</sl-radio-button>
+            <sl-radio-button value="false">False</sl-radio-button>
+          </sl-radio-group>
+        ` : html`
+          <slot id="items-slot" @sl-change=${this.handleControlChange} @slotchange=${this.handleSlotChange}></slot>
+        `}
+      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
+        <sl-icon src=${this.mode === "multiple" ? plus_square_default : plus_circle_default}></sl-icon><span>Add Option</span>
+      </sl-button>
+    `;
+  }
+};
+_init = __decoratorStart(_a);
+_mode = new WeakMap();
+_randomOrder = new WeakMap();
+_slotEl = new WeakMap();
+_items = new WeakMap();
+_value = new WeakMap();
+_itemsSlotEl = new WeakMap();
+__decorateElement(_init, 4, "mode", _mode_dec, WebwriterChoice, _mode);
+__decorateElement(_init, 3, "layout", _layout_dec, WebwriterChoice);
+__decorateElement(_init, 4, "randomOrder", _randomOrder_dec, WebwriterChoice, _randomOrder);
+__decorateElement(_init, 4, "slotEl", _slotEl_dec, WebwriterChoice, _slotEl);
+__decorateElement(_init, 1, "addItem", _addItem_dec, WebwriterChoice);
+__decorateElement(_init, 4, "items", _items_dec, WebwriterChoice, _items);
+__decorateElement(_init, 3, "value", _value_dec, WebwriterChoice);
+__decorateElement(_init, 4, "itemsSlotEl", _itemsSlotEl_dec, WebwriterChoice, _itemsSlotEl);
+WebwriterChoice = __decorateElement(_init, 0, "WebwriterChoice", _WebwriterChoice_decorators, WebwriterChoice);
+__publicField(WebwriterChoice, "scopedElements", {
+  "sl-button": SlButton,
+  "sl-icon": SlIcon,
+  "sl-radio": SlRadio,
+  "sl-checkbox": SlCheckbox,
+  "sl-radio-button": SlRadioButton,
+  "sl-radio-group": SlRadioGroup
+});
+__publicField(WebwriterChoice, "styles", css`
+    :host {
+      display: flex !important;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    :host([layout=tiles]) {
+
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 15px;
+
+      & ::slotted(*) {
+        aspect-ratio: 1;
+        min-width: 125px;
+        width: 125px;
+        max-width: 350px;
+        min-height: 125px;
+        height: 125px;
+        max-height: 350px;
+        overflow: hidden;
+        resize: both;
+        border: 2px solid var(--sl-color-gray-500);
+        border-radius: 5px;
+      }
+    }
+
+    sl-button::part(label) {
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    sl-button::part(base) {
+      border: none;
+      background: transparent;
+    }
+
+    sl-icon {
+      width: 19px;
+      height: 19px;
+    }
+
+    sl-icon::part(svg) {
+      overflow: visible;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none !important;
+    }
+
+    #add-option span {
+      margin-inline-start: 0.5em;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) ::slotted(*) {
+      order: unset !important;
+    }
+
+    :host(:not([mode=multiple])) {
+      --webwriter-choice-radius: 100%;
+    }
+
+    #add-option:not(:hover)::part(base) {
+      color: darkgray;
+    }
+
+    :host([layout=tiles]) #add-option {
+      width: 125px;
+      height: 125px;
+      overflow: hidden;
+      border: 2px solid var(--sl-color-gray-300);
+      border-radius: 5px;
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([mode=truefalse]) #add-option {
+      display: none;
+    }    
+  `);
+__runInitializers(_init, 1, WebwriterChoice);
+
+// src/widgets/webwriter-order.ts
+var _solution_dec, _items_dec2, _itemsSlot_dec, _hideOrderButtons_dec, _layout_dec2, _a2, _WebwriterOrder_decorators, _init2, _itemsSlot, _items2, _solution;
+_WebwriterOrder_decorators = [customElement2("webwriter-order")];
+var WebwriterOrder = class extends (_a2 = LitElementWw2, _layout_dec2 = [property2({ type: String, attribute: true, reflect: true }), option2({
+  type: "select",
+  options: [
+    { value: "list", label: { "en": "List" } },
+    { value: "tiles", label: { "en": "Tiles" } }
+  ]
+})], _hideOrderButtons_dec = [property2({ type: Boolean, attribute: true, reflect: true }), option2({ type: Boolean, label: { _: "Hide order buttons" } })], _itemsSlot_dec = [query2("#items-slot")], _items_dec2 = [queryAssignedElements2()], _solution_dec = [property2({ attribute: false })], _a2) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init2, 5, this);
+    __publicField(this, "observer");
+    __publicField(this, "orderSheet", new CSSStyleSheet());
+    __publicField(this, "clearDropPreviews", () => {
+      this.items.forEach((item) => item.dropPreview = void 0);
+    });
+    __privateAdd(this, _itemsSlot, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _items2, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
+    __publicField(this, "handleMove", (e) => {
+      const elem = e.target;
+      const children = Array.from(this.children);
+      const pos = children.indexOf(elem);
+      let i;
+      if (e.type === "ww-moveup") {
+        i = Math.max(0, pos - 1);
+      } else if (e.type === "ww-movedown") {
+        i = Math.min(children.length, pos + 2);
+      } else if (e.type === "ww-moveto") {
+        i = e.detail.i;
+      }
+      this.moveChild(elem, i);
+    });
+    __privateAdd(this, _solution, []);
+  }
+  get layout() {
+    return this.children?.item(0)?.getAttribute("layout") ?? "list";
+  }
+  set layout(value) {
+    this.querySelectorAll("webwriter-order-item").forEach((el) => el.setAttribute("layout", value));
+    this.requestUpdate("layout");
+  }
+  get hideOrderButtons() {
+    return !!this.items[0]?.hideOrderButtons;
+  }
+  set hideOrderButtons(value) {
+    this.items.forEach((item) => item.hideOrderButtons = value);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("ww-moveup", this.handleMove);
+    this.addEventListener("ww-movedown", this.handleMove);
+    this.addEventListener("ww-moveto", this.handleMove);
+    this.observer = new MutationObserver(() => {
+      this.items.forEach((item) => item.requestUpdate());
+      if (this.isContentEditable) {
+        this.solution = this.items.map((item) => item.id);
+      }
+      this.clearDropPreviews();
+    });
+    this.observer.observe(this, { childList: true });
+  }
+  serializedCallback() {
+    this.shuffleItems();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    this.observer = void 0;
+  }
+  addItem() {
+    const orderItem = this.ownerDocument.createElement("webwriter-order-item");
+    const p = this.ownerDocument.createElement("p");
+    orderItem.appendChild(p);
+    orderItem.setAttribute("layout", this.layout);
+    this.append(orderItem);
+    this.solution = [...__privateGet(this, _solution), orderItem.id];
+    this.ownerDocument.getSelection().setBaseAndExtent(p, 0, p, 0);
+  }
+  shuffleItems() {
+    const n = this.items.length;
+    const nums = shuffle([...new Array(n).keys()]);
+    this.innerHTML = nums.map((i) => this.children.item(i).outerHTML).join("");
+  }
+  handleKeyDown(e) {
+    if (e.key == "ArrowDown") {
+      e.stopPropagation();
+      e.preventDefault();
+    } else if (e.key === "ArrowUp") {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+  /*
+  If contenteditable: Reorder solution -> Triggers orderSheet change
+  If not contenteditable: Reorder value -> Triggers orderSheet change 
+  */
+  moveChild(elem, i) {
+    if (i === 0) {
+      this.insertAdjacentElement("afterbegin", elem);
+    } else if (i < this.items.length) {
+      this.items[i].insertAdjacentElement("beforebegin", elem);
+    } else {
+      this.insertAdjacentElement("beforeend", elem);
+    }
+  }
+  get solution() {
+    return __privateGet(this, _solution)?.length ? __privateGet(this, _solution) : void 0;
+  }
+  set solution(value) {
+    __privateSet(this, _solution, value);
+    if (value) {
+      this.dispatchEvent(new CustomEvent("ww-answer-change", {
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+  reportSolution() {
+    this.solution.forEach((id, i) => this.querySelector(`#${id}`).validOrder = i);
+  }
+  reset() {
+    this.solution = void 0;
+    this.shuffleItems();
+  }
+  render() {
+    return html2`
+      <slot id="items-slot" @webwriter-clear-drop-preview=${this.clearDropPreviews}></slot>
+      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
+        <sl-icon src=${plus_default}></sl-icon><span>Add Option</span>
+      </sl-button>
+    `;
+  }
+};
+_init2 = __decoratorStart(_a2);
+_itemsSlot = new WeakMap();
+_items2 = new WeakMap();
+_solution = new WeakMap();
+__decorateElement(_init2, 3, "layout", _layout_dec2, WebwriterOrder);
+__decorateElement(_init2, 3, "hideOrderButtons", _hideOrderButtons_dec, WebwriterOrder);
+__decorateElement(_init2, 4, "itemsSlot", _itemsSlot_dec, WebwriterOrder, _itemsSlot);
+__decorateElement(_init2, 4, "items", _items_dec2, WebwriterOrder, _items2);
+__decorateElement(_init2, 3, "solution", _solution_dec, WebwriterOrder);
+WebwriterOrder = __decorateElement(_init2, 0, "WebwriterOrder", _WebwriterOrder_decorators, WebwriterOrder);
+__publicField(WebwriterOrder, "scopedElements", {
+  "sl-button": SlButton2,
+  "sl-icon": SlIcon2
+});
+__publicField(WebwriterOrder, "styles", css2`
+    :host {
+      display: flex !important;
+      flex-direction: column;
+      align-items: flex-start;
+      counter-reset: orderItem;
+      gap: 2px;
+    }
+
+    :host([layout=tiles]) {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 15px;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) {
+      --text-color: var(--sl-color-success-700);
+    }
+
+    :host ::slotted(*::part(counter)) {
+      counter-increment: orderItem;
+      content: counter(orderItem) '. ';
+      cursor: move;
+      text-align: right;
+      padding-right: 0.5em;
+      min-width: 1.5em;
+      color: var(--text-color, auto);
+    }
+
+    sl-button::part(label) {
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    sl-button::part(base) {
+      border: none;
+      background: transparent;
+    }
+
+    sl-icon {
+      width: 19px;
+      height: 19px;
+      padding: var(--sl-spacing-x-small);
+      padding-left: 0;
+    }
+
+    #add-option {
+      order: 2147483647;
+    }
+
+    #add-option:not(:hover)::part(base) {
+      color: darkgray;
+    }
+
+    :host([layout=tiles]) #add-option {
+      width: 125px;
+      height: 125px;
+      overflow: hidden;
+      border: 2px solid var(--sl-color-gray-300);
+      border-radius: 5px;
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none;
+    }
+  `);
+__runInitializers(_init2, 1, WebwriterOrder);
+export {
+  WebwriterOrder
+};