@nectary/components 5.19.1 → 5.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/index.d.ts +0 -1
- package/accordion-item/index.js +7 -5
- package/accordion-item/types.d.ts +2 -0
- package/bundle.js +6 -4
- package/package.json +1 -1
|
@@ -7,7 +7,6 @@ export * from './types';
|
|
|
7
7
|
export declare class AccordionItem extends NectaryElement {
|
|
8
8
|
#private;
|
|
9
9
|
constructor();
|
|
10
|
-
connectedCallback(): void;
|
|
11
10
|
disconnectedCallback(): void;
|
|
12
11
|
static get observedAttributes(): string[];
|
|
13
12
|
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
package/accordion-item/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "../icon/index.js";
|
|
2
2
|
import "../text/index.js";
|
|
3
3
|
import "../title/index.js";
|
|
4
|
-
import { isAttrEqual, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute,
|
|
4
|
+
import { isAttrEqual, updateAttribute, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
|
|
5
5
|
import { defineCustomElement, NectaryElement } from "../utils/element.js";
|
|
6
6
|
import { statusValues } from "./utils.js";
|
|
7
|
-
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:
|
|
7
|
+
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
|
|
8
8
|
const template = document.createElement("template");
|
|
9
9
|
template.innerHTML = templateHTML;
|
|
10
10
|
class AccordionItem extends NectaryElement {
|
|
@@ -19,12 +19,10 @@ class AccordionItem extends NectaryElement {
|
|
|
19
19
|
this.#$title = shadowRoot.querySelector("#title");
|
|
20
20
|
this.#$optionalText = shadowRoot.querySelector("#optional");
|
|
21
21
|
}
|
|
22
|
-
connectedCallback() {
|
|
23
|
-
}
|
|
24
22
|
disconnectedCallback() {
|
|
25
23
|
}
|
|
26
24
|
static get observedAttributes() {
|
|
27
|
-
return ["label", "disabled", "data-checked", "optionaltext"];
|
|
25
|
+
return ["label", "disabled", "data-checked", "optionaltext", "ellipsis"];
|
|
28
26
|
}
|
|
29
27
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
30
28
|
if (isAttrEqual(oldVal, newVal)) {
|
|
@@ -52,6 +50,10 @@ class AccordionItem extends NectaryElement {
|
|
|
52
50
|
this.#$optionalText.textContent = newVal;
|
|
53
51
|
break;
|
|
54
52
|
}
|
|
53
|
+
case "ellipsis": {
|
|
54
|
+
updateAttribute(this.#$title, "ellipsis", newVal);
|
|
55
|
+
break;
|
|
56
|
+
}
|
|
55
57
|
}
|
|
56
58
|
}
|
|
57
59
|
set value(value) {
|
|
@@ -7,6 +7,8 @@ export type TSinchAccordionItemProps = {
|
|
|
7
7
|
label: string;
|
|
8
8
|
/** Optional text on the right side */
|
|
9
9
|
optionalText?: string;
|
|
10
|
+
/** Truncates long title with ellipsis */
|
|
11
|
+
ellipsis?: boolean;
|
|
10
12
|
/** Status */
|
|
11
13
|
status?: TSinchAccordionStatusType;
|
|
12
14
|
/** Disabled */
|
package/bundle.js
CHANGED
|
@@ -373,7 +373,7 @@ class Title extends NectaryElement {
|
|
|
373
373
|
}
|
|
374
374
|
defineCustomElement("sinch-title", Title);
|
|
375
375
|
const statusValues$1 = ["info", "success", "warn", "error"];
|
|
376
|
-
const templateHTML$1a = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:
|
|
376
|
+
const templateHTML$1a = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{flex-shrink:0;margin-top:2px;transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{flex-shrink:0;--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
|
|
377
377
|
const template$1a = document.createElement("template");
|
|
378
378
|
template$1a.innerHTML = templateHTML$1a;
|
|
379
379
|
class AccordionItem extends NectaryElement {
|
|
@@ -388,12 +388,10 @@ class AccordionItem extends NectaryElement {
|
|
|
388
388
|
this.#$title = shadowRoot.querySelector("#title");
|
|
389
389
|
this.#$optionalText = shadowRoot.querySelector("#optional");
|
|
390
390
|
}
|
|
391
|
-
connectedCallback() {
|
|
392
|
-
}
|
|
393
391
|
disconnectedCallback() {
|
|
394
392
|
}
|
|
395
393
|
static get observedAttributes() {
|
|
396
|
-
return ["label", "disabled", "data-checked", "optionaltext"];
|
|
394
|
+
return ["label", "disabled", "data-checked", "optionaltext", "ellipsis"];
|
|
397
395
|
}
|
|
398
396
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
399
397
|
if (isAttrEqual(oldVal, newVal)) {
|
|
@@ -421,6 +419,10 @@ class AccordionItem extends NectaryElement {
|
|
|
421
419
|
this.#$optionalText.textContent = newVal;
|
|
422
420
|
break;
|
|
423
421
|
}
|
|
422
|
+
case "ellipsis": {
|
|
423
|
+
updateAttribute(this.#$title, "ellipsis", newVal);
|
|
424
|
+
break;
|
|
425
|
+
}
|
|
424
426
|
}
|
|
425
427
|
}
|
|
426
428
|
set value(value) {
|