@ppg_pl/tinting 0.0.0

package/dist/collection/components/header/index.js

@@ -0,0 +1,334 @@
+import { h, getAssetPath } from '@stencil/core';
+import { fetchColorFamilies } from '../api/services';
+export class ModalHeader {
+  constructor() {
+    this.handleClose = () => {
+      this.closeModal.emit();
+    };
+    this.handleLogoClick = () => {
+      this.onLogoClick.emit();
+    };
+    this.handleReset = () => {
+      this.onResetCategory.emit();
+    };
+    this.modalName = undefined;
+    this.modalLogo = undefined;
+    this.modalDescription = undefined;
+    this.selectedColorFamily = undefined;
+    this.shop = undefined;
+    this.productName = undefined;
+    this.isMobile = undefined;
+    this.closeImage = 'close.png';
+    this.productSamples = [];
+    this.colorFamilies = [];
+  }
+  handleSampleSelect(event) {
+    this.sampleSelected.emit(event.detail);
+  }
+  sortColorFamiliesByHex(families) {
+    return [...families].sort((a, b) => {
+      // Convert hex to RGB for proper color sorting
+      const hexToRgb = (hex) => {
+        const r = parseInt(hex.substring(1, 3), 16);
+        const g = parseInt(hex.substring(3, 5), 16);
+        const b = parseInt(hex.substring(5, 7), 16);
+        return r * 0.299 + g * 0.587 + b * 0.114; // Convert to grayscale for sorting
+      };
+      return hexToRgb(a.color) - hexToRgb(b.color);
+    });
+  }
+  async fetchColorFamilies() {
+    try {
+      const request = await fetchColorFamilies();
+      this.colorFamilies = this.sortColorFamiliesByHex(request);
+    }
+    catch (error) {
+      console.error('Error fetching color families:', error);
+      this.colorFamilies = [];
+    }
+  }
+  /**
+   * Adjusts the brightness of a hexadecimal color
+   * @param hex The hexadecimal color code
+   * @param percent The percentage to adjust brightness by
+   * @returns RGB color string
+   */
+  adjustBrightness(hex, percent) {
+    let r = parseInt(hex.substring(1, 3), 16);
+    let g = parseInt(hex.substring(3, 5), 16);
+    let b = parseInt(hex.substring(5, 7), 16);
+    r = Math.min(255, Math.max(0, r + r * percent));
+    g = Math.min(255, Math.max(0, g + g * percent));
+    b = Math.min(255, Math.max(0, b + b * percent));
+    return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+  }
+  getGradientFromHex(hex) {
+    const lighter = this.adjustBrightness(hex, 0.6); // 30% lighter
+    const darker = this.adjustBrightness(hex, -0.6); // 30% darker
+    return `linear-gradient(270deg, ${lighter} 0%, ${darker} 100%)`;
+  }
+  selectColorFamily(colorFamily) {
+    // Toggle selection: if clicking the same color family, deselect it
+    this.selectedColorFamily = this.selectedColorFamily === colorFamily ? null : colorFamily;
+    this.colorFamilySelected.emit(colorFamily);
+  }
+  componentWillLoad() {
+    this.fetchColorFamilies();
+  }
+  render() {
+    return (h("div", { class: "my-modal__header" }, h("div", { class: "image-wrapper" }, this.modalLogo && (h("div", { class: "modal-header__logo", onClick: this.handleLogoClick }, h("img", { src: this.modalLogo, alt: "modal-logo" })))), this.modalName && h("p", { class: "my-modal__see-more big" }, this.modalName), this.modalDescription && h("p", { class: "my-modal__see-more" }, this.modalDescription), h("div", { class: "search-wrapper" }, h("div", { class: "color-families" }, this.colorFamilies.map(family => (h("div", { class: `color-family ${this.selectedColorFamily === family.value ? 'active' : ''}`, onClick: () => this.selectColorFamily(family.value) }, h("div", { style: { backgroundImage: this.getGradientFromHex(family.color) } }), family.text)))), h("div", { class: "search-container" }, h("div", { class: "filters" }, h("my-search", { shopname: this.shop, productname: this.productName, isMobile: this.isMobile }), h("my-select", { onOnReset: () => this.handleReset(), onSelectValue: event => this.handleSampleSelect(event), options: this.productSamples, placeholder: "Wybierz wzornik" }), ' '), h("button", { class: "my-modal__close", onClick: this.handleClose }, h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))))));
+  }
+  static get is() { return "modal-header"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "modalName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-name",
+        "reflect": false
+      },
+      "modalLogo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-logo",
+        "reflect": false
+      },
+      "modalDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "modal-description",
+        "reflect": false
+      },
+      "selectedColorFamily": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-color-family",
+        "reflect": false
+      },
+      "shop": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shop",
+        "reflect": false
+      },
+      "productName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "product-name",
+        "reflect": false
+      },
+      "isMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-mobile",
+        "reflect": false
+      },
+      "closeImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-image",
+        "reflect": false,
+        "defaultValue": "'close.png'"
+      },
+      "productSamples": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "colorFamilies": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sampleSelected",
+        "name": "sampleSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "colorFamilySelected",
+        "name": "colorFamilySelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "closeModal",
+        "name": "closeModal",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onLogoClick",
+        "name": "onLogoClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "onResetCategory",
+        "name": "onResetCategory",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, getAssetPath, State } from '@stencil/core';\nimport { fetchColorFamilies } from '../api/services';\n\n@Component({\n  tag: 'modal-header',\n  styleUrl: 'index.scss',\n  shadow: false,\n  assetsDirs: ['assets'],\n})\nexport class ModalHeader {\n  @Prop() modalName: string | null;\n  @Prop() modalLogo: string | null;\n  @Prop() modalDescription: string;\n  @Prop() selectedColorFamily: string | null;\n  @Prop() shop: string;\n  @Prop() productName: string;\n  @Prop() isMobile: boolean;\n  @Event() sampleSelected: EventEmitter<number>;\n  @Event() colorFamilySelected: EventEmitter<string>;\n  @Prop() closeImage = 'close.png';\n  @Prop() productSamples: any[] = [];\n  @Event() closeModal: EventEmitter;\n  @Event() onLogoClick: EventEmitter<void>;\n  @Event() onResetCategory: EventEmitter<void>;\n  @State() colorFamilies: any[] = [];\n\n  handleClose = () => {\n    this.closeModal.emit();\n  };\n\n  handleLogoClick = () => {\n    this.onLogoClick.emit();\n  };\n\n  handleReset = () => {\n    this.onResetCategory.emit();\n  };\n\n  private handleSampleSelect(event: CustomEvent) {\n    this.sampleSelected.emit(event.detail);\n  }\n\n  private sortColorFamiliesByHex(families: any[]) {\n    return [...families].sort((a, b) => {\n      // Convert hex to RGB for proper color sorting\n      const hexToRgb = (hex: string) => {\n        const r = parseInt(hex.substring(1, 3), 16);\n        const g = parseInt(hex.substring(3, 5), 16);\n        const b = parseInt(hex.substring(5, 7), 16);\n        return r * 0.299 + g * 0.587 + b * 0.114; // Convert to grayscale for sorting\n      };\n      return hexToRgb(a.color) - hexToRgb(b.color);\n    });\n  }\n\n  private async fetchColorFamilies() {\n    try {\n      const request = await fetchColorFamilies();\n      this.colorFamilies = this.sortColorFamiliesByHex(request);\n    } catch (error: any) {\n      console.error('Error fetching color families:', error as any);\n      this.colorFamilies = [];\n    }\n  }\n\n  /**\n   * Adjusts the brightness of a hexadecimal color\n   * @param hex The hexadecimal color code\n   * @param percent The percentage to adjust brightness by\n   * @returns RGB color string\n   */\n  private adjustBrightness(hex: string, percent: number): string {\n    let r: number = parseInt(hex.substring(1, 3), 16);\n    let g: number = parseInt(hex.substring(3, 5), 16);\n    let b: number = parseInt(hex.substring(5, 7), 16);\n\n    r = Math.min(255, Math.max(0, r + r * percent));\n    g = Math.min(255, Math.max(0, g + g * percent));\n    b = Math.min(255, Math.max(0, b + b * percent));\n\n    return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;\n  }\n\n  private getGradientFromHex(hex: string) {\n    const lighter = this.adjustBrightness(hex, 0.6); // 30% lighter\n    const darker = this.adjustBrightness(hex, -0.6); // 30% darker\n\n    return `linear-gradient(270deg, ${lighter} 0%, ${darker} 100%)`;\n  }\n\n  private selectColorFamily(colorFamily: string) {\n    // Toggle selection: if clicking the same color family, deselect it\n    this.selectedColorFamily = this.selectedColorFamily === colorFamily ? null : colorFamily;\n    this.colorFamilySelected.emit(colorFamily);\n  }\n\n  componentWillLoad() {\n    this.fetchColorFamilies();\n  }\n\n  render() {\n    return (\n      <div class=\"my-modal__header\">\n        <div class=\"image-wrapper\">\n          {this.modalLogo && (\n            <div class=\"modal-header__logo\" onClick={this.handleLogoClick}>\n              <img src={this.modalLogo} alt=\"modal-logo\" />\n            </div>\n          )}\n        </div>\n        {this.modalName && <p class=\"my-modal__see-more big\">{this.modalName}</p>}\n        {this.modalDescription && <p class=\"my-modal__see-more\">{this.modalDescription}</p>}\n        <div class=\"search-wrapper\">\n          <div class=\"color-families\">\n            {this.colorFamilies.map(family => (\n              <div class={`color-family ${this.selectedColorFamily === family.value ? 'active' : ''}`} onClick={() => this.selectColorFamily(family.value)}>\n                <div style={{ backgroundImage: this.getGradientFromHex(family.color) }} />\n                {family.text}\n              </div>\n            ))}\n          </div>\n          <div class=\"search-container\">\n            <div class=\"filters\">\n              <my-search shopname={this.shop} productname={this.productName} isMobile={this.isMobile}></my-search>\n              <my-select\n                onOnReset={() => this.handleReset()}\n                onSelectValue={event => this.handleSampleSelect(event)}\n                options={this.productSamples}\n                placeholder=\"Wybierz wzornik\"\n              ></my-select>{' '}\n            </div>\n            <button class=\"my-modal__close\" onClick={this.handleClose}>\n              <img src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/loader/index.css

@@ -0,0 +1,85 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 190px;
+  overflow: hidden;
+}
+
+.item {
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+  list-style-type: none;
+  transition: 0.5s all ease;
+}
+
+.item:nth-child(1) {
+  animation: right-1 1s infinite alternate;
+  background-color: #b8cf40;
+  animation-delay: 20ms;
+}
+@keyframes right-1 {
+  0% {
+    transform: translateY(-18px);
+  }
+  100% {
+    transform: translateY(18px);
+  }
+}
+
+.item:nth-child(2) {
+  animation: right-2 1s infinite alternate;
+  background-color: #ee4b5e;
+  animation-delay: 40ms;
+}
+@keyframes right-2 {
+  0% {
+    transform: translateY(-21px);
+  }
+  100% {
+    transform: translateY(21px);
+  }
+}
+
+.item:nth-child(3) {
+  animation: right-3 1s infinite alternate;
+  background-color: #ea0f47;
+  animation-delay: 60ms;
+}
+@keyframes right-3 {
+  0% {
+    transform: translateY(-24px);
+  }
+  100% {
+    transform: translateY(24px);
+  }
+}
+
+.item:nth-child(4) {
+  animation: right-4 1s infinite alternate;
+  background-color: #d42840;
+  animation-delay: 80ms;
+}
+@keyframes right-4 {
+  0% {
+    transform: translateY(-27px);
+  }
+  100% {
+    transform: translateY(27px);
+  }
+}
+
+.item:nth-child(5) {
+  animation: right-5 1s infinite alternate;
+  background-color: #8b2850;
+  animation-delay: 100ms;
+}
+@keyframes right-5 {
+  0% {
+    transform: translateY(-30px);
+  }
+  100% {
+    transform: translateY(30px);
+  }
+}

package/dist/collection/components/loader/index.js

@@ -0,0 +1,19 @@
+import { h } from '@stencil/core';
+export class MyLoader {
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" }), h("div", { class: "item" })));
+  }
+  static get is() { return "my-loader"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,QAAQ;EACnB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO;MACxB,WAAK,KAAK,EAAC,MAAM,GAAO,CACpB,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'my-loader',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyLoader {\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n        <div class=\"item\"></div>\n      </div>\n    );\n  }\n}\n"]}