npm - @aquera/nile-elements - Versions diffs - 2.0.0 → 2.0.1 - Mend

@aquera/nile-elements 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (194) hide show

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js CHANGED Viewed

@@ -53,11 +53,11 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
         button.trigger:hover:not(:disabled) {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
         button.trigger:disabled {
@@ -71,8 +71,8 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           left: 0;
           z-index: 30;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -85,22 +85,22 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
         .cell {
           width: 14px;
           height: 14px;
-          border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
           border-radius: 2px;
           box-sizing: border-box;
           cursor: pointer;
         }
         .cell.hot {
-          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
         .label {
           margin-top: 6px;
           text-align: center;
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #475467);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
         }
         .custom {
@@ -109,19 +109,19 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           gap: 6px;
           margin-top: 8px;
           padding-top: 8px;
-          border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
+          border-top: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
         }
         .custom input {
           width: 44px;
           height: 26px;
           padding: 0 6px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 6px;
           font-size: 12px;
           box-sizing: border-box;
           text-align: center;
-          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
           font-family: inherit;
           /* Hide native number spinners: they overlap the centered text in this
              narrow field and a stray click on the arrows mutates the value. */
@@ -137,12 +137,12 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
         .custom input:focus {
           outline: none;
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
         .custom .times {
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #475467);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
         }
         .custom button.insert {
@@ -151,8 +151,8 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           padding: 0 12px;
           border: none;
           border-radius: 6px;
-          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-          color: #ffffff;
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+          color: var(--ng-colors-text-white);
           font-size: 12px;
           font-weight: 600;
           font-family: inherit;
@@ -160,7 +160,7 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
         }
         .custom button.insert:hover:not(:disabled) {
-          background: var(--nile-colors-primary-700, #1d4ed8);
+          background: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
         .custom button.insert:disabled {

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/** Smallest grid shown before the pointer starts expanding it. /\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/\n Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.\n /\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Hard cap on the number of rows selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n /* Hard cap on the number of columns selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n @state() private open = false;\n\n @state() private hoverRows = 0;\n\n @state() private hoverCols = 0;\n\n @state() private customRows = '';\n\n @state() private customCols = '';\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: relative;\n display: inline-flex;\n }\n\n button.trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0 6px;\n box-sizing: border-box;\n border: none;\n border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n }\n\n button.trigger:hover:not(:disabled) {\n background: var(--nile-colors-neutral-100, #f2f4f7);\n }\n\n button.trigger:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: 30;\n padding: 8px;\n background: var(--nile-wysiwyg-popover-bg, #ffffff);\n border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n .grid {\n display: grid;\n gap: 2px;\n }\n\n .cell {\n width: 14px;\n height: 14px;\n border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);\n border-radius: 2px;\n box-sizing: border-box;\n cursor: pointer;\n }\n\n .cell.hot {\n background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n }\n\n .label {\n margin-top: 6px;\n text-align: center;\n font-size: 12px;\n color: var(--nile-colors-neutral-600, #475467);\n }\n\n .custom {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n }\n\n .custom input {\n width: 44px;\n height: 26px;\n padding: 0 6px;\n border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n border-radius: 6px;\n font-size: 12px;\n box-sizing: border-box;\n text-align: center;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n font-family: inherit;\n / Hide native number spinners: they overlap the centered text in this\n narrow field and a stray click on the arrows mutates the value. /\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n .custom input::-webkit-outer-spin-button,\n .custom input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n .custom input:focus {\n outline: none;\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n }\n\n .custom .times {\n font-size: 12px;\n color: var(--nile-colors-neutral-600, #475467);\n }\n\n .custom button.insert {\n margin-left: auto;\n height: 26px;\n padding: 0 12px;\n border: none;\n border-radius: 6px;\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n }\n\n .custom button.insert:hover:not(:disabled) {\n background: var(--nile-colors-primary-700, #1d4ed8);\n }\n\n .custom button.insert:disabled {\n opacity: 0.4;\n cursor: default;\n }\n `,\n ];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('mousedown', this.handleOutside);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('mousedown', this.handleOutside);\n }\n\n private handleOutside = (event: MouseEvent): void => {\n if (this.open && !event.composedPath().includes(this)) this.open = false;\n };\n\n private pick(rows: number, cols: number): void {\n this.open = false;\n this.customRows = '';\n this.customCols = '';\n this.emit('wysiwyg-command', {\n name: 'insertTable',\n attrs: { rows, cols, withHeaderRow: true },\n });\n }\n\n /* Clamp raw input to 1..max; returns 0 when empty/invalid. */\n private clamp(raw: string, max: number): number {\n const n = parseInt(raw, 10);\n if (!Number.isFinite(n) \|\| n < 1) return 0;\n return Math.min(n, max);\n }\n\n private insertCustom(): void {\n const rows = this.clamp(this.customRows, this.maxRows);\n const cols = this.clamp(this.customCols, this.maxCols);\n if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n }\n\n public render(): TemplateResult {\n // Grow the grid by one row/col once the pointer reaches the edge, capped.\n const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n const cells: TemplateResult[] = [];\n for (let r = 1; r <= visibleRows; r += 1) {\n for (let c = 1; c <= visibleCols; c += 1) {\n cells.push(html`\n <span\n class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n @mouseenter=${() => {\n this.hoverRows = r;\n this.hoverCols = c;\n }}\n @click=${() => this.pick(r, c)}\n ></span>\n `);\n }\n }\n\n const customValid =\n this.clamp(this.customRows, this.maxRows) >= 1 &&\n this.clamp(this.customCols, this.maxCols) >= 1;\n\n return html`\n <button\n type=\"button\"\n class=\"trigger\"\n part=\"button\"\n aria-label=\"Insert table\"\n aria-expanded=${this.open ? 'true' : 'false'}\n ?disabled=${this.disabled}\n @mousedown=${(e: Event) => e.preventDefault()}\n @click=${() => {\n this.open = !this.open;\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n </button>\n ${this.open\n ? html`\n <div class=\"panel\">\n <div\n class=\"grid\"\n style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n @mousedown=${(e: Event) => e.preventDefault()}\n @mouseleave=${() => {\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n ${cells}\n </div>\n <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n </div>\n <div class=\"custom\">\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxRows}\n aria-label=\"Rows\"\n placeholder=\"Rows\"\n .value=${this.customRows}\n @input=${(e: Event) => {\n this.customRows = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <span class=\"times\">×</span>\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxCols}\n aria-label=\"Columns\"\n placeholder=\"Cols\"\n .value=${this.customCols}\n @input=${(e: Event) => {\n this.customCols = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <button\n type=\"button\"\n class=\"insert\"\n ?disabled=${!customValid}\n @click=${() => this.insertCustom()}\n >\n Insert\n </button>\n </div>\n </div>\n `\n : ''}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n }\n}\n"]}
1	+ {"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/** Smallest grid shown before the pointer starts expanding it. /\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/\n Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.\n /\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Hard cap on the number of rows selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n /* Hard cap on the number of columns selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n @state() private open = false;\n\n @state() private hoverRows = 0;\n\n @state() private hoverCols = 0;\n\n @state() private customRows = '';\n\n @state() private customCols = '';\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: relative;\n display: inline-flex;\n }\n\n button.trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0 6px;\n box-sizing: border-box;\n border: none;\n border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n button.trigger:hover:not(:disabled) {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n button.trigger:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: 30;\n padding: 8px;\n background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n .grid {\n display: grid;\n gap: 2px;\n }\n\n .cell {\n width: 14px;\n height: 14px;\n border: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n border-radius: 2px;\n box-sizing: border-box;\n cursor: pointer;\n }\n\n .cell.hot {\n background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100));\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .label {\n margin-top: 6px;\n text-align: center;\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n }\n\n .custom {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n }\n\n .custom input {\n width: 44px;\n height: 26px;\n padding: 0 6px;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 6px;\n font-size: 12px;\n box-sizing: border-box;\n text-align: center;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: inherit;\n / Hide native number spinners: they overlap the centered text in this\n narrow field and a stray click on the arrows mutates the value. /\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n .custom input::-webkit-outer-spin-button,\n .custom input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n .custom input:focus {\n outline: none;\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .custom .times {\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n }\n\n .custom button.insert {\n margin-left: auto;\n height: 26px;\n padding: 0 12px;\n border: none;\n border-radius: 6px;\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n color: var(--ng-colors-text-white);\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n }\n\n .custom button.insert:hover:not(:disabled) {\n background: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n }\n\n .custom button.insert:disabled {\n opacity: 0.4;\n cursor: default;\n }\n `,\n ];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('mousedown', this.handleOutside);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('mousedown', this.handleOutside);\n }\n\n private handleOutside = (event: MouseEvent): void => {\n if (this.open && !event.composedPath().includes(this)) this.open = false;\n };\n\n private pick(rows: number, cols: number): void {\n this.open = false;\n this.customRows = '';\n this.customCols = '';\n this.emit('wysiwyg-command', {\n name: 'insertTable',\n attrs: { rows, cols, withHeaderRow: true },\n });\n }\n\n /* Clamp raw input to 1..max; returns 0 when empty/invalid. */\n private clamp(raw: string, max: number): number {\n const n = parseInt(raw, 10);\n if (!Number.isFinite(n) \|\| n < 1) return 0;\n return Math.min(n, max);\n }\n\n private insertCustom(): void {\n const rows = this.clamp(this.customRows, this.maxRows);\n const cols = this.clamp(this.customCols, this.maxCols);\n if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n }\n\n public render(): TemplateResult {\n // Grow the grid by one row/col once the pointer reaches the edge, capped.\n const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n const cells: TemplateResult[] = [];\n for (let r = 1; r <= visibleRows; r += 1) {\n for (let c = 1; c <= visibleCols; c += 1) {\n cells.push(html`\n <span\n class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n @mouseenter=${() => {\n this.hoverRows = r;\n this.hoverCols = c;\n }}\n @click=${() => this.pick(r, c)}\n ></span>\n `);\n }\n }\n\n const customValid =\n this.clamp(this.customRows, this.maxRows) >= 1 &&\n this.clamp(this.customCols, this.maxCols) >= 1;\n\n return html`\n <button\n type=\"button\"\n class=\"trigger\"\n part=\"button\"\n aria-label=\"Insert table\"\n aria-expanded=${this.open ? 'true' : 'false'}\n ?disabled=${this.disabled}\n @mousedown=${(e: Event) => e.preventDefault()}\n @click=${() => {\n this.open = !this.open;\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n </button>\n ${this.open\n ? html`\n <div class=\"panel\">\n <div\n class=\"grid\"\n style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n @mousedown=${(e: Event) => e.preventDefault()}\n @mouseleave=${() => {\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n ${cells}\n </div>\n <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n </div>\n <div class=\"custom\">\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxRows}\n aria-label=\"Rows\"\n placeholder=\"Rows\"\n .value=${this.customRows}\n @input=${(e: Event) => {\n this.customRows = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <span class=\"times\">×</span>\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxCols}\n aria-label=\"Columns\"\n placeholder=\"Cols\"\n .value=${this.customCols}\n @input=${(e: Event) => {\n this.customCols = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <button\n type=\"button\"\n class=\"insert\"\n ?disabled=${!customValid}\n @click=${() => this.insertCustom()}\n >\n Insert\n </button>\n </div>\n </div>\n `\n : ''}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/table-menu.js CHANGED Viewed

@@ -47,8 +47,8 @@ let NileWysiwygTableMenu = class NileWysiwygTableMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -66,11 +66,11 @@ let NileWysiwygTableMenu = class NileWysiwygTableMenu extends NileElement {
           cursor: pointer;
           font-size: 12px;
           font-weight: 600;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
       `,
         ];

package/dist/src/nile-wysiwyg-editor/ui/table-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n name: CommandName;\n label: string;\n icon: string;\n}\n\nconst OPS: TableOp[] = [\n { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/*\n Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: absolute;\n z-index: 15;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .menu {\n display: flex;\n gap: 2px;\n padding: 4px;\n background: var(--nile-wysiwyg-popover-bg, ~~#ffffff~~);\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 26px;\n height: 26px;\n padding: 0 4px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: var(--nile-colors-neutral-700, ~~#344054~~);\n }\n\n button:hover {\n background: var(--nile-colors-neutral-100, ~~#f2f4f7~~);\n }\n `,\n ];\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${OPS.map(\n op => html`\n <nile-lite-tooltip content=${op.label} placement=\"top\">\n <button\n type=\"button\"\n aria-label=${op.label}\n @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n >\n ${renderGlyph(op.icon, 16)}\n </button>\n </nile-lite-tooltip>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n }\n}\n"]}
1	+ {"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n name: CommandName;\n label: string;\n icon: string;\n}\n\nconst OPS: TableOp[] = [\n { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/*\n Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: absolute;\n z-index: 15;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .menu {\n display: flex;\n gap: 2px;\n padding: 4px;\n background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 26px;\n height: 26px;\n padding: 0 4px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n button:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n `,\n ];\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${OPS.map(\n op => html`\n <nile-lite-tooltip content=${op.label} placement=\"top\">\n <button\n type=\"button\"\n aria-label=${op.label}\n @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n >\n ${renderGlyph(op.icon, 16)}\n </button>\n </nile-lite-tooltip>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n }\n}\n"]}

package/dist/src/version.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '2.0.0';
+export const NILE_ELEMENTS_VERSION = '2.0.1';
 export const NILE_VERSION = '1.2.8';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/dist/src/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '2.0.0';\nexport const NILE_VERSION = '1.2.8';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process \|\| { env: { NODE_ENV: 'production' } };\n}\n"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '2.0.1';\nexport const NILE_VERSION = '1.2.8';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process \|\| { env: { NODE_ENV: 'production' } };\n}\n"]}