@getpara/core-components 2.0.0-alpha.43 → 2.0.0-alpha.45
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/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-75cbc8ab.entry.js → p-39fe95ab.entry.js} +2 -2
- package/dist/capsule/{p-75cbc8ab.entry.js.map → p-39fe95ab.entry.js.map} +1 -1
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +3 -3
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +3 -3
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +3 -3
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/package.json +2 -2
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/appendLoaderExports.d.ts +0 -0
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
|
@@ -241,7 +241,7 @@ export class CpslPopover {
|
|
|
241
241
|
}
|
|
242
242
|
render() {
|
|
243
243
|
var _a;
|
|
244
|
-
return (h(Host, { key: '
|
|
244
|
+
return (h(Host, { key: 'b089bf481952dd5183b53929b194af4378b60f85', class: {
|
|
245
245
|
'open': this.open,
|
|
246
246
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
247
247
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -253,9 +253,9 @@ export class CpslPopover {
|
|
|
253
253
|
top: `${this.positionY}px`,
|
|
254
254
|
left: `${this.positionX}px`,
|
|
255
255
|
width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
|
|
256
|
-
} }, h("div", { key: '
|
|
256
|
+
} }, h("div", { key: 'ffd47e631fa98bda0d70b65e8dd770cb7b5ee0ba', id: "container", class: { container: true, open: this.open }, style: {
|
|
257
257
|
visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
|
|
258
|
-
} }, h("slot", { key: '
|
|
258
|
+
} }, h("slot", { key: 'f43b727062744846e24a775321dd1220e20595bc' }))));
|
|
259
259
|
}
|
|
260
260
|
static get is() { return "cpsl-popover"; }
|
|
261
261
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface.js';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement | null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n @State() hasSetInitialPosition = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n private startedInside = false;\n private startedWhenMounted = false;\n\n /**\n * ID for the element that the popover anchors to.\n */\n @Prop() anchorEl?: HTMLElement;\n\n /**\n * Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n /**\n * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /**\n * Whether or not to disable to popover.\n */\n @Prop() disabled: boolean;\n\n /**\n * Used internally to prevent select from blurring unintentionally.\n */\n @Prop() preventBlur: boolean;\n\n /**\n * Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n /**\n * If `true`, the popover will be aligned to the center of the trigger element.\n * Default is `false`.\n */\n @Prop() alignCenter: boolean = false;\n\n /**\n * Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n */\n @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n /**\n * ID for the element that triggers the popover to open.\n */\n @Prop() trigger: string;\n\n /**\n * Padding from edge of window for the popover container.\n */\n @Prop() windowPadding?: number = 16;\n\n /**\n * Emitted when the popover opens.\n */\n @Event() cpslOpen!: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes.\n */\n @Event() cpslClose!: EventEmitter<void>;\n\n /**\n * Call to close the popover manually.\n */\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n @Watch('alignCenter')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (typeof window !== 'undefined') {\n if (this.open) {\n window.addEventListener('mousedown', this.validateEventStart);\n window.addEventListener('touchstart', this.validateEventStart);\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('mousedown', this.validateEventStart);\n window.removeEventListener('touchstart', this.validateEventStart);\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!this.triggerEl) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /**\n * Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'click',\n callback: (e: Event) => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n if (!this.open) {\n this.present();\n }\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (anchorEl && typeof window !== 'undefined') {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n if (this.alignCenter) {\n this.positionX = left + (width / 2 - elWidth / 2);\n } else {\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private validateEventStart = event => {\n this.startedWhenMounted = !!this.triggerEl;\n this.startedInside = this.triggerEl.contains(event.target);\n this.present();\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n // Do nothing if `mousedown` or `touchstart` started inside ref element\n if (this.startedInside || !this.startedWhenMounted) return;\n\n // Do nothing if clicking ref's element or descendent elements\n if (!this.triggerEl || this.triggerEl.contains(event.target as Node)) return;\n\n if (this.open) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n\n // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n setTimeout(() => {\n this.setPosition();\n this.hasSetInitialPosition = true;\n }, 20);\n }\n };\n\n private close = () => {\n this.open = false;\n this.startedInside = false;\n this.cpslClose.emit();\n this.hasSetInitialPosition = false;\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{\n top: `${this.positionY}px`,\n left: `${this.positionX}px`,\n width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n }}\n >\n <div\n id=\"container\"\n class={{ container: true, open: this.open }}\n style={{\n visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface.js';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement | null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n @State() hasSetInitialPosition = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n private startedInside = false;\n private startedWhenMounted = false;\n\n /**\n * ID for the element that the popover anchors to.\n */\n @Prop() anchorEl?: HTMLElement;\n\n /**\n * Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n /**\n * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n */\n\n @Prop() autoWidth?: boolean = true;\n\n /**\n * Whether or not to disable to popover.\n */\n @Prop() disabled: boolean;\n\n /**\n * Used internally to prevent select from blurring unintentionally.\n */\n @Prop() preventBlur: boolean;\n\n /**\n * Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n /**\n * If `true`, the popover will be aligned to the center of the trigger element.\n * Default is `false`.\n */\n @Prop() alignCenter: boolean = false;\n\n /**\n * Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n */\n @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n /**\n * ID for the element that triggers the popover to open.\n */\n @Prop() trigger: string;\n\n /**\n * Padding from edge of window for the popover container.\n */\n @Prop() windowPadding?: number = 16;\n\n /**\n * Emitted when the popover opens.\n */\n @Event() cpslOpen!: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes.\n */\n @Event() cpslClose!: EventEmitter<void>;\n\n /**\n * Call to close the popover manually.\n */\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n @Watch('alignCenter')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (typeof window !== 'undefined') {\n if (this.open) {\n window.addEventListener('mousedown', this.validateEventStart);\n window.addEventListener('touchstart', this.validateEventStart);\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('mousedown', this.validateEventStart);\n window.removeEventListener('touchstart', this.validateEventStart);\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!this.triggerEl) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /**\n * Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'click',\n callback: (e: Event) => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n if (!this.open) {\n this.present();\n }\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (anchorEl && typeof window !== 'undefined') {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n if (this.alignCenter) {\n this.positionX = left + (width / 2 - elWidth / 2);\n } else {\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private validateEventStart = event => {\n this.startedWhenMounted = !!this.triggerEl;\n this.startedInside = this.triggerEl.contains(event.target);\n this.present();\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n // Do nothing if `mousedown` or `touchstart` started inside ref element\n if (this.startedInside || !this.startedWhenMounted) return;\n\n // Do nothing if clicking ref's element or descendent elements\n if (!this.triggerEl || this.triggerEl.contains(event.target as Node)) return;\n\n if (this.open) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n\n // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n setTimeout(() => {\n this.setPosition();\n this.hasSetInitialPosition = true;\n }, 20);\n }\n };\n\n private close = () => {\n this.open = false;\n this.startedInside = false;\n this.cpslClose.emit();\n this.hasSetInitialPosition = false;\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{\n top: `${this.positionY}px`,\n left: `${this.positionX}px`,\n width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n }}\n >\n <div\n id=\"container\"\n class={{ container: true, open: this.open }}\n style={{\n visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -17584,7 +17584,7 @@ const CpslPopover = class {
|
|
|
17584
17584
|
}
|
|
17585
17585
|
render() {
|
|
17586
17586
|
var _a;
|
|
17587
|
-
return (h(Host, { key: '
|
|
17587
|
+
return (h(Host, { key: 'b089bf481952dd5183b53929b194af4378b60f85', class: {
|
|
17588
17588
|
'open': this.open,
|
|
17589
17589
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
17590
17590
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -17596,9 +17596,9 @@ const CpslPopover = class {
|
|
|
17596
17596
|
top: `${this.positionY}px`,
|
|
17597
17597
|
left: `${this.positionX}px`,
|
|
17598
17598
|
width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
|
|
17599
|
-
} }, h("div", { key: '
|
|
17599
|
+
} }, h("div", { key: 'ffd47e631fa98bda0d70b65e8dd770cb7b5ee0ba', id: "container", class: { container: true, open: this.open }, style: {
|
|
17600
17600
|
visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
|
|
17601
|
-
} }, h("slot", { key: '
|
|
17601
|
+
} }, h("slot", { key: 'f43b727062744846e24a775321dd1220e20595bc' }))));
|
|
17602
17602
|
}
|
|
17603
17603
|
get el() { return getElement(this); }
|
|
17604
17604
|
static get watchers() { return {
|