@nectary/components 4.7.2 → 4.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/card-v2/index.js +1 -1
- package/input/types.d.ts +1 -1
- package/package.json +1 -1
- package/select-menu/index.js +12 -1
- package/select-menu/types.d.ts +4 -0
package/card-v2/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, NectaryElement, updateBooleanAttribute, getReactEventHandler, getBooleanAttribute, updateAttribute, isAttrTrue, setClass } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:flex
|
|
2
|
+
const templateHTML = '<style>:host{display:flex}.empty{display:none!important}#card{border-radius:var(--sinch-comp-card-v2-shape-radius);border:1px solid var(--sinch-comp-card-v2-color-default-border-initial);background-color:var(--sinch-comp-card-v2-color-default-background-initial);box-shadow:var(--sinch-comp-card-v2-shadow-initial);overflow:hidden;transition:.15s linear;display:flex;flex-direction:column;flex:1}#card-media{display:block;overflow:hidden}#body{display:flex;flex-direction:column;padding:16px;gap:8px;align-self:stretch;flex:1}#card-title{display:flex;flex-direction:row;align-items:center;gap:8px;align-self:stretch}#card-content{display:flex;gap:10px;align-self:stretch}#card-footer{display:flex;flex-direction:row;align-items:center;gap:16px;align-self:stretch;margin-top:auto}:host([selected]:not([selected=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-initial);border-color:var(--sinch-comp-card-v2-color-selected-border-initial);cursor:pointer}:host([clickable]:not([clickable=false])) #card{cursor:pointer}:host([disabled]:not([disabled=false])) #card{box-shadow:var(--sinch-comp-card-v2-shadow-disabled);background-color:var(--sinch-comp-card-v2-color-default-background-disabled);border-color:var(--sinch-comp-card-v2-color-default-border-disabled);cursor:not-allowed}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-default-background-hover);border-color:var(--sinch-comp-card-v2-color-default-border-hover);box-shadow:var(--sinch-comp-card-v2-shadow-hover)}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-default-background-active);border-color:var(--sinch-comp-card-v2-color-default-border-active);box-shadow:var(--sinch-comp-card-v2-shadow-active)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-hover);border-color:var(--sinch-comp-card-v2-color-selected-border-hover)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-active);border-color:var(--sinch-comp-card-v2-color-selected-border-active)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-disabled);border-color:var(--sinch-comp-card-v2-color-selected-border-disabled)}::slotted([slot=content]){max-width:100%;color:var(--sinch-comp-card-v2-color-default-description-initial);font-size:var(--sinch-comp-card-v2-font-description)}::slotted([slot=title]){max-width:100%}::slotted([slot=footer]){max-width:100%}:host([selected]:not([selected=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-default-description-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-disabled)}</style><div id="card"><div id="card-media"><slot name="media"></slot></div><div id="body"><div id="card-title"><slot name="title"></slot></div><div id="card-content"><slot name="content"></slot></div><div id="card-footer"><slot name="footer"></slot></div></div></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
const CLICK_EVENTS = ['click', '-click'];
|
package/input/types.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ export type TSinchInputElement = HTMLElement & {
|
|
|
15
15
|
/** Text that appears in the text field when it has no value set */
|
|
16
16
|
placeholder: string | null;
|
|
17
17
|
/** The HTML autocomplete attribute */
|
|
18
|
-
autocomplete:
|
|
18
|
+
autocomplete: HTMLInputElement['autocomplete'];
|
|
19
19
|
/** Invalid state */
|
|
20
20
|
invalid: boolean;
|
|
21
21
|
/** Disabled */
|
package/package.json
CHANGED
package/select-menu/index.js
CHANGED
|
@@ -54,7 +54,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
|
|
|
54
54
|
this.#controller = null;
|
|
55
55
|
}
|
|
56
56
|
static get observedAttributes() {
|
|
57
|
-
return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder'];
|
|
57
|
+
return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder', 'search-autocomplete'];
|
|
58
58
|
}
|
|
59
59
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
60
60
|
switch (name) {
|
|
@@ -64,6 +64,11 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
|
|
|
64
64
|
updateExplicitBooleanAttribute(this, 'aria-multiselectable', isAttrTrue(newVal));
|
|
65
65
|
break;
|
|
66
66
|
}
|
|
67
|
+
case 'search-autocomplete':
|
|
68
|
+
{
|
|
69
|
+
updateAttribute(this.#$search, 'autocomplete', newVal);
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
67
72
|
case 'value':
|
|
68
73
|
{
|
|
69
74
|
this.#onValueChange(newVal ?? '');
|
|
@@ -119,6 +124,12 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
|
|
|
119
124
|
const searchableAttribute = this.getAttribute('searchable');
|
|
120
125
|
return searchableAttribute === null ? searchableAttribute : isAttrTrue(searchableAttribute);
|
|
121
126
|
}
|
|
127
|
+
set 'search-autocomplete'(autocomplete) {
|
|
128
|
+
updateAttribute(this.#$search, 'autocomplete', autocomplete);
|
|
129
|
+
}
|
|
130
|
+
get 'search-autocomplete'() {
|
|
131
|
+
return getAttribute(this.#$search, 'autocomplete', '');
|
|
132
|
+
}
|
|
122
133
|
set 'search-placeholder'(placeholder) {
|
|
123
134
|
updateAttribute(this.#$search, 'placeholder', placeholder);
|
|
124
135
|
}
|
package/select-menu/types.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ export type TSinchSelectMenuElement = HTMLElement & {
|
|
|
8
8
|
multiple: boolean;
|
|
9
9
|
/** Enforce the search bar appearing, by default it appears above a certain number of options */
|
|
10
10
|
searchable: boolean | null;
|
|
11
|
+
/** Controls the autocomplete of the search input */
|
|
12
|
+
'search-autocomplete': HTMLInputElement['autocomplete'];
|
|
11
13
|
/** Text for search bar's placeholder */
|
|
12
14
|
'search-placeholder': string;
|
|
13
15
|
/** Optionally control search value manually */
|
|
@@ -32,6 +34,8 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
|
|
|
32
34
|
multiple?: boolean;
|
|
33
35
|
/** Enforce the search bar appearing, by default it appears above a certain number of options */
|
|
34
36
|
searchable?: boolean | null;
|
|
37
|
+
/** Controls the autocomplete of the search input */
|
|
38
|
+
'search-autocomplete'?: HTMLInputElement['autocomplete'];
|
|
35
39
|
/** Text for search bar's placeholder */
|
|
36
40
|
'search-placeholder'?: string;
|
|
37
41
|
/** Label that is used for a11y */
|