@mborecki/crossword 0.2.1 → 0.3.0

package/dist/cjs/{index-BlTGwvVC.js → index-rgQMtYdn.js}

@@ -2155,10 +2155,32 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
+    if (propType & 1 /* String */) {
+      return String(propValue);
+    }
     return propValue;
   }
   return propValue;
 };
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -3213,6 +3235,7 @@ function transformTag(tag) {
 }
 
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
 exports.forceUpdate = forceUpdate;
 exports.h = h;
 exports.promiseResolve = promiseResolve;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BlTGwvVC.js');
+var index = require('./index-rgQMtYdn.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"clueListStyle":[1,"clue-list-style"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64],"selectClue":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mb-crossword.cjs.entry.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-BlTGwvVC.js');
+var index = require('./index-rgQMtYdn.js');
 var index$1 = require('./index-CEGyCfpa.js');
 
-function Clue({ isCurrent, word, onPointerDown, preview, showPreview }) {
-    return index.h("p", { onPointerDown: onPointerDown, part: "clue", class: {
+function Clue({ isCurrent, word, onPointerDown, preview, showPreview, tagName }) {
+    const Tag = tagName ?? 'div';
+    return index.h(Tag, { onPointerDown: onPointerDown, part: "clue", class: {
             "--current": isCurrent
         } }, word.clue, showPreview && index.h("span", { class: "preview" }, preview));
 }
@@ -22,15 +23,29 @@ function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
         } }, index.h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
 }
 
-const mbCrosswordCss = () => `*[part=main]{position:relative;display:grid;grid-template-areas:"board" "clues";grid-template-columns:1fr}@media (min-width: 768px){*[part=main]{grid-template-areas:"clues board" "clues .";grid-template-columns:1fr 1fr}}*[part=main].--focused{background:lightgrey}*[part=main] input.dummy{pointer-events:none;opacity:0.2;z-index:100;grid-area:board;border:none;outline:none}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr;gap:16px}[part=clues].oneList{grid-template-columns:1fr}[part=clue].--current{background:var(--clue-current-background, lightcyan);position:sticky;bottom:0;left:0;right:0}[part=clue] .preview{font-weight:bold;letter-spacing:0.2em;text-align:center;display:block;text-transform:uppercase}[part=board]{grid-area:board;display:block;position:relative;container-type:size;background:var(--board-background, darkgoldenrod);--cell-border-width:2px;--cell-width-temp:calc((100cqw - var(--cell-border-width)) / var(--board-width, 10));--cell-width:var(--cell-width-temp);--cell-width:round(var(--cell-width-temp), 1px)}[part=cell]{display:block;color:var(--cell-color, #11138d);width:calc(var(--cell-width) - var(--cell-border-width));aspect-ratio:1;background:var(--cell-background, #d9d9d9);position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));border:var(--cell-border-width) solid var(--cell-border-color, red)}[part=cell].--alt{background:var(--cell-background-alt, #999)}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px var(--cell-selected-background, lightblue)}[part=cell].--selected{background:var(--cell-selected-background, lightblue)}[part=cell].--special{background:var(--cell-special-background, lightgreen)}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}[part=special-border]{display:block;background:black;position:absolute;z-index:100;--s-border:max(2px, var(--cell-border-width))}[part=special-border].left,[part=special-border].right{width:var(--s-border);height:calc(var(--cell-width) - var(--cell-border-width));top:calc(var(--y, 0) * var(--cell-width) + var(--cell-border-width))}[part=special-border].left{left:calc(var(--x, 0) * var(--cell-width) - var(--s-border) / 2)}[part=special-border].right{left:calc((var(--x, 0) + 1) * var(--cell-width) - var(--s-border) / 2)}[part=special-border].top,[part=special-border].bottom{width:calc(var(--cell-width) - var(--cell-border-width));height:var(--s-border);left:calc(var(--x, 0) * var(--cell-width) + var(--cell-border-width))}[part=special-border].top{top:calc(var(--y, 0) * var(--cell-width))}[part=special-border].bottom{top:calc((var(--y, 0) + 1) * var(--cell-width))}[part=label]{display:grid;position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));width:calc(var(--cell-width) - var(--cell-border-width));aspect-ratio:1;border:var(--cell-border-width) solid transparent;--label-place-content:center end}[part=label] ._inner{position:absolute;top:var(--label-padding, 10cqh);left:var(--label-padding, 10cqh);right:var(--label-padding, 10cqh);bottom:var(--label-padding, 10cqh);display:grid;place-content:var(--label-place-content, center);text-transform:uppercase;font-size:var(--label-font-size, 60cqh)}`;
+const ClueList = ({ type }, children) => {
+    if (type === 'p') {
+        return index.h("p", { part: "clue-list" }, children.map((child, index$1) => {
+            return index.h("p", { key: index$1 }, child);
+        }));
+    }
+    if (type === 'ol') {
+        return index.h("ol", { part: "clue-list" }, children);
+    }
+};
+
+const mbCrosswordCss = () => `*[part=main]{position:relative;display:grid;grid-template-areas:"board" "clues";grid-template-columns:1fr}@media (min-width: 768px){*[part=main]{grid-template-areas:"clues board" "clues .";grid-template-columns:1fr 1fr}*[part=main].--only-board{grid-template-columns:1fr;grid-template-areas:"board"}}*[part=main].--focused{background:lightgrey}*[part=main] input.dummy{pointer-events:none;opacity:0.2;z-index:100;grid-area:board;border:none;outline:none}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr;gap:16px}[part=clues].oneList{grid-template-columns:1fr}[part=clue-list]{margin:0;padding:0}[part=clue].--current{background:var(--clue-current-background, lightcyan);position:sticky;bottom:0;left:0;right:0}[part=clue] .preview{font-weight:bold;letter-spacing:0.2em;text-align:center;display:block;text-transform:uppercase}li[part=clue]{--_clue-padding:var(--clue-padding, .5em);border-radius:var(--clue-radius, 0.5em);padding:var(--_clue-padding);list-style-position:inside;padding-left:calc(1em + var(--_clue-padding));text-indent:-1em;margin:0}[part=board]{grid-area:board;display:block;position:relative;container-type:size;background:var(--board-background, darkgoldenrod);--_cell-border-width:var(--cell-border-width, 2px);--cell-width-temp:calc((100cqw - var(--_cell-border-width)) / var(--board-width, 10));--cell-width:var(--cell-width-temp);--cell-width:round(var(--cell-width-temp), 1px)}[part=cell]{display:block;color:var(--cell-color, #11138d);width:calc(var(--cell-width) - var(--_cell-border-width));aspect-ratio:1;background:var(--cell-background, #d9d9d9);position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));border:var(--_cell-border-width) solid var(--cell-border-color, red)}[part=cell].--alt{background:var(--cell-background-alt, #999)}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px var(--cell-selected-background, lightblue)}[part=cell].--selected{background:var(--cell-selected-background, lightblue)}[part=cell].--special{background:var(--cell-special-background, lightgreen)}[part=cell].--special.--selected:before{content:"";background:var(--cell-selected-background, lightblue);position:absolute;top:0;left:0;right:0;bottom:0;clip-path:polygon(100% 0, 100% 100%, 50% 100%)}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}[part=special-border]{display:block;background:black;position:absolute;z-index:100;--s-border:max(2px, var(--_cell-border-width))}[part=special-border].left,[part=special-border].right{width:var(--s-border);height:calc(var(--cell-width) - var(--_cell-border-width));top:calc(var(--y, 0) * var(--cell-width) + var(--_cell-border-width))}[part=special-border].left{left:calc(var(--x, 0) * var(--cell-width) - var(--s-border) / 2)}[part=special-border].right{left:calc((var(--x, 0) + 1) * var(--cell-width) - var(--s-border) / 2)}[part=special-border].top,[part=special-border].bottom{width:calc(var(--cell-width) - var(--_cell-border-width));height:var(--s-border);left:calc(var(--x, 0) * var(--cell-width) + var(--_cell-border-width))}[part=special-border].top{top:calc(var(--y, 0) * var(--cell-width))}[part=special-border].bottom{top:calc((var(--y, 0) + 1) * var(--cell-width))}[part=label]{display:grid;position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));width:calc(var(--cell-width) - var(--_cell-border-width));aspect-ratio:1;border:var(--_cell-border-width) solid transparent;--label-place-content:center end}[part=label] ._inner{position:absolute;top:var(--label-padding, 10cqh);left:var(--label-padding, 10cqh);right:var(--label-padding, 10cqh);bottom:var(--label-padding, 10cqh);display:grid;place-content:var(--label-place-content, center);text-transform:uppercase;font-size:var(--label-font-size, 60cqh)}`;
 
 const MBCrossword = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.clueSelected = index.createEvent(this, "clueSelected");
     }
     init = true;
     data;
     showCluePreview = true;
+    clueListStyle = 'ol';
+    clueSelected;
     textInput;
     hWords = [];
     vWords = [];
@@ -263,7 +278,7 @@ const MBCrossword = class {
     onFocusOut() {
         this.isFocused = false;
     }
-    selectClue(id, { row, col } = {}) {
+    async selectClue(id, { row, col } = {}) {
         if (!id)
             return;
         this.currentClueId = id;
@@ -386,18 +401,21 @@ const MBCrossword = class {
     render() {
         const hasVWords = Boolean(this.vWords.length);
         const hasHWords = Boolean(this.hWords.length);
+        const hideList = this.clueListStyle === 'none';
         const twoLists = hasHWords && hasVWords;
-        return index.h("div", { key: '87d88806305c6102eeb76c3984d4b9c2ad2d9759', part: "main", class: {
-                "--focused": this.isFocused
-            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, index.h("input", { key: '49cdb053a4d2c4ad2c7eb881488b18c68e31fe65', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), index.h("div", { key: '0ca71a907f70e17a6d2d10bff9462bd0b2284007', part: "clues", class: {
-                twoLists, oneList: !twoLists
-            } }, hasHWords ? index.h("div", { part: "clue-list" }, this.hWords.map(w => {
+        return index.h("div", { key: '0aa26f6435a57c206eba0d518313d6248d922eaa', part: "main", class: {
+                "--focused": this.isFocused,
+                "--only-board": hideList
+            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, index.h("input", { key: 'e15789ff3feb48df30117b501b440142ba3eccf7', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), hideList ? '' : index.h("div", { part: "clues", class: {
+                twoLists,
+                oneList: !twoLists
+            } }, hasHWords ? index.h(ClueList, { type: this.clueListStyle }, this.hWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })) : '', hasVWords ? index.h("div", { part: "clue-list" }, this.vWords.map(w => {
+            return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id), tagName: this.clueListStyle === 'ol' ? 'li' : undefined });
+        })) : '', hasVWords ? index.h(ClueList, { type: this.clueListStyle }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })) : ''), index.h("div", { key: 'ea16dca25fe7884d25f9748f98740ad83e25293e', part: "board", style: {
+            return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id), tagName: this.clueListStyle === 'ol' ? 'li' : undefined });
+        })) : ''), index.h("div", { key: '08ffd76832a1c9c9dfddf8424e9e014d104444a0', part: "board", style: {
                 '--board-width': `${this.boardWidth}`,
                 'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
                 aspectRatio: `${this.boardWidth / this.boardHeight}`
@@ -421,7 +439,7 @@ const MBCrossword = class {
                     "--x": `${label.x}`,
                     "--y": `${label.y}`
                 }, onPointerDown: () => this.selectClue(label.clueId) }, index.h("div", { class: "_inner" }, label.text));
-        })), index.h("div", { key: 'd391413e7be3dee148f2f5e6d8fbf22742278a0c', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+        })));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {

package/dist/cjs/mb-crossword.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlTGwvVC.js');
+var index = require('./index-rgQMtYdn.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"clueListStyle":[1,"clue-list-style"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64],"selectClue":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/crossword/clue-list.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+export const ClueList = ({ type }, children) => {
+    if (type === 'p') {
+        return h("p", { part: "clue-list" }, children.map((child, index) => {
+            return h("p", { key: index }, child);
+        }));
+    }
+    if (type === 'ol') {
+        return h("ol", { part: "clue-list" }, children);
+    }
+};

package/dist/collection/components/crossword/clue.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
-export function Clue({ isCurrent, word, onPointerDown, preview, showPreview }) {
-    return h("p", { onPointerDown: onPointerDown, part: "clue", class: {
+export function Clue({ isCurrent, word, onPointerDown, preview, showPreview, tagName }) {
+    const Tag = tagName ?? 'div';
+    return h(Tag, { onPointerDown: onPointerDown, part: "clue", class: {
             "--current": isCurrent
         } }, word.clue, showPreview && h("span", { class: "preview" }, preview));
 }

package/dist/collection/components/crossword/mb-crossword.css

@@ -9,6 +9,10 @@
     grid-template-areas: "clues board" "clues .";
     grid-template-columns: 1fr 1fr;
   }
+  *[part=main].--only-board {
+    grid-template-columns: 1fr;
+    grid-template-areas: "board";
+  }
 }
 *[part=main].--focused {
   background: lightgrey;
@@ -32,6 +36,11 @@
   grid-template-columns: 1fr;
 }
 
+[part=clue-list] {
+  margin: 0;
+  padding: 0;
+}
+
 [part=clue].--current {
   background: var(--clue-current-background, lightcyan);
   position: sticky;
@@ -47,14 +56,24 @@
   text-transform: uppercase;
 }
 
+li[part=clue] {
+  --_clue-padding: var(--clue-padding, .5em);
+  border-radius: var(--clue-radius, 0.5em);
+  padding: var(--_clue-padding);
+  list-style-position: inside;
+  padding-left: calc(1em + var(--_clue-padding));
+  text-indent: -1em;
+  margin: 0;
+}
+
 [part=board] {
   grid-area: board;
   display: block;
   position: relative;
   container-type: size;
   background: var(--board-background, darkgoldenrod);
-  --cell-border-width: 2px;
-  --cell-width-temp: calc((100cqw - var(--cell-border-width)) / var(--board-width, 10));
+  --_cell-border-width: var(--cell-border-width, 2px);
+  --cell-width-temp: calc((100cqw - var(--_cell-border-width)) / var(--board-width, 10));
   --cell-width: var(--cell-width-temp);
   --cell-width: round(var(--cell-width-temp), 1px);
 }
@@ -62,14 +81,14 @@
 [part=cell] {
   display: block;
   color: var(--cell-color, #11138d);
-  width: calc(var(--cell-width) - var(--cell-border-width));
+  width: calc(var(--cell-width) - var(--_cell-border-width));
   aspect-ratio: 1;
   background: var(--cell-background, #d9d9d9);
   position: absolute;
   container-type: size;
   top: calc(var(--y, 0) * var(--cell-width));
   left: calc(var(--x, 0) * var(--cell-width));
-  border: var(--cell-border-width) solid var(--cell-border-color, red);
+  border: var(--_cell-border-width) solid var(--cell-border-color, red);
 }
 [part=cell].--alt {
   background: var(--cell-background-alt, #999);
@@ -83,6 +102,16 @@
 [part=cell].--special {
   background: var(--cell-special-background, lightgreen);
 }
+[part=cell].--special.--selected:before {
+  content: "";
+  background: var(--cell-selected-background, lightblue);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  clip-path: polygon(100% 0, 100% 100%, 50% 100%);
+}
 [part=cell] ._inner {
   position: absolute;
   top: 0;
@@ -104,12 +133,12 @@
   background: black;
   position: absolute;
   z-index: 100;
-  --s-border: max(2px, var(--cell-border-width));
+  --s-border: max(2px, var(--_cell-border-width));
 }
 [part=special-border].left, [part=special-border].right {
   width: var(--s-border);
-  height: calc(var(--cell-width) - var(--cell-border-width));
-  top: calc(var(--y, 0) * var(--cell-width) + var(--cell-border-width));
+  height: calc(var(--cell-width) - var(--_cell-border-width));
+  top: calc(var(--y, 0) * var(--cell-width) + var(--_cell-border-width));
 }
 [part=special-border].left {
   left: calc(var(--x, 0) * var(--cell-width) - var(--s-border) / 2);
@@ -118,9 +147,9 @@
   left: calc((var(--x, 0) + 1) * var(--cell-width) - var(--s-border) / 2);
 }
 [part=special-border].top, [part=special-border].bottom {
-  width: calc(var(--cell-width) - var(--cell-border-width));
+  width: calc(var(--cell-width) - var(--_cell-border-width));
   height: var(--s-border);
-  left: calc(var(--x, 0) * var(--cell-width) + var(--cell-border-width));
+  left: calc(var(--x, 0) * var(--cell-width) + var(--_cell-border-width));
 }
 [part=special-border].top {
   top: calc(var(--y, 0) * var(--cell-width));
@@ -135,9 +164,9 @@
   container-type: size;
   top: calc(var(--y, 0) * var(--cell-width));
   left: calc(var(--x, 0) * var(--cell-width));
-  width: calc(var(--cell-width) - var(--cell-border-width));
+  width: calc(var(--cell-width) - var(--_cell-border-width));
   aspect-ratio: 1;
-  border: var(--cell-border-width) solid transparent;
+  border: var(--_cell-border-width) solid transparent;
   --label-place-content: center end;
 }
 [part=label] ._inner {

package/dist/collection/components/crossword/mb-crossword.js

@@ -3,10 +3,13 @@ import { Clue } from "./clue";
 import { Cell } from "./cell";
 import { indexFromXY, isInputEventLetter, Vec2fromIndex } from "../../utils/utils";
 import { Vec2 } from "@mb-puzzle/vec2";
+import { ClueList } from "./clue-list";
 export class MBCrossword {
     init = true;
     data;
     showCluePreview = true;
+    clueListStyle = 'ol';
+    clueSelected;
     textInput;
     hWords = [];
     vWords = [];
@@ -239,7 +242,7 @@ export class MBCrossword {
     onFocusOut() {
         this.isFocused = false;
     }
-    selectClue(id, { row, col } = {}) {
+    async selectClue(id, { row, col } = {}) {
         if (!id)
             return;
         this.currentClueId = id;
@@ -362,18 +365,21 @@ export class MBCrossword {
     render() {
         const hasVWords = Boolean(this.vWords.length);
         const hasHWords = Boolean(this.hWords.length);
+        const hideList = this.clueListStyle === 'none';
         const twoLists = hasHWords && hasVWords;
-        return h("div", { key: '87d88806305c6102eeb76c3984d4b9c2ad2d9759', part: "main", class: {
-                "--focused": this.isFocused
-            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, h("input", { key: '49cdb053a4d2c4ad2c7eb881488b18c68e31fe65', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), h("div", { key: '0ca71a907f70e17a6d2d10bff9462bd0b2284007', part: "clues", class: {
-                twoLists, oneList: !twoLists
-            } }, hasHWords ? h("div", { part: "clue-list" }, this.hWords.map(w => {
+        return h("div", { key: '0aa26f6435a57c206eba0d518313d6248d922eaa', part: "main", class: {
+                "--focused": this.isFocused,
+                "--only-board": hideList
+            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, h("input", { key: 'e15789ff3feb48df30117b501b440142ba3eccf7', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), hideList ? '' : h("div", { part: "clues", class: {
+                twoLists,
+                oneList: !twoLists
+            } }, hasHWords ? h(ClueList, { type: this.clueListStyle }, this.hWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })) : '', hasVWords ? h("div", { part: "clue-list" }, this.vWords.map(w => {
+            return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id), tagName: this.clueListStyle === 'ol' ? 'li' : undefined });
+        })) : '', hasVWords ? h(ClueList, { type: this.clueListStyle }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })) : ''), h("div", { key: 'ea16dca25fe7884d25f9748f98740ad83e25293e', part: "board", style: {
+            return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id), tagName: this.clueListStyle === 'ol' ? 'li' : undefined });
+        })) : ''), h("div", { key: '08ffd76832a1c9c9dfddf8424e9e014d104444a0', part: "board", style: {
                 '--board-width': `${this.boardWidth}`,
                 'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
                 aspectRatio: `${this.boardWidth / this.boardHeight}`
@@ -397,7 +403,7 @@ export class MBCrossword {
                     "--x": `${label.x}`,
                     "--y": `${label.y}`
                 }, onPointerDown: () => this.selectClue(label.clueId) }, h("div", { class: "_inner" }, label.text));
-        })), h("div", { key: 'd391413e7be3dee148f2f5e6d8fbf22742278a0c', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+        })));
     }
     static get is() { return "mb-crossword"; }
     static get encapsulation() { return "shadow"; }
@@ -477,6 +483,26 @@ export class MBCrossword {
                 "reflect": false,
                 "attribute": "show-clue-preview",
                 "defaultValue": "true"
+            },
+            "clueListStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'p' | 'ol' | 'none'",
+                    "resolved": "\"none\" | \"ol\" | \"p\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clue-list-style",
+                "defaultValue": "'ol'"
             }
         };
     }
@@ -496,6 +522,24 @@ export class MBCrossword {
             "cells": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "clueSelected",
+                "name": "clueSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "initGame": {
@@ -541,6 +585,31 @@ export class MBCrossword {
                     "text": "",
                     "tags": []
                 }
+            },
+            "selectClue": {
+                "complexType": {
+                    "signature": "(id: string, { row, col }?: { row?: number; col?: number; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "__1",
+                            "type": "{ row?: number; col?: number; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }