@ppg_pl/tinting 0.0.1 → 0.0.2
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.
- package/dist/cjs/modal-header_9.cjs.entry.js +16 -12
- package/dist/cjs/modal-header_9.cjs.entry.js.map +1 -1
- package/dist/collection/components/modal/index.js +15 -11
- package/dist/collection/components/modal/index.js.map +1 -1
- package/dist/collection/components/select/index.css +5 -0
- package/dist/components/index10.js +15 -11
- package/dist/components/index10.js.map +1 -1
- package/dist/components/index4.js +1 -1
- package/dist/components/index4.js.map +1 -1
- package/dist/esm/modal-header_9.entry.js +16 -12
- package/dist/esm/modal-header_9.entry.js.map +1 -1
- package/dist/tinting/{p-fa35b3ef.entry.js → p-cd431d43.entry.js} +2 -2
- package/dist/tinting/p-cd431d43.entry.js.map +1 -0
- package/dist/tinting/tinting.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-fa35b3ef.entry.js → p-cd431d43.entry.js} +2 -2
- package/www/build/p-cd431d43.entry.js.map +1 -0
- package/www/build/tinting.esm.js +1 -1
- package/dist/tinting/p-fa35b3ef.entry.js.map +0 -1
- package/www/build/p-fa35b3ef.entry.js.map +0 -1
|
@@ -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":";;SAAgB,QAAQ,CAAC,IAA8B,EAAE,IAAY;EACnE,IAAI,OAAsC,CAAC;EAE3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG;MACZ,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;KACf,CAAC;IAEF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;GACnC,CAAC;AACJ;;ACZA,MAAM,QAAQ,GAAG
|
|
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) => {
|
|
@@ -6613,6 +6613,8 @@ const Modal = class {
|
|
|
6613
6613
|
return sortedColors;
|
|
6614
6614
|
}
|
|
6615
6615
|
getColorHueGroup(hex) {
|
|
6616
|
+
if (!hex || !chroma.valid(hex))
|
|
6617
|
+
return 'other';
|
|
6616
6618
|
const color = chroma(hex);
|
|
6617
6619
|
const hue = color.get('hsl.h');
|
|
6618
6620
|
const saturation = color.get('hsl.s');
|
|
@@ -6641,9 +6643,12 @@ const Modal = class {
|
|
|
6641
6643
|
return 'other';
|
|
6642
6644
|
}
|
|
6643
6645
|
sortColorsByHueAndSimilarity(colors) {
|
|
6644
|
-
if (colors.length <= 1)
|
|
6646
|
+
if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
|
|
6645
6647
|
return colors;
|
|
6646
|
-
//
|
|
6648
|
+
// Separate valid and invalid hex colors
|
|
6649
|
+
const validColors = colors.filter(c => typeof c.hex === 'string' && c.hex && chroma.valid(c.hex));
|
|
6650
|
+
const invalidColors = colors.filter(c => !c.hex || !chroma.valid(c.hex));
|
|
6651
|
+
// Group valid colors by their hue family
|
|
6647
6652
|
const colorGroups = {
|
|
6648
6653
|
red: [],
|
|
6649
6654
|
yellow: [],
|
|
@@ -6656,8 +6661,7 @@ const Modal = class {
|
|
|
6656
6661
|
white: [],
|
|
6657
6662
|
other: [],
|
|
6658
6663
|
};
|
|
6659
|
-
|
|
6660
|
-
colors.forEach(color => {
|
|
6664
|
+
validColors.forEach(color => {
|
|
6661
6665
|
const group = this.getColorHueGroup(color.hex);
|
|
6662
6666
|
colorGroups[group].push(color);
|
|
6663
6667
|
});
|
|
@@ -6669,11 +6673,11 @@ const Modal = class {
|
|
|
6669
6673
|
sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
|
|
6670
6674
|
}
|
|
6671
6675
|
});
|
|
6672
|
-
// Combine all sorted groups
|
|
6673
|
-
return sortedGroups.flat();
|
|
6676
|
+
// Combine all sorted groups, then append invalid colors at the end
|
|
6677
|
+
return [...sortedGroups.flat(), ...invalidColors];
|
|
6674
6678
|
}
|
|
6675
6679
|
async fetchColorsData({ reset = false } = {}) {
|
|
6676
|
-
if (this.loading
|
|
6680
|
+
if (this.loading)
|
|
6677
6681
|
return;
|
|
6678
6682
|
this.loading = true;
|
|
6679
6683
|
try {
|
|
@@ -6922,7 +6926,7 @@ const MySearch = class {
|
|
|
6922
6926
|
};
|
|
6923
6927
|
MySearch.style = indexCss$2;
|
|
6924
6928
|
|
|
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}";
|
|
6929
|
+
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
6930
|
|
|
6927
6931
|
const MySelect = class {
|
|
6928
6932
|
constructor(hostRef) {
|