@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-order-item.js

@@ -0,0 +1,464 @@
+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-item.ts
+import { css, html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { LitElementWw } from "@webwriter/lit";
+import { customElement, property, query } from "lit/decorators.js";
+import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/arrow-up.svg
+var arrow_up_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">%0A  <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/arrow-down.svg
+var arrow_down_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">%0A  <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/>%0A</svg>';
+
+// src/widgets/webwriter-order-item.ts
+var _contentSlotEl_dec, _baseEl_dec, _hideOrderButtons_dec, _validOrder_dec, _layout_dec, _dropPreview_dec, _draggable_dec, _a, _WebwriterOrderItem_decorators, _init, _draggable, _dropPreview, _layout, _validOrder, _hideOrderButtons, _baseEl, _contentSlotEl;
+_WebwriterOrderItem_decorators = [customElement("webwriter-order-item")];
+var _WebwriterOrderItem = class _WebwriterOrderItem extends (_a = LitElementWw, _draggable_dec = [property({ attribute: true, reflect: true, converter: { toAttribute: (v) => v ? "true" : "false", fromAttribute: (attr) => attr === "true" } })], _dropPreview_dec = [property({ type: String, attribute: true, reflect: true })], _layout_dec = [property({ type: String, attribute: true, reflect: true })], _validOrder_dec = [property({ type: Number, attribute: false })], _hideOrderButtons_dec = [property({ type: Boolean, attribute: true, reflect: true })], _baseEl_dec = [query("[part=base]")], _contentSlotEl_dec = [query("#content")], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _draggable, __runInitializers(_init, 8, this, true)), __runInitializers(_init, 11, this);
+    __publicField(this, "msg", (str) => this.lang in _WebwriterOrderItem.localization ? _WebwriterOrderItem.localization[this.lang][str] ?? str : str);
+    __publicField(this, "emitClearDropPreview", () => {
+      this.dispatchEvent(new CustomEvent("webwriter-clear-drop-preview", { bubbles: true }));
+    });
+    __privateAdd(this, _dropPreview, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _layout, __runInitializers(_init, 16, this, "list")), __runInitializers(_init, 19, this);
+    __privateAdd(this, _validOrder, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _hideOrderButtons, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __publicField(this, "handleClick", (e, up = false) => {
+      if (e.target.id === "up") {
+        this.dispatchEvent(new CustomEvent("ww-moveup", { bubbles: true }));
+      } else {
+        this.dispatchEvent(new CustomEvent("ww-movedown", { bubbles: true }));
+      }
+      e.stopPropagation();
+    });
+    __privateAdd(this, _baseEl, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __privateAdd(this, _contentSlotEl, __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
+    __publicField(this, "observer");
+  }
+  get elementIndex() {
+    return Array.from(this.parentElement?.children ?? []).indexOf(this);
+  }
+  getSibling(i) {
+    return this.parentElement.children.item(i);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.dropPreview = void 0;
+    this.addEventListener("dragstart", (e) => {
+      this.dropPreview = void 0;
+      e.dataTransfer.setData("text/html", this.outerHTML);
+      e.dataTransfer.setData("text/plain", this.id);
+      e.stopPropagation();
+    });
+    this.addEventListener("drop", (e) => {
+      e.stopPropagation();
+      const id = e.dataTransfer.getData("text/plain");
+      const inTopHalf = e.offsetY < this.offsetHeight / 2;
+      const inLeftHalf = e.offsetX < this.offsetWidth / 2;
+      const el = document.querySelector(`webwriter-order-item#${id}`);
+      const offset = (this.layout === "tiles" ? inLeftHalf : inTopHalf) ? 0 : 1;
+      el.dispatchEvent(new CustomEvent("ww-moveto", { bubbles: true, detail: { i: this.elementIndex + offset } }));
+    }, { passive: true });
+    this.addEventListener("dragover", (e) => {
+      const inTopHalf = e.offsetY < this.offsetHeight / 2;
+      const inLeftHalf = e.offsetX < this.offsetWidth / 2;
+      if (this.layout === "tiles") {
+        this.dropPreview = inLeftHalf ? "left" : "right";
+      } else {
+        this.dropPreview = inTopHalf ? "top" : "bottom";
+      }
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    });
+    this.addEventListener("dragleave", () => this.emitClearDropPreview(), { passive: true });
+    document.addEventListener("dragend", (e) => {
+      this.emitClearDropPreview();
+    }, { passive: true });
+  }
+  async updated(_changedProperties) {
+    if (_changedProperties.has("layout") && this.layout === "list") {
+      console.log("switched to list");
+      this.syncSize(true);
+      this.observer?.disconnect();
+      this.requestUpdate();
+    } else if (_changedProperties.has("layout") && this.layout === "tiles") {
+      this.syncSize();
+      if (!this.observer) {
+        this.observer = new MutationObserver(() => this.syncSize());
+        this.observer.observe(this.baseEl, { attributeFilter: ["style"], attributes: true });
+      }
+    }
+  }
+  firstUpdated(_changedProperties) {
+    this.requestUpdate();
+  }
+  syncSize(clear = false) {
+    if (this.baseEl && !clear) {
+      this.style.width = this.baseEl.style.width;
+      this.style.height = this.baseEl.style.height;
+    } else if (this.baseEl && clear) {
+      this.style.width = this.baseEl.style.width = null;
+      this.style.height = this.baseEl.style.height = null;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    this.observer = void 0;
+  }
+  get nextElementInOrder() {
+    return Array.from(this?.parentElement?.children ?? []).find((el) => {
+      const elOrder = parseInt(getComputedStyle(el).order);
+      return elOrder === this.elementIndex + 1;
+    });
+  }
+  get prevElementInOrder() {
+    return Array.from(this?.parentElement?.children ?? []).find((el) => {
+      const elOrder = parseInt(getComputedStyle(el).order);
+      return elOrder === this.elementIndex - 1;
+    });
+  }
+  get inCorrectPosition() {
+    return this.elementIndex === this.validOrder;
+  }
+  render() {
+    const solution = this.validOrder !== void 0 ? html`<span class="solution" ?data-valid=${this.elementIndex === this.validOrder}>${this.validOrder + 1}</span>` : null;
+    return html`<ol part="base" start=${this.elementIndex + 1}>
+      ${this.layout === "list" ? solution : null}
+      <li id="main-li">
+        <slot id="content" style=${styleMap({ "--ww-placeholder": `"${this.msg("Option")}"`, "--offset": `${this.contentSlotEl?.offsetLeft + 1}px` })}></slot>
+      </li>
+      <div id="order-buttons" part="order-buttons" draggable="false">
+        <sl-icon-button ?disabled=${!this.previousElementSibling} id="up" class="order-button user-only" src=${arrow_up_default} @click=${this.handleClick} @mouseup=${() => this.draggable = true}></sl-icon-button>
+        <sl-icon-button ?disabled=${!this.nextElementSibling} id="down" class="order-button user-only" src=${arrow_down_default} @click=${this.handleClick}></sl-icon-button>
+      </div>
+    </ol>
+    <ol id="count" start=${this.elementIndex + 1}>
+      <li ?data-two-digit=${this.elementIndex + 1 >= 10}></li>
+      ${this.layout === "tiles" ? solution : null}
+    </ol>
+    <div id="handle"></div>`;
+  }
+};
+_init = __decoratorStart(_a);
+_draggable = new WeakMap();
+_dropPreview = new WeakMap();
+_layout = new WeakMap();
+_validOrder = new WeakMap();
+_hideOrderButtons = new WeakMap();
+_baseEl = new WeakMap();
+_contentSlotEl = new WeakMap();
+__decorateElement(_init, 4, "draggable", _draggable_dec, _WebwriterOrderItem, _draggable);
+__decorateElement(_init, 4, "dropPreview", _dropPreview_dec, _WebwriterOrderItem, _dropPreview);
+__decorateElement(_init, 4, "layout", _layout_dec, _WebwriterOrderItem, _layout);
+__decorateElement(_init, 4, "validOrder", _validOrder_dec, _WebwriterOrderItem, _validOrder);
+__decorateElement(_init, 4, "hideOrderButtons", _hideOrderButtons_dec, _WebwriterOrderItem, _hideOrderButtons);
+__decorateElement(_init, 4, "baseEl", _baseEl_dec, _WebwriterOrderItem, _baseEl);
+__decorateElement(_init, 4, "contentSlotEl", _contentSlotEl_dec, _WebwriterOrderItem, _contentSlotEl);
+_WebwriterOrderItem = __decorateElement(_init, 0, "WebwriterOrderItem", _WebwriterOrderItem_decorators, _WebwriterOrderItem);
+__publicField(_WebwriterOrderItem, "localization", {});
+__publicField(_WebwriterOrderItem, "scopedElements", {
+  "sl-icon-button": SlIconButton
+});
+__publicField(_WebwriterOrderItem, "styles", css`
+
+    :host {
+      position: relative;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) .user-only {
+      display: none;
+    }
+
+    ::marker {
+      font-weight: bold;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) ::marker {
+      color: var(--sl-color-success-800);
+    }
+
+    ol {
+      padding-left: 0;
+      margin: 0;
+      width: 100%;
+      position: relative;
+    }
+
+    .solution {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: -7px;
+      left: -13px;
+      border: 2px solid var(--sl-color-gray-500);
+      border-radius: 100%;
+      width: 15px;
+      height: 15px;
+      font-size: 10px;
+      z-index: 1;
+      color: white;
+      font-weight: bold;
+
+      &[data-valid] {
+        background: var(--sl-color-success-600);
+      }
+
+      &:not([data-valid]) {
+        background: var(--sl-color-danger-600);
+      }
+    }
+
+
+    :host([layout=tiles]) {
+      border: 2px solid var(--sl-color-gray-500);
+      border-radius: 5px;
+      aspect-ratio: 1;
+      min-width: 125px;
+      width: 125px;
+      max-width: 350px;
+      min-height: 125px;
+      height: 125px;
+      max-height: 350px;
+
+      & .solution {
+        left: unset;
+        top: -10px;
+        right: -10px;
+        width: 20px;
+        height: 20px;
+        font-size: 15px;
+      }
+
+      & ol[part=base] {
+        padding-left: 0;
+        margin: 0;
+        aspect-ratio: 1;
+        min-width: 125px;
+        width: 125px;
+        max-width: 350px;
+        min-height: 125px;
+        height: 125px;
+        max-height: 350px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        resize: both;
+      }
+
+      & ::slotted(:is(picture, audio, video, img, iframe)) {
+        height: 100%;
+        width: 100%;
+      }
+
+      & ::slotted(:not(:is(picture, audio, video, img, iframe))) {
+        margin: 5px !important;
+      }
+    }
+
+    :host(:not([layout=tiles])) {
+
+      width: 100% !important;
+      height: unset !important;
+
+      & ol[part=base] {
+        width: 100% !important;
+        height: auto !important;
+      }
+    }
+
+    li {
+      list-style-type: inherit;
+      list-style-position: inside;
+      flex-direction: row;
+      align-items: center;
+      font-size: var(--sl-input-font-size-medium);
+      cursor: move;
+    }
+
+    :host([droppreview])::before {
+      content: "";
+      position: absolute;
+      background: var(--sl-color-primary-600);
+    }
+
+    :host([droppreview=top])::before {
+      height: 2px;
+      width: 100%;
+      top: -2px;
+    }
+
+    :host([droppreview=bottom])::before {
+      height: 2px;
+      width: 100%;
+      bottom: -2px;
+    }
+
+    :host([droppreview=left])::before {
+      left: -17px;
+      height: 100%;
+      width: 15px;
+    }
+
+    :host([droppreview=right])::before {
+      right: -17px;
+      height: 100%;
+      width: 15px;
+    }
+
+    slot {
+      display: inline-block;
+      width: calc(100% - var(--offset));
+      cursor: text;
+    }
+
+    #order-buttons {
+      position: absolute;
+      right: 0;
+      top: 0;
+
+      & .order-button::part(base) {
+        padding: 0;
+      }
+    }
+
+    :host([hideorderbuttons]) #order-buttons {
+      display: none;
+    }
+
+    #handle {
+      box-sizing: border-box;
+      border-radius: 2px;
+      position: absolute;
+      left: 0px;
+      bottom: 0px;
+      width: 20px;
+      height: 25px;
+      display: inline-block;
+      overflow: hidden;
+      line-height: 5px;
+      padding: 1.5px 1px;
+      padding-bottom: 0;
+      cursor: move;
+      vertical-align: middle;
+      font-size: 12px;
+      font-family: sans-serif;
+      letter-spacing: 2px;
+      color: #cccccc;
+      text-shadow: 1px 0 1px black;
+      font-weight: 600;
+      opacity: 0.95;
+      transform: rotate(135deg);
+    }
+    #handle::after {
+      content: '.. .. ..';
+    }
+
+    :host(:not([layout=tiles])) :is(#handle, #count) {
+      display: none;
+    }
+
+    :host(:not([layout=list])) :is(#up, #down) {
+      display: none;
+    }
+
+    :host([layout=tiles]) #main-li {
+      display: contents;
+    }
+
+    :host([layout=tiles]) slot {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+
+    #count {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      display: inline-block;
+      width: 3ch;
+      position: absolute;
+      bottom: -14px;
+      left: -14px;
+      z-index: 10;
+      & li {
+        display: list-item;
+        width: 4ch;
+        height: 4ch;
+        font-size: 12px;
+        font-weight: bold;
+        border-radius: 100%;
+        border: 2px solid var(--sl-color-gray-600);
+        color: var(--sl-color-gray-600);
+        box-sizing: border-box;
+        background: white;
+        padding-left: 7px;
+        padding-top: 4px;
+        overflow: hidden;
+
+        &[data-two-digit] {
+          padding-left: 4px;
+        }
+      }
+
+    }
+  `);
+__runInitializers(_init, 1, _WebwriterOrderItem);
+var WebwriterOrderItem = _WebwriterOrderItem;
+export {
+  WebwriterOrderItem
+};