@redvars/peacock 3.6.0 → 3.6.1

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 (58) hide show
  1. package/dist/code-highlighter.js +1 -1
  2. package/dist/code-highlighter.js.map +1 -1
  3. package/dist/custom-elements-jsdocs.json +928 -96
  4. package/dist/custom-elements.json +1294 -379
  5. package/dist/{flow-designer-dZnLJOQT.js → flow-designer-DvTUrDp5.js} +3 -3
  6. package/dist/{flow-designer-dZnLJOQT.js.map → flow-designer-DvTUrDp5.js.map} +1 -1
  7. package/dist/{flow-designer-node-XMe-jlKg.js → flow-designer-node-BWrPuxAR.js} +2 -2
  8. package/dist/flow-designer-node-BWrPuxAR.js.map +1 -0
  9. package/dist/flow-designer-node.js +1 -1
  10. package/dist/flow-designer.js +2 -2
  11. package/dist/html-editor.js +27245 -87
  12. package/dist/html-editor.js.map +1 -1
  13. package/dist/index.js +3 -3
  14. package/dist/modal.js +1 -7
  15. package/dist/modal.js.map +1 -1
  16. package/dist/{navigation-rail-DyO0oAZU.js → navigation-rail-DTTkqohi.js} +763 -214
  17. package/dist/navigation-rail-DTTkqohi.js.map +1 -0
  18. package/dist/peacock-loader.js +12 -3
  19. package/dist/peacock-loader.js.map +1 -1
  20. package/dist/src/html-editor/html-editor.d.ts +44 -11
  21. package/dist/src/index.d.ts +2 -0
  22. package/dist/src/list/index.d.ts +2 -0
  23. package/dist/src/list/list-item.d.ts +35 -0
  24. package/dist/src/list/list.d.ts +28 -0
  25. package/dist/src/modal/modal.d.ts +1 -7
  26. package/dist/src/navigation-rail/navigation-rail.d.ts +3 -7
  27. package/dist/src/number-field/number-field.d.ts +2 -2
  28. package/dist/src/svg/index.d.ts +1 -0
  29. package/dist/src/svg/svg.d.ts +38 -0
  30. package/dist/src/toolbar/toolbar.d.ts +3 -3
  31. package/dist/toolbar.js +3 -3
  32. package/dist/toolbar.js.map +1 -1
  33. package/dist/tsconfig.tsbuildinfo +1 -1
  34. package/package.json +7 -1
  35. package/readme.md +3 -3
  36. package/src/code-highlighter/code-highlighter.ts +1 -1
  37. package/src/flow-designer/flow-designer-node.ts +1 -1
  38. package/src/html-editor/html-editor.scss +44 -2
  39. package/src/html-editor/html-editor.ts +309 -94
  40. package/src/index.ts +2 -1
  41. package/src/list/index.ts +2 -0
  42. package/src/list/list-item.scss +111 -0
  43. package/src/list/list-item.ts +175 -0
  44. package/src/list/list.scss +24 -0
  45. package/src/list/list.ts +51 -0
  46. package/src/modal/modal.ts +1 -7
  47. package/src/navigation-rail/navigation-rail-item.scss +7 -38
  48. package/src/navigation-rail/navigation-rail-item.ts +1 -2
  49. package/src/navigation-rail/navigation-rail.scss +17 -21
  50. package/src/navigation-rail/navigation-rail.ts +6 -9
  51. package/src/number-field/number-field.ts +2 -2
  52. package/src/peacock-loader.ts +12 -0
  53. package/src/svg/index.ts +1 -0
  54. package/src/svg/svg.scss +91 -0
  55. package/src/svg/svg.ts +160 -0
  56. package/src/toolbar/toolbar.ts +3 -3
  57. package/dist/flow-designer-node-XMe-jlKg.js.map +0 -1
  58. package/dist/navigation-rail-DyO0oAZU.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- export { F as FlowDesigner, I as Icon } from './flow-designer-dZnLJOQT.js';
2
- export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Checkbox, d as Chip, e as CircularProgress, f as Container, D as DatePicker, g as Divider, E as Elevation, h as EmptyState, F as Field, i as FocusRing, I as Image, j as Input, L as LinearProgress, k as Link, M as Menu, l as MenuItem, N as NavigationRail, m as NavigationRailItem, n as NumberField, P as Pagination, R as Radio, o as Ripple, S as SegmentedButton, p as SegmentedButtonGroup, q as Select, r as SelectOptionElement, s as SidebarMenu, t as SidebarMenuItem, u as SidebarSubMenu, v as Skeleton, w as Slider, x as Snackbar, y as Spinner, z as SubMenu, G as Switch, T as Tab, H as TabGroup, J as TabPanel, K as Table, O as Tabs, Q as Tag, U as Textarea, V as TimePicker, W as Tooltip, X as UrlField } from './navigation-rail-DyO0oAZU.js';
1
+ export { F as FlowDesigner, I as Icon } from './flow-designer-DvTUrDp5.js';
2
+ export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Checkbox, d as Chip, e as CircularProgress, f as Container, D as DatePicker, g as Divider, E as Elevation, h as EmptyState, F as Field, i as FocusRing, I as Image, j as Input, L as LinearProgress, k as Link, l as List, m as ListItem, M as Menu, n as MenuItem, N as NavigationRail, o as NavigationRailItem, p as NumberField, P as Pagination, R as Radio, q as Ripple, S as SegmentedButton, r as SegmentedButtonGroup, s as Select, t as SelectOptionElement, u as SidebarMenu, v as SidebarMenuItem, w as SidebarSubMenu, x as Skeleton, y as Slider, z as Snackbar, G as Spinner, H as SubMenu, J as Svg, K as Switch, T as Tab, O as TabGroup, Q as TabPanel, U as Table, V as Tabs, W as Tag, X as Textarea, Y as TimePicker, Z as Tooltip, _ as UrlField } from './navigation-rail-DTTkqohi.js';
3
3
  export { Clock } from './clock.js';
4
4
  export { Button } from './button.js';
5
5
  export { ButtonGroup } from './button-group.js';
@@ -31,7 +31,7 @@ export { Calendar } from './calendar.js';
31
31
  export { CalendarColumnView } from './calendar-column-view.js';
32
32
  export { CalendarMonthView } from './calendar-month-view.js';
33
33
  export { Canvas } from './canvas.js';
34
- export { F as FlowDesignerNode } from './flow-designer-node-XMe-jlKg.js';
34
+ export { F as FlowDesignerNode } from './flow-designer-node-BWrPuxAR.js';
35
35
  export { ConditionBuilder } from './condition-builder.js';
36
36
  export { CbPredicate } from './cb-predicate.js';
37
37
  export { CbCompoundExpression } from './cb-compound-expression.js';
package/dist/modal.js CHANGED
@@ -227,13 +227,7 @@ var css_248z = i`@charset "UTF-8";
227
227
  *
228
228
  * @example
229
229
  * ```html
230
- * <wc-modal open heading="Confirm Action">
231
- * <p>Are you sure you want to continue?</p>
232
- * <div slot="footer">
233
- * <wc-button variant="text">Cancel</wc-button>
234
- * <wc-button>Confirm</wc-button>
235
- * </div>
236
- * </wc-modal>
230
+ * MODAL
237
231
  * ```
238
232
  * @tags overlay, dialog, feedback
239
233
  */
package/dist/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * <wc-modal open heading=\"Confirm Action\">\n * <p>Are you sure you want to continue?</p>\n * <div slot=\"footer\">\n * <wc-button variant=\"text\">Cancel</wc-button>\n * <wc-button>Confirm</wc-button>\n * </div>\n * </wc-modal>\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}
1
+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}