@redvars/peacock 3.6.3 → 3.8.0

package/dist/flow-designer-node-9Bqyn6qx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-designer-node-9Bqyn6qx.js","sources":["../../src/flow-designer/flow-designer-node.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './flow-designer.scss';\nimport type { WorkflowNode } from './types.js';\n\n/**\n * Individual node component for flow designer\n * Renders a single workflow node with customizable slot templates\n *\n * @tag wc-flow-designer-node\n * @rawTag flow-designer-node\n * @parentRawTag flow-designer\n * @wip true\n */\n@IndividualComponent\nexport class FlowDesignerNode extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The workflow node to render\n   */\n  @property({ type: Object })\n  node: WorkflowNode = { id: '', type: 'action', label: '' };\n\n  /**\n   * Whether this node is currently selected\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'selected' })\n  isSelected: boolean = false;\n\n  /**\n   * Whether this node is in edit mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editing' })\n  isEditing: boolean = false;\n\n  /**\n   * Whether this node is disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether to show the delete button\n   */\n  @property({ type: Boolean, attribute: 'show-delete' })\n  showDelete: boolean = true;\n\n  private _handleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-click', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDoubleClick = () => {\n    this.dispatchEvent(\n      new CustomEvent('node-edit-start', {\n        detail: { nodeId: this.node.id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private _handleDelete = (e: Event) => {\n    e.stopPropagation();\n    if (confirm(`Delete \"${this.node.label}\"?`)) {\n      this.dispatchEvent(\n        new CustomEvent('node-delete', {\n          detail: { nodeId: this.node.id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  };\n\n  private _handleMouseEnter = () => {\n    // Node hover state handled via CSS\n  };\n\n  private _handleMouseLeave = () => {\n    // Node hover state handled via CSS\n  };\n\n  render() {\n    const { node, isSelected, isEditing, disabled } = this;\n    const nodeType = node.type || 'action';\n\n    return html`\n      <div\n        class=\"node-card ${nodeType}\"\n        ?selected=${isSelected}\n        ?editing=${isEditing}\n        ?disabled=${disabled}\n        @click=${this._handleClick}\n        @dblclick=${this._handleDoubleClick}\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') this._handleClick();\n        }}\n      >\n        <!-- Customizable header slot -->\n        <slot name=\"${nodeType}-header\">\n          ${this._renderDefaultHeader()}\n        </slot>\n\n        <!-- Customizable body slot -->\n        <slot name=\"${nodeType}-body\">${this._renderDefaultBody()}</slot>\n\n        <!-- Action buttons -->\n        ${this.isEditing\n          ? html`\n              <div class=\"node-actions\">\n                <button class=\"btn-sm\" @click=${this._handleDelete}>\n                  Delete\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _renderDefaultHeader() {\n    const { node } = this;\n    const iconMap: Record<string, string> = {\n      trigger: 'play-circle',\n      action: 'check-circle',\n      decision: 'help-circle',\n      loop_start: 'repeat',\n      loop_end: 'repeat',\n      fork: 'git-branch',\n      join: 'git-merge',\n    };\n\n    const icon = iconMap[node.type] || 'activity';\n\n    return html`\n      <div class=\"node-header\">\n        <wc-icon provider=\"carbon\" name=${icon} class=\"node-icon\"></wc-icon>\n        <span class=\"node-title\">${node.label}</span>\n      </div>\n    `;\n  }\n\n  private _renderDefaultBody() {\n    const { node } = this;\n    return html`\n      <div class=\"node-body\">\n        ${node.description\n          ? html`<p class=\"node-description\">${node.description}</p>`\n          : nothing}\n        <div class=\"node-metadata\">\n          <span class=\"node-type-tag\">${node.type}</span>\n          ${node.id ? html`<span class=\"node-id\">${node.id}</span>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-flow-designer-node': FlowDesignerNode;\n  }\n}\n"],"names":["LitElement","html","nothing","styles","property"],"mappings":"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"}

package/dist/icon-button-AdJBEoNy.js

@@ -1,251 +0,0 @@
-import { a as i, _ as __decorate, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { e } from './class-map-YU7g0o3B.js';
-import { B as BaseButton, o, s as spread } from './BaseButton-BNFAYn-S.js';
-import { c as css_248z$1, a as css_248z$2 } from './button-colors-Cg6oxiz-.js';
-import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
-
-var css_248z = i`.button {
-  --private-button-container-padding: 0.75rem;
-  width: var(--button-height);
-  --private-button-container-padding: 0;
-}
-
-:host([size=xs]),
-:host([size=extra-small]) {
-  --button-height: 2rem;
-}
-
-:host([size=xs]) .button,
-:host([size=extra-small]) .button {
-  --private-button-icon-size: 1rem;
-}
-
-:host([size=sm]),
-:host([size=small]) {
-  --button-height: 2.5rem;
-}
-
-:host([size=sm]) .button,
-:host([size=small]) .button {
-  --private-button-icon-size: 1.25rem;
-  --private-button-icon-label-spacing: 0.5rem;
-}
-
-:host([size=md]),
-:host([size=medium]) {
-  --button-height: 3.5rem;
-}
-
-:host([size=md]) .button,
-:host([size=medium]) .button {
-  --private-button-icon-size: 1.5rem;
-}
-
-:host([size=lg]),
-:host([size=large]) {
-  --button-height: 6rem;
-}
-
-:host([size=lg]) .button,
-:host([size=large]) .button {
-  --private-button-icon-size: 2rem;
-}
-
-:host([size=xl]) {
-  --button-height: 8.5rem;
-}
-
-:host([size=xl]) .button {
-  --private-button-icon-size: 2.5rem;
-}`;
-
-/**
- * @label Icon Button
- * @tag wc-icon-button
- * @rawTag icon-button
- *
- * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
- *
- * @overview
- * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>
- *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
- *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
- *
- *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
- *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
- *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
- *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
- *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
- *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
- *
- * @fires {CustomEvent} button:click - Dispatched when the button is clicked.
- *
- * @example
- * ```html
- * <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
- * ```
- * @tags display
- */
-class IconButton extends BaseButton {
-    constructor() {
-        super(...arguments);
-        /**
-         * Button size.
-         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
-         */
-        this.size = 'sm';
-        /**
-         * The visual style of the button.
-         *
-         *  Possible variant values:
-         * `"filled"` is a filled button.
-         * `"outlined"` is an outlined button.
-         * `"text"` is a transparent button.
-         * `"tonal"` is a light color button.
-         * `"elevated"` is elevated button
-         */
-        this.variant = 'filled';
-        /**
-         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
-         */
-        this.color = 'primary';
-    }
-    focus() {
-        this.buttonElement?.focus();
-    }
-    blur() {
-        this.buttonElement?.blur();
-    }
-    firstUpdated() {
-        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        this.__convertTypeToVariantAndColor();
-    }
-    __convertTypeToVariantAndColor() {
-        if (this.type === 'primary') {
-            this.color = 'primary';
-            this.variant = 'filled';
-        }
-        else if (this.type === 'secondary') {
-            this.color = 'surface';
-            this.variant = 'filled';
-        }
-        else if (this.type === 'tertiary') {
-            this.color = 'primary';
-            this.variant = 'text';
-        }
-        else if (this.type === 'danger') {
-            this.color = 'danger';
-            this.variant = 'filled';
-        }
-    }
-    render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            button: true,
-            'button-element': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`color-${this.color}`]: true,
-            disabled: this.disabled || this.softDisabled,
-            pressed: this.isPressed,
-            skeleton: this.skeleton,
-        };
-        if (!isLink) {
-            cssClasses['native-button'] = true;
-            return b `<button
-          class=${e(cssClasses)}
-          id="button"
-          type=${this.htmlType}
-          @click=${this.__dispatchClickWithThrottle}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          
-          aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-          ?aria-disabled=${this.softDisabled}
-
-          ?disabled=${this.disabled}
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </button>
-        ${this.__renderTooltip()}`;
-        }
-        else {
-            cssClasses['native-link'] = true;
-            return b `<a
-          class=${e(cssClasses)}
-          id="button"
-          href=${this.href}
-          target=${this.target}
-          tabindex=${this.disabled ? '-1' : '0'}
-          @click=${this.__dispatchClick}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          role="button"
-          
-          aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-          ?aria-disabled=${this.softDisabled}
-
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </a>
-        ${this.__renderTooltip()}`;
-        }
-    }
-    renderButtonContent() {
-        return b `
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="neo-background"></div>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-      <wc-skeleton class="skeleton"></wc-skeleton>
-
-      <div class="button-content">
-        <slot></slot>
-      </div>
-
-      ${this.__renderDisabledReason(this.softDisabled)}
-    `;
-    }
-}
-IconButton.styles = [css_248z$1, css_248z$2, css_248z];
-__decorate([
-    n({ reflect: true })
-], IconButton.prototype, "size", void 0);
-__decorate([
-    n({ type: String })
-], IconButton.prototype, "type", void 0);
-__decorate([
-    n()
-], IconButton.prototype, "variant", void 0);
-__decorate([
-    n({ reflect: true })
-], IconButton.prototype, "color", void 0);
-__decorate([
-    n({ reflect: true })
-], IconButton.prototype, "configAria", void 0);
-
-export { IconButton as I };
-//# sourceMappingURL=icon-button-AdJBEoNy.js.map

package/dist/icon-button-AdJBEoNy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-button-AdJBEoNy.js","sources":["../../src/button/icon-button/icon-button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n     * Type is preset of color and variant. Type will be only applied.\n     *\n     */\n    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n  \n    /**\n     * The visual style of the button.\n     *\n     *  Possible variant values:\n     * `\"filled\"` is a filled button.\n     * `\"outlined\"` is an outlined button.\n     * `\"text\"` is a transparent button.\n     * `\"tonal\"` is a light color button.\n     * `\"elevated\"` is elevated button\n     */\n    @property() variant:\n      | 'elevated'\n      | 'filled'\n      | 'tonal'\n      | 'outlined'\n      | 'text'\n      | 'neo' = 'filled';\n  \n    /**\n     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n     */\n    @property({ reflect: true }) color:\n      | 'primary'\n      | 'success'\n      | 'danger'\n      | 'warning'\n      | 'surface'\n      | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n  \n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    this.__convertTypeToVariantAndColor();\n  }\n\n  __convertTypeToVariantAndColor() {\n    if (this.type === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.type === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'filled';\n    } else if (this.type === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.type === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  override render() {\n    const isLink = this.__isLink();\n\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.isPressed,\n      skeleton: this.skeleton,\n    };\n\n    if (!isLink) {\n      cssClasses['native-button'] = true;\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n          \n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    } else {\n      cssClasses['native-link'] = true;\n      return html`<a\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          href=${this.href}\n          target=${this.target}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.__dispatchClick}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n          role=\"button\"\n          \n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </a>\n        ${this.__renderTooltip()}`;\n    }\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <slot></slot>\n      </div>\n\n      ${this.__renderDisabledReason(this.softDisabled)}\n    `;\n  }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property"],"mappings":"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"}