@aquera/nile-elements 2.0.0 → 2.0.2

package/dist/nile-wysiwyg-editor/ui/embed-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"embed-panel.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-panel.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { toEmbedUrl } from '../engine/plugins/embeds';\nimport '../../nile-input/index';\nimport '../../nile-button/index';\n\n/**\n * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom\n * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to\n * match the image panel (nile-input + nile-button). Emits\n * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.\n */\n@customElement('nile-wysiwyg-embed-panel')\nexport class NileWysiwygEmbedPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private urlValue = '';\n  @state() private error = '';\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .embed-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n          min-width: 340px;\n          max-width: 420px;\n          padding: 12px;\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: 0 4px 16px rgba(0, 0, 0, 0.08);\n          font-size: 13px;\n        }\n\n        nile-input {\n          width: 100%;\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-danger-600, #d92d20);\n        }\n\n        .actions {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: 8px;\n          width: 100%;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;\n      input?.focus();\n    });\n  }\n\n  /** Clears the field. */\n  public reset(): void {\n    this.urlValue = '';\n    this.error = '';\n  }\n\n  private onUrl(event: CustomEvent): void {\n    this.urlValue = (event.detail?.value ?? '') as string;\n    this.error = '';\n  }\n\n  private handleSubmit(): void {\n    const target = toEmbedUrl(this.urlValue.trim());\n    if (!target) {\n      this.error = 'Enter a valid https:// URL.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-embed-apply', target);\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-embed-cancel');\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleSubmit();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"embed-panel\" part=\"embed-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"Video URL\"\n          placeholder=\"https://www.youtube.com/watch?v=…\"\n          .value=${this.urlValue}\n          @nile-input=${this.onUrl}\n        ></nile-input>\n\n        ${this.error\n          ? html`<span class=\"error\" part=\"error\">${this.error}</span>`\n          : html`<span class=\"hint\">Add any link to it</span>`}\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Embed</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;\n  }\n}\n"],"names":["NileWysiwygEmbedPanel","_j","t","this","open","urlValue","error","_this","_inherits","_createClass","key","value","focusInput","updateComplete","then","input","shadowRoot","querySelector","focus","reset","onUrl","event","detail","handleSubmit","target","toEmbedUrl","trim","emit","handleKeydown","stopPropagation","preventDefault","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","get","css","_templateObject4","NileElement","__decorate","property","type","Boolean","reflect","prototype","state","customElement"],"mappings":"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"}
+{"version":3,"file":"embed-panel.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-panel.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { toEmbedUrl } from '../engine/plugins/embeds';\nimport '../../nile-input/index';\nimport '../../nile-button/index';\n\n/**\n * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom\n * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to\n * match the image panel (nile-input + nile-button). Emits\n * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.\n */\n@customElement('nile-wysiwyg-embed-panel')\nexport class NileWysiwygEmbedPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private urlValue = '';\n  @state() private error = '';\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .embed-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n          min-width: 340px;\n          max-width: 420px;\n          padding: 12px;\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: 0 4px 16px rgba(0, 0, 0, 0.08);\n          font-size: 13px;\n        }\n\n        nile-input {\n          width: 100%;\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));\n        }\n\n        .actions {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: 8px;\n          width: 100%;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;\n      input?.focus();\n    });\n  }\n\n  /** Clears the field. */\n  public reset(): void {\n    this.urlValue = '';\n    this.error = '';\n  }\n\n  private onUrl(event: CustomEvent): void {\n    this.urlValue = (event.detail?.value ?? '') as string;\n    this.error = '';\n  }\n\n  private handleSubmit(): void {\n    const target = toEmbedUrl(this.urlValue.trim());\n    if (!target) {\n      this.error = 'Enter a valid https:// URL.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-embed-apply', target);\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-embed-cancel');\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleSubmit();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"embed-panel\" part=\"embed-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"Video URL\"\n          placeholder=\"https://www.youtube.com/watch?v=…\"\n          .value=${this.urlValue}\n          @nile-input=${this.onUrl}\n        ></nile-input>\n\n        ${this.error\n          ? html`<span class=\"error\" part=\"error\">${this.error}</span>`\n          : html`<span class=\"hint\">Add any link to it</span>`}\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Embed</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;\n  }\n}\n"],"names":["NileWysiwygEmbedPanel","_j","t","this","open","urlValue","error","_this","_inherits","_createClass","key","value","focusInput","updateComplete","then","input","shadowRoot","querySelector","focus","reset","onUrl","event","detail","handleSubmit","target","toEmbedUrl","trim","emit","handleKeydown","stopPropagation","preventDefault","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","get","css","_templateObject4","NileElement","__decorate","property","type","Boolean","reflect","prototype","state","customElement"],"mappings":"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"}

package/dist/nile-wysiwyg-editor/ui/embed-panel.esm.js

@@ -20,8 +20,8 @@ import{__decorate as i}from"tslib";import{css as s,html as n}from"lit";import{pr
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          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: 0 4px 16px rgba(0, 0, 0, 0.08);
           font-size: 13px;
@@ -33,12 +33,12 @@ import{__decorate as i}from"tslib";import{css as s,html as n}from"lit";import{pr
 
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         .error {
           font-size: 12px;
-          color: var(--nile-colors-danger-600, #d92d20);
+          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));
         }
 
         .actions {

package/dist/nile-wysiwyg-editor/ui/emoji-picker.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../emoji.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var i,e,o,r,t,s,n,a,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,p;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){e=_lit.css;o=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;t=_litDecoratorsJs.state;s=_litDecoratorsJs.query;n=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;},function(_emojiCjsJs){l=_emojiCjsJs.E;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){p=/*#__PURE__*/function(_a){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.open=!1,_this.filter="";return _this;}_inherits(p,_a);return _createClass(p,[{key:"focusInput",value:function focusInput(){var _this2=this;this.filter="",this.updateComplete.then(function(){var _this2$searchInput;_this2.searchInput&&(_this2.searchInput.value=""),(_this2$searchInput=_this2.searchInput)===null||_this2$searchInput===void 0?void 0:_this2$searchInput.focus();});}},{key:"handleKeydown",value:function handleKeydown(i){"Escape"===i.key&&(i.stopPropagation(),this.emit("wysiwyg-emoji-cancel"));}},{key:"render",value:function render(){var _this3=this;var i=this.filter.trim().toLowerCase(),e=i?l.filter(function(e){return e.name.includes(i);}):l;return o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"panel\" part=\"emoji-picker\" @keydown=",">\n        <input\n          class=\"emoji-picker__search\"\n          type=\"text\"\n          placeholder=\"Search emoji\u2026\"\n          aria-label=\"Search emoji\"\n          @input=","\n        />\n        <div class=\"grid\" role=\"listbox\" aria-label=\"Emoji\">\n          ","\n          ","\n        </div>\n      </div>\n    "])),this.handleKeydown,function(i){_this3.filter=i.target.value;},e.map(function(i){return o(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n              <button\n                type=\"button\"\n                class=\"emoji\"\n                title=","\n                @mousedown=","\n                @click=","\n              >\n                ","\n              </button>\n            "])),i.name,function(i){return i.preventDefault();},function(){return _this3.emit("wysiwyg-emoji-select",{"char":i["char"]});},i["char"]);}),0===e.length?o(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div class=\"empty\" style=\"grid-column: 1 / -1\">No emoji found</div>"]))):"");}}],[{key:"styles",get:function get(){return[e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 316px;\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        input {\n          font: inherit;\n          font-size: 13px;\n          width: 100%;\n          box-sizing: border-box;\n          margin-bottom: 6px;\n          padding: 5px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .grid {\n          display: grid;\n          grid-template-columns: repeat(9, 1fr);\n          gap: 2px;\n          max-height: 200px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n        }\n\n        .emoji {\n          font: inherit;\n          font-size: 18px;\n          height: 30px;\n          padding: 0;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          line-height: 1;\n        }\n\n        .emoji:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        .empty {\n          padding: 12px 4px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          text-align: center;\n        }\n      "])))];}}]);}(a);i([r({type:Boolean,reflect:!0})],p.prototype,"open",void 0),i([t()],p.prototype,"filter",void 0),i([s(".emoji-picker__search")],p.prototype,"searchInput",void 0),p=i([n("nile-wysiwyg-emoji-picker")],p);}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../emoji.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var r,e,i,o,t,s,n,a,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,p;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){r=_tslib.__decorate;},function(_lit){e=_lit.css;i=_lit.html;},function(_litDecoratorsJs){o=_litDecoratorsJs.property;t=_litDecoratorsJs.state;s=_litDecoratorsJs.query;n=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;},function(_emojiCjsJs){l=_emojiCjsJs.E;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){p=/*#__PURE__*/function(_a){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.open=!1,_this.filter="";return _this;}_inherits(p,_a);return _createClass(p,[{key:"focusInput",value:function focusInput(){var _this2=this;this.filter="",this.updateComplete.then(function(){var _this2$searchInput;_this2.searchInput&&(_this2.searchInput.value=""),(_this2$searchInput=_this2.searchInput)===null||_this2$searchInput===void 0?void 0:_this2$searchInput.focus();});}},{key:"handleKeydown",value:function handleKeydown(r){"Escape"===r.key&&(r.stopPropagation(),this.emit("wysiwyg-emoji-cancel"));}},{key:"render",value:function render(){var _this3=this;var r=this.filter.trim().toLowerCase(),e=r?l.filter(function(e){return e.name.includes(r);}):l;return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"panel\" part=\"emoji-picker\" @keydown=",">\n        <input\n          class=\"emoji-picker__search\"\n          type=\"text\"\n          placeholder=\"Search emoji\u2026\"\n          aria-label=\"Search emoji\"\n          @input=","\n        />\n        <div class=\"grid\" role=\"listbox\" aria-label=\"Emoji\">\n          ","\n          ","\n        </div>\n      </div>\n    "])),this.handleKeydown,function(r){_this3.filter=r.target.value;},e.map(function(r){return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n              <button\n                type=\"button\"\n                class=\"emoji\"\n                title=","\n                @mousedown=","\n                @click=","\n              >\n                ","\n              </button>\n            "])),r.name,function(r){return r.preventDefault();},function(){return _this3.emit("wysiwyg-emoji-select",{"char":r["char"]});},r["char"]);}),0===e.length?i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div class=\"empty\" style=\"grid-column: 1 / -1\">No emoji found</div>"]))):"");}}],[{key:"styles",get:function get(){return[e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 316px;\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        input {\n          font: inherit;\n          font-size: 13px;\n          width: 100%;\n          box-sizing: border-box;\n          margin-bottom: 6px;\n          padding: 5px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .grid {\n          display: grid;\n          grid-template-columns: repeat(9, 1fr);\n          gap: 2px;\n          max-height: 200px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n        }\n\n        .emoji {\n          font: inherit;\n          font-size: 18px;\n          height: 30px;\n          padding: 0;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          line-height: 1;\n        }\n\n        .emoji:hover {\n          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n        }\n\n        .empty {\n          padding: 12px 4px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n          text-align: center;\n        }\n      "])))];}}]);}(a);r([o({type:Boolean,reflect:!0})],p.prototype,"open",void 0),r([t()],p.prototype,"filter",void 0),r([s(".emoji-picker__search")],p.prototype,"searchInput",void 0),p=r([n("nile-wysiwyg-emoji-picker")],p);}};});
 //# sourceMappingURL=emoji-picker.cjs.js.map

package/dist/nile-wysiwyg-editor/ui/emoji-picker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-picker.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/emoji-picker.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { EMOJI } from '../emoji';\n\n/**\n * Emoji picker panel (the 😊 toolbar item). Shares the emoji set with the\n * \":\" autocomplete; the search box filters by name. Emits\n * `wysiwyg-emoji-select` detail: { char } and `wysiwyg-emoji-cancel`.\n */\n@customElement('nile-wysiwyg-emoji-picker')\nexport class NileWysiwygEmojiPicker extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private filter = '';\n\n  @query('.emoji-picker__search') searchInput?: HTMLInputElement;\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 316px;\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        input {\n          font: inherit;\n          font-size: 13px;\n          width: 100%;\n          box-sizing: border-box;\n          margin-bottom: 6px;\n          padding: 5px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .grid {\n          display: grid;\n          grid-template-columns: repeat(9, 1fr);\n          gap: 2px;\n          max-height: 200px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n        }\n\n        .emoji {\n          font: inherit;\n          font-size: 18px;\n          height: 30px;\n          padding: 0;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          line-height: 1;\n        }\n\n        .emoji:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        .empty {\n          padding: 12px 4px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          text-align: center;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.filter = '';\n    this.updateComplete.then(() => {\n      if (this.searchInput) this.searchInput.value = '';\n      this.searchInput?.focus();\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-emoji-cancel');\n    }\n  }\n\n  public render(): TemplateResult {\n    const query = this.filter.trim().toLowerCase();\n    const shown = query ? EMOJI.filter(e => e.name.includes(query)) : EMOJI;\n    return html`\n      <div class=\"panel\" part=\"emoji-picker\" @keydown=${this.handleKeydown}>\n        <input\n          class=\"emoji-picker__search\"\n          type=\"text\"\n          placeholder=\"Search emoji…\"\n          aria-label=\"Search emoji\"\n          @input=${(e: Event) => {\n            this.filter = (e.target as HTMLInputElement).value;\n          }}\n        />\n        <div class=\"grid\" role=\"listbox\" aria-label=\"Emoji\">\n          ${shown.map(\n            e => html`\n              <button\n                type=\"button\"\n                class=\"emoji\"\n                title=${e.name}\n                @mousedown=${(ev: Event) => ev.preventDefault()}\n                @click=${() => this.emit('wysiwyg-emoji-select', { char: e.char })}\n              >\n                ${e.char}\n              </button>\n            `\n          )}\n          ${shown.length === 0\n            ? html`<div class=\"empty\" style=\"grid-column: 1 / -1\">No emoji found</div>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-emoji-picker': NileWysiwygEmojiPicker;\n  }\n}\n"],"names":["NileWysiwygEmojiPicker","_a","p","constructor","this","open","filter","_this","_inherits","_createClass","key","value","focusInput","updateComplete","then","_this2$searchInput","searchInput","focus","handleKeydown","event","stopPropagation","emit","render","_this3","query","trim","toLowerCase","shown","EMOJI","e","name","includes","html","_templateObject","_taggedTemplateLiteral","target","map","_templateObject2","ev","preventDefault","char","length","_templateObject3","get","css","_templateObject4","NileElement","__decorate","property","type","Boolean","reflect","prototype","state","customElement"],"mappings":"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"}
+{"version":3,"file":"emoji-picker.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/emoji-picker.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { EMOJI } from '../emoji';\n\n/**\n * Emoji picker panel (the 😊 toolbar item). Shares the emoji set with the\n * \":\" autocomplete; the search box filters by name. Emits\n * `wysiwyg-emoji-select` detail: { char } and `wysiwyg-emoji-cancel`.\n */\n@customElement('nile-wysiwyg-emoji-picker')\nexport class NileWysiwygEmojiPicker extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private filter = '';\n\n  @query('.emoji-picker__search') searchInput?: HTMLInputElement;\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: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 316px;\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        input {\n          font: inherit;\n          font-size: 13px;\n          width: 100%;\n          box-sizing: border-box;\n          margin-bottom: 6px;\n          padding: 5px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .grid {\n          display: grid;\n          grid-template-columns: repeat(9, 1fr);\n          gap: 2px;\n          max-height: 200px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n        }\n\n        .emoji {\n          font: inherit;\n          font-size: 18px;\n          height: 30px;\n          padding: 0;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          line-height: 1;\n        }\n\n        .emoji:hover {\n          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n        }\n\n        .empty {\n          padding: 12px 4px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n          text-align: center;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.filter = '';\n    this.updateComplete.then(() => {\n      if (this.searchInput) this.searchInput.value = '';\n      this.searchInput?.focus();\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-emoji-cancel');\n    }\n  }\n\n  public render(): TemplateResult {\n    const query = this.filter.trim().toLowerCase();\n    const shown = query ? EMOJI.filter(e => e.name.includes(query)) : EMOJI;\n    return html`\n      <div class=\"panel\" part=\"emoji-picker\" @keydown=${this.handleKeydown}>\n        <input\n          class=\"emoji-picker__search\"\n          type=\"text\"\n          placeholder=\"Search emoji…\"\n          aria-label=\"Search emoji\"\n          @input=${(e: Event) => {\n            this.filter = (e.target as HTMLInputElement).value;\n          }}\n        />\n        <div class=\"grid\" role=\"listbox\" aria-label=\"Emoji\">\n          ${shown.map(\n            e => html`\n              <button\n                type=\"button\"\n                class=\"emoji\"\n                title=${e.name}\n                @mousedown=${(ev: Event) => ev.preventDefault()}\n                @click=${() => this.emit('wysiwyg-emoji-select', { char: e.char })}\n              >\n                ${e.char}\n              </button>\n            `\n          )}\n          ${shown.length === 0\n            ? html`<div class=\"empty\" style=\"grid-column: 1 / -1\">No emoji found</div>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-emoji-picker': NileWysiwygEmojiPicker;\n  }\n}\n"],"names":["NileWysiwygEmojiPicker","_a","p","constructor","this","open","filter","_this","_inherits","_createClass","key","value","focusInput","updateComplete","then","_this2$searchInput","searchInput","focus","handleKeydown","event","stopPropagation","emit","render","_this3","query","trim","toLowerCase","shown","EMOJI","e","name","includes","html","_templateObject","_taggedTemplateLiteral","target","map","_templateObject2","ev","preventDefault","char","length","_templateObject3","get","css","_templateObject4","NileElement","__decorate","property","type","Boolean","reflect","prototype","state","customElement"],"mappings":"2gHAWaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCACuCC,KAAAA,CAAIC,IAAG,CAAA,CAAA,CAAA,CAElCD,KAAAA,CAAME,MAAAA,CAAG,EAmI3B,QAAAC,KAAA,EA/HQC,SAAA,CAAAN,CAAA,CAAAD,EAAA,SAAAQ,YAAA,CAAAP,CAAA,GAAAQ,GAAA,cAAAC,KAAA,CA6EA,SAAAC,UAAAA,CAAAA,kBACLR,IAAKE,CAAAA,MAAAA,CAAS,GACdF,IAAKS,CAAAA,cAAAA,CAAeC,IAAK,CAAA,UAAA,KAAAC,kBAAA,CACnBX,MAAKY,CAAAA,WAAAA,GAAaZ,OAAKY,WAAYL,CAAAA,KAAAA,CAAQ,EAC/CP,CAAAA,EAAAA,kBAAAA,CAAAA,MAAAA,CAAKY,WAAaC,UAAAA,kBAAAA,iBAAlBb,kBAAAA,CAAkBa,KAAAA,CAAAA,CAAO,GAE5B,EAEO,GAAAP,GAAA,iBAAAC,KAAA,UAAAO,aAAAA,CAAcC,CAAAA,CAAAA,CACF,QAAdA,GAAAA,CAAAA,CAAMT,MACRS,CAAMC,CAAAA,eAAAA,CAAAA,CAAAA,CACNhB,IAAKiB,CAAAA,IAAAA,CAAK,sBAEb,CAAA,CAAA,EAEM,GAAAX,GAAA,UAAAC,KAAA,UAAAW,MAAAA,CAAAA,CACL,KAAAC,MAAA,MAAA,GAAMC,CAAAA,CAAQpB,CAAAA,IAAAA,CAAKE,MAAOmB,CAAAA,IAAAA,CAAAA,CAAAA,CAAOC,cAC3BC,CAAQH,CAAAA,CAAAA,CAAQI,CAAMtB,CAAAA,MAAAA,CAAOuB,SAAAA,CAAKA,QAAAA,CAAAA,CAAAA,CAAEC,KAAKC,QAASP,CAAAA,CAAAA,CAAAA,EAAAA,CAAAA,CAAUI,CAClE,CAAA,MAAOI,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,wZACyC9B,IAAKc,CAAAA,aAAAA,CAMzCW,SAAAA,CAAAA,CAAAA,CACRzB,MAAKE,CAAAA,MAAAA,CAAUuB,CAAEM,CAAAA,MAAAA,CAA4BxB,KAAK,EAAA,CAIlDgB,CAAMS,CAAAA,GAAAA,CACNP,SAAAA,SAAKG,CAAAA,CAAI,CAAAK,gBAAA,GAAAA,gBAAA,CAAAH,sBAAA,qQAIGL,CAAEC,CAAAA,IAAAA,CACIQ,SAAAA,CAAAA,QAAcA,CAAAA,CAAGC,CAAAA,cAAAA,CAAAA,CAAAA,GACtB,iBAAMnC,CAAAA,MAAKiB,CAAAA,IAAAA,CAAK,sBAAwB,CAAA,CAAEmB,OAAMX,CAAEW,QAAAA,CAAAA,CAAAA,GAEzDX,CAAEW,QAAAA,KAIS,CAAjBb,GAAAA,CAAAA,CAAMc,MACJT,CAAAA,CAAI,CAAAU,gBAAA,GAAAA,gBAAA,CAAAR,sBAAA,gFACJ,EAAA,EAIX,CAAA,KAAAxB,GAAA,UAAAiC,GAAA,CA9HM,SAAAA,IAAA,CACL,CAAA,MAAO,CACLC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAX,sBAAA,qhEAyEN,EAEM,MApFmCY,GACEC,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,OAAAA,CAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAqBnD,CAAAoD,CAAAA,SAAAA,CAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAExCL,EAAA,CAAhBM,CAAAA,CAAAA,CAAAA,CAAAA,CAA4BrD,CAAAoD,CAAAA,SAAAA,CAAA,QAAA,CAAA,IAAA,EAAA,CAAA,CAEGL,CAAA,CAAA,CAA/BvB,EAAM,uBAAwDxB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAoD,SAAA,CAAA,aAAA,CAAA,IAAA,EALpDpD,CAAAA,CAAAA,CAAAA,CAAsB+C,CAAA,CAAA,CADlCO,EAAc,2BACFtD,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/nile-wysiwyg-editor/ui/emoji-picker.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{css as i,html as o}from"lit";import{property as r,state as t,query as s,customElement as n}from"lit/decorators.js";import{N as a}from"../../internal/nile-element.esm.js";import{E as l}from"../emoji.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let p=class extends a{constructor(){super(...arguments),this.open=!1,this.filter=""}static get styles(){return[i`
+import{__decorate as e}from"tslib";import{css as r,html as i}from"lit";import{property as o,state as t,query as s,customElement as n}from"lit/decorators.js";import{N as a}from"../../internal/nile-element.esm.js";import{E as l}from"../emoji.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let p=class extends a{constructor(){super(...arguments),this.open=!1,this.filter=""}static get styles(){return[r`
         :host {
           font-family: var(
             --nile-font-family-sans-serif,
@@ -16,8 +16,8 @@ import{__decorate as e}from"tslib";import{css as i,html as o}from"lit";import{pr
         .panel {
           width: 316px;
           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));
         }
@@ -29,13 +29,13 @@ import{__decorate as e}from"tslib";import{css as i,html as o}from"lit";import{pr
           box-sizing: border-box;
           margin-bottom: 6px;
           padding: 5px 8px;
-          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;
           outline: none;
         }
 
         input:focus {
-          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));
         }
 
         .grid {
@@ -60,16 +60,16 @@ import{__decorate as e}from"tslib";import{css as i,html as o}from"lit";import{pr
         }
 
         .emoji:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         .empty {
           padding: 12px 4px;
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           text-align: center;
         }
-      `]}focusInput(){this.filter="",this.updateComplete.then((()=>{this.searchInput&&(this.searchInput.value=""),this.searchInput?.focus()}))}handleKeydown(e){"Escape"===e.key&&(e.stopPropagation(),this.emit("wysiwyg-emoji-cancel"))}render(){const e=this.filter.trim().toLowerCase(),i=e?l.filter((i=>i.name.includes(e))):l;return o`
+      `]}focusInput(){this.filter="",this.updateComplete.then((()=>{this.searchInput&&(this.searchInput.value=""),this.searchInput?.focus()}))}handleKeydown(e){"Escape"===e.key&&(e.stopPropagation(),this.emit("wysiwyg-emoji-cancel"))}render(){const e=this.filter.trim().toLowerCase(),r=e?l.filter((r=>r.name.includes(e))):l;return i`
       <div class="panel" part="emoji-picker" @keydown=${this.handleKeydown}>
         <input
           class="emoji-picker__search"
@@ -79,7 +79,7 @@ import{__decorate as e}from"tslib";import{css as i,html as o}from"lit";import{pr
           @input=${e=>{this.filter=e.target.value}}
         />
         <div class="grid" role="listbox" aria-label="Emoji">
-          ${i.map((e=>o`
+          ${r.map((e=>i`
               <button
                 type="button"
                 class="emoji"
@@ -90,7 +90,7 @@ import{__decorate as e}from"tslib";import{css as i,html as o}from"lit";import{pr
                 ${e.char}
               </button>
             `))}
-          ${0===i.length?o`<div class="empty" style="grid-column: 1 / -1">No emoji found</div>`:""}
+          ${0===r.length?i`<div class="empty" style="grid-column: 1 / -1">No emoji found</div>`:""}
         </div>
       </div>
-    `}};e([r({type:Boolean,reflect:!0})],p.prototype,"open",void 0),e([t()],p.prototype,"filter",void 0),e([s(".emoji-picker__search")],p.prototype,"searchInput",void 0),p=e([n("nile-wysiwyg-emoji-picker")],p);
+    `}};e([o({type:Boolean,reflect:!0})],p.prototype,"open",void 0),e([t()],p.prototype,"filter",void 0),e([s(".emoji-picker__search")],p.prototype,"searchInput",void 0),p=e([n("nile-wysiwyg-emoji-picker")],p);

package/dist/nile-wysiwyg-editor/ui/find-replace.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,i,e,n,o,r,s,_templateObject,_templateObject2,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.css;e=_lit.html;},function(_litDecoratorsJs){n=_litDecoratorsJs.property;o=_litDecoratorsJs.query;r=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){s=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){a=/*#__PURE__*/function(_s){function a(){var _this;_classCallCheck(this,a);_this=_callSuper(this,a,arguments),_this.open=!1,_this.matchCount=0,_this.activeIndex=0;return _this;}_inherits(a,_s);return _createClass(a,[{key:"focusInput",value:function focusInput(){var _this2=this;this.updateComplete.then(function(){var _this2$queryInput,_this2$queryInput2;(_this2$queryInput=_this2.queryInput)!==null&&_this2$queryInput!==void 0&&_this2$queryInput.focus(),(_this2$queryInput2=_this2.queryInput)===null||_this2$queryInput2===void 0?void 0:_this2$queryInput2.select();});}},{key:"handleKeydown",value:function handleKeydown(t){"Escape"===t.key?(t.stopPropagation(),this.emit("wysiwyg-find-close")):"Enter"===t.key&&t.target===this.queryInput&&(t.preventDefault(),this.emit("wysiwyg-find-step",{direction:t.shiftKey?"prev":"next"}));}},{key:"render",value:function render(){var _this3=this;var t=this.matchCount?"".concat(Math.min(this.activeIndex+1,this.matchCount),"/").concat(this.matchCount):"0/0";return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"find-bar\" part=\"find-bar\" @keydown=",">\n        <input\n          class=\"find-bar__query\"\n          type=\"text\"\n          placeholder=\"Find\"\n          aria-label=\"Find\"\n          @input=","\n        />\n        <span class=\"count\">","</span>\n        <button\n          type=\"button\"\n          title=\"Previous match\"\n          @click=","\n        >\n          \u2191\n        </button>\n        <button\n          type=\"button\"\n          title=\"Next match\"\n          @click=","\n        >\n          \u2193\n        </button>\n        <input\n          class=\"find-bar__replace\"\n          type=\"text\"\n          placeholder=\"Replace with\"\n          aria-label=\"Replace with\"\n        />\n        <button\n          type=\"button\"\n          @click=","\n        >\n          Replace\n        </button>\n        <button\n          type=\"button\"\n          @click=","\n        >\n          All\n        </button>\n        <button type=\"button\" title=\"Close (Esc)\" @click=",">\n          \u2715\n        </button>\n      </div>\n    "])),this.handleKeydown,function(t){return _this3.emit("wysiwyg-find",{query:t.target.value});},t,function(){return _this3.emit("wysiwyg-find-step",{direction:"prev"});},function(){return _this3.emit("wysiwyg-find-step",{direction:"next"});},function(){var _this3$replaceInput$v,_this3$replaceInput;return _this3.emit("wysiwyg-replace",{value:(_this3$replaceInput$v=(_this3$replaceInput=_this3.replaceInput)===null||_this3$replaceInput===void 0?void 0:_this3$replaceInput.value)!==null&&_this3$replaceInput$v!==void 0?_this3$replaceInput$v:""});},function(){var _this3$replaceInput$v2,_this3$replaceInput2;return _this3.emit("wysiwyg-replace-all",{value:(_this3$replaceInput$v2=(_this3$replaceInput2=_this3.replaceInput)===null||_this3$replaceInput2===void 0?void 0:_this3$replaceInput2.value)!==null&&_this3$replaceInput$v2!==void 0?_this3$replaceInput$v2:""});},function(){return _this3.emit("wysiwyg-find-close");});}}],[{key:"styles",get:function get(){return[i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\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          top: 8px;\n          right: 8px;\n          z-index: 25;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .find-bar {\n          display: grid;\n          grid-template-columns: auto auto auto auto;\n          align-items: center;\n          gap: 6px;\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          font-size: 13px;\n        }\n\n        input {\n          font: inherit;\n          font-size: 13px;\n          width: 160px;\n          padding: 4px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .count {\n          min-width: 42px;\n          text-align: center;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          font-variant-numeric: tabular-nums;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 8px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      "])))];}}]);}(s);t([n({type:Boolean,reflect:!0})],a.prototype,"open",void 0),t([n({type:Number})],a.prototype,"matchCount",void 0),t([n({type:Number})],a.prototype,"activeIndex",void 0),t([o(".find-bar__query")],a.prototype,"queryInput",void 0),t([o(".find-bar__replace")],a.prototype,"replaceInput",void 0),a=t([r("nile-wysiwyg-find-bar")],a);}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,i,e,r,n,o,s,_templateObject,_templateObject2,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.css;e=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;n=_litDecoratorsJs.query;o=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){s=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){a=/*#__PURE__*/function(_s){function a(){var _this;_classCallCheck(this,a);_this=_callSuper(this,a,arguments),_this.open=!1,_this.matchCount=0,_this.activeIndex=0;return _this;}_inherits(a,_s);return _createClass(a,[{key:"focusInput",value:function focusInput(){var _this2=this;this.updateComplete.then(function(){var _this2$queryInput,_this2$queryInput2;(_this2$queryInput=_this2.queryInput)!==null&&_this2$queryInput!==void 0&&_this2$queryInput.focus(),(_this2$queryInput2=_this2.queryInput)===null||_this2$queryInput2===void 0?void 0:_this2$queryInput2.select();});}},{key:"handleKeydown",value:function handleKeydown(t){"Escape"===t.key?(t.stopPropagation(),this.emit("wysiwyg-find-close")):"Enter"===t.key&&t.target===this.queryInput&&(t.preventDefault(),this.emit("wysiwyg-find-step",{direction:t.shiftKey?"prev":"next"}));}},{key:"render",value:function render(){var _this3=this;var t=this.matchCount?"".concat(Math.min(this.activeIndex+1,this.matchCount),"/").concat(this.matchCount):"0/0";return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"find-bar\" part=\"find-bar\" @keydown=",">\n        <input\n          class=\"find-bar__query\"\n          type=\"text\"\n          placeholder=\"Find\"\n          aria-label=\"Find\"\n          @input=","\n        />\n        <span class=\"count\">","</span>\n        <button\n          type=\"button\"\n          title=\"Previous match\"\n          @click=","\n        >\n          \u2191\n        </button>\n        <button\n          type=\"button\"\n          title=\"Next match\"\n          @click=","\n        >\n          \u2193\n        </button>\n        <input\n          class=\"find-bar__replace\"\n          type=\"text\"\n          placeholder=\"Replace with\"\n          aria-label=\"Replace with\"\n        />\n        <button\n          type=\"button\"\n          @click=","\n        >\n          Replace\n        </button>\n        <button\n          type=\"button\"\n          @click=","\n        >\n          All\n        </button>\n        <button type=\"button\" title=\"Close (Esc)\" @click=",">\n          \u2715\n        </button>\n      </div>\n    "])),this.handleKeydown,function(t){return _this3.emit("wysiwyg-find",{query:t.target.value});},t,function(){return _this3.emit("wysiwyg-find-step",{direction:"prev"});},function(){return _this3.emit("wysiwyg-find-step",{direction:"next"});},function(){var _this3$replaceInput$v,_this3$replaceInput;return _this3.emit("wysiwyg-replace",{value:(_this3$replaceInput$v=(_this3$replaceInput=_this3.replaceInput)===null||_this3$replaceInput===void 0?void 0:_this3$replaceInput.value)!==null&&_this3$replaceInput$v!==void 0?_this3$replaceInput$v:""});},function(){var _this3$replaceInput$v2,_this3$replaceInput2;return _this3.emit("wysiwyg-replace-all",{value:(_this3$replaceInput$v2=(_this3$replaceInput2=_this3.replaceInput)===null||_this3$replaceInput2===void 0?void 0:_this3$replaceInput2.value)!==null&&_this3$replaceInput$v2!==void 0?_this3$replaceInput$v2:""});},function(){return _this3.emit("wysiwyg-find-close");});}}],[{key:"styles",get:function get(){return[i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\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          top: 8px;\n          right: 8px;\n          z-index: 25;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .find-bar {\n          display: grid;\n          grid-template-columns: auto auto auto auto;\n          align-items: center;\n          gap: 6px;\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          font-size: 13px;\n        }\n\n        input {\n          font: inherit;\n          font-size: 13px;\n          width: 160px;\n          padding: 4px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .count {\n          min-width: 42px;\n          text-align: center;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n          font-variant-numeric: tabular-nums;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 8px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\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      "])))];}}]);}(s);t([r({type:Boolean,reflect:!0})],a.prototype,"open",void 0),t([r({type:Number})],a.prototype,"matchCount",void 0),t([r({type:Number})],a.prototype,"activeIndex",void 0),t([n(".find-bar__query")],a.prototype,"queryInput",void 0),t([n(".find-bar__replace")],a.prototype,"replaceInput",void 0),a=t([o("nile-wysiwyg-find-bar")],a);}};});
 //# sourceMappingURL=find-replace.cjs.js.map

package/dist/nile-wysiwyg-editor/ui/find-replace.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"find-replace.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/find-replace.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Find & replace bar pinned to the top-right of the editor. Emits:\n *  - `wysiwyg-find`         detail: { query }\n *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }\n *  - `wysiwyg-replace`      detail: { value }\n *  - `wysiwyg-replace-all`  detail: { value }\n *  - `wysiwyg-find-close`\n */\n@customElement('nile-wysiwyg-find-bar')\nexport class NileWysiwygFindBar extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Number }) matchCount = 0;\n\n  @property({ type: Number }) activeIndex = 0;\n\n  @query('.find-bar__query') queryInput?: HTMLInputElement;\n\n  @query('.find-bar__replace') replaceInput?: HTMLInputElement;\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          top: 8px;\n          right: 8px;\n          z-index: 25;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .find-bar {\n          display: grid;\n          grid-template-columns: auto auto auto auto;\n          align-items: center;\n          gap: 6px;\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          font-size: 13px;\n        }\n\n        input {\n          font: inherit;\n          font-size: 13px;\n          width: 160px;\n          padding: 4px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .count {\n          min-width: 42px;\n          text-align: center;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          font-variant-numeric: tabular-nums;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 8px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\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 focusInput(): void {\n    this.updateComplete.then(() => {\n      this.queryInput?.focus();\n      this.queryInput?.select();\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-find-close');\n    } else if (event.key === 'Enter' && event.target === this.queryInput) {\n      event.preventDefault();\n      this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });\n    }\n  }\n\n  public render(): TemplateResult {\n    const count = this.matchCount\n      ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`\n      : '0/0';\n    return html`\n      <div class=\"find-bar\" part=\"find-bar\" @keydown=${this.handleKeydown}>\n        <input\n          class=\"find-bar__query\"\n          type=\"text\"\n          placeholder=\"Find\"\n          aria-label=\"Find\"\n          @input=${(e: Event) =>\n            this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}\n        />\n        <span class=\"count\">${count}</span>\n        <button\n          type=\"button\"\n          title=\"Previous match\"\n          @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}\n        >\n          ↑\n        </button>\n        <button\n          type=\"button\"\n          title=\"Next match\"\n          @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}\n        >\n          ↓\n        </button>\n        <input\n          class=\"find-bar__replace\"\n          type=\"text\"\n          placeholder=\"Replace with\"\n          aria-label=\"Replace with\"\n        />\n        <button\n          type=\"button\"\n          @click=${() =>\n            this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}\n        >\n          Replace\n        </button>\n        <button\n          type=\"button\"\n          @click=${() =>\n            this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}\n        >\n          All\n        </button>\n        <button type=\"button\" title=\"Close (Esc)\" @click=${() => this.emit('wysiwyg-find-close')}>\n          ✕\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-find-bar': NileWysiwygFindBar;\n  }\n}\n"],"names":["NileWysiwygFindBar","a","constructor","this","open","matchCount","activeIndex","_this","_inherits","_s","_createClass","key","value","focusInput","updateComplete","then","_this2$queryInput","_this2$queryInput2","queryInput","focus","select","handleKeydown","event","stopPropagation","emit","target","preventDefault","direction","shiftKey","render","_this3","count","concat","Math","min","html","_templateObject","_taggedTemplateLiteral","e","query","_this3$replaceInput$v","_this3$replaceInput","replaceInput","_this3$replaceInput$v2","_this3$replaceInput2","__decorate","get","css","_templateObject2","NileElement","property","type","Boolean","reflect","prototype","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"find-replace.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/find-replace.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Find & replace bar pinned to the top-right of the editor. Emits:\n *  - `wysiwyg-find`         detail: { query }\n *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }\n *  - `wysiwyg-replace`      detail: { value }\n *  - `wysiwyg-replace-all`  detail: { value }\n *  - `wysiwyg-find-close`\n */\n@customElement('nile-wysiwyg-find-bar')\nexport class NileWysiwygFindBar extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Number }) matchCount = 0;\n\n  @property({ type: Number }) activeIndex = 0;\n\n  @query('.find-bar__query') queryInput?: HTMLInputElement;\n\n  @query('.find-bar__replace') replaceInput?: HTMLInputElement;\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          top: 8px;\n          right: 8px;\n          z-index: 25;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .find-bar {\n          display: grid;\n          grid-template-columns: auto auto auto auto;\n          align-items: center;\n          gap: 6px;\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          font-size: 13px;\n        }\n\n        input {\n          font: inherit;\n          font-size: 13px;\n          width: 160px;\n          padding: 4px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n        }\n\n        .count {\n          min-width: 42px;\n          text-align: center;\n          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n          font-variant-numeric: tabular-nums;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 8px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\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 focusInput(): void {\n    this.updateComplete.then(() => {\n      this.queryInput?.focus();\n      this.queryInput?.select();\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-find-close');\n    } else if (event.key === 'Enter' && event.target === this.queryInput) {\n      event.preventDefault();\n      this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });\n    }\n  }\n\n  public render(): TemplateResult {\n    const count = this.matchCount\n      ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`\n      : '0/0';\n    return html`\n      <div class=\"find-bar\" part=\"find-bar\" @keydown=${this.handleKeydown}>\n        <input\n          class=\"find-bar__query\"\n          type=\"text\"\n          placeholder=\"Find\"\n          aria-label=\"Find\"\n          @input=${(e: Event) =>\n            this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}\n        />\n        <span class=\"count\">${count}</span>\n        <button\n          type=\"button\"\n          title=\"Previous match\"\n          @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}\n        >\n          ↑\n        </button>\n        <button\n          type=\"button\"\n          title=\"Next match\"\n          @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}\n        >\n          ↓\n        </button>\n        <input\n          class=\"find-bar__replace\"\n          type=\"text\"\n          placeholder=\"Replace with\"\n          aria-label=\"Replace with\"\n        />\n        <button\n          type=\"button\"\n          @click=${() =>\n            this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}\n        >\n          Replace\n        </button>\n        <button\n          type=\"button\"\n          @click=${() =>\n            this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}\n        >\n          All\n        </button>\n        <button type=\"button\" title=\"Close (Esc)\" @click=${() => this.emit('wysiwyg-find-close')}>\n          ✕\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-find-bar': NileWysiwygFindBar;\n  }\n}\n"],"names":["NileWysiwygFindBar","a","constructor","this","open","matchCount","activeIndex","_this","_inherits","_s","_createClass","key","value","focusInput","updateComplete","then","_this2$queryInput","_this2$queryInput2","queryInput","focus","select","handleKeydown","event","stopPropagation","emit","target","preventDefault","direction","shiftKey","render","_this3","count","concat","Math","min","html","_templateObject","_taggedTemplateLiteral","e","query","_this3$replaceInput$v","_this3$replaceInput","replaceInput","_this3$replaceInput$v2","_this3$replaceInput2","__decorate","get","css","_templateObject2","NileElement","property","type","Boolean","reflect","prototype","Number","customElement"],"mappings":"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"}

package/dist/nile-wysiwyg-editor/ui/find-replace.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{property as n,query as o,customElement as r}from"lit/decorators.js";import{N as s}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let a=class extends s{constructor(){super(...arguments),this.open=!1,this.matchCount=0,this.activeIndex=0}static get styles(){return[e`
+import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{property as r,query as n,customElement as o}from"lit/decorators.js";import{N as s}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let a=class extends s{constructor(){super(...arguments),this.open=!1,this.matchCount=0,this.activeIndex=0}static get styles(){return[e`
         :host {
           font-family: var(
             --nile-font-family-sans-serif,
@@ -21,8 +21,8 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           align-items: center;
           gap: 6px;
           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));
           font-size: 13px;
@@ -33,19 +33,19 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           font-size: 13px;
           width: 160px;
           padding: 4px 8px;
-          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;
           outline: none;
         }
 
         input:focus {
-          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));
         }
 
         .count {
           min-width: 42px;
           text-align: center;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           font-variant-numeric: tabular-nums;
         }
 
@@ -57,11 +57,11 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           border-radius: 5px;
           background: transparent;
           cursor: pointer;
-          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));
         }
       `]}focusInput(){this.updateComplete.then((()=>{this.queryInput?.focus(),this.queryInput?.select()}))}handleKeydown(t){"Escape"===t.key?(t.stopPropagation(),this.emit("wysiwyg-find-close")):"Enter"===t.key&&t.target===this.queryInput&&(t.preventDefault(),this.emit("wysiwyg-find-step",{direction:t.shiftKey?"prev":"next"}))}render(){const t=this.matchCount?`${Math.min(this.activeIndex+1,this.matchCount)}/${this.matchCount}`:"0/0";return i`
       <div class="find-bar" part="find-bar" @keydown=${this.handleKeydown}>
@@ -109,4 +109,4 @@ import{__decorate as t}from"tslib";import{css as e,html as i}from"lit";import{pr
           ✕
         </button>
       </div>
-    `}};t([n({type:Boolean,reflect:!0})],a.prototype,"open",void 0),t([n({type:Number})],a.prototype,"matchCount",void 0),t([n({type:Number})],a.prototype,"activeIndex",void 0),t([o(".find-bar__query")],a.prototype,"queryInput",void 0),t([o(".find-bar__replace")],a.prototype,"replaceInput",void 0),a=t([r("nile-wysiwyg-find-bar")],a);
+    `}};t([r({type:Boolean,reflect:!0})],a.prototype,"open",void 0),t([r({type:Number})],a.prototype,"matchCount",void 0),t([r({type:Number})],a.prototype,"activeIndex",void 0),t([n(".find-bar__query")],a.prototype,"queryInput",void 0),t([n(".find-bar__replace")],a.prototype,"replaceInput",void 0),a=t([o("nile-wysiwyg-find-bar")],a);

package/dist/nile-wysiwyg-editor/ui/image-menu.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/glyph.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,i,n,a,o,r,_templateObject,_templateObject2,_templateObject3,l,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.css;i=_lit.html;},function(_litDecoratorsJs){n=_litDecoratorsJs.property;a=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_internalGlyphCjsJs){r=_internalGlyphCjsJs.r;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){l=[{label:"Align left",icon:"format_align_left",command:"setImageAlign",attrs:{align:"left"},active:function active(t){return"left"===t.imageAlign;}},{label:"Align center",icon:"format_align_middle",command:"setImageAlign",attrs:{align:"center"},active:function active(t){return"center"===t.imageAlign;}},{label:"Align right",icon:"format_align_right",command:"setImageAlign",attrs:{align:"right"},active:function active(t){return"right"===t.imageAlign;}},{label:"Toggle caption",icon:"ng-captions",command:"toggleImageCaption",active:function active(t){return t.imageIsFigure;}},{label:"Original size",text:"1:1",command:"setImageWidth",attrs:{width:null}},{label:"Delete image",icon:"ng-trash-01",command:"deleteImage"}];s=/*#__PURE__*/function(_o){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.open=!1;return _this;}_inherits(s,_o);return _createClass(s,[{key:"render",value:function render(){var _this2=this;var t=this.toolbarState;return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"menu\" part=\"image-menu\" @mousedown=",">\n        ","\n      </div>\n    "])),function(t){return t.preventDefault();},l.map(function(e){return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <button\n              type=\"button\"\n              title=","\n              aria-label=","\n              ?data-active=","\n              @click=","\n            >\n              ","\n            </button>\n          "])),e.label,e.label,!(!t||!e.active)&&e.active(t),function(){return _this2.emit("wysiwyg-command",{name:e.command,attrs:e.attrs});},e.icon?r(e.icon,16):e.text);}));}}],[{key:"styles",get:function get(){return[e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n      "])))];}}]);}(o);t([n({type:Boolean,reflect:!0})],s.prototype,"open",void 0),t([n({attribute:!1})],s.prototype,"toolbarState",void 0),s=t([a("nile-wysiwyg-image-menu")],s);}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/glyph.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,a,i,n,r,o,_templateObject,_templateObject2,_templateObject3,l,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.css;a=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;n=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){r=_internalNileElementCjsJs.N;},function(_internalGlyphCjsJs){o=_internalGlyphCjsJs.r;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){l=[{label:"Align left",icon:"format_align_left",command:"setImageAlign",attrs:{align:"left"},active:function active(t){return"left"===t.imageAlign;}},{label:"Align center",icon:"format_align_middle",command:"setImageAlign",attrs:{align:"center"},active:function active(t){return"center"===t.imageAlign;}},{label:"Align right",icon:"format_align_right",command:"setImageAlign",attrs:{align:"right"},active:function active(t){return"right"===t.imageAlign;}},{label:"Toggle caption",icon:"ng-captions",command:"toggleImageCaption",active:function active(t){return t.imageIsFigure;}},{label:"Original size",text:"1:1",command:"setImageWidth",attrs:{width:null}},{label:"Delete image",icon:"ng-trash-01",command:"deleteImage"}];s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.open=!1;return _this;}_inherits(s,_r);return _createClass(s,[{key:"render",value:function render(){var _this2=this;var t=this.toolbarState;return a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"menu\" part=\"image-menu\" @mousedown=",">\n        ","\n      </div>\n    "])),function(t){return t.preventDefault();},l.map(function(e){return a(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <button\n              type=\"button\"\n              title=","\n              aria-label=","\n              ?data-active=","\n              @click=","\n            >\n              ","\n            </button>\n          "])),e.label,e.label,!(!t||!e.active)&&e.active(t),function(){return _this2.emit("wysiwyg-command",{name:e.command,attrs:e.attrs});},e.icon?o(e.icon,16):e.text);}));}}],[{key:"styles",get:function get(){return[e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n        }\n      "])))];}}]);}(r);t([i({type:Boolean,reflect:!0})],s.prototype,"open",void 0),t([i({attribute:!1})],s.prototype,"toolbarState",void 0),s=t([n("nile-wysiwyg-image-menu")],s);}};});
 //# sourceMappingURL=image-menu.cjs.js.map

package/dist/nile-wysiwyg-editor/ui/image-menu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-menu.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/image-menu.ts"],"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 { ToolbarState } from '../engine/selection-state';\n\ninterface ImageOp {\n  label: string;\n  /** Design-system icon name; `text` is the fallback when no glyph fits. */\n  icon?: string;\n  text?: string;\n  command: string;\n  attrs?: Record<string, unknown>;\n  active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: ImageOp[] = [\n  {\n    label: 'Align left',\n    icon: 'format_align_left',\n    command: 'setImageAlign',\n    attrs: { align: 'left' },\n    active: s => s.imageAlign === 'left',\n  },\n  {\n    label: 'Align center',\n    icon: 'format_align_middle',\n    command: 'setImageAlign',\n    attrs: { align: 'center' },\n    active: s => s.imageAlign === 'center',\n  },\n  {\n    label: 'Align right',\n    icon: 'format_align_right',\n    command: 'setImageAlign',\n    attrs: { align: 'right' },\n    active: s => s.imageAlign === 'right',\n  },\n  {\n    label: 'Toggle caption',\n    icon: 'ng-captions',\n    command: 'toggleImageCaption',\n    active: s => s.imageIsFigure,\n  },\n  { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },\n  { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },\n];\n\n/**\n * Compact floating bar shown while an image or figure is selected. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-image-menu')\nexport class NileWysiwygImageMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"menu\" part=\"image-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <button\n              type=\"button\"\n              title=${op.label}\n              aria-label=${op.label}\n              ?data-active=${state && op.active ? op.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n            >\n              ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-image-menu': NileWysiwygImageMenu;\n  }\n}\n"],"names":["OPS","label","icon","command","attrs","align","active","s","imageAlign","imageIsFigure","text","width","NileWysiwygImageMenu","_o","constructor","this","open","_this","_inherits","_createClass","key","value","render","_this2","state","toolbarState","html","_templateObject","_taggedTemplateLiteral","e","preventDefault","map","op","_templateObject2","emit","name","renderGlyph","__decorate","get","styles","css","_templateObject3","NileElement","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"image-menu.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/image-menu.ts"],"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 { ToolbarState } from '../engine/selection-state';\n\ninterface ImageOp {\n  label: string;\n  /** Design-system icon name; `text` is the fallback when no glyph fits. */\n  icon?: string;\n  text?: string;\n  command: string;\n  attrs?: Record<string, unknown>;\n  active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: ImageOp[] = [\n  {\n    label: 'Align left',\n    icon: 'format_align_left',\n    command: 'setImageAlign',\n    attrs: { align: 'left' },\n    active: s => s.imageAlign === 'left',\n  },\n  {\n    label: 'Align center',\n    icon: 'format_align_middle',\n    command: 'setImageAlign',\n    attrs: { align: 'center' },\n    active: s => s.imageAlign === 'center',\n  },\n  {\n    label: 'Align right',\n    icon: 'format_align_right',\n    command: 'setImageAlign',\n    attrs: { align: 'right' },\n    active: s => s.imageAlign === 'right',\n  },\n  {\n    label: 'Toggle caption',\n    icon: 'ng-captions',\n    command: 'toggleImageCaption',\n    active: s => s.imageIsFigure,\n  },\n  { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },\n  { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },\n];\n\n/**\n * Compact floating bar shown while an image or figure is selected. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-image-menu')\nexport class NileWysiwygImageMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\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        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"menu\" part=\"image-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <button\n              type=\"button\"\n              title=${op.label}\n              aria-label=${op.label}\n              ?data-active=${state && op.active ? op.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n            >\n              ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-image-menu': NileWysiwygImageMenu;\n  }\n}\n"],"names":["OPS","label","icon","command","attrs","align","active","s","imageAlign","imageIsFigure","text","width","NileWysiwygImageMenu","_r","constructor","this","open","_this","_inherits","_createClass","key","value","render","_this2","state","toolbarState","html","_templateObject","_taggedTemplateLiteral","e","preventDefault","map","op","_templateObject2","emit","name","renderGlyph","__decorate","get","styles","css","_templateObject3","NileElement","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":"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"}

package/dist/nile-wysiwyg-editor/ui/image-menu.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{property as n,customElement as a}from"lit/decorators.js";import{N as o}from"../../internal/nile-element.esm.js";import{r}from"../../internal/glyph.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";const l=[{label:"Align left",icon:"format_align_left",command:"setImageAlign",attrs:{align:"left"},active:e=>"left"===e.imageAlign},{label:"Align center",icon:"format_align_middle",command:"setImageAlign",attrs:{align:"center"},active:e=>"center"===e.imageAlign},{label:"Align right",icon:"format_align_right",command:"setImageAlign",attrs:{align:"right"},active:e=>"right"===e.imageAlign},{label:"Toggle caption",icon:"ng-captions",command:"toggleImageCaption",active:e=>e.imageIsFigure},{label:"Original size",text:"1:1",command:"setImageWidth",attrs:{width:null}},{label:"Delete image",icon:"ng-trash-01",command:"deleteImage"}];let s=class extends o{constructor(){super(...arguments),this.open=!1}static get styles(){return[t`
+import{__decorate as e}from"tslib";import{css as t,html as a}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{N as r}from"../../internal/nile-element.esm.js";import{r as o}from"../../internal/glyph.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";const l=[{label:"Align left",icon:"format_align_left",command:"setImageAlign",attrs:{align:"left"},active:e=>"left"===e.imageAlign},{label:"Align center",icon:"format_align_middle",command:"setImageAlign",attrs:{align:"center"},active:e=>"center"===e.imageAlign},{label:"Align right",icon:"format_align_right",command:"setImageAlign",attrs:{align:"right"},active:e=>"right"===e.imageAlign},{label:"Toggle caption",icon:"ng-captions",command:"toggleImageCaption",active:e=>e.imageIsFigure},{label:"Original size",text:"1:1",command:"setImageWidth",attrs:{width:null}},{label:"Delete image",icon:"ng-trash-01",command:"deleteImage"}];let s=class extends r{constructor(){super(...arguments),this.open=!1}static get styles(){return[t`
         :host {
           font-family: var(
             --nile-font-family-sans-serif,
@@ -17,8 +17,8 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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));
         }
@@ -36,20 +36,20 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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));
         }
 
         button[data-active] {
-          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
-          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
-      `]}render(){const e=this.toolbarState;return i`
+      `]}render(){const e=this.toolbarState;return a`
       <div class="menu" part="image-menu" @mousedown=${e=>e.preventDefault()}>
-        ${l.map((t=>i`
+        ${l.map((t=>a`
             <button
               type="button"
               title=${t.label}
@@ -57,8 +57,8 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
               ?data-active=${!(!e||!t.active)&&t.active(e)}
               @click=${()=>this.emit("wysiwyg-command",{name:t.command,attrs:t.attrs})}
             >
-              ${t.icon?r(t.icon,16):t.text}
+              ${t.icon?o(t.icon,16):t.text}
             </button>
           `))}
       </div>
-    `}};e([n({type:Boolean,reflect:!0})],s.prototype,"open",void 0),e([n({attribute:!1})],s.prototype,"toolbarState",void 0),s=e([a("nile-wysiwyg-image-menu")],s);
+    `}};e([i({type:Boolean,reflect:!0})],s.prototype,"open",void 0),e([i({attribute:!1})],s.prototype,"toolbarState",void 0),s=e([n("nile-wysiwyg-image-menu")],s);