@fluid-topics/ft-collapsible 1.0.61 → 1.0.63

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.
@@ -0,0 +1,50 @@
1
+ import { FtLitElement } from "@fluid-topics/ft-wc-utils";
2
+ import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
3
+ import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
4
+ export interface FtBaseCollapsibleProperties {
5
+ open?: boolean;
6
+ animated?: boolean;
7
+ disabled?: boolean;
8
+ label?: string;
9
+ openLabel?: string;
10
+ closedLabel?: string;
11
+ tooltipPosition?: Position;
12
+ text?: string;
13
+ openText?: string;
14
+ closedText?: string;
15
+ iconVariant?: FtIconVariants;
16
+ openIcon?: string;
17
+ closedIcon?: string;
18
+ trailingIcon?: boolean;
19
+ closeCollapsibleMatchers: string[];
20
+ }
21
+ export declare class FtBaseCollapsible extends FtLitElement implements FtBaseCollapsibleProperties {
22
+ open: boolean;
23
+ animated: boolean;
24
+ closeCollapsibleMatchers: string[];
25
+ primary: boolean;
26
+ secondary: boolean;
27
+ tertiary: boolean;
28
+ neutral: boolean;
29
+ dense: boolean;
30
+ round: boolean;
31
+ small: boolean;
32
+ label?: string;
33
+ openLabel?: string;
34
+ closedLabel?: string;
35
+ text?: string;
36
+ openText?: string;
37
+ closedText?: string;
38
+ disabled: boolean;
39
+ tooltipPosition: Position;
40
+ iconVariant?: FtIconVariants;
41
+ openIcon: string;
42
+ closedIcon: string;
43
+ trailingIcon: boolean;
44
+ private animationInProgress;
45
+ protected render(): import("lit-html").TemplateResult<1>;
46
+ private animationEndSafeguard;
47
+ private toggleOpenAnimation;
48
+ private toggleOpen;
49
+ private onContentClick;
50
+ }
@@ -0,0 +1,154 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, } from "lit";
8
+ import { property, state } from "lit/decorators.js";
9
+ import { classMap } from "lit/directives/class-map.js";
10
+ import { Debouncer, eventPathContainsMatchingElement, FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
11
+ export class FtBaseCollapsible extends FtLitElement {
12
+ constructor() {
13
+ super(...arguments);
14
+ this.open = false;
15
+ this.animated = false;
16
+ this.closeCollapsibleMatchers = [];
17
+ //Button properties
18
+ this.primary = false;
19
+ this.secondary = false;
20
+ this.tertiary = false;
21
+ this.neutral = false;
22
+ this.dense = false;
23
+ this.round = false;
24
+ this.small = false;
25
+ this.disabled = false;
26
+ this.tooltipPosition = "right";
27
+ this.openIcon = "THIN_ARROW";
28
+ this.closedIcon = "THIN_ARROW_RIGHT";
29
+ this.trailingIcon = false;
30
+ this.animationInProgress = false;
31
+ this.animationEndSafeguard = new Debouncer(800);
32
+ }
33
+ render() {
34
+ const contentClasses = {
35
+ "ft-collapsible--content": true,
36
+ "ft-collapsible--hidden": !this.open,
37
+ "ft-collapsible--animated": this.animated,
38
+ "ft-collapsible--animation-in-progress": this.animated && this.animationInProgress,
39
+ };
40
+ return html `
41
+ <slot name="toggle"
42
+ part="toggle"
43
+ @click=${this.toggleOpenAnimation}>
44
+ <ft-or-ftds-button
45
+ part="toggle"
46
+ .tooltipPosition=${this.tooltipPosition}
47
+ .iconVariant=${this.iconVariant}
48
+ .icon=${this.open ? this.openIcon : this.closedIcon}
49
+ .label=${(this.open ? this.openLabel : this.closedLabel) || this.label}
50
+ ?primary=${this.primary}
51
+ ?secondary=${this.secondary}
52
+ ?tertiary=${this.tertiary}
53
+ ?neutral=${this.neutral}
54
+ ?disabled=${this.disabled}
55
+ ?dense=${this.dense}
56
+ ?round=${this.round}
57
+ ?small=${this.small}
58
+ ?trailingIcon=${this.trailingIcon}
59
+ aria-controls="ft-collapsible-content"
60
+ aria-expanded="${this.open}"
61
+ >
62
+ ${(this.open ? this.openText : this.closedText) || this.text}
63
+ </ft-or-ftds-button>
64
+ </slot>
65
+ <slot id="ft-collapsible-content"
66
+ class="${classMap(contentClasses)}"
67
+ @click=${this.onContentClick}
68
+ @transitionend=${() => this.animationInProgress = false}></slot>
69
+ `;
70
+ }
71
+ toggleOpenAnimation() {
72
+ this.animationInProgress = true;
73
+ setTimeout(() => this.toggleOpen(), 5);
74
+ this.animationEndSafeguard.run(() => this.animationInProgress = false);
75
+ }
76
+ toggleOpen() {
77
+ this.open = !this.open;
78
+ this.dispatchEvent(new CustomEvent("change", { detail: { open: this.open } }));
79
+ }
80
+ onContentClick(e) {
81
+ if (eventPathContainsMatchingElement(e, this.closeCollapsibleMatchers, this)) {
82
+ this.toggleOpenAnimation();
83
+ }
84
+ }
85
+ }
86
+ __decorate([
87
+ property({ type: Boolean, reflect: true })
88
+ ], FtBaseCollapsible.prototype, "open", void 0);
89
+ __decorate([
90
+ property({ type: Boolean })
91
+ ], FtBaseCollapsible.prototype, "animated", void 0);
92
+ __decorate([
93
+ jsonProperty([])
94
+ ], FtBaseCollapsible.prototype, "closeCollapsibleMatchers", void 0);
95
+ __decorate([
96
+ property({ type: Boolean })
97
+ ], FtBaseCollapsible.prototype, "primary", void 0);
98
+ __decorate([
99
+ property({ type: Boolean })
100
+ ], FtBaseCollapsible.prototype, "secondary", void 0);
101
+ __decorate([
102
+ property({ type: Boolean })
103
+ ], FtBaseCollapsible.prototype, "tertiary", void 0);
104
+ __decorate([
105
+ property({ type: Boolean })
106
+ ], FtBaseCollapsible.prototype, "neutral", void 0);
107
+ __decorate([
108
+ property({ type: Boolean })
109
+ ], FtBaseCollapsible.prototype, "dense", void 0);
110
+ __decorate([
111
+ property({ type: Boolean })
112
+ ], FtBaseCollapsible.prototype, "round", void 0);
113
+ __decorate([
114
+ property({ type: Boolean })
115
+ ], FtBaseCollapsible.prototype, "small", void 0);
116
+ __decorate([
117
+ property()
118
+ ], FtBaseCollapsible.prototype, "label", void 0);
119
+ __decorate([
120
+ property()
121
+ ], FtBaseCollapsible.prototype, "openLabel", void 0);
122
+ __decorate([
123
+ property()
124
+ ], FtBaseCollapsible.prototype, "closedLabel", void 0);
125
+ __decorate([
126
+ property()
127
+ ], FtBaseCollapsible.prototype, "text", void 0);
128
+ __decorate([
129
+ property()
130
+ ], FtBaseCollapsible.prototype, "openText", void 0);
131
+ __decorate([
132
+ property()
133
+ ], FtBaseCollapsible.prototype, "closedText", void 0);
134
+ __decorate([
135
+ property({ type: Boolean })
136
+ ], FtBaseCollapsible.prototype, "disabled", void 0);
137
+ __decorate([
138
+ property()
139
+ ], FtBaseCollapsible.prototype, "tooltipPosition", void 0);
140
+ __decorate([
141
+ property()
142
+ ], FtBaseCollapsible.prototype, "iconVariant", void 0);
143
+ __decorate([
144
+ property()
145
+ ], FtBaseCollapsible.prototype, "openIcon", void 0);
146
+ __decorate([
147
+ property()
148
+ ], FtBaseCollapsible.prototype, "closedIcon", void 0);
149
+ __decorate([
150
+ property({ type: Boolean })
151
+ ], FtBaseCollapsible.prototype, "trailingIcon", void 0);
152
+ __decorate([
153
+ state()
154
+ ], FtBaseCollapsible.prototype, "animationInProgress", void 0);
@@ -1,37 +1,7 @@
1
- import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
1
+ import { FtBaseCollapsible } from "./ft-base-collapsible";
2
2
  import { FtCollapsibleProperties } from "./ft-collapsible.properties";
3
- import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
4
- import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
5
- export declare class FtCollapsible extends FtLitElement implements FtCollapsibleProperties {
3
+ import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
4
+ export declare class FtCollapsible extends FtBaseCollapsible implements FtCollapsibleProperties {
6
5
  static elementDefinitions: ElementDefinitionsMap;
7
- open: boolean;
8
- animated: boolean;
9
- closeCollapsibleMatchers: string[];
10
- label?: string;
11
- openLabel?: string;
12
- closedLabel?: string;
13
- text?: string;
14
- openText?: string;
15
- closedText?: string;
16
- primary: boolean;
17
- secondary: boolean;
18
- disabled: boolean;
19
- dense: boolean;
20
- round: boolean;
21
- tooltipPosition: Position;
22
- iconVariant?: FtIconVariants;
23
- openIcon: string;
24
- closedIcon: string;
25
- trailingIcon: boolean;
26
- private toggleSlot?;
27
- private content;
28
- private animationInProgress;
29
6
  static styles: import("lit").CSSResult;
30
- protected render(): import("lit-html").TemplateResult<1>;
31
- private onCustomToggleSlotChange;
32
- private hasCustomToggle;
33
- private animationEndSafeguard;
34
- private toggleOpenAnimation;
35
- private toggleOpen;
36
- private onContentClick;
37
7
  }
@@ -1,161 +1,10 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html, } from "lit";
8
- import { property, query, state } from "lit/decorators.js";
9
- import { classMap } from "lit/directives/class-map.js";
10
- import { Debouncer, eventPathContainsMatchingElement, FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
1
+ import { FtBaseCollapsible } from "./ft-base-collapsible";
11
2
  import { FtButton } from "@fluid-topics/ft-button";
12
3
  import { styles } from "./ft-collapsible.css";
13
- class FtCollapsible extends FtLitElement {
14
- constructor() {
15
- super(...arguments);
16
- this.open = false;
17
- this.animated = false;
18
- this.closeCollapsibleMatchers = [];
19
- this.primary = false;
20
- this.secondary = false;
21
- this.disabled = false;
22
- this.dense = false;
23
- this.round = false;
24
- this.tooltipPosition = "right";
25
- this.openIcon = "THIN_ARROW";
26
- this.closedIcon = "THIN_ARROW_RIGHT";
27
- this.trailingIcon = false;
28
- this.animationInProgress = false;
29
- this.animationEndSafeguard = new Debouncer(800);
30
- }
31
- render() {
32
- const contentClasses = {
33
- "ft-collapsible--content": true,
34
- "ft-collapsible--hidden": !this.open,
35
- "ft-collapsible--animated": this.animated,
36
- "ft-collapsible--animation-in-progress": this.animated && this.animationInProgress,
37
- };
38
- return html `
39
- <ft-button
40
- part="toggle"
41
- .tooltipPosition=${this.tooltipPosition}
42
- .iconVariant=${this.iconVariant}
43
- .icon=${this.open ? this.openIcon : this.closedIcon}
44
- .label=${(this.open ? this.openLabel : this.closedLabel) || this.label}
45
- ?primary=${this.primary}
46
- ?secondary=${this.secondary}
47
- ?disabled=${this.disabled}
48
- ?dense=${this.dense}
49
- ?round=${this.round}
50
- ?trailingIcon=${this.trailingIcon}
51
- @click=${this.toggleOpenAnimation}
52
- class="${this.hasCustomToggle() ? "ft-collapsible--hidden" : ""}"
53
- aria-controls="ft-collapsible-content"
54
- aria-expanded="${this.open}"
55
- >
56
- ${(this.open ? this.openText : this.closedText) || this.text}
57
- </ft-button>
58
- <slot name="toggle"
59
- part="toggle"
60
- class="${this.hasCustomToggle() ? "" : "ft-collapsible--hidden"}"
61
- @click=${this.toggleOpenAnimation}
62
- @slotchange=${this.onCustomToggleSlotChange}></slot>
63
- <slot id="ft-collapsible-content"
64
- class="${classMap(contentClasses)}"
65
- @click=${this.onContentClick}
66
- @transitionend=${() => this.animationInProgress = false}></slot>
67
- `;
68
- }
69
- onCustomToggleSlotChange() {
70
- this.requestUpdate();
71
- }
72
- hasCustomToggle() {
73
- var _a, _b;
74
- return ((_b = (_a = this.toggleSlot) === null || _a === void 0 ? void 0 : _a.assignedNodes().length) !== null && _b !== void 0 ? _b : 0) !== 0;
75
- }
76
- toggleOpenAnimation() {
77
- this.animationInProgress = true;
78
- setTimeout(() => this.toggleOpen(), 5);
79
- this.animationEndSafeguard.run(() => this.animationInProgress = false);
80
- }
81
- toggleOpen() {
82
- this.open = !this.open;
83
- this.dispatchEvent(new CustomEvent("change", { detail: { open: this.open } }));
84
- }
85
- onContentClick(e) {
86
- if (eventPathContainsMatchingElement(e, this.closeCollapsibleMatchers, this)) {
87
- this.toggleOpenAnimation();
88
- }
89
- }
4
+ class FtCollapsible extends FtBaseCollapsible {
90
5
  }
91
6
  FtCollapsible.elementDefinitions = {
92
- "ft-button": FtButton,
7
+ "ft-or-ftds-button": FtButton,
93
8
  };
94
9
  FtCollapsible.styles = styles;
95
- __decorate([
96
- property({ type: Boolean, reflect: true })
97
- ], FtCollapsible.prototype, "open", void 0);
98
- __decorate([
99
- property({ type: Boolean })
100
- ], FtCollapsible.prototype, "animated", void 0);
101
- __decorate([
102
- jsonProperty([])
103
- ], FtCollapsible.prototype, "closeCollapsibleMatchers", void 0);
104
- __decorate([
105
- property()
106
- ], FtCollapsible.prototype, "label", void 0);
107
- __decorate([
108
- property()
109
- ], FtCollapsible.prototype, "openLabel", void 0);
110
- __decorate([
111
- property()
112
- ], FtCollapsible.prototype, "closedLabel", void 0);
113
- __decorate([
114
- property()
115
- ], FtCollapsible.prototype, "text", void 0);
116
- __decorate([
117
- property()
118
- ], FtCollapsible.prototype, "openText", void 0);
119
- __decorate([
120
- property()
121
- ], FtCollapsible.prototype, "closedText", void 0);
122
- __decorate([
123
- property({ type: Boolean })
124
- ], FtCollapsible.prototype, "primary", void 0);
125
- __decorate([
126
- property({ type: Boolean })
127
- ], FtCollapsible.prototype, "secondary", void 0);
128
- __decorate([
129
- property({ type: Boolean })
130
- ], FtCollapsible.prototype, "disabled", void 0);
131
- __decorate([
132
- property({ type: Boolean })
133
- ], FtCollapsible.prototype, "dense", void 0);
134
- __decorate([
135
- property({ type: Boolean })
136
- ], FtCollapsible.prototype, "round", void 0);
137
- __decorate([
138
- property()
139
- ], FtCollapsible.prototype, "tooltipPosition", void 0);
140
- __decorate([
141
- property()
142
- ], FtCollapsible.prototype, "iconVariant", void 0);
143
- __decorate([
144
- property()
145
- ], FtCollapsible.prototype, "openIcon", void 0);
146
- __decorate([
147
- property()
148
- ], FtCollapsible.prototype, "closedIcon", void 0);
149
- __decorate([
150
- property({ type: Boolean })
151
- ], FtCollapsible.prototype, "trailingIcon", void 0);
152
- __decorate([
153
- query("slot[name=\"toggle\"]")
154
- ], FtCollapsible.prototype, "toggleSlot", void 0);
155
- __decorate([
156
- query(".content")
157
- ], FtCollapsible.prototype, "content", void 0);
158
- __decorate([
159
- state()
160
- ], FtCollapsible.prototype, "animationInProgress", void 0);
161
10
  export { FtCollapsible };