@aqua-ds/web-components
Version:
AquaDS Web Components
346 lines (341 loc) • 16.4 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { L as Label } from './label.js';
import { e as emitEvent } from './eventEmitter.js';
import { a as defaultPresetColors, d as defineCustomElement$8 } from './aq-sketch-picker2.js';
import { d as defineCustomElement$r } from './aq-alpha2.js';
import { d as defineCustomElement$q } from './aq-autocomplete2.js';
import { d as defineCustomElement$p } from './aq-autocomplete-core2.js';
import { d as defineCustomElement$o } from './aq-autocomplete-item2.js';
import { d as defineCustomElement$n } from './aq-badge2.js';
import { d as defineCustomElement$m } from './aq-banner2.js';
import { d as defineCustomElement$l } from './aq-button2.js';
import { d as defineCustomElement$k } from './aq-checkboard2.js';
import { d as defineCustomElement$j } from './aq-checkbox2.js';
import { d as defineCustomElement$i } from './aq-divider2.js';
import { d as defineCustomElement$h } from './aq-editable-input2.js';
import { d as defineCustomElement$g } from './aq-field-group2.js';
import { d as defineCustomElement$f } from './aq-flag2.js';
import { d as defineCustomElement$e } from './aq-helper-text2.js';
import { d as defineCustomElement$d } from './aq-hue2.js';
import { d as defineCustomElement$c } from './aq-label2.js';
import { d as defineCustomElement$b } from './aq-popover2.js';
import { d as defineCustomElement$a } from './aq-radio2.js';
import { d as defineCustomElement$9 } from './aq-saturation2.js';
import { d as defineCustomElement$7 } from './aq-tag2.js';
import { d as defineCustomElement$6 } from './aq-tag-group2.js';
import { d as defineCustomElement$5 } from './aq-text-field2.js';
import { d as defineCustomElement$4 } from './aq-tooltip2.js';
import { d as defineCustomElement$3 } from './aq-transition2.js';
import { d as defineCustomElement$2 } from './virtual-scroll-list2.js';
const aqColorPickerCss = ".aq-color-picker{width:232px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.aq-color-picker__label{display:-ms-flexbox;display:flex;margin-bottom:4px}.aq-color-picker__selector{display:-ms-flexbox;display:flex}.aq-color-picker__selector .aq-button{background:#fff;padding:4px}.aq-color-picker__selector--error .aq-button{border-color:var(--color-danger-base)}.aq-color-picker__selector--plain .aq-button.is-outline{border-color:none}.aq-color-picker__selector--plain .aq-button.is-outline:hover{border:1px solid var(--color-paper-light);border-right:1px solid var(--color-paper-light)}.aq-color-picker__selector--readonly .aq-button.button.is-disabled{border-color:transparent;margin-left:-5px}.aq-color-picker__miniature{position:relative;width:24px;height:24px;border-radius:2px;background-color:#892cd1}.aq-color-picker__miniature-vector{position:absolute;height:4px;width:4px;border:2px solid;border-color:transparent var(--color-paper-base) var(--color-paper-base) transparent;bottom:2px;right:2px}.aq-color-picker__line-transparent-1{border-top:1px solid var(--color-danger-base);position:absolute;height:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:26px;top:9.5px;left:-3px}.aq-color-picker__line-transparent-2{border-top:1px solid var(--color-danger-base);position:absolute;height:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:2px;bottom:0.5px;right:0px}.aq-color-picker__container{width:232px;position:fixed;background:white;-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic);border-radius:4px}.aq-color-picker__container--show{display:block}.aq-color-picker__container--hide{display:none}.aq-color-picker .iro-wrapper-with-slot{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-align:start;align-items:flex-start}.aq-color-picker ::slotted([slot=custom-action]){display:inline-block;padding:4px;font-size:14px}";
const AqColorPicker$1 = /*@__PURE__*/ proxyCustomElement(class AqColorPicker extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = '';
this.label = '';
this.isError = false;
this.isPlain = false;
this.selectColor = true;
this.isRequired = false;
this.isDisabled = false;
this.isReadonly = false;
this.alpha = true;
this.presetColors = defaultPresetColors;
this.isVisible = true;
this.colors = { hsv: { h: 0, s: 0, v: 0, a: 0 }, hsl: { h: 0, s: 0, l: 0, a: 0 }, rgba: { r: 0, g: 0, b: 0, a: 0 }, hex: '', hex8: '', a: 0 };
this.textColor = '';
this.textColorField = '';
this.labelHelper = Label(this);
this.activatorElement = null;
this.popoverConfig = {
hideOnClick: false,
hideOnClickOutside: false,
trigger: 'click',
interactive: true,
appendTo: document.body,
};
}
handleValueChange(newValue, oldValue) {
this.onValueChange(newValue, oldValue);
}
handleTextColorChange(newValue, oldValue) {
if (newValue !== oldValue) {
this.textColorField = newValue;
}
}
handleTextColorFieldChange(newValue, oldValue) {
if (newValue !== oldValue && newValue !== undefined) {
this.value = newValue;
}
}
get showSelector() {
return this.selectColor;
}
get disabled() {
return this.isDisabled || this.isReadonly;
}
get isTransparent() {
return this.textColorField?.substring(this.textColorField?.length - 2)?.toLowerCase() === '00';
}
cssClassAqColorPicker() {
return {
'aq-color-picker__selector': true,
'aq-color-picker__selector--error': this.isError,
'aq-color-picker__selector--plain': this.isPlain,
'aq-color-picker__selector--readonly': this.isReadonly,
};
}
handleClick() {
}
cssClassAqColorPickerContainer() {
return {
'aq-color-picker__container': true,
'aq-color-picker__container--show': this.isVisible,
'aq-color-picker__container--hide': !this.isVisible,
};
}
get getPopoverConfig() {
return {
...this.popoverConfig,
placement: 'bottom-start',
maxWidth: 'auto',
offset: [0, 0],
onClickOutside: (instance, event) => {
const target = event.target;
const isAutocompletePopover = target.closest('aq-autocomplete-core') ||
target.closest('.tippy-box[data-tippy-root]') ||
target.closest('[data-tippy-root]');
const isColorPickerPopover = target.closest('aq-color-picker') ||
target.closest('.aq-color-picker__container');
if (isAutocompletePopover) {
return;
}
if (isColorPickerPopover) {
return;
}
instance?.hide();
},
};
}
componentDidLoad() {
requestAnimationFrame(() => {
if (!this.activatorElement) {
const activator = this.el.querySelector('.aq-color-picker__selector');
if (activator) {
this.activatorElement = activator;
}
}
this.validateValue();
});
}
validateValue() {
if (this.value !== '#000000FF' && this.value !== '') {
this.onValueChange(this.value);
}
else {
this.onValueChange('#892CD1FF');
}
}
onValueChange(newVal, oldVal) {
if (newVal !== oldVal) {
this.textColor = newVal;
}
}
handleInputText(e) {
if (e?.detail?.value !== undefined) {
this.textColorField = e?.detail?.value;
}
}
handleInputSketch(e) {
if (e?.detail?.value !== 0 && e?.detail?.value !== 1) {
this.textColorField = e?.detail?.value?.hex8;
}
if (this.textColorField !== undefined) {
this.value = this.textColorField;
emitEvent('input', this.el, { value: this.textColorField, e }, e);
}
}
render() {
const cssClassAqColorPicker = this.cssClassAqColorPicker();
const cssClassAqColorPickerContainer = this.cssClassAqColorPickerContainer();
const getPopoverConfig = this.getPopoverConfig;
return (h(Host, { key: '3273f4c6568eef939024916ecdc41e8d4ae8a38f', class: "aq-color-picker" }, h("aq-label", { key: '0ca5ced97d86b6e4f7fb035d7e6eb8c7335234b5', class: "aq-color-picker__label", ...this.labelHelper.bindsLabel }, h("span", { key: '83c4aa064cd7e962b2c42cda55fc2aa05024c6f6', slot: "text" }, this.label)), h("div", { key: '6b2fcb69e76b935350b336fabe4c91dc2131e0fd', class: cssClassAqColorPicker, onClick: this.handleClick }, h("aq-field-group", { key: '48f28ee3555a80bc3d5af166a22c08770efe4147', isError: this.isError }, this.showSelector && h("aq-button", { key: '1c0508e93109dadb99e7e1cd2687469952eaf9d3', isOutline: true, isPlain: this.isPlain, isDisabled: this.disabled }, h("div", { key: '07d1920489199179c915caed7a062e6c561f4ecf', class: "aq-color-picker__miniature", style: { backgroundColor: this.textColorField } }, h("span", { key: 'e5e5d0d70cd5feeb14b403a9f59a7dfed83a991a', class: "aq-color-picker__miniature-vector" }), this.isTransparent && h("span", { key: '4ebf95c09c351c23fe7b53cc88d9c26577caa28b', class: "aq-color-picker__line-transparent-1" }), this.isTransparent && h("span", { key: '94789ce08b79d2df1aa2b525c864e4f60c43d5b5', class: "aq-color-picker__line-transparent-2" }))), h("aq-text-field", { key: '77121de6344ad9ad2eb3e019f1c652b985e87bca', isDisabled: this.isDisabled, onInput: (e) => this.handleInputText(e), value: this.textColorField, isReadonly: this.isReadonly, isError: this.isError, isPlain: this.isPlain })), !this.isDisabled && !this.isReadonly && h("aq-popover", { key: '50d0451a957a79ba827c4c12232e56ea09e7617a', slot: "popover", disabled: this.isDisabled || this.isReadonly, trigger: this.activatorElement, config: { ...getPopoverConfig } }, h("div", { key: 'fecd8d91592b433736c2b8a4b0f400bdab08e0af', class: cssClassAqColorPickerContainer }, h("aq-sketch-picker", { key: 'cd1537b68c4b4697a9fb570f2bb75c9d2c04223f', presetColors: this.presetColors, onInput: (e) => this.handleInputSketch(e), value: this.colors, newColor: this.textColor, disableAlpha: !this.alpha }))))));
}
get el() { return this; }
static get watchers() { return {
"value": ["handleValueChange"],
"textColor": ["handleTextColorChange"],
"textColorField": ["handleTextColorFieldChange"]
}; }
static get style() { return aqColorPickerCss; }
}, [256, "aq-color-picker", {
"value": [1537],
"label": [1],
"isError": [4, "is-error"],
"isPlain": [4, "is-plain"],
"selectColor": [4, "select-color"],
"isRequired": [4, "is-required"],
"isDisabled": [4, "is-disabled"],
"isReadonly": [4, "is-readonly"],
"alpha": [4],
"presetColors": [16, "preset-colors"],
"isVisible": [32],
"colors": [32],
"textColor": [32],
"textColorField": [32],
"activatorElement": [32],
"popoverConfig": [32]
}, undefined, {
"value": ["handleValueChange"],
"textColor": ["handleTextColorChange"],
"textColorField": ["handleTextColorFieldChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-color-picker", "aq-alpha", "aq-autocomplete", "aq-autocomplete-core", "aq-autocomplete-item", "aq-badge", "aq-banner", "aq-button", "aq-checkboard", "aq-checkbox", "aq-divider", "aq-editable-input", "aq-field-group", "aq-flag", "aq-helper-text", "aq-hue", "aq-label", "aq-popover", "aq-radio", "aq-saturation", "aq-sketch-picker", "aq-tag", "aq-tag-group", "aq-text-field", "aq-tooltip", "aq-transition", "virtual-scroll-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-color-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqColorPicker$1);
}
break;
case "aq-alpha":
if (!customElements.get(tagName)) {
defineCustomElement$r();
}
break;
case "aq-autocomplete":
if (!customElements.get(tagName)) {
defineCustomElement$q();
}
break;
case "aq-autocomplete-core":
if (!customElements.get(tagName)) {
defineCustomElement$p();
}
break;
case "aq-autocomplete-item":
if (!customElements.get(tagName)) {
defineCustomElement$o();
}
break;
case "aq-badge":
if (!customElements.get(tagName)) {
defineCustomElement$n();
}
break;
case "aq-banner":
if (!customElements.get(tagName)) {
defineCustomElement$m();
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$l();
}
break;
case "aq-checkboard":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "aq-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "aq-editable-input":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "aq-field-group":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "aq-flag":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "aq-hue":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "aq-radio":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-saturation":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-sketch-picker":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-tag":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-tag-group":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "virtual-scroll-list":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqColorPicker = AqColorPicker$1;
const defineCustomElement = defineCustomElement$1;
export { AqColorPicker, defineCustomElement };