@nectary/components 2.4.0 → 2.6.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 (15) hide show
  1. package/button/index.js +1 -1
  2. package/dialog/index.js +1 -1
  3. package/input/index.js +1 -1
  4. package/package.json +13 -10
  5. package/spinner/index.js +1 -1
  6. package/textarea/index.js +39 -2
  7. package/textarea/types.d.ts +3 -0
  8. package/time-picker/index.js +1 -1
  9. package/toast/index.d.ts +1 -2
  10. package/toast/index.js +3 -4
  11. package/toast-manager/index.js +9 -2
  12. package/toast-manager/types.d.ts +7 -1
  13. package/toast-manager/utils.d.ts +2 -0
  14. package/toast-manager/utils.js +1 -0
  15. package/toggle/index.js +17 -2
package/button/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext, isAttrEqual } from '../utils';
2
2
  import { DEFAULT_SIZE, sizeValues } from '../utils/size';
3
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}: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);--sinch-local-font:var(--sinch-comp-button-font-size-l-text)}: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);--sinch-local-font:var(--sinch-comp-button-font-size-m-text)}: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);--sinch-local-font:var(--sinch-comp-button-font-size-s-text)}: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-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outilne-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}: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-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-tertiary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]: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=primary]: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]: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([type=secondary]: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([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-hover)}:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}: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-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-global-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-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-disabled)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled)}#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(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><div id="button" inert><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></div>';
3
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}: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);--sinch-local-font:var(--sinch-comp-button-font-size-l-text)}: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);--sinch-local-font:var(--sinch-comp-button-font-size-m-text)}: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);--sinch-local-font:var(--sinch-comp-button-font-size-s-text)}: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-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outilne-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}: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-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-tertiary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]: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=primary]: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]: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([type=secondary]: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([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-hover)}:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}: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-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-global-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-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-disabled)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled)}#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(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><div id="button" inert><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></div>';
4
4
  import { typeValues } from './utils';
5
5
  const template = document.createElement('template');
6
6
  template.innerHTML = templateHTML;
package/dialog/index.js CHANGED
@@ -3,7 +3,7 @@ import '../icon';
3
3
  import '../stop-events';
4
4
  import '../title';
5
5
  import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
6
- const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
6
+ const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
7
7
  import { disableScroll, enableScroll } from './utils';
8
8
  const template = document.createElement('template');
9
9
  template.innerHTML = templateHTML;
package/input/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
2
2
  import { DEFAULT_SIZE, sizeValues } from '../utils/size';
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);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]{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>';
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';
5
5
  const template = document.createElement('template');
6
6
  template.innerHTML = templateHTML;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "2.4.0",
3
+ "version": "2.6.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
@@ -9,22 +9,25 @@
9
9
  "types.d.ts",
10
10
  "colors.json"
11
11
  ],
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
12
15
  "scripts": {
13
16
  "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
14
17
  },
15
18
  "dependencies": {
16
- "@babel/runtime": "^7.21.0",
19
+ "@babel/runtime": "^7.22.15",
17
20
  "xss": "^1.0.14"
18
21
  },
19
22
  "devDependencies": {
20
- "@babel/cli": "^7.21.0",
21
- "@babel/core": "^7.21.4",
22
- "@babel/plugin-transform-runtime": "^7.21.4",
23
- "@babel/preset-env": "^7.21.4",
24
- "@babel/preset-typescript": "^7.21.4",
25
- "@types/node": "^18.16.0",
26
- "@types/react": "^18.0.38",
23
+ "@babel/cli": "^7.22.15",
24
+ "@babel/core": "^7.22.20",
25
+ "@babel/plugin-transform-runtime": "^7.22.15",
26
+ "@babel/preset-env": "^7.22.20",
27
+ "@babel/preset-typescript": "^7.22.15",
28
+ "@types/node": "^18.17.17",
29
+ "@types/react": "^18.2.21",
27
30
  "babel-plugin-html-inline-minifier": "workspace:*",
28
- "typescript": "^5.0.4"
31
+ "typescript": "^5.2.2"
29
32
  }
30
33
  }
package/spinner/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
2
2
  import { DEFAULT_SIZE, sizeValues } from '../utils/size';
3
- const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
3
+ const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
4
4
  const template = document.createElement('template');
5
5
  template.innerHTML = templateHTML;
6
6
  defineCustomElement('sinch-spinner', class extends NectaryElement {
package/textarea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
2
2
  import { DEFAULT_SIZE } from '../utils/size';
3
- const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([resizable]) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
3
+ const templateHTML = '<style>:host{all:initial;display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([resizable]) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
4
4
  const template = document.createElement('template');
5
5
  template.innerHTML = templateHTML;
6
6
  defineCustomElement('sinch-textarea', class extends NectaryElement {
@@ -11,6 +11,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
11
11
  #isPendingDk = false;
12
12
  #controller = null;
13
13
  #sizeContext;
14
+ #contentHeight = 0;
14
15
  constructor() {
15
16
  super();
16
17
  const shadowRoot = this.attachShadow({
@@ -42,6 +43,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
42
43
  this.addEventListener('-blur', this.#onBlurReactHandler, options);
43
44
  this.#sizeContext.listen(this.#controller.signal);
44
45
  this.#onBottomSlotChange();
46
+ this.updateMinRows();
45
47
  this.#onSizeUpdate();
46
48
  }
47
49
  disconnectedCallback() {
@@ -50,7 +52,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
50
52
  this.#controller = null;
51
53
  }
52
54
  static get observedAttributes() {
53
- return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'resizable'];
55
+ return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'minrows', 'resizable'];
54
56
  }
55
57
  attributeChangedCallback(name, oldVal, newVal) {
56
58
  switch (name) {
@@ -61,7 +63,18 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
61
63
  if (nextVal !== prevVal) {
62
64
  const prevCursorPos = this.#$input.selectionEnd;
63
65
  const isPrevCursorEnd = prevCursorPos === prevVal.length;
66
+ const isShrinkingContent = nextVal.length < prevVal.length;
64
67
  this.#$input.value = nextVal;
68
+ if (!this.resizable) {
69
+ if (isShrinkingContent) {
70
+ this.#$input.style.removeProperty('height');
71
+ }
72
+ const nextContentHeight = this.#$input.scrollHeight;
73
+ if (isShrinkingContent || nextContentHeight !== this.#contentHeight) {
74
+ this.#contentHeight = nextContentHeight;
75
+ this.#$input.style.setProperty('height', `${this.#contentHeight}px`);
76
+ }
77
+ }
65
78
  if (!isPrevCursorEnd) {
66
79
  this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
67
80
  }
@@ -99,6 +112,11 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
99
112
  updateAttribute(this.#$input, 'rows', newVal);
100
113
  break;
101
114
  }
115
+ case 'minrows':
116
+ {
117
+ this.updateMinRows();
118
+ break;
119
+ }
102
120
  case 'resizable':
103
121
  {
104
122
  if (isAttrEqual(oldVal, newVal)) {
@@ -145,6 +163,12 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
145
163
  get rows() {
146
164
  return getIntegerAttribute(this, 'rows', 0);
147
165
  }
166
+ set minRows(value) {
167
+ updateAttribute(this, 'minrows', value);
168
+ }
169
+ get minRows() {
170
+ return getIntegerAttribute(this, 'minrows', 0);
171
+ }
148
172
  get selectionStart() {
149
173
  return this.#$input.selectionStart;
150
174
  }
@@ -172,6 +196,19 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
172
196
  blur() {
173
197
  this.#$input.blur();
174
198
  }
199
+ updateMinRows() {
200
+ if (!this.isDomConnected) {
201
+ return;
202
+ }
203
+ const minRows = this.minRows;
204
+ if (minRows <= 0) {
205
+ this.#$input.style.removeProperty('min-height');
206
+ } else {
207
+ this.#$input.rows = minRows;
208
+ this.#$input.style.setProperty('min-height', `${this.#$input.clientHeight}px`);
209
+ this.#$input.rows = this.rows;
210
+ }
211
+ }
175
212
  #onCompositionStart = () => {
176
213
  this.#isPendingDk = true;
177
214
  };
package/textarea/types.d.ts CHANGED
@@ -13,6 +13,7 @@ export type TSinchTextareaElement = HTMLElement & {
13
13
  selectionDirection: HTMLTextAreaElement['selectionDirection'];
14
14
  /** Number of rows */
15
15
  rows: HTMLTextAreaElement['rows'];
16
+ minRows: HTMLTextAreaElement['rows'];
16
17
  /** Whether the text field is resizable */
17
18
  resizable: boolean;
18
19
  /** Change value event */
@@ -31,6 +32,7 @@ export type TSinchTextareaElement = HTMLElement & {
31
32
  setAttribute(name: 'disabled', value: ''): void;
32
33
  /** Number of rows */
33
34
  setAttribute(name: 'rows', value: string): void;
35
+ setAttribute(name: 'minrows', value: string): void;
34
36
  /** Whether the text field is resizable */
35
37
  setAttribute(name: 'resizable', value: ''): void;
36
38
  };
@@ -46,6 +48,7 @@ export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
46
48
  'aria-label': string;
47
49
  /** Number of rows */
48
50
  rows?: number;
51
+ minRows?: number;
49
52
  /** Whether the text field is resizable */
50
53
  resizable?: boolean;
51
54
  /** Change value handler */
package/time-picker/index.js CHANGED
@@ -3,7 +3,7 @@ import '../icon';
3
3
  import '../segmented-control';
4
4
  import '../segmented-control-option';
5
5
  import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
6
- const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);line-height:28px;color:var(--sinch-comp-time-picker-digit-color-default-h12-initial)}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);line-height:28px;color:var(--sinch-comp-time-picker-digit-color-default-h24-initial)}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-h12);line-height:28px;color:var(--sinch-comp-time-picker-digit-color-default-minute-initial)}.digit-minute.selected{color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon" name="done"></sinch-icon></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
6
+ const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon" name="done"></sinch-icon></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
7
7
  import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
8
8
  const template = document.createElement('template');
9
9
  template.innerHTML = templateHTML;
package/toast/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import '../icon';
2
- import '../title';
3
- import '../text';
2
+ import '../rich-text';
4
3
  import type { TSinchToastElement, TSinchToastReact } from './types';
5
4
  declare global {
6
5
  namespace JSX {
package/toast/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import '../icon';
2
- import '../title';
3
- import '../text';
2
+ import '../rich-text';
4
3
  import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
5
- const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
4
+ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
6
5
  import { typeValues } from './utils';
7
6
  const TIMEOUT = 5000;
8
7
  const template = document.createElement('template');
@@ -35,7 +34,7 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
35
34
  switch (name) {
36
35
  case 'text':
37
36
  {
38
- this.#$text.textContent = newVal;
37
+ updateAttribute(this.#$text, name, newVal);
39
38
  break;
40
39
  }
41
40
  case 'persistent':
package/toast-manager/index.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import '../title';
2
2
  import '../text';
3
- import { cloneNode, defineCustomElement, getRect, NectaryElement, shouldReduceMotion } from '../utils';
4
- const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
3
+ import { cloneNode, defineCustomElement, getLiteralAttribute, getRect, NectaryElement, shouldReduceMotion, updateLiteralAttribute } from '../utils';
4
+ const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
5
+ import { originValues } from './utils';
5
6
  const DURATION_ADD = 250;
6
7
  const DURATION_REMOVE = 250;
7
8
  const ITEMS_GAP = 16;
@@ -28,6 +29,12 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
28
29
  this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
29
30
  this.#clear();
30
31
  }
32
+ get origin() {
33
+ return getLiteralAttribute(this, originValues, 'origin', 'bottom-right');
34
+ }
35
+ set origin(value) {
36
+ updateLiteralAttribute(this, originValues, 'origin', value);
37
+ }
31
38
  get containerRect() {
32
39
  return getRect(this.#$list);
33
40
  }
package/toast-manager/types.d.ts CHANGED
@@ -1,7 +1,13 @@
1
1
  import type { TRect, TSinchElementReact } from '../types';
2
+ export type TSinchToastManagerOrigin = 'top-right' | 'bottom-right';
2
3
  export type TSinchToastManagerElement = HTMLElement & {
3
4
  readonly containerRect: TRect;
4
5
  nthActionRect: (nth: number) => TRect | null;
5
6
  nthCloseRect: (nth: number) => TRect | null;
7
+ origin: TSinchToastManagerOrigin;
8
+ /** Origin */
9
+ setAttribute(name: 'origin', value: TSinchToastManagerOrigin): void;
10
+ };
11
+ export type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {
12
+ origin?: TSinchToastManagerOrigin;
6
13
  };
7
- export type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {};
package/toast-manager/utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { TSinchToastManagerOrigin } from './types';
2
+ export declare const originValues: TSinchToastManagerOrigin[];
package/toast-manager/utils.js ADDED
@@ -0,0 +1 @@
1
+ export const originValues = ['bottom-right', 'top-right'];
package/toggle/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
2
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}:host([small]) #wrapper{--sinch-local-size:22px}#input{all:initial;display:block;position:absolute;left:0;top:2px;width:40px;height:20px;cursor:pointer;pointer-events:initial}:host([disabled]) #input{cursor:initial}:host(:focus-visible) #input::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:18px;pointer-events:none}:host([small]) #input{width:32px;height:16px;top:3px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-comp-toggle-color-default-background-initial);overflow:hidden}:host([small]) #knob-container{width:32px;height:16px;border-radius:8px}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .1s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small])) #knob::after,:host([labeled]:not([small])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial);cursor:pointer}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial);cursor:initial}</style><div id="wrapper"><div id="input"></div><div id="knob-container"><div id="knob"></div></div><span id="label"></span></div>';
2
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .15s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
3
3
  const template = document.createElement('template');
4
4
  template.innerHTML = templateHTML;
5
5
  defineCustomElement('sinch-toggle', class extends NectaryElement {
@@ -20,13 +20,14 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
20
20
  signal
21
21
  };
22
22
  this.role = 'checkbox';
23
- this.tabIndex = 0;
24
23
  this.addEventListener('click', this.#onClick, options);
24
+ this.addEventListener('keydown', this.#onKeydown, options);
25
25
  this.addEventListener('focus', this.#onFocus, options);
26
26
  this.addEventListener('blur', this.#onBlur, options);
27
27
  this.addEventListener('-change', this.#onChangeReactHandler, options);
28
28
  this.addEventListener('-focus', this.#onFocusReactHandler, options);
29
29
  this.addEventListener('-blur', this.#onBlurReactHandler, options);
30
+ this.#updateTabIndex();
30
31
  }
31
32
  disconnectedCallback() {
32
33
  this.#controller.abort();
@@ -55,6 +56,7 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
55
56
  case 'disabled':
56
57
  {
57
58
  const isDisabled = isAttrTrue(newVal);
59
+ this.#updateTabIndex();
58
60
  updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
59
61
  updateBooleanAttribute(this, name, isDisabled);
60
62
  break;
@@ -108,6 +110,19 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
108
110
  detail: !this.checked
109
111
  }));
110
112
  };
113
+ #onKeydown = e => {
114
+ switch (e.code) {
115
+ case 'Space':
116
+ case 'Enter':
117
+ {
118
+ e.preventDefault();
119
+ this.click();
120
+ }
121
+ }
122
+ };
123
+ #updateTabIndex() {
124
+ this.tabIndex = this.disabled ? -1 : 0;
125
+ }
111
126
  #onFocus = () => {
112
127
  this.dispatchEvent(new CustomEvent('-focus'));
113
128
  };