@nectary/components 2.6.1 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/button/index.js +23 -9
  2. package/button/types.d.ts +14 -6
  3. package/button/utils.js +1 -1
  4. package/emoji/index.js +3 -3
  5. package/emoji/utils.d.ts +3 -1
  6. package/emoji/utils.js +17 -12
  7. package/emoji-picker/data.json +1 -1
  8. package/emoji-picker/index.js +7 -3
  9. package/icon-button/index.js +4 -2
  10. package/input/index.js +3 -2
  11. package/link/index.js +1 -1
  12. package/package.json +2 -3
  13. package/pop/index.js +1 -1
  14. package/popover/index.js +7 -1
  15. package/rich-text/index.d.ts +3 -0
  16. package/rich-text/index.js +35 -8
  17. package/rich-text/utils.d.ts +5 -0
  18. package/rich-text/utils.js +96 -1
  19. package/rich-textarea/index.d.ts +11 -0
  20. package/rich-textarea/index.js +464 -0
  21. package/rich-textarea/types.d.ts +48 -0
  22. package/rich-textarea/types.js +1 -0
  23. package/rich-textarea/utils.d.ts +39 -0
  24. package/rich-textarea/utils.js +1730 -0
  25. package/select-button/index.js +5 -3
  26. package/textarea/index.js +3 -3
  27. package/tooltip/index.js +7 -1
  28. package/utils/markdown.d.ts +19 -1
  29. package/utils/markdown.js +128 -113
package/emoji-picker/index.js CHANGED
@@ -9,6 +9,7 @@ import '../tabs-icon-option';
9
9
  import '../emoji';
10
10
  import '../text';
11
11
  import '../icon';
12
+ import { getEmojiBaseUrl, setEmojiBaseUrl } from '../emoji/utils';
12
13
  import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, debounceTimeout, setClass } from '../utils';
13
14
  import dataJson from './data.json';
14
15
  const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}sinch-tabs-icon-option>svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skintone-default"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"><sinch-tabs-icon-option id="tab-emotions"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-people"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-animals"><svg slot="icon" viewBox="0 0 24 24"><path d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-food"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-travel"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/><path d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"/><path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-sports"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-objects"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-symbols"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"/></svg></sinch-tabs-icon-option></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
@@ -209,9 +210,10 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
209
210
  }
210
211
  const doc = this.#getDocumentRoot();
211
212
  const fragment = document.createDocumentFragment();
213
+ const emojiBaseUrl = getEmojiBaseUrl(this);
212
214
  let someFound = false;
213
215
  for (const entry of this.#iterateSearchEmojis(searchValue, this.#currentSkinTone)) {
214
- const el = this.#createEmojiElement(doc, entry);
216
+ const el = this.#createEmojiElement(doc, entry, emojiBaseUrl);
215
217
  someFound = true;
216
218
  fragment.appendChild(el);
217
219
  }
@@ -230,8 +232,9 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
230
232
  }
231
233
  const doc = this.#getDocumentRoot();
232
234
  const fragment = document.createDocumentFragment();
235
+ const emojiBaseUrl = getEmojiBaseUrl(this);
233
236
  for (const entry of this.#iterateGroupEmojis(group, this.#currentSkinTone)) {
234
- const el = this.#createEmojiElement(doc, entry);
237
+ const el = this.#createEmojiElement(doc, entry, emojiBaseUrl);
235
238
  fragment.appendChild(el);
236
239
  }
237
240
  this.#$list.replaceChildren(fragment);
@@ -289,12 +292,13 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
289
292
  const activeTab = getAttribute(this.#$tabs, 'value');
290
293
  return activeTab === null || activeTab.length === 0;
291
294
  }
292
- #createEmojiElement(doc, emoji) {
295
+ #createEmojiElement(doc, emoji, baseUrl) {
293
296
  const btn = doc.createElement('sinch-icon-button');
294
297
  const el = doc.createElement('sinch-emoji');
295
298
  el.setAttribute('slot', 'icon');
296
299
  el.setAttribute('char', emoji.emoji);
297
300
  el.setAttribute('label', emoji.label);
301
+ setEmojiBaseUrl(el, baseUrl);
298
302
  btn.setAttribute('aria-label', emoji.label);
299
303
  btn.setAttribute('size', 's');
300
304
  btn.setAttribute('data-value', emoji.emoji);
package/icon-button/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import '../tooltip';
2
2
  import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute, isAttrEqual } from '../utils';
3
3
  import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
4
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;user-select:none;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-tertiary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
4
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;user-select:none;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
5
5
  import { typeValues } from './utils';
6
6
  const template = document.createElement('template');
7
7
  template.innerHTML = templateHTML;
@@ -56,7 +56,9 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
56
56
  if (isAttrEqual(oldVal, newVal)) {
57
57
  return;
58
58
  }
59
- updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
59
+ const isDisabled = isAttrTrue(newVal);
60
+ this.ariaDisabled = isDisabled.toString();
61
+ updateBooleanAttribute(this, 'disabled', isDisabled);
60
62
  break;
61
63
  }
62
64
  case 'aria-label':
package/input/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
1
+ import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
2
2
  import { DEFAULT_SIZE, sizeValues } from '../utils/size';
3
3
  const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input-wrapper{position:relative;flex:1;flex-basis:0;min-width:0;align-self:stretch}#input{all:initial;width:100%;height:100%;padding:0 12px;box-sizing:border-box;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder)!important;color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input-mask{display:none;position:absolute;inset:0;padding:0 12px;pointer-events:none;color:var(--sinch-comp-input-color-default-text-placeholder);white-space:pre;height:fit-content;margin:auto 0;overflow:hidden}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([disabled]) #border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input-wrapper:focus-within+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}#input-mask,:host([mask]) #input{font:var(--sinch-sys-font-body-monospace-m)}:host([mask]) #input-mask{display:block}:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within)+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]:not(:placeholder-shown){font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input-wrapper>#input,#icon-wrapper.empty~#input-wrapper>#input-mask{padding-left:12px}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><div id="input-wrapper"><div id="input-mask"></div><input id="input" type="text"/></div><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
4
4
  import { deleteContentBackward, deleteContentForward, getMaskSymbols, inputTypes, insertText, beginMaskedComposition, endMaskedComposition, splitValueAndMask, getMergedValueSliced, insertFromPaste } from './utils';
@@ -135,7 +135,8 @@ defineCustomElement('sinch-input', class extends NectaryElement {
135
135
  return;
136
136
  }
137
137
  const isInvalid = isAttrTrue(newVal);
138
- updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
138
+ this.ariaInvalid = isInvalid.toString();
139
+ this.#$input.ariaInvalid = this.ariaInvalid;
139
140
  updateBooleanAttribute(this, name, isInvalid);
140
141
  break;
141
142
  }
package/link/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import '../icon';
2
2
  import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
3
- const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#standalone-icon-prefix{display:none}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-right:.2em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;margin-right:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #standalone-icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon id="external-icon" name="open_in_new"></sinch-icon><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon id="standalone-icon" name="arrow_forward"></sinch-icon></a>';
3
+ const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon id="external-icon" name="open_in_new"></sinch-icon><sinch-icon id="standalone-icon" name="arrow_forward"></sinch-icon></a>';
4
4
  const template = document.createElement('template');
5
5
  template.innerHTML = templateHTML;
6
6
  defineCustomElement('sinch-link', class extends NectaryElement {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "2.6.1",
3
+ "version": "2.7.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
@@ -16,8 +16,7 @@
16
16
  "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
17
17
  },
18
18
  "dependencies": {
19
- "@babel/runtime": "^7.22.15",
20
- "xss": "^1.0.14"
19
+ "@babel/runtime": "^7.22.15"
21
20
  },
22
21
  "devDependencies": {
23
22
  "@babel/cli": "^7.22.15",
package/pop/index.js CHANGED
@@ -45,7 +45,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
45
45
  } = this.#controller;
46
46
  this.#keydownContext.listen(signal);
47
47
  this.#visibilityContext.listen(signal);
48
- this.setAttribute('role', 'dialog');
48
+ this.role = 'dialog';
49
49
  this.#$dialog.addEventListener('cancel', this.#onCancel, {
50
50
  signal
51
51
  });
package/popover/index.js CHANGED
@@ -37,7 +37,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
37
37
  this.#controller = null;
38
38
  }
39
39
  static get observedAttributes() {
40
- return ['orientation', 'open', 'modal', 'tip'];
40
+ return ['orientation', 'open', 'modal', 'tip', 'aria-label', 'aria-description'];
41
41
  }
42
42
  attributeChangedCallback(name, oldVal, newVal) {
43
43
  if (isAttrEqual(oldVal, newVal)) {
@@ -68,6 +68,12 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
68
68
  updateBooleanAttribute(this, name, isAttrTrue(newVal));
69
69
  break;
70
70
  }
71
+ case 'aria-label':
72
+ case 'aria-description':
73
+ {
74
+ updateAttribute(this.#$pop, name, newVal);
75
+ break;
76
+ }
71
77
  }
72
78
  }
73
79
  set modal(isModal) {
package/rich-text/index.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ import '../emoji';
2
+ import '../code-tag';
3
+ import '../link';
1
4
  import type { TSinchRichTextElement, TSinchRichTextReact } from './types';
2
5
  declare global {
3
6
  namespace JSX {
package/rich-text/index.js CHANGED
@@ -1,27 +1,50 @@
1
+ import { getEmojiBaseUrl } from '../emoji/utils';
2
+ import '../emoji';
3
+ import '../code-tag';
4
+ import '../link';
1
5
  import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
2
- const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.em3{font-style:italic;font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.paragraph{margin:0}.paragraph+.paragraph{margin-top:12px}</style><div id="wrapper"></div>';
3
- import { sizeValues } from './utils';
6
+ const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.emoji{--sinch-global-size-icon:1em;--sinch-comp-emoji-vertical-align:-0.2em}.ol,.p,.ul{margin:0}.ol,.ul{padding-left:1.5em}.ol+.p,.p+.ol,.p+.p,.p+.ul,.ul+.p{margin-top:.5em}.li>.p+.ol,.li>.p+.ul{margin-top:0}</style><div id="wrapper"></div>';
7
+ import { createParseVisitor, sizeValues } from './utils';
4
8
  const template = document.createElement('template');
5
9
  template.innerHTML = templateHTML;
6
10
  defineCustomElement('sinch-rich-text', class extends NectaryElement {
7
11
  #wrapper;
12
+ #parseVisitor;
8
13
  constructor() {
9
14
  super();
10
15
  const shadowRoot = this.attachShadow();
16
+ if (typeof shadowRoot.createElement !== 'function') {
17
+ Object.defineProperty(shadowRoot, 'createElement', {
18
+ value: document.createElement.bind(shadowRoot.ownerDocument)
19
+ });
20
+ }
21
+ Object.defineProperty(shadowRoot, 'createTextNode', {
22
+ value: document.createTextNode.bind(shadowRoot.ownerDocument)
23
+ });
24
+ Object.defineProperty(shadowRoot, 'createDocumentFragment', {
25
+ value: document.createDocumentFragment.bind(shadowRoot.ownerDocument)
26
+ });
11
27
  shadowRoot.appendChild(template.content.cloneNode(true));
12
28
  this.#wrapper = shadowRoot.querySelector('#wrapper');
29
+ this.#parseVisitor = createParseVisitor(shadowRoot);
13
30
  }
14
31
  connectedCallback() {
15
- this.setAttribute('role', 'paragraph');
32
+ super.connectedCallback();
33
+ this.role = 'paragraph';
34
+ this.#parseVisitor.updateEmojiBaseUrl(getEmojiBaseUrl(this));
35
+ this.#updateText();
36
+ }
37
+ disconnectedCallback() {
38
+ super.disconnectedCallback();
16
39
  }
17
40
  static get observedAttributes() {
18
41
  return ['text'];
19
42
  }
20
- attributeChangedCallback(name, _, newVal) {
43
+ attributeChangedCallback(name, _oldVal, _newVal) {
21
44
  switch (name) {
22
45
  case 'text':
23
46
  {
24
- this.#updateText(newVal);
47
+ this.#updateText();
25
48
  break;
26
49
  }
27
50
  }
@@ -38,11 +61,15 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
38
61
  set text(value) {
39
62
  updateAttribute(this, 'text', value);
40
63
  }
41
- #updateText(text) {
64
+ #updateText() {
65
+ if (!this.isDomConnected) {
66
+ return;
67
+ }
68
+ const text = this.text;
42
69
  if (text === null) {
43
70
  this.#wrapper.innerHTML = '';
44
- return;
71
+ } else {
72
+ this.#wrapper.replaceChildren(parseMarkdown(text, this.#parseVisitor.createVisitor()));
45
73
  }
46
- this.#wrapper.innerHTML = parseMarkdown(text);
47
74
  }
48
75
  });
package/rich-text/utils.d.ts CHANGED
@@ -1,2 +1,7 @@
1
1
  import type { TSinchTextType } from '../text/types';
2
+ import type { TMarkdownParseVisitor } from '../utils';
2
3
  export declare const sizeValues: readonly TSinchTextType[];
4
+ export declare const createParseVisitor: (doc: Document) => {
5
+ updateEmojiBaseUrl(url: string | null): void;
6
+ createVisitor(): TMarkdownParseVisitor;
7
+ };
package/rich-text/utils.js CHANGED
@@ -1 +1,96 @@
1
- export const sizeValues = ['m', 's', 'xs', 'xxs'];
1
+ import { setEmojiBaseUrl } from '../emoji/utils';
2
+ export const sizeValues = ['m', 's', 'xs', 'xxs'];
3
+ export const createParseVisitor = doc => {
4
+ let emojiBaseUrl = null;
5
+ return {
6
+ updateEmojiBaseUrl(url) {
7
+ emojiBaseUrl = url;
8
+ },
9
+ createVisitor() {
10
+ const $root = doc.createDocumentFragment();
11
+ let $p = null;
12
+ let $li = null;
13
+ const $lists = [];
14
+ return {
15
+ emoji(emojiChar) {
16
+ const $emoji = doc.createElement('sinch-emoji');
17
+ setEmojiBaseUrl($emoji, emojiBaseUrl);
18
+ $emoji.setAttribute('char', emojiChar);
19
+ $emoji.className = 'emoji';
20
+ $p.appendChild($emoji);
21
+ },
22
+ codetag(text) {
23
+ const $codeTag = doc.createElement('sinch-code-tag');
24
+ $codeTag.text = text;
25
+ $p.appendChild($codeTag);
26
+ },
27
+ inline(text, _ref) {
28
+ let {
29
+ isBold,
30
+ isItalic,
31
+ isStrikethrough
32
+ } = _ref;
33
+ const $inline = doc.createElement('SPAN');
34
+ $inline.append(doc.createTextNode(text));
35
+ if (isItalic === true) {
36
+ $inline.classList.add('em1');
37
+ }
38
+ if (isBold === true) {
39
+ $inline.classList.add('em2');
40
+ }
41
+ if (isStrikethrough === true) {
42
+ $inline.classList.add('strikethrough');
43
+ }
44
+ $p.appendChild($inline);
45
+ },
46
+ linebreak() {
47
+ const $br = doc.createElement('br');
48
+ $p.appendChild($br);
49
+ },
50
+ link(text, href) {
51
+ const $link = doc.createElement('sinch-link');
52
+ $link.text = text;
53
+ $link.href = href;
54
+ $p.appendChild($link);
55
+ },
56
+ list(isOrdered) {
57
+ const $list = doc.createElement(isOrdered ? 'ol' : 'ul');
58
+ $list.classList.add(isOrdered ? 'ol' : 'ul');
59
+ if ($li !== null) {
60
+ $li.appendChild($list);
61
+ $li = null;
62
+ } else {
63
+ $root.appendChild($list);
64
+ }
65
+ $lists.push($list);
66
+ },
67
+ endList() {
68
+ $p = null;
69
+ $li = null;
70
+ $lists.length = $lists.length - 1;
71
+ if ($lists.length > 0) {
72
+ $li = $lists.at(-1).lastChild;
73
+ }
74
+ },
75
+ listItem() {
76
+ $p = null;
77
+ $li = doc.createElement('li');
78
+ $li.classList.add('li');
79
+ $lists.at(-1).appendChild($li);
80
+ },
81
+ paragraph() {
82
+ $p = doc.createElement('p');
83
+ $p.classList.add('p');
84
+ if ($li !== null) {
85
+ $li.appendChild($p);
86
+ } else {
87
+ $root.appendChild($p);
88
+ }
89
+ },
90
+ end() {
91
+ return $root;
92
+ }
93
+ };
94
+ }
95
+ };
96
+ };
package/rich-textarea/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { TSinchRichTextareaElement, TSinchRichTextareaReact } from './types';
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'sinch-rich-textarea': TSinchRichTextareaReact;
6
+ }
7
+ }
8
+ interface HTMLElementTagNameMap {
9
+ 'sinch-rich-textarea': TSinchRichTextareaElement;
10
+ }
11
+ }