@ppg_pl/tinting 0.0.1 → 0.0.3

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.
@@ -12,7 +12,7 @@ function debounce(func, wait) {
12
12
  };
13
13
  }
14
14
 
15
- const indexCss = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1.sc-my-select,300..900&family=Poppins.sc-my-select:ital,wght@0.sc-my-select,100.sc-my-select;0.sc-my-select,200.sc-my-select;0.sc-my-select,300.sc-my-select;0.sc-my-select,400.sc-my-select;0.sc-my-select,500.sc-my-select;0.sc-my-select,600.sc-my-select;0.sc-my-select,700.sc-my-select;0.sc-my-select,800.sc-my-select;0.sc-my-select,900.sc-my-select;1.sc-my-select,100.sc-my-select;1.sc-my-select,200.sc-my-select;1.sc-my-select,300.sc-my-select;1.sc-my-select,400.sc-my-select;1.sc-my-select,500.sc-my-select;1.sc-my-select,600.sc-my-select;1.sc-my-select,700.sc-my-select;1.sc-my-select,800.sc-my-select;1.sc-my-select,900&display=swap\").sc-my-select; .tinting-wrapper.sc-my-select *.sc-my-select{font-family:\"Poppins\", sans-serif}.select.sc-my-select{position:relative;width:300px}@media (max-width: 768px){.select.sc-my-select{width:100%}}.select.sc-my-select .input-wrapper.sc-my-select{position:relative;display:flex;align-items:flex-start}.select.sc-my-select input.sc-my-select{font-size:16px;padding:16px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c;box-sizing:border-box;padding-right:50px}.select.sc-my-select button.sc-my-select{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;width:40px;height:100%;display:flex;align-items:center;justify-content:center}.select.sc-my-select button.sc-my-select img.sc-my-select{transition:transform 0.3s ease}.select.sc-my-select button.sc-my-select img.rotated.sc-my-select{transform:rotate(180deg)}.select.sc-my-select .dropdown.sc-my-select{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #dfdfdf;border-radius:5px;max-height:200px;overflow-y:auto;z-index:1000;padding:0;margin:0}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select{padding:0;margin:0;padding:10px;cursor:pointer;list-style:none;text-align:left}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select:hover{background:#f5f5f5}.select.sc-my-select .dropdown.sc-my-select .no-results.sc-my-select{padding:10px;text-align:center;color:#999}";
15
+ const indexCss = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1.sc-my-select,300..900&family=Poppins.sc-my-select:ital,wght@0.sc-my-select,100.sc-my-select;0.sc-my-select,200.sc-my-select;0.sc-my-select,300.sc-my-select;0.sc-my-select,400.sc-my-select;0.sc-my-select,500.sc-my-select;0.sc-my-select,600.sc-my-select;0.sc-my-select,700.sc-my-select;0.sc-my-select,800.sc-my-select;0.sc-my-select,900.sc-my-select;1.sc-my-select,100.sc-my-select;1.sc-my-select,200.sc-my-select;1.sc-my-select,300.sc-my-select;1.sc-my-select,400.sc-my-select;1.sc-my-select,500.sc-my-select;1.sc-my-select,600.sc-my-select;1.sc-my-select,700.sc-my-select;1.sc-my-select,800.sc-my-select;1.sc-my-select,900&display=swap\").sc-my-select; .tinting-wrapper.sc-my-select *.sc-my-select{font-family:\"Poppins\", sans-serif}.select.sc-my-select{position:relative;width:300px}@media (max-width: 768px){.select.sc-my-select{width:100%}}.select.sc-my-select .input-wrapper.sc-my-select{position:relative;display:flex;align-items:flex-start}.select.sc-my-select input.sc-my-select{font-size:16px;padding:16px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c;box-sizing:border-box;padding-right:50px}.select.sc-my-select button.sc-my-select{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;width:40px;height:100%;display:flex;align-items:center;justify-content:center}.select.sc-my-select button.sc-my-select img.sc-my-select{transition:transform 0.3s ease}.select.sc-my-select button.sc-my-select img.rotated.sc-my-select{transform:rotate(180deg)}.select.sc-my-select .dropdown.sc-my-select{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #dfdfdf;border-radius:5px;max-height:200px;overflow-y:auto;z-index:1000;padding:0;margin:0}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select{padding:0;margin:0;padding:10px;cursor:pointer;list-style:none;text-align:left}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select:hover{background:#f5f5f5}.select.sc-my-select .dropdown.sc-my-select .no-results.sc-my-select{padding:10px;text-align:center;color:#999}@media (max-width: 768px){.select.sc-my-select .dropdown.sc-my-select{position:relative}}";
16
16
 
17
17
  const MySelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
18
18
  constructor() {
@@ -1 +1 @@
1
- {"file":"index4.js","mappings":"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","names":[],"sources":["./src/utils/index.ts","./src/components/select/index.scss?tag=my-select&encapsulation=scoped","./src/components/select/index.tsx"],"sourcesContent":["export function debounce(func: (...args: any[]) => void, wait: number) {\n let timeout: ReturnType<typeof setTimeout>;\n\n return function executedFunction(...args: any[]) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n","@import '../../global/app.scss';\n\n.select {\n position: relative;\n width: 300px;\n\n @media (max-width: $small) {\n width: 100%;\n }\n\n .input-wrapper {\n position: relative;\n display: flex;\n align-items: flex-start;\n }\n\n input {\n font-size: 16px;\n padding: 16px;\n border-radius: 27.35px;\n border: 1px solid #dfdfdf;\n width: 100%;\n color: #4c4c4c;\n box-sizing: border-box;\n padding-right: 50px;\n }\n\n button {\n position: absolute;\n right: 10px;\n background: transparent;\n border: none;\n cursor: pointer;\n width: 40px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n transition: transform 0.3s ease;\n\n &.rotated {\n transform: rotate(180deg);\n }\n }\n }\n\n .dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background: white;\n border: 1px solid #dfdfdf;\n border-radius: 5px;\n max-height: 200px;\n overflow-y: auto;\n z-index: 1000;\n padding: 0;\n margin: 0;\n\n li {\n padding: 0;\n margin: 0;\n padding: 10px;\n cursor: pointer;\n list-style: none;\n text-align: left;\n &:hover {\n background: #f5f5f5;\n }\n }\n\n .no-results {\n padding: 10px;\n text-align: center;\n color: #999;\n }\n }\n}\n","import { Component, Prop, h, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { getAssetPath } from '@stencil/core';\nimport { debounce } from '../../utils';\n\n@Component({\n tag: 'my-select',\n styleUrl: 'index.scss',\n assetsDirs: ['assets'],\n scoped: true,\n})\nexport class MySelect {\n @Element() el: HTMLElement;\n\n @Prop() options: any[] = []; // List of selectable options\n @Prop() placeholder: string = 'Select an option'; // Placeholder text\n @Prop() isMobile: boolean = false;\n @Prop() searchIcon: string = 'chevron.png'; // Search icon asset\n\n @State() searchText: string = '';\n @State() filteredOptions: any[] = [];\n @State() showDropdown: boolean = false;\n @State() selectedValue: string | null = null;\n @Event() onReset: EventEmitter<void>;\n @Event() selectValue: EventEmitter<{ key: string; value: number | null }>; // Emits selected value\n @Event() inputValueChange: EventEmitter<string>; // Emits input changes for filtering\n\n private defaultOption = { name: this.placeholder, id: null };\n\n private debouncedSearch = debounce((value: string) => {\n const optionsWithDefault = [this.defaultOption, ...this.options];\n this.filteredOptions = optionsWithDefault.filter(option => option.name.toLowerCase().includes(value.toLowerCase()));\n this.inputValueChange.emit(value);\n }, 300);\n\n private reset() {\n this.onReset.emit();\n }\n\n componentWillLoad() {\n this.filteredOptions = [this.defaultOption, ...this.options];\n }\n\n componentDidLoad() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.el.contains(event.target as Node)) {\n this.showDropdown = false;\n }\n };\n\n private handleInput(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n this.searchText = value;\n this.showDropdown = true;\n this.debouncedSearch(value);\n }\n\n private selectOption(option: { key: string; value: number | null }) {\n if (option.value === null) {\n this.selectedValue = null;\n this.searchText = '';\n this.reset();\n } else {\n this.selectedValue = option.key;\n this.searchText = option.key;\n this.selectValue.emit(option);\n }\n this.showDropdown = false;\n }\n\n private toggleDropdown() {\n this.showDropdown = !this.showDropdown;\n }\n\n @Watch('options')\n updateOptions(newOptions: any[]) {\n this.filteredOptions = [this.defaultOption, ...newOptions];\n }\n\n @Listen('clearSearchText', { target: 'document' })\n clearSearchTextHandler() {\n this.searchText = '';\n this.selectedValue = null;\n this.reset();\n }\n\n render() {\n return (\n <div class=\"select\">\n <div class=\"input-wrapper\">\n <input type=\"text\" placeholder={this.placeholder} value={this.searchText} onInput={this.handleInput.bind(this)} onFocus={() => (this.showDropdown = true)} />\n <button onClick={() => this.toggleDropdown()}>\n <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"dropdown icon\" class={this.showDropdown ? 'rotated' : ''} />\n </button>\n </div>\n\n {this.showDropdown && (\n <ul class=\"dropdown\">\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map(option => (\n <li class={option.id === null ? 'default-option' : ''} onClick={() => this.selectOption({ key: option.name, value: option.id })}>\n {option.name}\n </li>\n ))\n ) : (\n <li class=\"no-results\">No results found</li>\n )}\n </ul>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"index4.js","mappings":"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","names":[],"sources":["./src/utils/index.ts","./src/components/select/index.scss?tag=my-select&encapsulation=scoped","./src/components/select/index.tsx"],"sourcesContent":["export function debounce(func: (...args: any[]) => void, wait: number) {\n let timeout: ReturnType<typeof setTimeout>;\n\n return function executedFunction(...args: any[]) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n","@import '../../global/app.scss';\n\n.select {\n position: relative;\n width: 300px;\n\n @media (max-width: $small) {\n width: 100%;\n }\n\n .input-wrapper {\n position: relative;\n display: flex;\n align-items: flex-start;\n }\n\n input {\n font-size: 16px;\n padding: 16px;\n border-radius: 27.35px;\n border: 1px solid #dfdfdf;\n width: 100%;\n color: #4c4c4c;\n box-sizing: border-box;\n padding-right: 50px;\n }\n\n button {\n position: absolute;\n right: 10px;\n background: transparent;\n border: none;\n cursor: pointer;\n width: 40px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n transition: transform 0.3s ease;\n\n &.rotated {\n transform: rotate(180deg);\n }\n }\n }\n\n .dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background: white;\n border: 1px solid #dfdfdf;\n border-radius: 5px;\n max-height: 200px;\n overflow-y: auto;\n z-index: 1000;\n padding: 0;\n margin: 0;\n\n li {\n padding: 0;\n margin: 0;\n padding: 10px;\n cursor: pointer;\n list-style: none;\n text-align: left;\n &:hover {\n background: #f5f5f5;\n }\n }\n\n .no-results {\n padding: 10px;\n text-align: center;\n color: #999;\n }\n @media (max-width: $small) {\n position: relative;\n }\n }\n}\n","import { Component, Prop, h, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { getAssetPath } from '@stencil/core';\nimport { debounce } from '../../utils';\n\n@Component({\n tag: 'my-select',\n styleUrl: 'index.scss',\n assetsDirs: ['assets'],\n scoped: true,\n})\nexport class MySelect {\n @Element() el: HTMLElement;\n\n @Prop() options: any[] = []; // List of selectable options\n @Prop() placeholder: string = 'Select an option'; // Placeholder text\n @Prop() isMobile: boolean = false;\n @Prop() searchIcon: string = 'chevron.png'; // Search icon asset\n\n @State() searchText: string = '';\n @State() filteredOptions: any[] = [];\n @State() showDropdown: boolean = false;\n @State() selectedValue: string | null = null;\n @Event() onReset: EventEmitter<void>;\n @Event() selectValue: EventEmitter<{ key: string; value: number | null }>; // Emits selected value\n @Event() inputValueChange: EventEmitter<string>; // Emits input changes for filtering\n\n private defaultOption = { name: this.placeholder, id: null };\n\n private debouncedSearch = debounce((value: string) => {\n const optionsWithDefault = [this.defaultOption, ...this.options];\n this.filteredOptions = optionsWithDefault.filter(option => option.name.toLowerCase().includes(value.toLowerCase()));\n this.inputValueChange.emit(value);\n }, 300);\n\n private reset() {\n this.onReset.emit();\n }\n\n componentWillLoad() {\n this.filteredOptions = [this.defaultOption, ...this.options];\n }\n\n componentDidLoad() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.el.contains(event.target as Node)) {\n this.showDropdown = false;\n }\n };\n\n private handleInput(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n this.searchText = value;\n this.showDropdown = true;\n this.debouncedSearch(value);\n }\n\n private selectOption(option: { key: string; value: number | null }) {\n if (option.value === null) {\n this.selectedValue = null;\n this.searchText = '';\n this.reset();\n } else {\n this.selectedValue = option.key;\n this.searchText = option.key;\n this.selectValue.emit(option);\n }\n this.showDropdown = false;\n }\n\n private toggleDropdown() {\n this.showDropdown = !this.showDropdown;\n }\n\n @Watch('options')\n updateOptions(newOptions: any[]) {\n this.filteredOptions = [this.defaultOption, ...newOptions];\n }\n\n @Listen('clearSearchText', { target: 'document' })\n clearSearchTextHandler() {\n this.searchText = '';\n this.selectedValue = null;\n this.reset();\n }\n\n render() {\n return (\n <div class=\"select\">\n <div class=\"input-wrapper\">\n <input type=\"text\" placeholder={this.placeholder} value={this.searchText} onInput={this.handleInput.bind(this)} onFocus={() => (this.showDropdown = true)} />\n <button onClick={() => this.toggleDropdown()}>\n <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"dropdown icon\" class={this.showDropdown ? 'rotated' : ''} />\n </button>\n </div>\n\n {this.showDropdown && (\n <ul class=\"dropdown\">\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map(option => (\n <li class={option.id === null ? 'default-option' : ''} onClick={() => this.selectOption({ key: option.name, value: option.id })}>\n {option.name}\n </li>\n ))\n ) : (\n <li class=\"no-results\">No results found</li>\n )}\n </ul>\n )}\n </div>\n );\n }\n}\n"],"version":3}
@@ -6499,7 +6499,7 @@ const Modal = class {
6499
6499
  }
6500
6500
  };
6501
6501
  this.chunks = (xs, y = []) => {
6502
- return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
6502
+ return (xs === null || xs === void 0 ? void 0 : xs.length) === 0 ? y : this.chunks(xs === null || xs === void 0 ? void 0 : xs.slice(this.chunksNum), y.concat([xs === null || xs === void 0 ? void 0 : xs.slice(0, this.chunksNum)]));
6503
6503
  };
6504
6504
  this.calculateBoxCount = () => {
6505
6505
  var _a;
@@ -6589,15 +6589,15 @@ const Modal = class {
6589
6589
  this.displayForMobile();
6590
6590
  }
6591
6591
  sortColorsBySimilarity(colors) {
6592
- if (colors.length <= 1)
6592
+ if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
6593
6593
  return colors;
6594
6594
  const sortedColors = [];
6595
6595
  const remainingColors = [...colors];
6596
6596
  // Start with the first color
6597
6597
  sortedColors.push(remainingColors.shift());
6598
- while (remainingColors.length > 0) {
6598
+ while ((remainingColors === null || remainingColors === void 0 ? void 0 : remainingColors.length) > 0) {
6599
6599
  // Find the most similar color to the last color in sortedColors
6600
- const lastColor = sortedColors[sortedColors.length - 1];
6600
+ const lastColor = sortedColors[(sortedColors === null || sortedColors === void 0 ? void 0 : sortedColors.length) - 1];
6601
6601
  let mostSimilarIndex = 0;
6602
6602
  let minDistance = Infinity;
6603
6603
  remainingColors.forEach((color, index) => {
@@ -6641,9 +6641,9 @@ const Modal = class {
6641
6641
  return 'other';
6642
6642
  }
6643
6643
  sortColorsByHueAndSimilarity(colors) {
6644
- if (colors.length <= 1)
6644
+ if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
6645
6645
  return colors;
6646
- // Group colors by their hue family
6646
+ // Group valid colors by their hue family
6647
6647
  const colorGroups = {
6648
6648
  red: [],
6649
6649
  yellow: [],
@@ -6656,7 +6656,6 @@ const Modal = class {
6656
6656
  white: [],
6657
6657
  other: [],
6658
6658
  };
6659
- // Sort colors into groups
6660
6659
  colors.forEach(color => {
6661
6660
  const group = this.getColorHueGroup(color.hex);
6662
6661
  colorGroups[group].push(color);
@@ -6669,7 +6668,7 @@ const Modal = class {
6669
6668
  sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
6670
6669
  }
6671
6670
  });
6672
- // Combine all sorted groups
6671
+ // Combine all sorted groups, then append invalid colors at the end
6673
6672
  return sortedGroups.flat();
6674
6673
  }
6675
6674
  async fetchColorsData({ reset = false } = {}) {
@@ -6922,7 +6921,7 @@ const MySearch = class {
6922
6921
  };
6923
6922
  MySearch.style = indexCss$2;
6924
6923
 
6925
- const indexCss$1 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1.sc-my-select,300..900&family=Poppins.sc-my-select:ital,wght@0.sc-my-select,100.sc-my-select;0.sc-my-select,200.sc-my-select;0.sc-my-select,300.sc-my-select;0.sc-my-select,400.sc-my-select;0.sc-my-select,500.sc-my-select;0.sc-my-select,600.sc-my-select;0.sc-my-select,700.sc-my-select;0.sc-my-select,800.sc-my-select;0.sc-my-select,900.sc-my-select;1.sc-my-select,100.sc-my-select;1.sc-my-select,200.sc-my-select;1.sc-my-select,300.sc-my-select;1.sc-my-select,400.sc-my-select;1.sc-my-select,500.sc-my-select;1.sc-my-select,600.sc-my-select;1.sc-my-select,700.sc-my-select;1.sc-my-select,800.sc-my-select;1.sc-my-select,900&display=swap\").sc-my-select; .tinting-wrapper.sc-my-select *.sc-my-select{font-family:\"Poppins\", sans-serif}.select.sc-my-select{position:relative;width:300px}@media (max-width: 768px){.select.sc-my-select{width:100%}}.select.sc-my-select .input-wrapper.sc-my-select{position:relative;display:flex;align-items:flex-start}.select.sc-my-select input.sc-my-select{font-size:16px;padding:16px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c;box-sizing:border-box;padding-right:50px}.select.sc-my-select button.sc-my-select{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;width:40px;height:100%;display:flex;align-items:center;justify-content:center}.select.sc-my-select button.sc-my-select img.sc-my-select{transition:transform 0.3s ease}.select.sc-my-select button.sc-my-select img.rotated.sc-my-select{transform:rotate(180deg)}.select.sc-my-select .dropdown.sc-my-select{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #dfdfdf;border-radius:5px;max-height:200px;overflow-y:auto;z-index:1000;padding:0;margin:0}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select{padding:0;margin:0;padding:10px;cursor:pointer;list-style:none;text-align:left}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select:hover{background:#f5f5f5}.select.sc-my-select .dropdown.sc-my-select .no-results.sc-my-select{padding:10px;text-align:center;color:#999}";
6924
+ const indexCss$1 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1.sc-my-select,300..900&family=Poppins.sc-my-select:ital,wght@0.sc-my-select,100.sc-my-select;0.sc-my-select,200.sc-my-select;0.sc-my-select,300.sc-my-select;0.sc-my-select,400.sc-my-select;0.sc-my-select,500.sc-my-select;0.sc-my-select,600.sc-my-select;0.sc-my-select,700.sc-my-select;0.sc-my-select,800.sc-my-select;0.sc-my-select,900.sc-my-select;1.sc-my-select,100.sc-my-select;1.sc-my-select,200.sc-my-select;1.sc-my-select,300.sc-my-select;1.sc-my-select,400.sc-my-select;1.sc-my-select,500.sc-my-select;1.sc-my-select,600.sc-my-select;1.sc-my-select,700.sc-my-select;1.sc-my-select,800.sc-my-select;1.sc-my-select,900&display=swap\").sc-my-select; .tinting-wrapper.sc-my-select *.sc-my-select{font-family:\"Poppins\", sans-serif}.select.sc-my-select{position:relative;width:300px}@media (max-width: 768px){.select.sc-my-select{width:100%}}.select.sc-my-select .input-wrapper.sc-my-select{position:relative;display:flex;align-items:flex-start}.select.sc-my-select input.sc-my-select{font-size:16px;padding:16px;border-radius:27.35px;border:1px solid #dfdfdf;width:100%;color:#4c4c4c;box-sizing:border-box;padding-right:50px}.select.sc-my-select button.sc-my-select{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;width:40px;height:100%;display:flex;align-items:center;justify-content:center}.select.sc-my-select button.sc-my-select img.sc-my-select{transition:transform 0.3s ease}.select.sc-my-select button.sc-my-select img.rotated.sc-my-select{transform:rotate(180deg)}.select.sc-my-select .dropdown.sc-my-select{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #dfdfdf;border-radius:5px;max-height:200px;overflow-y:auto;z-index:1000;padding:0;margin:0}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select{padding:0;margin:0;padding:10px;cursor:pointer;list-style:none;text-align:left}.select.sc-my-select .dropdown.sc-my-select li.sc-my-select:hover{background:#f5f5f5}.select.sc-my-select .dropdown.sc-my-select .no-results.sc-my-select{padding:10px;text-align:center;color:#999}@media (max-width: 768px){.select.sc-my-select .dropdown.sc-my-select{position:relative}}";
6926
6925
 
6927
6926
  const MySelect = class {
6928
6927
  constructor(hostRef) {