@redvars/peacock 3.6.3 → 3.8.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/dist/ButtonConstants-D06bY4uy.js +114 -0
- package/dist/ButtonConstants-D06bY4uy.js.map +1 -0
- package/dist/{BaseHyperlinkMixin-BNuwbiEf.js → NativeHyperlinkMixin-DrYXyfMQ.js} +8 -10
- package/dist/NativeHyperlinkMixin-DrYXyfMQ.js.map +1 -0
- package/dist/assets/components.css +1 -1
- package/dist/assets/components.css.map +1 -1
- package/dist/assets/styles.css +1 -1
- package/dist/assets/styles.css.map +1 -1
- package/dist/{button-colors-Cg6oxiz-.js → button-colors-DSuBHd-i.js} +200 -186
- package/dist/button-colors-DSuBHd-i.js.map +1 -0
- package/dist/button-group.js +8 -8
- package/dist/button-group.js.map +1 -1
- package/dist/button.js +224 -124
- package/dist/button.js.map +1 -1
- package/dist/calendar-column-view.js +0 -1
- package/dist/calendar-column-view.js.map +1 -1
- package/dist/calendar-month-view.js +0 -1
- package/dist/calendar-month-view.js.map +1 -1
- package/dist/card-content.js +0 -1
- package/dist/card-content.js.map +1 -1
- package/dist/card.js +96 -90
- package/dist/card.js.map +1 -1
- package/dist/cb-compound-expression.js +4 -1
- package/dist/cb-compound-expression.js.map +1 -1
- package/dist/cb-divider.js +0 -1
- package/dist/cb-divider.js.map +1 -1
- package/dist/cb-expression.js +0 -2
- package/dist/cb-expression.js.map +1 -1
- package/dist/cb-predicate.js +0 -1
- package/dist/cb-predicate.js.map +1 -1
- package/dist/code-highlighter.js +23 -6
- package/dist/code-highlighter.js.map +1 -1
- package/dist/custom-elements-jsdocs.json +5102 -18408
- package/dist/custom-elements.json +19630 -20205
- package/dist/fab.js +181 -117
- package/dist/fab.js.map +1 -1
- package/dist/{flow-designer-node-9Bqyn6qx.js → flow-designer-node-BWrPuxAR.js} +1 -2
- package/dist/flow-designer-node-BWrPuxAR.js.map +1 -0
- package/dist/flow-designer-node.js +1 -1
- package/dist/flow-designer.js +5 -5
- package/dist/icon-button-CYqrnMnF.js +318 -0
- package/dist/icon-button-CYqrnMnF.js.map +1 -0
- package/dist/index.js +8 -8
- package/dist/{navigation-rail-DAUuJ_Yp.js → navigation-rail-CM_svs5_.js} +511 -295
- package/dist/navigation-rail-CM_svs5_.js.map +1 -0
- package/dist/observe-slot-change-D8Xg-kSS.js +60 -0
- package/dist/observe-slot-change-D8Xg-kSS.js.map +1 -0
- package/dist/peacock-loader.js +7 -7
- package/dist/peacock-loader.js.map +1 -1
- package/dist/popover-content.js +0 -1
- package/dist/popover-content.js.map +1 -1
- package/dist/search.js +4 -1
- package/dist/search.js.map +1 -1
- package/dist/src/__controllers/attachable-controller.d.ts +109 -0
- package/dist/src/__mixins/{BaseButtonMixin.d.ts → NativeButtonMixin.d.ts} +3 -3
- package/dist/src/__mixins/{BaseHyperlinkMixin.d.ts → NativeHyperlinkMixin.d.ts} +3 -4
- package/dist/src/__utils/is-link.d.ts +1 -0
- package/dist/src/__utils/observe-slot-change.d.ts +1 -1
- package/dist/src/accordion/accordion-item.d.ts +0 -1
- package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +0 -1
- package/dist/src/button/ButtonConstants.d.ts +1 -0
- package/dist/src/button/GroupButtonInterface.d.ts +4 -0
- package/dist/src/button/button/button.d.ts +32 -7
- package/dist/src/button/button-group/button-group.d.ts +2 -1
- package/dist/src/button/icon-button/icon-button.d.ts +26 -5
- package/dist/src/button/index.d.ts +1 -1
- package/dist/src/calendar/calendar-column-view.d.ts +0 -1
- package/dist/src/calendar/calendar-month-view.d.ts +0 -1
- package/dist/src/card/card-content.d.ts +0 -1
- package/dist/src/card/card.d.ts +9 -6
- package/dist/src/chip/chip/chip.d.ts +22 -3
- package/dist/src/condition-builder/cb-compound-expression.d.ts +0 -1
- package/dist/src/condition-builder/cb-divider.d.ts +0 -1
- package/dist/src/condition-builder/cb-expression.d.ts +0 -1
- package/dist/src/condition-builder/cb-predicate.d.ts +0 -1
- package/dist/src/fab/fab.d.ts +20 -6
- package/dist/src/flow-designer/flow-designer-node.d.ts +0 -1
- package/dist/src/focus-ring/focus-ring.d.ts +26 -20
- package/dist/src/item/item.d.ts +2 -1
- package/dist/src/link/link.d.ts +1 -1
- package/dist/src/list/list-item.d.ts +1 -2
- package/dist/src/menu/menu-item/menu-item.d.ts +1 -2
- package/dist/src/menu/sub-menu/sub-menu.d.ts +0 -1
- package/dist/src/navigation-rail/navigation-rail-item.d.ts +0 -2
- package/dist/src/popover/popover-content.d.ts +0 -1
- package/dist/src/ripple/ripple.d.ts +9 -1
- package/dist/src/segmented-button/segmented-button.d.ts +0 -1
- package/dist/src/select/option.d.ts +0 -1
- package/dist/src/sidebar-menu/sidebar-menu-item.d.ts +0 -1
- package/dist/src/sidebar-menu/sidebar-sub-menu.d.ts +0 -1
- package/dist/src/tabs/tab-panel.d.ts +0 -1
- package/dist/src/tabs/tab.d.ts +4 -6
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -2
- package/readme.md +2 -2
- package/scss/components.scss +0 -1
- package/scss/mixin.scss +10 -13
- package/scss/styles.scss +1 -3
- package/src/__controllers/attachable-controller.ts +198 -0
- package/src/__mixins/NativeButtonMixin.ts +87 -0
- package/src/__mixins/{BaseHyperlinkMixin.ts → NativeHyperlinkMixin.ts} +15 -15
- package/src/__utils/is-link.ts +3 -0
- package/src/__utils/observe-slot-change.ts +46 -14
- package/src/accordion/accordion-item.scss +1 -1
- package/src/accordion/accordion-item.ts +0 -1
- package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts +0 -1
- package/src/button/ButtonConstants.ts +1 -0
- package/src/button/GroupButtonInterface.ts +4 -0
- package/src/button/button/button-colors.scss +2 -2
- package/src/button/button/button-layers.scss +124 -0
- package/src/button/button/button-sizes.scss +20 -42
- package/src/button/button/button.scss +71 -169
- package/src/button/button/button.ts +229 -78
- package/src/button/button/only-button.scss +13 -0
- package/src/button/button-group/button-group.ts +59 -17
- package/src/button/icon-button/icon-button-sizes.scss +6 -21
- package/src/button/icon-button/icon-button.ts +198 -93
- package/src/button/index.ts +1 -1
- package/src/calendar/calendar-column-view.ts +0 -1
- package/src/calendar/calendar-month-view.ts +0 -1
- package/src/card/card-content.ts +2 -3
- package/src/card/card.scss +87 -95
- package/src/card/card.ts +62 -60
- package/src/chip/chip/chip.scss +65 -70
- package/src/chip/chip/chip.ts +155 -56
- package/src/code-highlighter/code-highlighter.scss +1 -1
- package/src/code-highlighter/code-highlighter.ts +20 -5
- package/src/condition-builder/cb-compound-expression.scss +4 -0
- package/src/condition-builder/cb-compound-expression.ts +0 -1
- package/src/condition-builder/cb-divider.ts +0 -1
- package/src/condition-builder/cb-expression.scss +0 -1
- package/src/condition-builder/cb-expression.ts +0 -1
- package/src/condition-builder/cb-predicate.ts +0 -1
- package/src/elevation/elevation.scss +5 -1
- package/src/fab/fab-colors.scss +2 -2
- package/src/fab/fab-sizes.scss +24 -34
- package/src/fab/fab.scss +77 -71
- package/src/fab/fab.ts +141 -65
- package/src/flow-designer/flow-designer-node.ts +0 -1
- package/src/focus-ring/focus-ring.ts +81 -72
- package/src/item/item.scss +77 -66
- package/src/item/item.ts +61 -39
- package/src/link/link.scss +1 -10
- package/src/link/link.ts +4 -2
- package/src/list/list-item.ts +8 -8
- package/src/menu/menu-item/menu-item.ts +17 -8
- package/src/menu/sub-menu/sub-menu.ts +0 -1
- package/src/navigation-rail/navigation-rail-item.scss +5 -0
- package/src/navigation-rail/navigation-rail-item.ts +10 -15
- package/src/peacock-loader.ts +1 -1
- package/src/popover/popover-content.ts +0 -1
- package/src/ripple/ripple.ts +52 -20
- package/src/search/search.scss +3 -0
- package/src/segmented-button/segmented-button.ts +0 -1
- package/src/select/option.ts +0 -1
- package/src/sidebar-menu/sidebar-menu-item.ts +0 -1
- package/src/sidebar-menu/sidebar-sub-menu.ts +0 -1
- package/src/skeleton/skeleton.scss +5 -1
- package/src/tabs/tab-panel.ts +0 -1
- package/src/tabs/tab.ts +60 -70
- package/src/text/text.css-component.scss +3 -21
- package/src/tooltip/tooltip.scss +5 -8
- package/src/tooltip/tooltip.ts +1 -2
- package/dist/BaseButton-BNFAYn-S.js +0 -219
- package/dist/BaseButton-BNFAYn-S.js.map +0 -1
- package/dist/BaseHyperlinkMixin-BNuwbiEf.js.map +0 -1
- package/dist/button-colors-Cg6oxiz-.js.map +0 -1
- package/dist/flow-designer-node-9Bqyn6qx.js.map +0 -1
- package/dist/icon-button-AdJBEoNy.js +0 -251
- package/dist/icon-button-AdJBEoNy.js.map +0 -1
- package/dist/navigation-rail-DAUuJ_Yp.js.map +0 -1
- package/dist/observe-slot-change-BGJfgg2E.js +0 -31
- package/dist/observe-slot-change-BGJfgg2E.js.map +0 -1
- package/dist/src/button/BaseButton.d.ts +0 -28
- package/dist/src/focus-ring/FocusAttachableController.d.ts +0 -8
- package/src/__mixins/BaseButtonMixin.ts +0 -83
- package/src/button/BaseButton.ts +0 -113
- package/src/focus-ring/FocusAttachableController.ts +0 -28
- package/src/popover/tooltip.css-component.scss +0 -19
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
function hasMeaningfulContent(slotElement) {
|
|
2
|
-
const nodes = slotElement?.assignedNodes({ flatten: true }) || [];
|
|
3
|
-
for (const node of nodes) {
|
|
4
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
5
|
-
return true;
|
|
6
|
-
}
|
|
7
|
-
if (node.nodeType === Node.TEXT_NODE &&
|
|
8
|
-
(node.textContent?.trim().length || 0) > 0) {
|
|
9
|
-
return true;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
return false;
|
|
13
|
-
}
|
|
14
|
-
function observerSlotChangesWithCallback(slot, callback) {
|
|
15
|
-
const observer = new MutationObserver(() => {
|
|
16
|
-
callback(hasMeaningfulContent(slot));
|
|
17
|
-
});
|
|
18
|
-
const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
19
|
-
assignedNodes.forEach(node => {
|
|
20
|
-
observer.observe(node, {
|
|
21
|
-
attributes: true,
|
|
22
|
-
childList: true,
|
|
23
|
-
characterData: true,
|
|
24
|
-
subtree: true,
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
|
-
callback(hasMeaningfulContent(slot));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { observerSlotChangesWithCallback as o };
|
|
31
|
-
//# sourceMappingURL=observe-slot-change-BGJfgg2E.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"observe-slot-change-BGJfgg2E.js","sources":["../../src/__utils/observe-slot-change.ts"],"sourcesContent":["function hasMeaningfulContent(slotElement: HTMLSlotElement | null) {\n const nodes = slotElement?.assignedNodes({ flatten: true }) || [];\n\n for (const node of nodes) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n if (\n node.nodeType === Node.TEXT_NODE &&\n (node.textContent?.trim().length || 0) > 0\n ) {\n return true;\n }\n }\n\n return false;\n}\n\nexport function observerSlotChangesWithCallback(\n slot: HTMLSlotElement | null,\n callback: (hasContent: boolean) => void,\n) {\n const observer = new MutationObserver(() => {\n callback(hasMeaningfulContent(slot));\n });\n\n const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];\n assignedNodes.forEach(node => {\n observer.observe(node, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true,\n });\n });\n\n callback(hasMeaningfulContent(slot));\n}"],"names":[],"mappings":"AAAA,SAAS,oBAAoB,CAAC,WAAmC,EAAA;AAC/D,IAAA,MAAM,KAAK,GAAG,WAAW,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;AAEjE,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;AACvC,YAAA,OAAO,IAAI;QACb;AACA,QAAA,IACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS;AAChC,YAAA,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAC1C;AACA,YAAA,OAAO,IAAI;QACb;IACF;AAEA,IAAA,OAAO,KAAK;AACd;AAEM,SAAU,+BAA+B,CAC7C,IAA4B,EAC5B,QAAuC,EAAA;AAEvC,IAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,QAAA,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACtC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,IAAI,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;AAClE,IAAA,aAAa,CAAC,OAAO,CAAC,IAAI,IAAG;AAC3B,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;AACJ,IAAA,CAAC,CAAC;AAEF,IAAA,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACtC;;;;"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { LitElement, nothing } from 'lit';
|
|
2
|
-
declare const BaseButton_base: typeof LitElement & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseHyperlinkMixin.js").BaseHyperlinkInterface> & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseButtonMixin.js").BaseButtonInterface>;
|
|
3
|
-
export declare class BaseButton extends BaseButton_base {
|
|
4
|
-
protected static readonly DISABLED_REASON_ID = "disabled-reason";
|
|
5
|
-
color?: string;
|
|
6
|
-
variant?: string;
|
|
7
|
-
skeleton: boolean;
|
|
8
|
-
toggle: boolean;
|
|
9
|
-
selected: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
|
|
12
|
-
*/
|
|
13
|
-
throttleDelay: number;
|
|
14
|
-
tooltip?: string;
|
|
15
|
-
/**
|
|
16
|
-
* States
|
|
17
|
-
*/
|
|
18
|
-
isPressed: boolean;
|
|
19
|
-
readonly buttonElement: HTMLElement | null;
|
|
20
|
-
connectedCallback(): void;
|
|
21
|
-
disconnectedCallback(): void;
|
|
22
|
-
__handlePress: (event: KeyboardEvent | MouseEvent) => void;
|
|
23
|
-
__dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
|
|
24
|
-
__dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
|
|
25
|
-
__renderDisabledReason(softDisabled: boolean): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
26
|
-
__renderTooltip(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
27
|
-
}
|
|
28
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
-
export declare class FocusAttachableController implements ReactiveController {
|
|
3
|
-
host: ReactiveControllerHost;
|
|
4
|
-
getControlElement: () => HTMLElement;
|
|
5
|
-
visible: boolean;
|
|
6
|
-
constructor(host: ReactiveControllerHost, getControlElement: () => HTMLElement);
|
|
7
|
-
hostConnected(): void;
|
|
8
|
-
}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { property } from 'lit/decorators.js';
|
|
3
|
-
import type { MixinConstructor } from './MixinConstructor.js';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* 1. Define an interface for the members the mixin adds.
|
|
8
|
-
* This makes the type annotation much cleaner.
|
|
9
|
-
*/
|
|
10
|
-
export interface BaseButtonInterface {
|
|
11
|
-
htmlType: 'button' | 'submit' | 'reset';
|
|
12
|
-
disabled: boolean;
|
|
13
|
-
softDisabled: boolean;
|
|
14
|
-
disabledReason: string;
|
|
15
|
-
form: string;
|
|
16
|
-
name: string;
|
|
17
|
-
value: string;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* 2. Apply the type annotation to the variable.
|
|
22
|
-
*/
|
|
23
|
-
const BaseButtonMixin: <T extends MixinConstructor<LitElement>>(superclass: T) => T & MixinConstructor<BaseButtonInterface> = <T extends MixinConstructor<LitElement>>(superclass: T) => {
|
|
24
|
-
// Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous
|
|
25
|
-
// prevents the "__childPart" visibility error.
|
|
26
|
-
class BaseButtonElement extends superclass implements BaseButtonInterface {
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* The type of the underlying `<button>` element. Maps to the native `type` attribute.
|
|
30
|
-
* Possible values are `"button"`, `"submit"`, `"reset"`. Defaults to `"button"`.
|
|
31
|
-
*/
|
|
32
|
-
@property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
|
|
33
|
-
'button';
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.
|
|
37
|
-
*/
|
|
38
|
-
@property({ type: Boolean, reflect: true })
|
|
39
|
-
disabled: boolean = false;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.
|
|
43
|
-
* Use this in combination with `disabledReason` to communicate why the button is unavailable.
|
|
44
|
-
* Reflects to the `soft-disabled` attribute. Defaults to `false`.
|
|
45
|
-
*/
|
|
46
|
-
@property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
|
|
47
|
-
softDisabled: boolean = false;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* A human-readable explanation of why the button is disabled or soft-disabled.
|
|
51
|
-
* Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.
|
|
52
|
-
* Maps to the `disabled-reason` attribute.
|
|
53
|
-
*/
|
|
54
|
-
@property({ attribute: 'disabled-reason' })
|
|
55
|
-
disabledReason: string = '';
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* The `id` of the `<form>` element to associate the button with.
|
|
59
|
-
* If omitted, the button is associated with its nearest ancestor form.
|
|
60
|
-
* Maps to the native `form` attribute.
|
|
61
|
-
*/
|
|
62
|
-
@property()
|
|
63
|
-
form: string = '';
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* The name of the button, submitted as part of a name/value pair when the associated form is submitted.
|
|
67
|
-
* Maps to the native `name` attribute.
|
|
68
|
-
*/
|
|
69
|
-
@property()
|
|
70
|
-
name: string = '';
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* The value of the button, submitted as part of a name/value pair when the associated form is submitted.
|
|
74
|
-
* Maps to the native `value` attribute.
|
|
75
|
-
*/
|
|
76
|
-
@property()
|
|
77
|
-
value: string = '';
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return BaseButtonElement as T & MixinConstructor<BaseButtonInterface>;
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
export default BaseButtonMixin;
|
package/src/button/BaseButton.ts
DELETED
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { html, LitElement, nothing } from 'lit';
|
|
2
|
-
import { property, query, state } from 'lit/decorators.js';
|
|
3
|
-
import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
|
|
4
|
-
import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
|
|
5
|
-
import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export class BaseButton extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
|
|
10
|
-
protected static readonly DISABLED_REASON_ID = 'disabled-reason';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
color?: string;
|
|
14
|
-
|
|
15
|
-
variant?: string;
|
|
16
|
-
|
|
17
|
-
@property({ type: Boolean, reflect: true }) skeleton: boolean = false;
|
|
18
|
-
|
|
19
|
-
@property({ type: Boolean, reflect: true }) toggle: boolean = false;
|
|
20
|
-
|
|
21
|
-
@property({ type: Boolean, reflect: true }) selected: boolean = false;
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
|
|
25
|
-
*/
|
|
26
|
-
@property() throttleDelay = 200;
|
|
27
|
-
|
|
28
|
-
@property() tooltip?: string;
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* States
|
|
32
|
-
*/
|
|
33
|
-
@state()
|
|
34
|
-
isPressed = false;
|
|
35
|
-
|
|
36
|
-
@query('.button') readonly buttonElement!: HTMLElement | null;
|
|
37
|
-
|
|
38
|
-
override connectedCallback() {
|
|
39
|
-
super.connectedCallback();
|
|
40
|
-
this.addEventListener('click', this.__dispatchClickWithThrottle);
|
|
41
|
-
window.addEventListener('mouseup', this.__handlePress);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
override disconnectedCallback() {
|
|
45
|
-
window.removeEventListener('mouseup', this.__handlePress);
|
|
46
|
-
this.removeEventListener('click', this.__dispatchClickWithThrottle);
|
|
47
|
-
super.disconnectedCallback();
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
__handlePress = (event: KeyboardEvent | MouseEvent) => {
|
|
51
|
-
if (this.disabled || this.skeleton || this.softDisabled) return;
|
|
52
|
-
if (
|
|
53
|
-
event instanceof KeyboardEvent &&
|
|
54
|
-
event.type === 'keydown' &&
|
|
55
|
-
(event.key === 'Enter' || event.key === ' ')
|
|
56
|
-
) {
|
|
57
|
-
this.isPressed = true;
|
|
58
|
-
} else if (event.type === 'mousedown') {
|
|
59
|
-
this.isPressed = true;
|
|
60
|
-
} else {
|
|
61
|
-
this.isPressed = false;
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
__dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
|
|
66
|
-
event => {
|
|
67
|
-
this.__dispatchClick(event);
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
__dispatchClick = (event: MouseEvent | KeyboardEvent) => {
|
|
71
|
-
// If the button is soft-disabled or a disabled link, we need to explicitly
|
|
72
|
-
// prevent the click from propagating to other event listeners as well as
|
|
73
|
-
// prevent the default action.
|
|
74
|
-
if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
|
|
75
|
-
event.stopImmediatePropagation();
|
|
76
|
-
event.preventDefault();
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
if (!isActivationClick(event) || !this.buttonElement) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (this.toggle) {
|
|
85
|
-
this.selected = !this.selected;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
this.focus();
|
|
89
|
-
dispatchActivationClick(this.buttonElement);
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
__renderDisabledReason(softDisabled: boolean) {
|
|
95
|
-
if (softDisabled)
|
|
96
|
-
return html`<div
|
|
97
|
-
id=${BaseButton.DISABLED_REASON_ID}
|
|
98
|
-
role="tooltip"
|
|
99
|
-
aria-label=${this.disabledReason}
|
|
100
|
-
class="screen-reader-only"
|
|
101
|
-
>
|
|
102
|
-
${this.disabledReason}
|
|
103
|
-
</div>`;
|
|
104
|
-
return nothing;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
__renderTooltip() {
|
|
108
|
-
if (this.tooltip) {
|
|
109
|
-
return html`<wc-tooltip for="button">${this.tooltip}</wc-tooltip>`;
|
|
110
|
-
}
|
|
111
|
-
return nothing;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
-
|
|
3
|
-
export class FocusAttachableController implements ReactiveController {
|
|
4
|
-
host: ReactiveControllerHost;
|
|
5
|
-
|
|
6
|
-
getControlElement: () => HTMLElement;
|
|
7
|
-
|
|
8
|
-
visible = false;
|
|
9
|
-
|
|
10
|
-
constructor(
|
|
11
|
-
host: ReactiveControllerHost,
|
|
12
|
-
getControlElement: () => HTMLElement,
|
|
13
|
-
) {
|
|
14
|
-
(this.host = host).addController(this);
|
|
15
|
-
this.getControlElement = getControlElement;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
hostConnected() {
|
|
19
|
-
if (this.getControlElement) {
|
|
20
|
-
const element = this.getControlElement();
|
|
21
|
-
element.addEventListener('focus', () => {
|
|
22
|
-
// @ts-ignore
|
|
23
|
-
this.host.handleEvent();
|
|
24
|
-
this.host.requestUpdate();
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
@use "../../scss/mixin";
|
|
2
|
-
@use "sass:string";
|
|
3
|
-
|
|
4
|
-
@include mixin.base-styles;
|
|
5
|
-
|
|
6
|
-
.tooltip {
|
|
7
|
-
display: inline-block;
|
|
8
|
-
@include mixin.get-typography(body-small);
|
|
9
|
-
max-width: 17.5rem;
|
|
10
|
-
padding-inline: var(--spacing-100);
|
|
11
|
-
padding-block: var(--spacing-050);
|
|
12
|
-
color: var(--color-inverse-on-surface);
|
|
13
|
-
background-color: var(--color-inverse-surface);
|
|
14
|
-
border-radius: var(--shape-corner-extra-small);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.tooltip-link {
|
|
18
|
-
border-bottom: 1px dashed var(--color-on-surface);
|
|
19
|
-
}
|