@nectary/components 5.0.2 → 5.0.4
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.
- package/accordion/index.js +2 -1
- package/accordion-item/index.js +1 -1
- package/action-menu/index.js +1 -1
- package/action-menu-option/index.js +1 -1
- package/alert/index.js +1 -1
- package/avatar/index.js +1 -1
- package/badge/index.js +1 -1
- package/bundle.js +110 -77
- package/button/index.js +1 -1
- package/button-group/index.js +1 -1
- package/button-group-item/index.js +1 -1
- package/card-container/index.js +1 -1
- package/card-v2/index.js +1 -1
- package/card-v2-title/index.js +1 -1
- package/checkbox/index.js +2 -1
- package/chip/index.js +1 -1
- package/code-tag/index.js +1 -1
- package/color-menu/index.js +2 -1
- package/color-menu-option/index.js +1 -1
- package/color-swatch/index.js +1 -1
- package/date-picker/index.js +2 -1
- package/dialog/index.js +2 -1
- package/emoji/index.js +1 -1
- package/emoji-picker/index.js +2 -1
- package/field/index.js +1 -1
- package/file-drop/index.js +3 -1
- package/file-picker/index.js +3 -1
- package/file-status/index.js +1 -1
- package/flag/index.js +1 -1
- package/grid/index.js +1 -1
- package/grid-item/index.js +1 -1
- package/help-tooltip/index.js +3 -1
- package/icon/index.js +1 -1
- package/inline-alert/index.js +1 -1
- package/input/index.js +2 -1
- package/link/index.js +1 -1
- package/list/index.js +1 -1
- package/list-item/index.js +1 -1
- package/package.json +3 -3
- package/pagination/index.js +2 -1
- package/persistent-overlay/index.js +2 -1
- package/pop/index.js +2 -1
- package/popover/index.js +1 -1
- package/progress/index.js +1 -1
- package/progress-stepper/index.js +2 -1
- package/progress-stepper-item/index.js +1 -1
- package/radio/index.js +2 -1
- package/radio-option/index.js +1 -1
- package/rich-text/index.js +2 -1
- package/rich-textarea/index.js +3 -1
- package/segment-collapse/index.js +2 -1
- package/segmented-control/index.js +2 -1
- package/segmented-control-option/index.js +1 -1
- package/segmented-icon-control/index.js +2 -1
- package/segmented-icon-control-option/index.js +1 -1
- package/select-button/index.js +1 -1
- package/select-menu/index.js +3 -1
- package/select-menu-option/index.js +1 -1
- package/skeleton/index.js +1 -1
- package/skeleton-item/index.js +1 -1
- package/spinner/index.js +1 -1
- package/table/index.js +1 -1
- package/table-body/index.js +1 -1
- package/table-cell/index.js +1 -1
- package/table-head/index.js +1 -1
- package/table-head-cell/index.js +1 -1
- package/table-row/index.js +1 -1
- package/tabs/index.js +2 -1
- package/tabs-icon-option/index.js +1 -1
- package/tabs-option/index.js +1 -1
- package/tag/index.js +1 -1
- package/text/index.js +1 -1
- package/textarea/index.js +2 -1
- package/time-picker/index.js +2 -1
- package/title/index.js +1 -1
- package/toast/index.js +2 -1
- package/toast-manager/index.js +1 -1
- package/toggle/index.js +2 -1
- package/tooltip/index.js +3 -1
- package/types.d.ts +2 -2
- package/utils/adapters.d.ts +1 -0
package/button/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
|
5
5
|
import { requestSubmitForm } from "../utils/form.js";
|
|
6
6
|
import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
|
|
7
7
|
import { typeValues, formTypeValues } from "./utils.js";
|
|
8
|
-
const templateHTML = '<style>\n /* stylelint-disable no-descending-specificity */\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n cursor: pointer;\n user-select: none;\n\n --sinch-button-shape-radius-base:\n var(\n --sinch-comp-button-shape-radius-size-m\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-initial);\n --sinch-button-border: 1px solid;\n --sinch-button-border-top: var(--sinch-button-border);\n --sinch-button-border-bottom: var(--sinch-button-border);\n --sinch-button-border-left: var(--sinch-button-border);\n --sinch-button-border-right: var(--sinch-button-border);\n --sinch-button-shape-radius-top-right: unset;\n --sinch-button-shape-radius-top-left: unset;\n --sinch-button-shape-radius-bottom-right: unset;\n --sinch-button-shape-radius-bottom-left: unset;\n }\n\n :host([disabled]) {\n cursor: initial;\n }\n\n #button {\n all: initial;\n display: block;\n position: relative;\n width: 100%;\n height: var(--sinch-local-size);\n user-select: none;\n\n --sinch-local-size: var(--sinch-comp-button-size-container-m);\n --sinch-local-padding: 16px;\n --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n --sinch-global-color-icon: var(--sinch-local-color-icon);\n }\n\n :host([data-size="l"]) > #button {\n --sinch-local-size: var(--sinch-comp-button-size-container-l);\n --sinch-button-set-size-shape-radius:\n var(\n --sinch-comp-button-shape-radius-size-l\n );\n --sinch-local-font: var(--sinch-comp-button-font-size-l-text);\n --sinch-global-size-icon: var(--sinch-comp-button-size-icon-l);\n }\n\n :host([data-size="m"]) > #button {\n --sinch-local-size: var(--sinch-comp-button-size-container-m);\n --sinch-button-set-size-shape-radius:\n var(\n --sinch-comp-button-shape-radius-size-m\n );\n --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n }\n\n :host([data-size="s"]) > #button {\n --sinch-local-size: var(--sinch-comp-button-size-container-s);\n --sinch-button-set-size-shape-radius:\n var(\n --sinch-comp-button-shape-radius-size-s\n );\n --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n --sinch-global-size-icon: var(--sinch-comp-button-size-icon-s);\n }\n\n :host([data-size="xs"]) > #button {\n --sinch-local-size: var(--sinch-comp-button-size-container-xs);\n --sinch-local-padding: 8px;\n --sinch-button-set-size-shape-radius:\n var(\n --sinch-comp-button-shape-radius-size-xs\n );\n --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n --sinch-global-size-icon: var(--sinch-comp-button-size-icon-xs);\n }\n\n /* icon-button */\n :host(:is([text=""], :not([text]))) > #button {\n --sinch-local-padding: 8px;\n }\n\n /* icon-button */\n :host([data-size="s"]:is([text=""], :not([text]))) > #button {\n --sinch-local-padding: 4px;\n }\n\n /* icon-button */\n :host([data-size="xs"]:is([text=""], :not([text]))) > #button {\n --sinch-local-padding: 4px;\n }\n\n /* Types */\n :host([type="primary"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-primary-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-primary-default-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-primary-default-text-initial\n );\n --sinch-local-color-icon:\n var(\n --sinch-comp-button-color-primary-default-icon-initial\n );\n --sinch-local-color-outline-focus:\n var(\n --sinch-comp-button-color-primary-default-outline-focus\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-initial);\n }\n\n /* default type */\n :host(:not([type])) > #button,\n :host([type="secondary"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-secondary-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-secondary-default-border-initial\n );\n --sinch-local-color-outline-focus:\n var(\n --sinch-comp-button-color-secondary-default-outline-focus\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-secondary-default-text-initial\n );\n --sinch-local-color-icon:\n var(\n --sinch-comp-button-color-secondary-default-icon-initial\n );\n }\n\n :host([type="subtle-primary"]) > #button,\n /* deprecated */\n :host([type="tertiary"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-subtle-primary-default-border-initial\n );\n --sinch-local-color-outline-focus:\n var(\n --sinch-comp-button-color-subtle-primary-default-outline-focus\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-subtle-primary-default-text-initial\n );\n --sinch-local-color-icon:\n var(\n --sinch-comp-button-color-subtle-primary-default-icon-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n }\n\n :host([type="subtle-secondary"]) > #button,\n /* default type for icon-button */\n :host(:not([type]):is([text=""], :not([text]))) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-subtle-secondary-default-border-initial\n );\n --sinch-local-color-outline-focus:\n var(\n --sinch-comp-button-color-subtle-secondary-default-outline-focus\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-subtle-secondary-default-text-initial\n );\n --sinch-local-color-icon:\n var(\n --sinch-comp-button-color-subtle-secondary-default-icon-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n }\n\n :host([type="cta-primary"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-primary-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-cta-primary-default-border-initial\n );\n --sinch-local-color-outline-focus:\n var(\n --sinch-comp-button-color-cta-primary-default-outline-focus\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-cta-primary-default-text-initial\n );\n --sinch-local-color-icon:\n var(\n --sinch-comp-button-color-cta-primary-default-icon-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-initial);\n }\n\n :host([type="cta-secondary"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-secondary-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-cta-secondary-default-border-initial\n );\n --sinch-local-color-outline-focus:\n var(\n --sinch-comp-button-color-cta-secondary-default-outline-focus\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-cta-secondary-default-text-initial\n );\n --sinch-local-color-icon:\n var(\n --sinch-comp-button-color-cta-secondary-default-icon-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-initial);\n }\n\n :host([type="destructive"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-danger-default-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-danger-default-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-danger-default-text-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-initial);\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-danger-default-icon-initial\n );\n }\n\n :host([type="primary"]:focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-focus);\n }\n\n /* default type */\n :host(:not([type]):focus-visible) > #button,\n :host([type="secondary"]:focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-focus);\n }\n\n :host([type="subtle-primary"]:focus-visible) > #button,\n /* deprecated */\n :host([type="tertiary"]:focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n }\n\n :host([type="subtle-secondary"]:focus-visible) > #button,\n /* default type for icon-button */\n :host(:not([type]):is([text=""], :not([text])):focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n }\n\n :host([type="cta-primary"]:focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-focus);\n }\n\n :host([type="cta-secondary"]:focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-focus);\n }\n\n :host([type="destructive"]:focus-visible) > #button {\n --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-focus);\n }\n\n /* Toggled state */\n :host([toggled]:not([disabled])[type="subtle-primary"]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-toggled-background-initial\n );\n }\n\n :host([toggled]:not([disabled])[type="subtle-secondary"]) > #button,\n /* default type for icon-button */\n :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text]))) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-toggled-background-initial\n );\n }\n\n /* Hover / Active */\n :host([type="primary"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-primary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-hover);\n }\n\n :host([type="primary"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-primary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-active);\n }\n\n /* default type */\n :host(:not([type]):hover) > #button,\n :host([type="secondary"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-secondary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-hover);\n }\n\n /* default type */\n :host(:not([type]):active) > #button,\n :host([type="secondary"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-secondary-default-background-active\n );\n }\n\n /* deprecated */\n :host([type="tertiary"]:hover) > #button,\n :host([type="subtle-primary"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n }\n\n /* deprecated */\n :host([type="tertiary"]:active) > #button,\n :host([type="subtle-primary"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n }\n\n :host([type="subtle-secondary"]:hover) > #button,\n /* default type for icon-button */\n :host(:not([type]):is([text=""], :not([text])):hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n }\n\n :host([type="subtle-secondary"]:active) > #button,\n /* default type for icon-button */\n :host(:not([type]):is([text=""], :not([text])):active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n }\n\n :host([type="cta-primary"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-primary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-hover);\n }\n\n :host([type="cta-primary"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-primary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-active);\n }\n\n :host([type="cta-secondary"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-secondary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-hover);\n }\n\n :host([type="cta-secondary"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-secondary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-active);\n }\n\n :host([type="destructive"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-danger-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-hover);\n }\n\n :host([type="destructive"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-danger-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-active);\n }\n\n /* Toggled + Hover / Active */\n :host([toggled]:not([disabled])[type="subtle-primary"]:hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n }\n\n :host([toggled]:not([disabled])[type="subtle-primary"]:active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n }\n\n :host([toggled]:not([disabled])[type="subtle-secondary"]:hover) > #button,\n /* default type for icon-button */\n :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):hover) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-default-background-hover\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n }\n\n :host([toggled]:not([disabled])[type="subtle-secondary"]:active) > #button,\n /* default type for icon-button */\n :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):active) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-default-background-active\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n }\n\n /* Disabled state */\n :host([type="primary"][disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-primary-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-primary-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-primary-disabled-text-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-disabled);\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-primary-disabled-icon-initial\n );\n }\n\n /* default type */\n :host(:not([type])[disabled]) > #button,\n :host([type="secondary"][disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-secondary-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-secondary-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-secondary-disabled-text-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-disabled);\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-secondary-disabled-icon-initial\n );\n }\n\n :host([type="subtle-primary"][disabled]) > #button,\n /* deprecated */\n :host([type="tertiary"][disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-primary-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-subtle-primary-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-subtle-primary-disabled-text-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-subtle-primary-disabled-icon-initial\n );\n }\n\n :host([type="subtle-secondary"][disabled]) > #button,\n /* default type for icon-button */\n :host(:not([type]):is([text=""], :not([text]))[disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-subtle-secondary-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-subtle-secondary-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-subtle-secondary-disabled-text-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-subtle-secondary-disabled-icon-initial\n );\n }\n\n :host([type="cta-primary"][disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-primary-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-cta-primary-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-cta-primary-disabled-text-initial\n );\n --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-disabled);\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-cta-primary-disabled-icon-initial\n );\n }\n\n :host([type="cta-secondary"][disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-cta-secondary-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-cta-secondary-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-cta-secondary-disabled-text-initial\n );\n --sinch-local-shadow:\n var(\n --sinch-comp-button-shadow-cta-secondary-disabled\n );\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-cta-secondary-disabled-icon-initial\n );\n }\n\n :host([type="destructive"][disabled]) > #button {\n --sinch-local-color-background:\n var(\n --sinch-comp-button-color-danger-disabled-background-initial\n );\n --sinch-local-color-border:\n var(\n --sinch-comp-button-color-danger-disabled-border-initial\n );\n --sinch-local-color-text:\n var(\n --sinch-comp-button-color-danger-disabled-text-initial\n );\n --sinch-global-color-icon:\n var(\n --sinch-comp-button-color-danger-disabled-icon-initial\n );\n }\n\n /* Border / Background */\n #button::before {\n content: "";\n position: absolute;\n inset: 0;\n background-color: var(--sinch-local-color-background);\n border-top: var(--sinch-button-border-top);\n border-bottom: var(--sinch-button-border-bottom);\n border-right: var(--sinch-button-border-right);\n border-left: var(--sinch-button-border-left);\n border-color: var(--sinch-local-color-border);\n border-top-right-radius:\n var(\n --sinch-button-shape-radius-top-right,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n );\n border-top-left-radius:\n var(\n --sinch-button-shape-radius-top-left,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n );\n border-bottom-right-radius:\n var(\n --sinch-button-shape-radius-bottom-right,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n );\n border-bottom-left-radius:\n var(\n --sinch-button-shape-radius-bottom-left,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n );\n box-shadow: var(--sinch-local-shadow);\n pointer-events: none;\n }\n\n :host(:not([disabled]):active) #button::before {\n border-width: 2px;\n }\n\n /* Focus Outline */\n :host(:focus-visible) #button::after {\n position: absolute;\n content: "";\n inset: -3px;\n border: 2px solid var(--sinch-local-color-outline-focus);\n border-top-right-radius:\n calc(\n var(\n --sinch-button-shape-radius-top-right,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n ) + 3px\n );\n border-top-left-radius:\n calc(\n var(\n --sinch-button-shape-radius-top-left,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n ) + 3px\n );\n border-bottom-right-radius:\n calc(\n var(\n --sinch-button-shape-radius-bottom-right,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n ) + 3px\n );\n border-bottom-left-radius:\n calc(\n var(\n --sinch-button-shape-radius-bottom-left,\n var(\n --sinch-button-set-size-shape-radius,\n var(--sinch-button-shape-radius-base)\n )\n ) + 3px\n );\n pointer-events: none;\n }\n\n #content {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n width: 100%;\n height: 100%;\n padding: 0 var(--sinch-local-padding);\n box-sizing: border-box;\n pointer-events: none;\n overflow: hidden;\n }\n\n #text {\n font: var(--sinch-local-font);\n color: var(--sinch-local-color-text);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n flex-shrink: 1;\n min-width: 0;\n }\n\n /* icon-button */\n :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n display: none;\n }\n\n ::slotted(*) {\n display: block;\n }\n</style>\n\n<div id="button" inert>\n <div id="content">\n <slot id="left-icon" name="left-icon"></slot>\n <slot id="icon" name="icon"></slot>\n <span id="text"></span>\n <slot id="right-icon" name="right-icon"></slot>\n </div>\n</div>\n';
|
|
8
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none;--sinch-button-shape-radius-base:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-button-border:1px solid;--sinch-button-border-top:var(--sinch-button-border);--sinch-button-border-bottom:var(--sinch-button-border);--sinch-button-border-left:var(--sinch-button-border);--sinch-button-border-right:var(--sinch-button-border);--sinch-button-shape-radius-top-right:unset;--sinch-button-shape-radius-top-left:unset;--sinch-button-shape-radius-bottom-right:unset;--sinch-button-shape-radius-bottom-left:unset}: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-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-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-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}: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-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,: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)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#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-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-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)}: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-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-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([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}: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(:not([type]):hover)>#button,: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(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#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(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]: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)}: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([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#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([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]: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)}: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-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,: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-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][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-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}: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-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}: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-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}: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)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border-top:var(--sinch-button-border-top);border-bottom:var(--sinch-button-border-bottom);border-right:var(--sinch-button-border-right);border-left:var(--sinch-button-border-left);border-color:var(--sinch-local-color-border);border-top-right-radius:var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-top-left-radius:var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-right-radius:var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-left-radius:var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));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-top-right-radius:calc(var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-top-left-radius:calc(var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-right-radius:calc(var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-left-radius:calc(var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#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}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
|
|
9
9
|
const template = document.createElement("template");
|
|
10
10
|
template.innerHTML = templateHTML;
|
|
11
11
|
class Button extends NectaryElement {
|
package/button-group/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { typeValues } from "../button/utils.js";
|
|
|
2
2
|
import { updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
|
|
3
3
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
4
4
|
import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
|
|
5
|
-
const templateHTML = '<style
|
|
5
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
|
|
6
6
|
const template = document.createElement("template");
|
|
7
7
|
template.innerHTML = templateHTML;
|
|
8
8
|
class ButtonGroup extends NectaryElement {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute } from "../utils/dom.js";
|
|
2
2
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
3
3
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
4
|
-
const templateHTML = '<style
|
|
4
|
+
const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
|
|
5
5
|
const template = document.createElement("template");
|
|
6
6
|
template.innerHTML = templateHTML;
|
|
7
7
|
class ButtonGroupItem extends NectaryElement {
|
package/card-container/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
2
|
-
const templateHTML = '<style
|
|
2
|
+
const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
|
|
3
3
|
const template = document.createElement("template");
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
class CardContainer extends NectaryElement {
|
package/card-v2/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { updateBooleanAttribute, updateAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
|
|
2
2
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
3
3
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
4
|
-
const templateHTML = '<style
|
|
4
|
+
const templateHTML = '<style>:host{display:flex}.empty{display:none!important}#card{border-radius:var(--sinch-comp-card-v2-shape-radius);border:1px solid var(--sinch-comp-card-v2-color-default-border-initial);background-color:var(--sinch-comp-card-v2-color-default-background-initial);box-shadow:var(--sinch-comp-card-v2-shadow-initial);overflow:hidden;transition:.15s linear;display:flex;flex-direction:column;flex:1}#card-media{display:block;overflow:hidden}#body{display:flex;flex-direction:column;padding:16px;gap:8px;align-self:stretch;flex:1}#card-title{display:flex;flex-direction:row;align-items:center;gap:8px;align-self:stretch}#card-content{display:flex;gap:10px;align-self:stretch}#card-footer{display:flex;flex-direction:row;align-items:center;gap:16px;align-self:stretch;margin-top:auto}:host([selected]:not([selected=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-initial);border-color:var(--sinch-comp-card-v2-color-selected-border-initial);cursor:pointer}:host([clickable]:not([clickable=false])) #card{cursor:pointer}:host([disabled]:not([disabled=false])) #card{box-shadow:var(--sinch-comp-card-v2-shadow-disabled);background-color:var(--sinch-comp-card-v2-color-default-background-disabled);border-color:var(--sinch-comp-card-v2-color-default-border-disabled);cursor:not-allowed}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-default-background-hover);border-color:var(--sinch-comp-card-v2-color-default-border-hover);box-shadow:var(--sinch-comp-card-v2-shadow-hover)}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-default-background-active);border-color:var(--sinch-comp-card-v2-color-default-border-active);box-shadow:var(--sinch-comp-card-v2-shadow-active)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-hover);border-color:var(--sinch-comp-card-v2-color-selected-border-hover)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-active);border-color:var(--sinch-comp-card-v2-color-selected-border-active)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-disabled);border-color:var(--sinch-comp-card-v2-color-selected-border-disabled)}::slotted([slot=content]){max-width:100%;color:var(--sinch-comp-card-v2-color-default-description-initial);font-size:var(--sinch-comp-card-v2-font-description)}::slotted([slot=title]){max-width:100%}::slotted([slot=footer]){max-width:100%}:host([selected]:not([selected=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-default-description-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-disabled)}</style><div id="card"><div id="card-media"><slot name="media"></slot></div><div id="body"><div id="card-title"><slot name="title"></slot></div><div id="card-content"><slot name="content"></slot></div><div id="card-footer"><slot name="footer"></slot></div></div></div>';
|
|
5
5
|
const template = document.createElement("template");
|
|
6
6
|
template.innerHTML = templateHTML;
|
|
7
7
|
const CLICK_EVENTS = ["click", "-click"];
|
package/card-v2-title/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { updateBooleanAttribute, getAttribute, updateAttribute, getBooleanAttribute, isAttrTrue } from "../utils/dom.js";
|
|
2
2
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
3
|
-
const templateHTML = '<style
|
|
3
|
+
const templateHTML = '<style>:host{display:block}#title{display:flex;align-items:center;flex-direction:row}#title-text{font:var(--sinch-comp-card-v2-font-title);color:var(--sinch-comp-card-v2-color-default-title-initial)}#title-icon{display:flex}:host([orientation=vertical]) #title{align-items:start;flex-direction:column}:host([disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-default-title-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-selected-title-disabled)}::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-card-v2-size-icon);margin-right:8px;margin-bottom:0}:host([orientation=vertical]) ::slotted([slot=icon]){margin-right:0;margin-bottom:8px}:host([selected]:not([selected=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-disabled)}</style><div id="title"><div id="title-icon"><slot name="icon"></slot></div><sinch-text id="title-text" type="m"></sinch-text></div>';
|
|
4
4
|
const template = document.createElement("template");
|
|
5
5
|
template.innerHTML = templateHTML;
|
|
6
6
|
class CardV2Title extends NectaryElement {
|
package/checkbox/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { getBooleanAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, u
|
|
|
3
3
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
4
4
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
5
5
|
import { setFormValue } from "../utils/form.js";
|
|
6
|
-
const templateHTML = '<style
|
|
6
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:18px;height:18px;cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#checkbox::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:1px;top:1px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-surface-primary-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-checkbox-font-label);cursor:pointer;--sinch-global-color-text:var(--sinch-local-color-text)}:host(:not([text])) #label,:host([text=""]) #label{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg> <svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><sinch-rich-text id="label"></sinch-rich-text></div>';
|
|
7
7
|
const template = document.createElement("template");
|
|
8
8
|
template.innerHTML = templateHTML;
|
|
9
9
|
class Checkbox extends NectaryElement {
|
|
@@ -163,6 +163,7 @@ class Checkbox extends NectaryElement {
|
|
|
163
163
|
};
|
|
164
164
|
#onChangeReactHandler = (e) => {
|
|
165
165
|
getReactEventHandler(this, "on-change")?.(e);
|
|
166
|
+
getReactEventHandler(this, "onChange")?.(e);
|
|
166
167
|
};
|
|
167
168
|
#onFocusReactHandler = (e) => {
|
|
168
169
|
getReactEventHandler(this, "on-focus")?.(e);
|
package/chip/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAt
|
|
|
4
4
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
5
5
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
6
6
|
import { getChipColorBg, getChipColorFg } from "./utils.js";
|
|
7
|
-
const templateHTML = '<style
|
|
7
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
|
|
8
8
|
const template = document.createElement("template");
|
|
9
9
|
template.innerHTML = templateHTML;
|
|
10
10
|
class Chip extends NectaryElement {
|
package/code-tag/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getAttribute, updateAttribute } from "../utils/dom.js";
|
|
2
2
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
3
|
-
const templateHTML = '<style
|
|
3
|
+
const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);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);white-space:var(--sinch-global-text-white-space,normal)}</style><span id="content"></span>';
|
|
4
4
|
const template = document.createElement("template");
|
|
5
5
|
template.innerHTML = templateHTML;
|
|
6
6
|
class CodeTag extends NectaryElement {
|
package/color-menu/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
|
4
4
|
import { getRect } from "../utils/rect.js";
|
|
5
5
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
6
6
|
import { getTargetByAttribute } from "../utils/event-target.js";
|
|
7
|
-
const templateHTML = '<style
|
|
7
|
+
const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox.empty{display:none}</style><div id="listbox" role="presentation"><slot id="options"></slot></div>';
|
|
8
8
|
const NUM_COLS_DEFAULT = 5;
|
|
9
9
|
const ITEM_WIDTH = 44;
|
|
10
10
|
const ITEM_HEIGHT = 56;
|
|
@@ -301,6 +301,7 @@ class ColorMenu extends NectaryElement {
|
|
|
301
301
|
}
|
|
302
302
|
#onChangeReactHandler = (e) => {
|
|
303
303
|
getReactEventHandler(this, "on-change")?.(e);
|
|
304
|
+
getReactEventHandler(this, "onChange")?.(e);
|
|
304
305
|
};
|
|
305
306
|
}
|
|
306
307
|
defineCustomElement("sinch-color-menu", ColorMenu);
|
|
@@ -3,7 +3,7 @@ import "../tooltip/index.js";
|
|
|
3
3
|
import { getSwatchColorFg } from "../color-swatch/utils.js";
|
|
4
4
|
import { updateAttribute, getAttribute } from "../utils/dom.js";
|
|
5
5
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
6
|
-
const templateHTML = '<style
|
|
6
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:44px;height:56px;padding:12px 6px;box-sizing:border-box}#swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}#swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);border-radius:50%;pointer-events:none}:host([data-checked]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-selected)}:host([data-selected]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-focus)}:host(:hover) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-hover)}:host(:active) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-active)}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch></div></sinch-tooltip></div>';
|
|
7
7
|
const template = document.createElement("template");
|
|
8
8
|
template.innerHTML = templateHTML;
|
|
9
9
|
class ColorMenuOption extends NectaryElement {
|
package/color-swatch/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import "../text/index.js";
|
|
|
2
2
|
import { getAttribute, updateAttribute, setClass } from "../utils/dom.js";
|
|
3
3
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
4
4
|
import { getSwatchColorBg } from "./utils.js";
|
|
5
|
-
const templateHTML = '<style
|
|
5
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-global-size-icon,32px);height:var(--sinch-global-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-ref-color-violet-200),var(--sinch-ref-color-honey-200),var(--sinch-ref-color-grass-200),var(--sinch-ref-color-ocean-200),var(--sinch-ref-color-violet-200))}</style><div id="wrapper"></div>';
|
|
6
6
|
const template = document.createElement("template");
|
|
7
7
|
template.innerHTML = templateHTML;
|
|
8
8
|
class ColorSwatch extends NectaryElement {
|
package/date-picker/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
|
8
8
|
import { getTargetAttribute } from "../utils/event-target.js";
|
|
9
9
|
import { setFormValue } from "../utils/form.js";
|
|
10
10
|
import { getDayNames, getMonthNames, isoToDate, clampMaxDate, clampMinDate, decMonth, incMonth, decYear, incYear, today, isDateBetween, areDatesEqual, sortDates, dateToIso, isValidDate, isDateOnScreen, cloneDate, getCalendarMonth, canGoPrevMonth, canGoNextMonth, canGoPrevYear, canGoNextYear } from "./utils.js";
|
|
11
|
-
const templateHTML = '<style
|
|
11
|
+
const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-button id="prev-year" size="s"><sinch-icon icons-version="2" name="fa-angles-left" id="icon-prev-year" slot="icon"></sinch-icon></sinch-button><sinch-button id="prev-month" size="s"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-prev-month" slot="icon"></sinch-icon></sinch-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-button id="next-month" size="s"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-next-month" slot="icon"></sinch-icon></sinch-button><sinch-button id="next-year" size="s"><sinch-icon icons-version="2" name="fa-angles-right" id="icon-next-year" slot="icon"></sinch-icon></sinch-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div></div></div>';
|
|
12
12
|
const template = document.createElement("template");
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
class DatePicker extends NectaryElement {
|
|
@@ -410,6 +410,7 @@ class DatePicker extends NectaryElement {
|
|
|
410
410
|
}
|
|
411
411
|
#onChangeReactHandler = (e) => {
|
|
412
412
|
getReactEventHandler(this, "on-change")?.(e);
|
|
413
|
+
getReactEventHandler(this, "onChange")?.(e);
|
|
413
414
|
};
|
|
414
415
|
}
|
|
415
416
|
defineCustomElement("sinch-date-picker", DatePicker);
|
package/dialog/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { getRect } from "../utils/rect.js";
|
|
|
7
7
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
8
8
|
import { isTargetEqual } from "../utils/event-target.js";
|
|
9
9
|
import { disableScroll, enableScroll } from "./utils.js";
|
|
10
|
-
const templateHTML = '<style
|
|
10
|
+
const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);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;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{display:var(--sinch-dialog-close-button-display,initial);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-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-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>';
|
|
11
11
|
const template = document.createElement("template");
|
|
12
12
|
template.innerHTML = templateHTML;
|
|
13
13
|
class Dialog extends NectaryElement {
|
|
@@ -130,6 +130,7 @@ class Dialog extends NectaryElement {
|
|
|
130
130
|
};
|
|
131
131
|
#onCloseReactHandler = (e) => {
|
|
132
132
|
getReactEventHandler(this, "on-close")?.(e);
|
|
133
|
+
getReactEventHandler(this, "onClose")?.(e);
|
|
133
134
|
};
|
|
134
135
|
#dispatchCloseEvent(detail, cancelable) {
|
|
135
136
|
this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
|
package/emoji/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { updateAttribute, getAttribute } from "../utils/dom.js";
|
|
2
2
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
3
3
|
import { getEmojiUrl, getEmojiBaseUrl } from "./utils.js";
|
|
4
|
-
const templateHTML = '<style
|
|
4
|
+
const templateHTML = '<style>:host{display:contents;--sinch-comp-emoji-vertical-align:initial}#image{vertical-align:var(--sinch-comp-emoji-vertical-align);pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy">';
|
|
5
5
|
const template = document.createElement("template");
|
|
6
6
|
template.innerHTML = templateHTML;
|
|
7
7
|
class Emoji extends NectaryElement {
|