globuswebcomponents 1.0.1 → 1.0.2

package/dist/components/gb-slider.js.map

@@ -1 +1 @@
-{"file":"gb-slider.js","mappings":"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","names":["GbSlider"],"sources":["src/components/gb-slider/gb-slider.css?tag=gb-slider&encapsulation=shadow","src/components/gb-slider/gb-slider.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  display: block;\r\n  height: 4px;\r\n  padding: 20px;\r\n  cursor: pointer;\r\n}\r\n  \r\n.slider-container {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 8px;\r\n  background-color: var(--color-border-subtler, #E3E8EF);\r\n  border-radius: var(--rounded-xs);\r\n}\r\n  \r\n.track {\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: var(--color-border-selected, #075DB2);\r\n}\r\n  \r\ngb-slider-control-handle {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: pointer;\r\n}","import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() thumbType: 'text' | 'tooltip';\r\n  @Prop() leftControl: number = 0; // Developer can set this\r\n  @Prop() rightControl: number = 100; // Developer can set this\r\n  @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n  @Prop() unit: string = '';\r\n  @Prop() unitPosition: 'left' | 'right' = 'left';\r\n  @State() leftValue: number;\r\n  @State() rightValue: number;\r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement;\r\n  private containerEl: HTMLDivElement;\r\n  private isDragging: boolean = false;\r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  componentWillLoad() {\r\n    // Set the initial values for the slider\r\n    this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n    this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack();\r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb;\r\n\r\n    // Clamp the initial value of the thumb within bounds\r\n    if (thumb === 'left') {\r\n      this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n    } else {\r\n      this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n    }\r\n\r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return;\r\n\r\n    // Get the bounding box of the slider container\r\n    const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n    // Calculate the mouse position relative to the slider container\r\n    const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n    // Snap the position to the nearest integer increment of 1\r\n    const value = Math.round(position);\r\n\r\n    // Update the appropriate thumb's value, clamping it within bounds\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n    } else {\r\n      this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  };\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false;\r\n    this.activeThumb = null;\r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  updateTrack() {\r\n    const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n    const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  formatValue(value: number): string {\r\n    return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n        <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n        <gb-slider-control-handle\r\n          class=\"left\"\r\n          value={this.formatValue(this.leftValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n        <gb-slider-control-handle\r\n          class=\"right\"\r\n          value={this.formatValue(this.rightValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"gb-slider.js","mappings":"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","names":["GbSlider"],"sources":["src/components/gb-slider/gb-slider.css?tag=gb-slider&encapsulation=shadow","src/components/gb-slider/gb-slider.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  display: block;\r\n  height: 4px;\r\n  padding: 20px;\r\n  cursor: pointer;\r\n}\r\n  \r\n.slider-container {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 8px;\r\n  background-color: var(--color-border-subtler, #E3E8EF);\r\n  border-radius: var(--rounded-xs);\r\n}\r\n  \r\n.track {\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: var(--color-border-selected, #075DB2);\r\n}\r\n  \r\ngb-slider-control-handle {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: pointer;\r\n}","import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() thumbType: 'text' | 'tooltip';\r\n  @Prop() leftControl: number = 0; // Developer can set this\r\n  @Prop() rightControl: number = 100; // Developer can set this\r\n  @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n  @Prop() unit: string = '';\r\n  @Prop() unitPosition: 'left' | 'right' = 'left';\r\n  @State() leftValue: number;\r\n  @State() rightValue: number; \r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement;\r\n  private containerEl: HTMLDivElement;\r\n  private isDragging: boolean = false;\r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  componentWillLoad() {\r\n    // Set the initial values for the slider\r\n    this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n    this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack();\r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb;\r\n\r\n    // Clamp the initial value of the thumb within bounds\r\n    if (thumb === 'left') {\r\n      this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n    } else {\r\n      this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n    }\r\n\r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return;\r\n\r\n    // Get the bounding box of the slider container\r\n    const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n    // Calculate the mouse position relative to the slider container\r\n    const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n    // Snap the position to the nearest integer increment of 1\r\n    const value = Math.round(position);\r\n\r\n    // Update the appropriate thumb's value, clamping it within bounds\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n    } else {\r\n      this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  };\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false;\r\n    this.activeThumb = null;\r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  updateTrack() {\r\n    const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n    const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  formatValue(value: number): string {\r\n    return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n        <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n        <gb-slider-control-handle\r\n          class=\"left\"\r\n          value={this.formatValue(this.leftValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n        <gb-slider-control-handle\r\n          class=\"right\"\r\n          value={this.formatValue(this.rightValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/gb-tag.js

@@ -1,4 +1,4 @@
-import { G as GbTag$1, d as defineCustomElement$1 } from './p-29ca4063.js';
+import { G as GbTag$1, d as defineCustomElement$1 } from './p-bdc413ec.js';
 
 const GbTag = GbTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-toggle.js

@@ -11,6 +11,7 @@ const GbToggle$1 = /*@__PURE__*/ proxyCustomElement(class GbToggle extends H {
         this.__attachShadow();
         this.size = undefined;
         this.state = undefined;
+        this.text = false;
         this.supportingText = false;
         this.pressed = false;
     }
@@ -41,13 +42,14 @@ const GbToggle$1 = /*@__PURE__*/ proxyCustomElement(class GbToggle extends H {
         }
     }
     render() {
-        return (h("div", { key: 'a45b0262d39fd73194be1adb4189cad1d2d3953a', class: `toggle_div ${this.size}` }, h("div", { key: '27866b6080c7c45d448bbde9d3a05015e12b8ac2', class: "toggle_base" }, h("gb-toggle-base", { key: '18240a062dc2498f674afff8cb8659b65331f3d7', size: this.size, state: this.state, pressed: this.pressed })), h("div", { key: 'f62a282bde946246aef6b874bb826d38ca8a60a3', class: "text" }, h("slot", { key: '27bc90524cec3a348b46b195b5fd34fb071cc076', name: "main_text" }), this.supportingText && (h("slot", { key: '830636eed9d76477556ccae7d01c9ad0618e36f9', name: "supporting_text" })))));
+        return (h("div", { key: 'a29118d6e08477273156e03378bed7d1fbe5356f', class: `toggle_div ${this.size}` }, h("div", { key: '006867fc0818ea3b66fad0309ed85053ad3131e2', class: "toggle_base" }, h("gb-toggle-base", { key: '3593ae37ba2a69c63f9f6e4f00265dfe489bda28', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '8b6d5df3e318d0d06f141b77770bafa585523721', class: "text" }, h("slot", { key: '4ce467de7d71e247dd0569f5303bbb3f8928a500', name: "main_text" }), this.supportingText && (h("slot", { key: 'e72f956ad1f5e26ddef145b3df97533a67d007e7', name: "supporting_text" }))))));
     }
     get el() { return this; }
     static get style() { return GbToggleStyle0; }
 }, [1, "gb-toggle", {
         "size": [1],
         "state": [1],
+        "text": [4],
         "supportingText": [4, "supporting-text"],
         "pressed": [4]
     }]);

package/dist/components/gb-toggle.js.map

@@ -1 +1 @@
-{"file":"gb-toggle.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0TAA0T,CAAC;AAC/U,uBAAe,WAAW;;MCQbA,UAAQ;;;;;;;8BAGiB,KAAK;uBACZ,KAAK;;IAGhC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;SACvC;KACJ;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;SACxC;KACJ;IAED,gBAAgB;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;SACvD;QAED,IAAG,kBAAkB,EAAE;YACnB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;SACnE;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE;YACrB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACzC;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,IACjC,4DAAK,KAAK,EAAC,aAAa,IACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACH,CAChB,EACN,4DAAK,KAAK,EAAC,MAAM,IACb,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,cAAc,KAChB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACJ,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbToggle"],"sources":["src/components/gb-toggle/gb-toggle.css?tag=gb-toggle&encapsulation=shadow","src/components/gb-toggle/gb-toggle.tsx"],"sourcesContent":[".toggle_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    width: fit-content;\r\n}\r\n\r\n.toggle_div.sm{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.toggle_div.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.div_centered{\r\n    justify-content: center;\r\n    padding-bottom: 0.2rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() pressed: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n        const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    pressed={this.pressed}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}
+{"file":"gb-toggle.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0TAA0T,CAAC;AAC/U,uBAAe,WAAW;;MCQbA,UAAQ;;;;;;;oBAGO,KAAK;8BACK,KAAK;uBACZ,KAAK;;IAGhC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;SACvC;KACJ;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;SACxC;KACJ;IAED,gBAAgB;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;SACvD;QAED,IAAG,kBAAkB,EAAE;YACnB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;SACnE;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE;YACrB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACzC;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,IACjC,4DAAK,KAAK,EAAC,aAAa,IACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACH,CAChB,EACL,IAAI,CAAC,IAAI,KACN,4DAAK,KAAK,EAAC,MAAM,IACjB,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,cAAc,KAChB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACL,CACC,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbToggle"],"sources":["src/components/gb-toggle/gb-toggle.css?tag=gb-toggle&encapsulation=shadow","src/components/gb-toggle/gb-toggle.tsx"],"sourcesContent":[".toggle_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    width: fit-content;\r\n}\r\n\r\n.toggle_div.sm{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.toggle_div.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.div_centered{\r\n    justify-content: center;\r\n    padding-bottom: 0.2rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() text: boolean = false;\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() pressed: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n        const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    pressed={this.pressed}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                {this.text && (\r\n                    <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n                )}\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}

package/dist/components/gb-wysiwyg-toolbar.js

@@ -1,4 +1,4 @@
-import { G as GbWysiwygToolbar$1, d as defineCustomElement$1 } from './p-738d9d75.js';
+import { G as GbWysiwygToolbar$1, d as defineCustomElement$1 } from './p-6aefb26b.js';
 
 const GbWysiwygToolbar = GbWysiwygToolbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-6e4484e1.js → p-0c56ee53.js}

@@ -10,7 +10,7 @@ import { d as defineCustomElement$9 } from './p-ad3a2c04.js';
 import { d as defineCustomElement$8 } from './p-855667d7.js';
 import { d as defineCustomElement$7 } from './p-12879e00.js';
 import { d as defineCustomElement$6 } from './p-0c6b277d.js';
-import { d as defineCustomElement$5 } from './p-29ca4063.js';
+import { d as defineCustomElement$5 } from './p-bdc413ec.js';
 import { d as defineCustomElement$4 } from './p-472f11a3.js';
 import { d as defineCustomElement$3 } from './p-1c1003b6.js';
 import { d as defineCustomElement$2 } from './p-c8f12e95.js';
@@ -447,4 +447,4 @@ defineCustomElement();
 
 export { GbInputField as G, defineCustomElement as d };
 
-//# sourceMappingURL=p-6e4484e1.js.map
+//# sourceMappingURL=p-0c56ee53.js.map