@nectary/components 5.37.2 → 5.37.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/accordion-item/index.d.ts +4 -1
  2. package/accordion-item/index.js +21 -6
  3. package/bundle.js +20 -5
  4. package/package.json +1 -1
package/accordion-item/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export * from './types';
7
7
  export declare class AccordionItem extends NectaryElement {
8
8
  #private;
9
9
  constructor();
10
+ connectedCallback(): void;
10
11
  disconnectedCallback(): void;
11
12
  static get observedAttributes(): string[];
12
13
  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
@@ -16,10 +17,12 @@ export declare class AccordionItem extends NectaryElement {
16
17
  get label(): string;
17
18
  set disabled(isDisabled: boolean);
18
19
  get disabled(): boolean;
19
- get status(): TSinchAccordionStatusType | null;
20
20
  set status(value: TSinchAccordionStatusType | null);
21
+ get status(): TSinchAccordionStatusType | null;
21
22
  set optionalText(value: string | null);
22
23
  get optionalText(): string | null;
24
+ set ellipsis(isEllipsis: boolean);
25
+ get ellipsis(): boolean;
23
26
  get focusable(): boolean;
24
27
  focus(): void;
25
28
  blur(): void;
package/accordion-item/index.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import "../icon/index.js";
2
2
  import "../text/index.js";
3
3
  import "../title/index.js";
4
- import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
4
+ import { updateBooleanAttribute, isAttrEqual, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, updateLiteralAttribute, getLiteralAttribute } 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: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>';
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"></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 {
11
11
  #$button;
12
12
  #$title;
13
13
  #$optionalText;
14
+ #hasExplicitEllipsis = false;
14
15
  constructor() {
15
16
  super();
16
17
  const shadowRoot = this.attachShadow({ delegatesFocus: true });
@@ -19,7 +20,14 @@ class AccordionItem extends NectaryElement {
19
20
  this.#$title = shadowRoot.querySelector("#title");
20
21
  this.#$optionalText = shadowRoot.querySelector("#optional");
21
22
  }
23
+ connectedCallback() {
24
+ super.connectedCallback();
25
+ if (this.hasAttribute("ellipsis") === false && this.#hasExplicitEllipsis === false) {
26
+ updateBooleanAttribute(this, "ellipsis", true);
27
+ }
28
+ }
22
29
  disconnectedCallback() {
30
+ super.disconnectedCallback();
23
31
  }
24
32
  static get observedAttributes() {
25
33
  return [
@@ -27,7 +35,6 @@ class AccordionItem extends NectaryElement {
27
35
  "disabled",
28
36
  "data-checked",
29
37
  "optionaltext",
30
- // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: ellipsis missing set/get pair, fixed by MR !597
31
38
  "ellipsis"
32
39
  ];
33
40
  }
@@ -58,6 +65,7 @@ class AccordionItem extends NectaryElement {
58
65
  break;
59
66
  }
60
67
  case "ellipsis": {
68
+ this.#hasExplicitEllipsis = true;
61
69
  updateBooleanAttribute(this.#$title, name, isAttrTrue(newVal));
62
70
  break;
63
71
  }
@@ -81,18 +89,25 @@ class AccordionItem extends NectaryElement {
81
89
  get disabled() {
82
90
  return getBooleanAttribute(this, "disabled");
83
91
  }
84
- get status() {
85
- return getLiteralAttribute(this, statusValues, "status", null);
86
- }
87
92
  set status(value) {
88
93
  updateLiteralAttribute(this, statusValues, "status", value);
89
94
  }
95
+ get status() {
96
+ return getLiteralAttribute(this, statusValues, "status", null);
97
+ }
90
98
  set optionalText(value) {
91
99
  updateAttribute(this, "optionaltext", value);
92
100
  }
93
101
  get optionalText() {
94
102
  return getAttribute(this, "optionaltext");
95
103
  }
104
+ set ellipsis(isEllipsis) {
105
+ this.#hasExplicitEllipsis = true;
106
+ updateBooleanAttribute(this, "ellipsis", isEllipsis);
107
+ }
108
+ get ellipsis() {
109
+ return getBooleanAttribute(this, "ellipsis");
110
+ }
96
111
  get focusable() {
97
112
  return true;
98
113
  }
package/bundle.js CHANGED
@@ -436,13 +436,14 @@ class Title extends NectaryElement {
436
436
  }
437
437
  defineCustomElement("sinch-title", Title);
438
438
  const statusValues$1 = ["info", "success", "warn", "error"];
439
- const templateHTML$1g = '<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>';
439
+ const templateHTML$1g = '<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"></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>';
440
440
  const template$1g = document.createElement("template");
441
441
  template$1g.innerHTML = templateHTML$1g;
442
442
  class AccordionItem extends NectaryElement {
443
443
  #$button;
444
444
  #$title;
445
445
  #$optionalText;
446
+ #hasExplicitEllipsis = false;
446
447
  constructor() {
447
448
  super();
448
449
  const shadowRoot = this.attachShadow({ delegatesFocus: true });
@@ -451,7 +452,14 @@ class AccordionItem extends NectaryElement {
451
452
  this.#$title = shadowRoot.querySelector("#title");
452
453
  this.#$optionalText = shadowRoot.querySelector("#optional");
453
454
  }
455
+ connectedCallback() {
456
+ super.connectedCallback();
457
+ if (this.hasAttribute("ellipsis") === false && this.#hasExplicitEllipsis === false) {
458
+ updateBooleanAttribute(this, "ellipsis", true);
459
+ }
460
+ }
454
461
  disconnectedCallback() {
462
+ super.disconnectedCallback();
455
463
  }
456
464
  static get observedAttributes() {
457
465
  return [
@@ -459,7 +467,6 @@ class AccordionItem extends NectaryElement {
459
467
  "disabled",
460
468
  "data-checked",
461
469
  "optionaltext",
462
- // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: ellipsis missing set/get pair, fixed by MR !597
463
470
  "ellipsis"
464
471
  ];
465
472
  }
@@ -490,6 +497,7 @@ class AccordionItem extends NectaryElement {
490
497
  break;
491
498
  }
492
499
  case "ellipsis": {
500
+ this.#hasExplicitEllipsis = true;
493
501
  updateBooleanAttribute(this.#$title, name, isAttrTrue(newVal));
494
502
  break;
495
503
  }
@@ -513,18 +521,25 @@ class AccordionItem extends NectaryElement {
513
521
  get disabled() {
514
522
  return getBooleanAttribute(this, "disabled");
515
523
  }
516
- get status() {
517
- return getLiteralAttribute(this, statusValues$1, "status", null);
518
- }
519
524
  set status(value) {
520
525
  updateLiteralAttribute(this, statusValues$1, "status", value);
521
526
  }
527
+ get status() {
528
+ return getLiteralAttribute(this, statusValues$1, "status", null);
529
+ }
522
530
  set optionalText(value) {
523
531
  updateAttribute(this, "optionaltext", value);
524
532
  }
525
533
  get optionalText() {
526
534
  return getAttribute(this, "optionaltext");
527
535
  }
536
+ set ellipsis(isEllipsis2) {
537
+ this.#hasExplicitEllipsis = true;
538
+ updateBooleanAttribute(this, "ellipsis", isEllipsis2);
539
+ }
540
+ get ellipsis() {
541
+ return getBooleanAttribute(this, "ellipsis");
542
+ }
528
543
  get focusable() {
529
544
  return true;
530
545
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "5.37.2",
3
+ "version": "5.37.3",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",