globuswebcomponents 0.6.3 → 0.6.5

package/dist/collection/components/gb-button/gb-button.js

@@ -0,0 +1,267 @@
+import { getAssetPath, h } from "@stencil/core";
+export class GbButton {
+    constructor() {
+        this.size = undefined;
+        this.hierarchy = undefined;
+        this.icon = undefined;
+        this.destructive = false;
+        this.state = undefined;
+        this.iconLeading = false;
+        this.iconLeadingSwap = undefined;
+        this.iconTrailing = false;
+        this.iconTrailingSwap = undefined;
+        this.leadingIconSvg = '';
+        this.trailingIconSvg = '';
+    }
+    componentWillLoad() {
+        if (this.iconLeading && this.iconLeadingSwap) {
+            this.loadIcon(this.iconLeadingSwap, 'leading');
+        }
+        if (this.iconTrailing && this.iconTrailingSwap) {
+            this.loadIcon(this.iconTrailingSwap, 'trailing');
+        }
+        const buttonSlot = this.el.querySelector('p');
+        if (buttonSlot) {
+            buttonSlot.classList.add(this.getButtonTextClasses());
+            buttonSlot.classList.add('nowrap');
+        }
+        // if (!this.iconLeading && !this.iconTrailing) {
+        //   buttonSlot.classList.add('center');
+        // }
+    }
+    async loadIcon(iconName, type) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        if (type === 'leading') {
+            this.leadingIconSvg = svg;
+        }
+        else {
+            this.trailingIconSvg = svg;
+        }
+    }
+    // Helper to apply color styles based on the button state
+    getButtonClasses() {
+        return {
+            button: true,
+            [this.size]: true,
+            [this.hierarchy]: true,
+            destructive: this.destructive,
+            disabled: this.state === 'disabled',
+            default: this.icon === 'default',
+            only: this.icon === 'only',
+            oneicon: this.iconLeading || this.iconTrailing
+        };
+    }
+    getButtonTextClasses() {
+        switch (this.size) {
+            case 'xl2': return 'text-lg-semi-bold';
+            case 'xl': return 'text-md-semi-bold';
+            case 'lg': return 'text-md-semi-bold';
+            case 'md': return 'text-sm-semi-bold';
+            case 'sm': return 'text-sm-semi-bold';
+        }
+    }
+    renderLeadingIcon() {
+        return h("div", { class: `icon left-icon ${this.size}`, innerHTML: this.leadingIconSvg });
+    }
+    renderTrailingIcon() {
+        return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
+    }
+    render() {
+        return (h("button", { key: '2a4640380395e3fe7787fbdd71dbcc199eb6c282', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '81b4c1064ccc0248b592c9adc850a4b437bf3f24' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+    }
+    static get is() { return "gb-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-button.css"]
+        };
+    }
+    static get assetsDirs() { return [""]; }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "hierarchy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralHierarchies",
+                    "resolved": "\"link_color\" | \"link_gray\" | \"primary\" | \"secondary_color\" | \"secondary_gray\" | \"tertiary_color\" | \"tertiary_gray\"",
+                    "references": {
+                        "GeneralHierarchies": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralHierarchies"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hierarchy",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'only'",
+                    "resolved": "\"default\" | \"only\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "destructive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "destructive",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'disabled'",
+                    "resolved": "\"default\" | \"disabled\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "iconLeading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-leading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconLeadingSwap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-leading-swap",
+                "reflect": false
+            },
+            "iconTrailing": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-trailing",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconTrailingSwap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-trailing-swap",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "leadingIconSvg": {},
+            "trailingIconSvg": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-button.js.map

package/dist/collection/components/gb-button/gb-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    // if (!this.iconLeading && !this.iconTrailing) {\r\n    //   buttonSlot.classList.add('center');\r\n    // }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      oneicon: this.iconLeading || this.iconTrailing\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n        case 'xl2' : return 'text-lg-semi-bold';\r\n        case 'xl' : return 'text-md-semi-bold';\r\n        case 'lg' : return 'text-md-semi-bold';\r\n        case 'md' : return 'text-sm-semi-bold';\r\n        case 'sm' : return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-button/gb-button.tsx

@@ -0,0 +1,97 @@
+import { Component, Element, getAssetPath, h, Prop, State } from '@stencil/core';
+import { GeneralHierarchies, GeneralSizes } from '../../models/reusableModels';
+
+@Component({
+  tag: 'gb-button',
+  styleUrl: 'gb-button.css',
+  shadow: true,
+  assetsDirs: [''],
+})
+export class GbButton {
+  @Prop() size: GeneralSizes;
+  @Prop() hierarchy: GeneralHierarchies;
+  @Prop() icon: 'default' | 'only';
+  @Prop() destructive: boolean = false;
+  @Prop() state: 'default' | 'disabled';
+  @Prop() iconLeading: boolean = false;
+  @Prop() iconLeadingSwap: string;
+  @Prop() iconTrailing: boolean = false;
+  @Prop() iconTrailingSwap: string;
+  @Element() el: HTMLElement;
+  @State() leadingIconSvg: string = '';
+  @State() trailingIconSvg: string = '';
+
+  componentWillLoad() {
+    if (this.iconLeading && this.iconLeadingSwap) {
+      this.loadIcon(this.iconLeadingSwap, 'leading');
+    }
+    if (this.iconTrailing && this.iconTrailingSwap) {
+      this.loadIcon(this.iconTrailingSwap, 'trailing');
+    }
+
+    const buttonSlot = this.el.querySelector('p');
+
+    if (buttonSlot) {
+      buttonSlot.classList.add(this.getButtonTextClasses());
+      buttonSlot.classList.add('nowrap');
+    }
+
+    // if (!this.iconLeading && !this.iconTrailing) {
+    //   buttonSlot.classList.add('center');
+    // }
+  }
+
+  async loadIcon(iconName: string, type: 'leading' | 'trailing') {
+    const iconPath = getAssetPath(`${iconName}`);
+    const response = await fetch(iconPath);
+    const svg = await response.text();
+    if (type === 'leading') {
+      this.leadingIconSvg = svg;
+    } else {
+      this.trailingIconSvg = svg;
+    }
+  }
+
+  // Helper to apply color styles based on the button state
+  getButtonClasses() {
+    return {
+      button: true,
+      [this.size]: true,
+      [this.hierarchy]: true,
+      destructive: this.destructive,
+      disabled: this.state === 'disabled',
+      default: this.icon === 'default',
+      only: this.icon === 'only',
+      oneicon: this.iconLeading || this.iconTrailing
+    };
+  }
+
+  getButtonTextClasses() {
+    switch (this.size) {
+        case 'xl2' : return 'text-lg-semi-bold';
+        case 'xl' : return 'text-md-semi-bold';
+        case 'lg' : return 'text-md-semi-bold';
+        case 'md' : return 'text-sm-semi-bold';
+        case 'sm' : return 'text-sm-semi-bold';
+    }
+  }
+
+  renderLeadingIcon() {
+    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;
+  }
+
+  renderTrailingIcon() {
+    return <div class="icon right-icon" innerHTML={this.trailingIconSvg}></div>;
+  }
+
+  render() {
+    return (
+      <button class={this.getButtonClasses()}>
+        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}
+        {this.icon === 'default' && <slot></slot>}
+        {this.iconTrailing && this.renderTrailingIcon()}
+        {this.icon === 'only' && this.renderLeadingIcon()}
+      </button>
+    );
+  }
+}

package/dist/collection/components/gb-button/readme.md

@@ -0,0 +1,50 @@
+# test-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute            | Description | Type                                                                                                                       | Default     |
+| ------------------ | -------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `destructive`      | `destructive`        |             | `boolean`                                                                                                                  | `false`     |
+| `hierarchy`        | `hierarchy`          |             | `"link_color" \| "link_gray" \| "primary" \| "secondary_color" \| "secondary_gray" \| "tertiary_color" \| "tertiary_gray"` | `undefined` |
+| `icon`             | `icon`               |             | `"default" \| "only"`                                                                                                      | `undefined` |
+| `iconLeading`      | `icon-leading`       |             | `boolean`                                                                                                                  | `false`     |
+| `iconLeadingSwap`  | `icon-leading-swap`  |             | `string`                                                                                                                   | `undefined` |
+| `iconTrailing`     | `icon-trailing`      |             | `boolean`                                                                                                                  | `false`     |
+| `iconTrailingSwap` | `icon-trailing-swap` |             | `string`                                                                                                                   | `undefined` |
+| `size`             | `size`               |             | `"lg" \| "md" \| "profile_lg" \| "profile_md" \| "profile_sm" \| "sm" \| "xl" \| "xl2" \| "xl3" \| "xl4" \| "xs" \| "xxs"` | `undefined` |
+| `state`            | `state`              |             | `"default" \| "disabled"`                                                                                                  | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [gb-checkbox-group-item](../gb-checkbox-group-item)
+ - [gb-file-upload-item-base](../gb-file-upload-item-base)
+ - [gb-input-field](../gb-input-field)
+ - [gb-notification-pane](../gb-notification-pane)
+ - [gb-pagination](../gb-pagination)
+ - [gb-password-button](../gb-password-button)
+ - [gb-toast](../gb-toast)
+
+### Graph
+```mermaid
+graph TD;
+  gb-checkbox-group-item --> gb-button
+  gb-file-upload-item-base --> gb-button
+  gb-input-field --> gb-button
+  gb-notification-pane --> gb-button
+  gb-pagination --> gb-button
+  gb-password-button --> gb-button
+  gb-toast --> gb-button
+  style gb-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*