@webwriter/quiz 1.0.0

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

@@ -0,0 +1,288 @@
+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-choice-item.ts
+import { css, html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LitElementWw } from "@webwriter/lit";
+import { customElement, property, query } from "lit/decorators.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 SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+import { keyed } from "lit/directives/keyed.js";
+
+// ../../node_modules/bootstrap-icons/icons/x.svg
+var x_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">%0A  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/check.svg
+var check_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">%0A  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>%0A</svg>';
+
+// src/widgets/webwriter-choice-item.ts
+var _checkbox_dec, _layout_dec, _valid_dec, _active_dec, _a, _WebwriterChoiceItem_decorators, _init, _active, _valid, _layout, _checkbox;
+_WebwriterChoiceItem_decorators = [customElement("webwriter-choice-item")];
+var _WebwriterChoiceItem = class _WebwriterChoiceItem extends (_a = LitElementWw, _active_dec = [property({ type: Boolean, attribute: false })], _valid_dec = [property({ type: Boolean, attribute: false })], _layout_dec = [property({ type: String, attribute: true, reflect: true })], _checkbox_dec = [query("sl-checkbox")], _a) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "msg", (str) => this.lang in _WebwriterChoiceItem.localization ? _WebwriterChoiceItem.localization[this.lang][str] ?? str : str);
+    __privateAdd(this, _active, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _valid, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _layout, __runInitializers(_init, 16, this, "list")), __runInitializers(_init, 19, this);
+    __publicField(this, "handleClick", (e) => {
+      const checkboxClicked = e.composedPath().some((v) => v?.classList?.contains("checkbox__control"));
+      const editable = this.isContentEditable;
+      if (editable && !checkboxClicked) {
+        e.preventDefault();
+      } else {
+        e.stopImmediatePropagation();
+      }
+    });
+    __publicField(this, "handleChange", (e) => {
+      if (this.isContentEditable) {
+        this.valid = !this.valid;
+      } else {
+        this.active = !this.active;
+      }
+    });
+    __privateAdd(this, _checkbox, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "observer");
+  }
+  async updated(_changedProperties) {
+    await this.checkbox.updateComplete;
+    const labelEl = this.checkbox.shadowRoot.querySelector(".checkbox__label");
+    if (_changedProperties.has("layout") && this.layout === "list") {
+      this.syncSize(true);
+      this.observer?.disconnect();
+    } else if (_changedProperties.has("layout") && this.layout === "tiles") {
+      this.syncSize();
+      this.observer = new MutationObserver(() => this.syncSize());
+      this.observer.observe(labelEl, { attributeFilter: ["style"], attributes: true });
+    }
+  }
+  syncSize(clear = false) {
+    const labelEl = this.checkbox?.shadowRoot.querySelector(".checkbox__label");
+    if (labelEl && !clear) {
+      this.style.width = labelEl.style.width;
+      this.style.height = labelEl.style.height;
+    } else if (labelEl && clear) {
+      this.style.width = labelEl.style.width = null;
+      this.style.height = labelEl.style.height = null;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+  render() {
+    return keyed(this.layout, html`
+      ${this.valid !== void 0 && (this.active || !this.active && this.valid) ? html`<sl-icon class="solution user-only" ?data-valid=${this.valid} src=${this.valid ? check_default : x_default}></sl-icon>` : null}
+      <sl-checkbox class=${classMap({ valid: this.valid, active: this.active })} exportparts="base, control, label" @click=${this.handleClick} @sl-change=${this.handleChange} ?checked=${this.isContentEditable ? this.valid : this.active}>
+        <slot part="slot" style=${styleMap({ "--ww-placeholder": `"${this.msg("Option")}"` })}></slot>
+      </sl-checkbox>
+    `);
+  }
+};
+_init = __decoratorStart(_a);
+_active = new WeakMap();
+_valid = new WeakMap();
+_layout = new WeakMap();
+_checkbox = new WeakMap();
+__decorateElement(_init, 4, "active", _active_dec, _WebwriterChoiceItem, _active);
+__decorateElement(_init, 4, "valid", _valid_dec, _WebwriterChoiceItem, _valid);
+__decorateElement(_init, 4, "layout", _layout_dec, _WebwriterChoiceItem, _layout);
+__decorateElement(_init, 4, "checkbox", _checkbox_dec, _WebwriterChoiceItem, _checkbox);
+_WebwriterChoiceItem = __decorateElement(_init, 0, "WebwriterChoiceItem", _WebwriterChoiceItem_decorators, _WebwriterChoiceItem);
+__publicField(_WebwriterChoiceItem, "localization", {});
+__publicField(_WebwriterChoiceItem, "scopedElements", {
+  "sl-radio": SlRadio,
+  "sl-checkbox": SlCheckbox,
+  "sl-icon": SlIcon
+});
+__publicField(_WebwriterChoiceItem, "styles", css`
+
+    :host {
+      width: 100%;
+      position: relative;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) .user-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) sl-checkbox.valid {
+      --webwriter-control-color-600: var(--sl-color-success-600);
+      --webwriter-control-color-400: var(--sl-color-success-400);
+    }
+
+    sl-checkbox {
+      display: block;
+      width: 100%;
+      &::part(base) {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: unset;
+      }
+
+      &::part(control) {
+        cursor: pointer;
+        border-radius: var(--webwriter-choice-radius, 2px);
+        border-width: 2px;
+      }
+
+      &::part(control):not(:hover){
+        border-color: var(--sl-color-gray-500);
+      }
+
+      &::part(control):hover {
+        border-color: var(--sl-color-gray-700);
+      }
+
+      &::part(control--checked):not(:hover) {
+        background-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+        border-color: var(--sl-color-gray-500);
+      }
+      &::part(control--checked):hover {
+        background-color: var(--webwriter-control-color-400, var(--sl-color-primary-400));
+        border-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+      }
+
+      &::part(label) {
+        width: 100%;
+      }
+    }
+
+    .solution {
+      position: absolute;
+      top: -6px;
+      left: -6px;
+      border: 2px solid var(--sl-color-gray-500);
+      border-radius: var(--webwriter-choice-radius, 2px);
+      width: 12px;
+      height: 12px;
+      z-index: 1;
+      color: white;
+
+      &[data-valid] {
+        background: var(--sl-color-success-600);
+      }
+
+      &:not([data-valid]) {
+        background: var(--sl-color-danger-600);
+      }
+    }
+
+    :host([layout=tiles]) {
+      position: relative;
+      overflow: visible !important;
+
+      & ::slotted(:is(picture, audio, video, img, iframe)) {
+        height: 100%;
+        width: 100%;
+      }
+
+      & ::slotted(:not(:is(picture, audio, video, img, iframe))) {
+        margin: 5px !important;
+      }
+
+      sl-checkbox {
+      display: block;
+      &::part(base) {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: unset;
+        position: static;
+      }
+
+      &::part(control) {
+        position: absolute;
+        bottom: -10px;
+        left: -10px;
+        cursor: pointer;
+        border-radius: var(--webwriter-choice-radius, 2px);
+        z-index: 100;
+        border-color: var(--sl-color-gray-500);
+      }
+
+      &::part(control--checked):not(:hover) {
+        background-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+        border-color: var(--sl-color-gray-500);
+      }
+      &::part(control--checked):hover {
+        background-color: var(--webwriter-control-color-400, var(--sl-color-primary-400));
+        border-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+      }
+
+      &::part(label) {
+        aspect-ratio: 1;
+        min-width: 125px;
+        max-width: 350px;
+        min-height: 125px;
+        max-height: 350px;
+        overflow: hidden;
+        resize: both;
+        margin-inline-start: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+      }
+    }    
+    }
+  `);
+__runInitializers(_init, 1, _WebwriterChoiceItem);
+var WebwriterChoiceItem = _WebwriterChoiceItem;
+export {
+  WebwriterChoiceItem
+};