@nectary/components 5.44.0 → 5.44.2
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/bundle.js +36 -3
- package/button-group-item/index.d.ts +1 -1
- package/button-group-item/index.js +26 -2
- package/link/index.d.ts +2 -0
- package/link/index.js +9 -1
- package/link/types.d.ts +2 -0
- package/package.json +1 -1
- package/time-picker/index.js +1 -0
package/bundle.js
CHANGED
|
@@ -1193,7 +1193,7 @@ const linkTypeValues = [
|
|
|
1193
1193
|
"cta-secondary",
|
|
1194
1194
|
"destructive"
|
|
1195
1195
|
];
|
|
1196
|
-
const templateHTML$1c = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) :is(#left-icon,#icon,#right-icon){display:none}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="l"]){--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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([type][size="m"]){--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="s"]){--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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([type][size=xs]){--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sinch-local-gap);box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([type][size="l"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([type][size="s"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([type][size=xs]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 4px)}:host([type]:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#content,#button-content){display:none}:host([type]) ::slotted(*){display:block;position:relative}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--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]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="content"></span><slot id="right-icon" name="right-icon"></slot><span id="icon-prefix"> </span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
|
|
1196
|
+
const templateHTML$1c = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone]):not([hide-external-icon])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]:not([hide-external-icon])) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) :is(#left-icon,#icon,#right-icon){display:none}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="l"]){--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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([type][size="m"]){--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="s"]){--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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([type][size=xs]){--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sinch-local-gap);box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([type][size="l"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([type][size="s"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([type][size=xs]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 4px)}:host([type]:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#content,#button-content){display:none}:host([type]) ::slotted(*){display:block;position:relative}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--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]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="content"></span><slot id="right-icon" name="right-icon"></slot><span id="icon-prefix"> </span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
|
|
1197
1197
|
const template$1c = document.createElement("template");
|
|
1198
1198
|
template$1c.innerHTML = templateHTML$1c;
|
|
1199
1199
|
class Link extends NectaryElement {
|
|
@@ -1253,6 +1253,7 @@ class Link extends NectaryElement {
|
|
|
1253
1253
|
"content-as-code",
|
|
1254
1254
|
"use-history",
|
|
1255
1255
|
"external",
|
|
1256
|
+
"hide-external-icon",
|
|
1256
1257
|
"standalone",
|
|
1257
1258
|
"disabled",
|
|
1258
1259
|
"type",
|
|
@@ -1305,6 +1306,7 @@ class Link extends NectaryElement {
|
|
|
1305
1306
|
break;
|
|
1306
1307
|
}
|
|
1307
1308
|
case "standalone":
|
|
1309
|
+
case "hide-external-icon":
|
|
1308
1310
|
case "disabled": {
|
|
1309
1311
|
const isTrue = isAttrTrue(newVal);
|
|
1310
1312
|
updateBooleanAttribute(this, name, isTrue);
|
|
@@ -1365,6 +1367,12 @@ class Link extends NectaryElement {
|
|
|
1365
1367
|
get external() {
|
|
1366
1368
|
return getBooleanAttribute(this, "external");
|
|
1367
1369
|
}
|
|
1370
|
+
set hideExternalIcon(value) {
|
|
1371
|
+
updateBooleanAttribute(this, "hide-external-icon", value);
|
|
1372
|
+
}
|
|
1373
|
+
get hideExternalIcon() {
|
|
1374
|
+
return getBooleanAttribute(this, "hide-external-icon");
|
|
1375
|
+
}
|
|
1368
1376
|
set standalone(isstandalone) {
|
|
1369
1377
|
updateBooleanAttribute(this, "standalone", isstandalone);
|
|
1370
1378
|
}
|
|
@@ -2329,17 +2337,32 @@ class ButtonGroupItem extends NectaryElement {
|
|
|
2329
2337
|
"size",
|
|
2330
2338
|
"text",
|
|
2331
2339
|
"disabled",
|
|
2332
|
-
"toggled"
|
|
2340
|
+
"toggled",
|
|
2341
|
+
"aria-label"
|
|
2333
2342
|
];
|
|
2334
2343
|
}
|
|
2335
2344
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
2345
|
+
if (name === "aria-label") {
|
|
2346
|
+
if (newVal === null) {
|
|
2347
|
+
this.#syncButtonAccessibleName();
|
|
2348
|
+
return;
|
|
2349
|
+
}
|
|
2350
|
+
updateAttribute(this.#$sinchButton, name, newVal);
|
|
2351
|
+
this.removeAttribute(name);
|
|
2352
|
+
this.#syncButtonAccessibleName();
|
|
2353
|
+
return;
|
|
2354
|
+
}
|
|
2336
2355
|
updateAttribute(this.#$sinchButton, name, newVal);
|
|
2356
|
+
if (name === "text") {
|
|
2357
|
+
this.#syncButtonAccessibleName();
|
|
2358
|
+
}
|
|
2337
2359
|
}
|
|
2338
2360
|
connectedCallback() {
|
|
2339
2361
|
super.connectedCallback();
|
|
2340
2362
|
this.#controller = new AbortController();
|
|
2341
2363
|
const { signal } = this.#controller;
|
|
2342
|
-
this.
|
|
2364
|
+
this.removeAttribute("aria-label");
|
|
2365
|
+
this.#syncButtonAccessibleName();
|
|
2343
2366
|
const forwardEvent = (e) => this.dispatchEvent(new CustomEvent(e.type, { ...e }));
|
|
2344
2367
|
this.addEventListener("-click", (e) => this.#onClickReactHandler(e), { signal });
|
|
2345
2368
|
this.addEventListener("-focus", () => this.#onFocusReactHandler(), { signal });
|
|
@@ -2378,6 +2401,15 @@ class ButtonGroupItem extends NectaryElement {
|
|
|
2378
2401
|
#onBlurReactHandler = () => {
|
|
2379
2402
|
getReactEventHandler(this, "on-blur")?.();
|
|
2380
2403
|
};
|
|
2404
|
+
#syncButtonAccessibleName() {
|
|
2405
|
+
const ariaLabel = this.#$sinchButton.getAttribute("aria-label");
|
|
2406
|
+
const hasAccessibleName = ariaLabel !== null && ariaLabel.trim().length > 0;
|
|
2407
|
+
if (hasAccessibleName) {
|
|
2408
|
+
return;
|
|
2409
|
+
}
|
|
2410
|
+
const text = this.text.trim();
|
|
2411
|
+
updateAttribute(this.#$sinchButton, "aria-label", text.length > 0 ? text : null);
|
|
2412
|
+
}
|
|
2381
2413
|
}
|
|
2382
2414
|
defineCustomElement("sinch-button-group-item", ButtonGroupItem);
|
|
2383
2415
|
const typeValues$4 = [
|
|
@@ -17318,6 +17350,7 @@ class TimePicker extends NectaryElement {
|
|
|
17318
17350
|
this.#$pickerMinutes.appendChild(minutesFrag);
|
|
17319
17351
|
}
|
|
17320
17352
|
connectedCallback() {
|
|
17353
|
+
this.setAttribute("role", "group");
|
|
17321
17354
|
this.#controller = new AbortController();
|
|
17322
17355
|
const options = {
|
|
17323
17356
|
signal: this.#controller.signal
|
|
@@ -5,7 +5,7 @@ export declare class ButtonGroupItem extends NectaryElement {
|
|
|
5
5
|
#private;
|
|
6
6
|
constructor();
|
|
7
7
|
static get observedAttributes(): string[];
|
|
8
|
-
attributeChangedCallback(name: (keyof NectaryComponentVanilla<'sinch-button'>), oldVal: string | null, newVal: string | null): void;
|
|
8
|
+
attributeChangedCallback(name: (keyof NectaryComponentVanilla<'sinch-button'>) | 'aria-label', oldVal: string | null, newVal: string | null): void;
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
set text(value: string);
|
|
11
11
|
get text(): string;
|
|
@@ -21,17 +21,32 @@ class ButtonGroupItem extends NectaryElement {
|
|
|
21
21
|
"size",
|
|
22
22
|
"text",
|
|
23
23
|
"disabled",
|
|
24
|
-
"toggled"
|
|
24
|
+
"toggled",
|
|
25
|
+
"aria-label"
|
|
25
26
|
];
|
|
26
27
|
}
|
|
27
28
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
29
|
+
if (name === "aria-label") {
|
|
30
|
+
if (newVal === null) {
|
|
31
|
+
this.#syncButtonAccessibleName();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
updateAttribute(this.#$sinchButton, name, newVal);
|
|
35
|
+
this.removeAttribute(name);
|
|
36
|
+
this.#syncButtonAccessibleName();
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
28
39
|
updateAttribute(this.#$sinchButton, name, newVal);
|
|
40
|
+
if (name === "text") {
|
|
41
|
+
this.#syncButtonAccessibleName();
|
|
42
|
+
}
|
|
29
43
|
}
|
|
30
44
|
connectedCallback() {
|
|
31
45
|
super.connectedCallback();
|
|
32
46
|
this.#controller = new AbortController();
|
|
33
47
|
const { signal } = this.#controller;
|
|
34
|
-
this.
|
|
48
|
+
this.removeAttribute("aria-label");
|
|
49
|
+
this.#syncButtonAccessibleName();
|
|
35
50
|
const forwardEvent = (e) => this.dispatchEvent(new CustomEvent(e.type, { ...e }));
|
|
36
51
|
this.addEventListener("-click", (e) => this.#onClickReactHandler(e), { signal });
|
|
37
52
|
this.addEventListener("-focus", () => this.#onFocusReactHandler(), { signal });
|
|
@@ -70,6 +85,15 @@ class ButtonGroupItem extends NectaryElement {
|
|
|
70
85
|
#onBlurReactHandler = () => {
|
|
71
86
|
getReactEventHandler(this, "on-blur")?.();
|
|
72
87
|
};
|
|
88
|
+
#syncButtonAccessibleName() {
|
|
89
|
+
const ariaLabel = this.#$sinchButton.getAttribute("aria-label");
|
|
90
|
+
const hasAccessibleName = ariaLabel !== null && ariaLabel.trim().length > 0;
|
|
91
|
+
if (hasAccessibleName) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
const text = this.text.trim();
|
|
95
|
+
updateAttribute(this.#$sinchButton, "aria-label", text.length > 0 ? text : null);
|
|
96
|
+
}
|
|
73
97
|
}
|
|
74
98
|
defineCustomElement("sinch-button-group-item", ButtonGroupItem);
|
|
75
99
|
export {
|
package/link/index.d.ts
CHANGED
|
@@ -23,6 +23,8 @@ export declare class Link extends NectaryElement {
|
|
|
23
23
|
get disabled(): boolean;
|
|
24
24
|
set external(isExternal: boolean);
|
|
25
25
|
get external(): boolean;
|
|
26
|
+
set hideExternalIcon(value: boolean);
|
|
27
|
+
get hideExternalIcon(): boolean;
|
|
26
28
|
set standalone(isstandalone: boolean);
|
|
27
29
|
get standalone(): boolean;
|
|
28
30
|
set type(value: TSinchLinkType);
|
package/link/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
|
5
5
|
import { getReactEventHandler } from "../utils/get-react-event-handler.js";
|
|
6
6
|
import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
|
|
7
7
|
import { linkTypeValues } from "./utils.js";
|
|
8
|
-
const templateHTML = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) :is(#left-icon,#icon,#right-icon){display:none}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="l"]){--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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([type][size="m"]){--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="s"]){--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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([type][size=xs]){--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sinch-local-gap);box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([type][size="l"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([type][size="s"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([type][size=xs]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 4px)}:host([type]:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#content,#button-content){display:none}:host([type]) ::slotted(*){display:block;position:relative}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--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]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="content"></span><slot id="right-icon" name="right-icon"></slot><span id="icon-prefix"> </span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
|
|
8
|
+
const templateHTML = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone]):not([hide-external-icon])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]:not([hide-external-icon])) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) :is(#left-icon,#icon,#right-icon){display:none}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="l"]){--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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([type][size="m"]){--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="s"]){--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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([type][size=xs]){--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sinch-local-gap);box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([type][size="l"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([type][size="s"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([type][size=xs]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 4px)}:host([type]:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#content,#button-content){display:none}:host([type]) ::slotted(*){display:block;position:relative}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--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]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="content"></span><slot id="right-icon" name="right-icon"></slot><span id="icon-prefix"> </span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
|
|
9
9
|
const template = document.createElement("template");
|
|
10
10
|
template.innerHTML = templateHTML;
|
|
11
11
|
class Link extends NectaryElement {
|
|
@@ -65,6 +65,7 @@ class Link extends NectaryElement {
|
|
|
65
65
|
"content-as-code",
|
|
66
66
|
"use-history",
|
|
67
67
|
"external",
|
|
68
|
+
"hide-external-icon",
|
|
68
69
|
"standalone",
|
|
69
70
|
"disabled",
|
|
70
71
|
"type",
|
|
@@ -117,6 +118,7 @@ class Link extends NectaryElement {
|
|
|
117
118
|
break;
|
|
118
119
|
}
|
|
119
120
|
case "standalone":
|
|
121
|
+
case "hide-external-icon":
|
|
120
122
|
case "disabled": {
|
|
121
123
|
const isTrue = isAttrTrue(newVal);
|
|
122
124
|
updateBooleanAttribute(this, name, isTrue);
|
|
@@ -177,6 +179,12 @@ class Link extends NectaryElement {
|
|
|
177
179
|
get external() {
|
|
178
180
|
return getBooleanAttribute(this, "external");
|
|
179
181
|
}
|
|
182
|
+
set hideExternalIcon(value) {
|
|
183
|
+
updateBooleanAttribute(this, "hide-external-icon", value);
|
|
184
|
+
}
|
|
185
|
+
get hideExternalIcon() {
|
|
186
|
+
return getBooleanAttribute(this, "hide-external-icon");
|
|
187
|
+
}
|
|
180
188
|
set standalone(isstandalone) {
|
|
181
189
|
updateBooleanAttribute(this, "standalone", isstandalone);
|
|
182
190
|
}
|
package/link/types.d.ts
CHANGED
|
@@ -16,6 +16,8 @@ export type TSinchLinkProps = {
|
|
|
16
16
|
disabled?: boolean;
|
|
17
17
|
/** Sets `target="_blank"` and a special external icon on the left side */
|
|
18
18
|
external?: boolean;
|
|
19
|
+
/** Hides the external icon that is shown when `external` is set */
|
|
20
|
+
'hide-external-icon'?: boolean;
|
|
19
21
|
/** Special standalone (`display: block`) mode with an arrow icon on the right side */
|
|
20
22
|
standalone?: boolean;
|
|
21
23
|
/** Prevents default behaviour on hyperlink click */
|
package/package.json
CHANGED
package/time-picker/index.js
CHANGED
|
@@ -109,6 +109,7 @@ class TimePicker extends NectaryElement {
|
|
|
109
109
|
this.#$pickerMinutes.appendChild(minutesFrag);
|
|
110
110
|
}
|
|
111
111
|
connectedCallback() {
|
|
112
|
+
this.setAttribute("role", "group");
|
|
112
113
|
this.#controller = new AbortController();
|
|
113
114
|
const options = {
|
|
114
115
|
signal: this.#controller.signal
|