@foxy.io/elements 1.40.0-beta.2 → 1.40.0-beta.4
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/cdn/foxy-admin-subscription-form.js +1 -1
- package/dist/cdn/foxy-cart-form.js +1 -1
- package/dist/cdn/foxy-coupon-code-form.js +1 -1
- package/dist/cdn/foxy-coupon-form.js +1 -1
- package/dist/cdn/foxy-customer-portal-settings-form.js +1 -1
- package/dist/cdn/foxy-customer-portal.js +1 -1
- package/dist/cdn/foxy-customer.js +1 -1
- package/dist/cdn/foxy-email-template-form.js +1 -1
- package/dist/cdn/foxy-experimental-add-to-cart-builder.js +1 -14
- package/dist/cdn/foxy-gift-card-code-form.js +1 -1
- package/dist/cdn/foxy-gift-card-form.js +1 -1
- package/dist/cdn/foxy-item-category-form.js +1 -1
- package/dist/cdn/foxy-item-form.js +1 -1
- package/dist/cdn/foxy-item-option-form.js +1 -1
- package/dist/cdn/foxy-native-integration-form.js +1 -1
- package/dist/cdn/foxy-payment-method-card.js +1 -1
- package/dist/cdn/foxy-payments-api-fraud-protection-form.js +1 -1
- package/dist/cdn/foxy-payments-api-payment-method-form.js +1 -1
- package/dist/cdn/foxy-payments-api-payment-preset-form.js +1 -1
- package/dist/cdn/foxy-store-form.js +1 -1
- package/dist/cdn/foxy-store-shipping-method-form.js +1 -1
- package/dist/cdn/foxy-subscription-form.js +1 -1
- package/dist/cdn/foxy-subscription-settings-form.js +1 -1
- package/dist/cdn/foxy-tax-form.js +1 -1
- package/dist/cdn/foxy-template-config-form.js +1 -1
- package/dist/cdn/foxy-template-form.js +1 -1
- package/dist/cdn/foxy-template-set-form.js +1 -1
- package/dist/cdn/foxy-transaction.js +1 -1
- package/dist/cdn/foxy-update-payment-method-form.js +1 -1
- package/dist/cdn/foxy-user-invitation-form.js +1 -1
- package/dist/cdn/foxy-webhook-form.js +1 -1
- package/dist/cdn/{shared-0c134ce7.js → shared-0098edce.js} +1 -1
- package/dist/cdn/shared-511fcf8e.js +15 -0
- package/dist/cdn/shared-653368ea.js +1 -0
- package/dist/cdn/translations/native-integration-form/en.json +82 -17
- package/dist/cdn/translations/template-config-form/en.json +6 -6
- package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.d.ts +1 -0
- package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js +24 -2
- package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js.map +1 -1
- package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.d.ts +1 -2
- package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.js +32 -52
- package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.js.map +1 -1
- package/dist/elements/public/NativeIntegrationForm/index.d.ts +1 -0
- package/dist/elements/public/NativeIntegrationForm/index.js +1 -0
- package/dist/elements/public/NativeIntegrationForm/index.js.map +1 -1
- package/dist/elements/public/NativeIntegrationForm/internal/InternalNativeIntegrationFormCodeMapControl/InternalNativeIntegrationFormCodeMapControl.d.ts +12 -0
- package/dist/elements/public/NativeIntegrationForm/internal/InternalNativeIntegrationFormCodeMapControl/InternalNativeIntegrationFormCodeMapControl.js +123 -0
- package/dist/elements/public/NativeIntegrationForm/internal/InternalNativeIntegrationFormCodeMapControl/InternalNativeIntegrationFormCodeMapControl.js.map +1 -0
- package/dist/elements/public/NativeIntegrationForm/internal/InternalNativeIntegrationFormCodeMapControl/index.d.ts +8 -0
- package/dist/elements/public/NativeIntegrationForm/internal/InternalNativeIntegrationFormCodeMapControl/index.js +10 -0
- package/dist/elements/public/NativeIntegrationForm/internal/InternalNativeIntegrationFormCodeMapControl/index.js.map +1 -0
- package/dist/elements/public/TaxForm/TaxForm.js +1 -1
- package/dist/elements/public/TaxForm/TaxForm.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.d.ts +2 -2
- package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js +6 -9
- package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControl.d.ts +0 -1
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControl.js +40 -66
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControl.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.d.ts +8 -12
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.js +69 -91
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.d.ts +1 -0
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.js +1 -0
- package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/cdn/shared-80a1bf6f.js +0 -1
- package/dist/cdn/shared-aca2705d.js +0 -1
|
@@ -6,7 +6,6 @@ export class InternalTemplateConfigFormFilterValuesControl extends InternalEdita
|
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
8
|
this.countries = null;
|
|
9
|
-
this.regions = null;
|
|
10
9
|
this.__newCountry = '';
|
|
11
10
|
}
|
|
12
11
|
static get properties() {
|
|
@@ -14,32 +13,26 @@ export class InternalTemplateConfigFormFilterValuesControl extends InternalEdita
|
|
|
14
13
|
...super.properties,
|
|
15
14
|
__newCountry: { attribute: false },
|
|
16
15
|
countries: {},
|
|
17
|
-
regions: {},
|
|
18
16
|
};
|
|
19
17
|
}
|
|
20
18
|
renderControl() {
|
|
21
19
|
var _a, _b, _c, _d;
|
|
22
|
-
const
|
|
20
|
+
const options = Object.values((_c = (_b = (_a = this.__countriesLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : {});
|
|
21
|
+
const filteredOptions = options.filter(c => !(c.cc2 in this._value));
|
|
23
22
|
return html `
|
|
24
23
|
<div class="space-y-s" data-testid="countries">
|
|
25
24
|
${Object.entries(this._value).map(([country, regions]) => {
|
|
26
|
-
var _a
|
|
27
|
-
|
|
28
|
-
try {
|
|
29
|
-
const url = new URL((_a = this.regions) !== null && _a !== void 0 ? _a : '');
|
|
30
|
-
url.searchParams.set('country_code', country);
|
|
31
|
-
regionsLink = url.toString();
|
|
32
|
-
}
|
|
33
|
-
catch (_c) {
|
|
34
|
-
regionsLink = '';
|
|
35
|
-
}
|
|
25
|
+
var _a;
|
|
26
|
+
const option = options.find(o => o.cc2 === country);
|
|
36
27
|
return html `
|
|
37
28
|
<foxy-internal-template-config-form-filter-values-control-item
|
|
38
29
|
regions=${JSON.stringify(regions === '*' ? [] : regions)}
|
|
30
|
+
options=${
|
|
31
|
+
// @ts-expect-error SDK types are not up-to-date
|
|
32
|
+
JSON.stringify(Array.isArray(option === null || option === void 0 ? void 0 : option.regions) ? {} : (_a = option === null || option === void 0 ? void 0 : option.regions) !== null && _a !== void 0 ? _a : {})}
|
|
39
33
|
infer=""
|
|
40
34
|
code=${country}
|
|
41
|
-
name=${ifDefined(
|
|
42
|
-
href=${regionsLink}
|
|
35
|
+
name=${ifDefined(option === null || option === void 0 ? void 0 : option.default)}
|
|
43
36
|
?disabled=${this.disabled}
|
|
44
37
|
?readonly=${this.readonly}
|
|
45
38
|
@update:regions=${(evt) => {
|
|
@@ -57,60 +50,41 @@ export class InternalTemplateConfigFormFilterValuesControl extends InternalEdita
|
|
|
57
50
|
</foxy-internal-template-config-form-filter-values-control-item>
|
|
58
51
|
`;
|
|
59
52
|
})}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
53
|
+
${filteredOptions.length === 0 && options.length !== 0
|
|
54
|
+
? ''
|
|
55
|
+
: html `
|
|
56
|
+
<div
|
|
57
|
+
data-testid="new-country"
|
|
58
|
+
class=${classMap({
|
|
59
|
+
'h-m flex items-center rounded-s transition-colors': true,
|
|
60
|
+
'border border-contrast-10 ring-primary-50': true,
|
|
61
|
+
'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,
|
|
62
|
+
'flex': !this.readonly,
|
|
63
|
+
'hidden': this.readonly,
|
|
64
|
+
})}
|
|
65
|
+
>
|
|
66
|
+
<select
|
|
67
|
+
class=${classMap({
|
|
68
|
+
'appearance-none bg-transparent h-m text-m px-s flex-1 font-medium': true,
|
|
69
|
+
'transition-colors rounded-s focus-outline-none': true,
|
|
70
|
+
'cursor-pointer hover-bg-contrast-5': !this.disabled,
|
|
71
|
+
'text-disabled': this.disabled,
|
|
72
|
+
})}
|
|
73
|
+
?disabled=${this.disabled}
|
|
74
|
+
@change=${(evt) => {
|
|
75
|
+
const target = evt.currentTarget;
|
|
76
|
+
this.__newCountry = target.value;
|
|
81
77
|
this.__addCountry();
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
aria-label=${this.t('create')}
|
|
91
|
-
class=${classMap({
|
|
92
|
-
'mr-xs flex-shrink-0': true,
|
|
93
|
-
'flex items-center justify-center rounded-s transition-colors': true,
|
|
94
|
-
'text-transparent cursor-default': !this.__newCountry,
|
|
95
|
-
'bg-contrast-5 text-body cursor-pointer': !!this.__newCountry,
|
|
96
|
-
'hover-bg-success hover-text-success-contrast': !!this.__newCountry,
|
|
97
|
-
'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newCountry,
|
|
98
|
-
})}
|
|
99
|
-
style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
|
|
100
|
-
?disabled=${!this.__newCountry || this.disabled}
|
|
101
|
-
@click=${this.__addCountry}
|
|
102
|
-
>
|
|
103
|
-
<iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
|
|
104
|
-
</button>
|
|
105
|
-
</div>
|
|
78
|
+
target.value = '';
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
81
|
+
<option value="" disabled selected>${this.t('add_country')}</option>
|
|
82
|
+
${filteredOptions.map(option => html `<option value=${option.cc2}>${option.default}</option>`)}
|
|
83
|
+
</select>
|
|
84
|
+
</div>
|
|
85
|
+
`}
|
|
106
86
|
</div>
|
|
107
87
|
|
|
108
|
-
<datalist id="list">
|
|
109
|
-
${Object.entries(countries).map(([code, country]) => {
|
|
110
|
-
return html `<option value=${code}>${country.default}</option>`;
|
|
111
|
-
})}
|
|
112
|
-
</datalist>
|
|
113
|
-
|
|
114
88
|
<foxy-nucleon
|
|
115
89
|
infer=""
|
|
116
90
|
href=${ifDefined((_d = this.countries) !== null && _d !== void 0 ? _d : void 0)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InternalTemplateConfigFormFilterValuesControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControl.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InternalTemplateConfigFormFilterValuesControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InternalTemplateConfigFormFilterValuesControlItem } from './InternalTemplateConfigFormFilterValuesControlItem';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { TemplateResult, html } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../../../utils/class-map';\n\nexport class InternalTemplateConfigFormFilterValuesControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __newCountry: { attribute: false },\n countries: {},\n };\n }\n\n countries: string | null = null;\n\n private __newCountry = '';\n\n renderControl(): TemplateResult {\n const options = Object.values(this.__countriesLoader?.data?.values ?? {});\n const filteredOptions = options.filter(c => !(c.cc2 in this._value));\n\n return html`\n <div class=\"space-y-s\" data-testid=\"countries\">\n ${Object.entries(this._value).map(([country, regions]) => {\n const option = options.find(o => o.cc2 === country);\n\n return html`\n <foxy-internal-template-config-form-filter-values-control-item\n regions=${JSON.stringify(regions === '*' ? [] : regions)}\n options=${\n // @ts-expect-error SDK types are not up-to-date\n JSON.stringify(Array.isArray(option?.regions) ? {} : option?.regions ?? {})\n }\n infer=\"\"\n code=${country}\n name=${ifDefined(option?.default)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @update:regions=${(evt: CustomEvent) => {\n const newCountries = { ...this._value };\n const newRegions = (\n evt.currentTarget as InternalTemplateConfigFormFilterValuesControlItem\n ).regions;\n\n newCountries[country] = newRegions.length ? newRegions : '*';\n this._value = newCountries;\n }}\n @delete=${() => {\n const newCountries = { ...this._value };\n delete newCountries[country];\n this._value = newCountries;\n }}\n >\n </foxy-internal-template-config-form-filter-values-control-item>\n `;\n })}\n ${filteredOptions.length === 0 && options.length !== 0\n ? ''\n : html`\n <div\n data-testid=\"new-country\"\n class=${classMap({\n 'h-m flex items-center rounded-s transition-colors': true,\n 'border border-contrast-10 ring-primary-50': true,\n 'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <select\n class=${classMap({\n 'appearance-none bg-transparent h-m text-m px-s flex-1 font-medium': true,\n 'transition-colors rounded-s focus-outline-none': true,\n 'cursor-pointer hover-bg-contrast-5': !this.disabled,\n 'text-disabled': this.disabled,\n })}\n ?disabled=${this.disabled}\n @change=${(evt: Event) => {\n const target = evt.currentTarget as HTMLSelectElement;\n this.__newCountry = target.value;\n this.__addCountry();\n target.value = '';\n }}\n >\n <option value=\"\" disabled selected>${this.t('add_country')}</option>\n ${filteredOptions.map(\n option => html`<option value=${option.cc2}>${option.default}</option>`\n )}\n </select>\n </div>\n `}\n </div>\n\n <foxy-nucleon\n infer=\"\"\n href=${ifDefined(this.countries ?? void 0)}\n id=\"countriesLoader\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n private __addCountry() {\n this._value = { ...this._value, [this.__newCountry]: '*' };\n this.__newCountry = '';\n }\n\n private get __countriesLoader() {\n type Loader = NucleonElement<Resource<Rels.Countries>>;\n return this.renderRoot.querySelector<Loader>('#countriesLoader');\n }\n\n protected get _value(): Record<string, '*' | string[]> {\n return (super._value ?? {}) as Record<string, '*' | string[]>;\n }\n\n protected set _value(value: Record<string, '*' | string[]>) {\n super._value = value;\n }\n}\n"]}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { Resource } from '@foxy.io/sdk/core';
|
|
6
|
-
declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../../../mixins/translatable").TranslatableMixinHost> & {
|
|
7
|
-
defaultNS: string;
|
|
8
|
-
} & {
|
|
9
|
-
styles: import("lit-element").CSSResultArray;
|
|
10
|
-
} & import("lit-element").Constructor<import("../../../../../mixins/configurable").ConfigurableMixinHost>;
|
|
11
|
-
export declare class InternalTemplateConfigFormFilterValuesControlItem extends Base<Resource<Rels.Regions>> {
|
|
1
|
+
import type { PropertyDeclarations } from 'lit-element';
|
|
2
|
+
import type { TemplateResult } from 'lit-html';
|
|
3
|
+
import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
|
|
4
|
+
export declare class InternalTemplateConfigFormFilterValuesControlItem extends InternalControl {
|
|
12
5
|
static get properties(): PropertyDeclarations;
|
|
6
|
+
options: Record<string, {
|
|
7
|
+
n: string;
|
|
8
|
+
c: string;
|
|
9
|
+
}>;
|
|
13
10
|
regions: string[];
|
|
14
11
|
name: string;
|
|
15
12
|
code: string;
|
|
@@ -17,4 +14,3 @@ export declare class InternalTemplateConfigFormFilterValuesControlItem extends B
|
|
|
17
14
|
render(): TemplateResult;
|
|
18
15
|
private __addRegion;
|
|
19
16
|
}
|
|
20
|
-
export {};
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ConfigurableMixin } from "../../../../../mixins/configurable.js";
|
|
3
|
-
import { NucleonElement } from "../../../NucleonElement/NucleonElement.js";
|
|
4
|
-
import { ThemeableMixin } from "../../../../../mixins/themeable.js";
|
|
5
|
-
import { TranslatableMixin } from "../../../../../mixins/translatable.js";
|
|
1
|
+
import { InternalControl } from "../../../../internal/InternalControl/InternalControl.js";
|
|
6
2
|
import { classMap } from "../../../../../utils/class-map.js";
|
|
7
|
-
|
|
8
|
-
export class InternalTemplateConfigFormFilterValuesControlItem extends
|
|
3
|
+
import { html } from 'lit-html';
|
|
4
|
+
export class InternalTemplateConfigFormFilterValuesControlItem extends InternalControl {
|
|
9
5
|
constructor() {
|
|
10
6
|
super(...arguments);
|
|
7
|
+
this.options = {};
|
|
11
8
|
this.regions = [];
|
|
12
9
|
this.name = '';
|
|
13
10
|
this.code = '';
|
|
@@ -17,13 +14,15 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
|
|
|
17
14
|
return {
|
|
18
15
|
...super.properties,
|
|
19
16
|
__newRegion: { attribute: false },
|
|
17
|
+
options: { type: Object },
|
|
20
18
|
regions: { type: Array },
|
|
21
19
|
name: { type: String },
|
|
22
20
|
code: { type: String },
|
|
23
21
|
};
|
|
24
22
|
}
|
|
25
23
|
render() {
|
|
26
|
-
|
|
24
|
+
const options = Object.values(this.options);
|
|
25
|
+
const filteredOptions = options.filter(region => !this.regions.includes(region.c));
|
|
27
26
|
return html `
|
|
28
27
|
<div
|
|
29
28
|
class=${classMap({
|
|
@@ -34,7 +33,6 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
|
|
|
34
33
|
<div data-testid="country" class="h-m flex justify-between items-center bg-contrast-5">
|
|
35
34
|
<div style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)">
|
|
36
35
|
<span>${this.name || this.code}</span>
|
|
37
|
-
${this.name ? html `<span class="text-secondary">${this.code}</span>` : ''}
|
|
38
36
|
</div>
|
|
39
37
|
|
|
40
38
|
<button
|
|
@@ -55,91 +53,71 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
|
|
|
55
53
|
</button>
|
|
56
54
|
</div>
|
|
57
55
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
${name ? html `<span class="text-secondary">${code}</span>` : ''}
|
|
68
|
-
</span>
|
|
56
|
+
${options.length === 0
|
|
57
|
+
? ''
|
|
58
|
+
: html `
|
|
59
|
+
<div data-testid="regions" class="flex flex-wrap p-xs text-s">
|
|
60
|
+
${this.regions.map(region => {
|
|
61
|
+
var _a;
|
|
62
|
+
return html `
|
|
63
|
+
<div class="flex items-center rounded-s border border-contrast-10 h-s m-xs">
|
|
64
|
+
<span class="mx-s">${((_a = this.options[region]) === null || _a === void 0 ? void 0 : _a.n) || region}</span>
|
|
69
65
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
<button
|
|
67
|
+
aria-label=${this.t('delete')}
|
|
68
|
+
class=${classMap({
|
|
69
|
+
'items-center justify-center rounded-s transition-colors': true,
|
|
70
|
+
'hover-bg-error-10 hover-text-error': !this.disabled,
|
|
71
|
+
'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !this.disabled,
|
|
72
|
+
'cursor-default': this.disabled,
|
|
73
|
+
'flex': !this.readonly,
|
|
74
|
+
'hidden': this.readonly,
|
|
75
|
+
})}
|
|
76
|
+
style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
|
|
77
|
+
?disabled=${this.disabled}
|
|
78
|
+
@click=${() => {
|
|
79
|
+
this.regions = this.regions.filter(value => value !== region);
|
|
80
|
+
this.dispatchEvent(new CustomEvent('update:regions'));
|
|
81
|
+
}}
|
|
82
|
+
>
|
|
83
|
+
<iron-icon icon="icons:close" class="icon-inline text-m"></iron-icon>
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
86
|
+
`;
|
|
79
87
|
})}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
${filteredOptions.length === 0
|
|
89
|
+
? ''
|
|
90
|
+
: html `
|
|
91
|
+
<div
|
|
92
|
+
data-testid="new-region"
|
|
93
|
+
class=${classMap({
|
|
94
|
+
'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,
|
|
95
|
+
'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,
|
|
96
|
+
'flex': !this.readonly,
|
|
97
|
+
'hidden': this.readonly,
|
|
98
|
+
})}
|
|
99
|
+
>
|
|
100
|
+
<select
|
|
101
|
+
class=${classMap({
|
|
102
|
+
'appearance-none bg-transparent h-s text-s px-s font-medium': true,
|
|
103
|
+
'transition-colors rounded-s focus-outline-none': true,
|
|
104
|
+
'cursor-pointer hover-bg-contrast-5': !this.disabled,
|
|
105
|
+
})}
|
|
106
|
+
?disabled=${this.disabled}
|
|
107
|
+
@change=${(evt) => {
|
|
108
|
+
const target = evt.currentTarget;
|
|
109
|
+
this.__newRegion = target.value;
|
|
110
|
+
this.__addRegion();
|
|
111
|
+
target.value = '';
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
<option value="" disabled selected>${this.t('add_region')}</option>
|
|
115
|
+
${filteredOptions.map(region => html `<option value=${region.c}>${region.n}</option>`)}
|
|
116
|
+
</select>
|
|
117
|
+
</div>
|
|
118
|
+
`}
|
|
89
119
|
</div>
|
|
90
|
-
|
|
91
|
-
})}
|
|
92
|
-
|
|
93
|
-
<div
|
|
94
|
-
data-testid="new-region"
|
|
95
|
-
class=${classMap({
|
|
96
|
-
'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,
|
|
97
|
-
'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,
|
|
98
|
-
'flex': !this.readonly,
|
|
99
|
-
'hidden': this.readonly,
|
|
100
|
-
})}
|
|
101
|
-
>
|
|
102
|
-
<input
|
|
103
|
-
placeholder=${this.t('add_region')}
|
|
104
|
-
class="bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none"
|
|
105
|
-
style="width: 8rem"
|
|
106
|
-
list="list"
|
|
107
|
-
.value=${this.__newRegion}
|
|
108
|
-
?disabled=${this.disabled}
|
|
109
|
-
?readonly=${this.readonly}
|
|
110
|
-
@keydown=${(evt) => {
|
|
111
|
-
if (evt.key === 'Enter' && this.__newRegion)
|
|
112
|
-
this.__addRegion();
|
|
113
|
-
}}
|
|
114
|
-
@input=${(evt) => {
|
|
115
|
-
const target = evt.currentTarget;
|
|
116
|
-
this.__newRegion = target.value;
|
|
117
|
-
}}
|
|
118
|
-
/>
|
|
119
|
-
|
|
120
|
-
<button
|
|
121
|
-
style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
|
|
122
|
-
class=${classMap({
|
|
123
|
-
'flex-shrink-0': true,
|
|
124
|
-
'flex items-center justify-center rounded-s transition-colors': true,
|
|
125
|
-
'text-transparent cursor-default': !this.__newRegion,
|
|
126
|
-
'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,
|
|
127
|
-
'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
|
|
128
|
-
'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newRegion,
|
|
129
|
-
})}
|
|
130
|
-
?disabled=${this.disabled || !this.__newRegion}
|
|
131
|
-
@click=${this.__addRegion}
|
|
132
|
-
>
|
|
133
|
-
<iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
|
|
134
|
-
</button>
|
|
135
|
-
</div>
|
|
136
|
-
|
|
137
|
-
<datalist id="list">
|
|
138
|
-
${Object.values((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(region => {
|
|
139
|
-
return html `<option value=${region.code}>${region.default}</option>`;
|
|
140
|
-
})}
|
|
141
|
-
</datalist>
|
|
142
|
-
</div>
|
|
120
|
+
`}
|
|
143
121
|
</div>
|
|
144
122
|
`;
|
|
145
123
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InternalTemplateConfigFormFilterValuesControlItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../../../mixins/configurable';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class InternalTemplateConfigFormFilterValuesControlItem extends Base<\n Resource<Rels.Regions>\n> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __newRegion: { attribute: false },\n regions: { type: Array },\n name: { type: String },\n code: { type: String },\n };\n }\n\n regions: string[] = [];\n\n name = '';\n\n code = '';\n\n private __newRegion = '';\n\n render(): TemplateResult {\n return html`\n <div\n class=${classMap({\n 'border border-contrast-5 rounded-s font-medium overflow-hidden': true,\n 'text-disabled': this.disabled,\n })}\n >\n <div data-testid=\"country\" class=\"h-m flex justify-between items-center bg-contrast-5\">\n <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n <span>${this.name || this.code}</span>\n ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n </div>\n\n <button\n aria-label=${this.t('delete')}\n class=${classMap({\n 'mr-xs items-center justify-center rounded-full transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <div data-testid=\"regions\" class=\"flex flex-wrap p-xs text-s\">\n ${this.regions.map(region => {\n const name = this.data?.values[region]?.default;\n const code = region;\n\n return html`\n <div class=\"flex items-center rounded-s border border-contrast-10 h-s m-xs\">\n <span class=\"mx-s\">\n <span>${name || code}</span>\n ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n </span>\n\n <button\n aria-label=${this.t('delete')}\n class=${classMap({\n 'items-center justify-center rounded-s transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => {\n this.regions = this.regions.filter(value => value !== region);\n this.dispatchEvent(new CustomEvent('update:regions'));\n }}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n `;\n })}\n\n <div\n data-testid=\"new-region\"\n class=${classMap({\n 'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,\n 'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <input\n placeholder=${this.t('add_region')}\n class=\"bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none\"\n style=\"width: 8rem\"\n list=\"list\"\n .value=${this.__newRegion}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter' && this.__newRegion) this.__addRegion();\n }}\n @input=${(evt: InputEvent) => {\n const target = evt.currentTarget as HTMLInputElement;\n this.__newRegion = target.value;\n }}\n />\n\n <button\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n class=${classMap({\n 'flex-shrink-0': true,\n 'flex items-center justify-center rounded-s transition-colors': true,\n 'text-transparent cursor-default': !this.__newRegion,\n 'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,\n 'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n 'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newRegion,\n })}\n ?disabled=${this.disabled || !this.__newRegion}\n @click=${this.__addRegion}\n >\n <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <datalist id=\"list\">\n ${Object.values(this.data?.values ?? {}).map(region => {\n return html`<option value=${region.code}>${region.default}</option>`;\n })}\n </datalist>\n </div>\n </div>\n `;\n }\n\n private __addRegion() {\n this.regions = [...new Set([...this.regions, this.__newRegion])];\n this.__newRegion = '';\n this.dispatchEvent(new CustomEvent('update:regions'));\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"InternalTemplateConfigFormFilterValuesControlItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { classMap } from '../../../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport class InternalTemplateConfigFormFilterValuesControlItem extends InternalControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __newRegion: { attribute: false },\n options: { type: Object },\n regions: { type: Array },\n name: { type: String },\n code: { type: String },\n };\n }\n\n options: Record<string, { n: string; c: string }> = {};\n\n regions: string[] = [];\n\n name = '';\n\n code = '';\n\n private __newRegion = '';\n\n render(): TemplateResult {\n const options = Object.values(this.options);\n const filteredOptions = options.filter(region => !this.regions.includes(region.c));\n\n return html`\n <div\n class=${classMap({\n 'border border-contrast-5 rounded-s font-medium overflow-hidden': true,\n 'text-disabled': this.disabled,\n })}\n >\n <div data-testid=\"country\" class=\"h-m flex justify-between items-center bg-contrast-5\">\n <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n <span>${this.name || this.code}</span>\n </div>\n\n <button\n aria-label=${this.t('delete')}\n class=${classMap({\n 'mr-xs items-center justify-center rounded-full transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n ${options.length === 0\n ? ''\n : html`\n <div data-testid=\"regions\" class=\"flex flex-wrap p-xs text-s\">\n ${this.regions.map(region => {\n return html`\n <div class=\"flex items-center rounded-s border border-contrast-10 h-s m-xs\">\n <span class=\"mx-s\">${this.options[region]?.n || region}</span>\n\n <button\n aria-label=${this.t('delete')}\n class=${classMap({\n 'items-center justify-center rounded-s transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-primary-50':\n !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => {\n this.regions = this.regions.filter(value => value !== region);\n this.dispatchEvent(new CustomEvent('update:regions'));\n }}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n `;\n })}\n ${filteredOptions.length === 0\n ? ''\n : html`\n <div\n data-testid=\"new-region\"\n class=${classMap({\n 'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s':\n true,\n 'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50':\n !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <select\n class=${classMap({\n 'appearance-none bg-transparent h-s text-s px-s font-medium': true,\n 'transition-colors rounded-s focus-outline-none': true,\n 'cursor-pointer hover-bg-contrast-5': !this.disabled,\n })}\n ?disabled=${this.disabled}\n @change=${(evt: Event) => {\n const target = evt.currentTarget as HTMLSelectElement;\n this.__newRegion = target.value;\n this.__addRegion();\n target.value = '';\n }}\n >\n <option value=\"\" disabled selected>${this.t('add_region')}</option>\n ${filteredOptions.map(\n region => html`<option value=${region.c}>${region.n}</option>`\n )}\n </select>\n </div>\n `}\n </div>\n `}\n </div>\n `;\n }\n\n private __addRegion() {\n this.regions = [...new Set([...this.regions, this.__newRegion])];\n this.__newRegion = '';\n this.dispatchEvent(new CustomEvent('update:regions'));\n }\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import '../../../../internal/InternalEditableControl/index';
|
|
2
|
+
import '../../../../internal/InternalControl/index';
|
|
2
3
|
import '../../../NucleonElement/index';
|
|
3
4
|
import { InternalTemplateConfigFormFilterValuesControl } from './InternalTemplateConfigFormFilterValuesControl';
|
|
4
5
|
export { InternalTemplateConfigFormFilterValuesControl };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "../../../../internal/InternalEditableControl/index.js";
|
|
2
|
+
import "../../../../internal/InternalControl/index.js";
|
|
2
3
|
import "../../../NucleonElement/index.js";
|
|
3
4
|
import { InternalTemplateConfigFormFilterValuesControlItem } from "./InternalTemplateConfigFormFilterValuesControlItem.js";
|
|
4
5
|
import { InternalTemplateConfigFormFilterValuesControl } from "./InternalTemplateConfigFormFilterValuesControl.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.ts"],"names":[],"mappings":"AAAA,+DAA4D;AAC5D,0CAAuC;AAEvC,OAAO,EAAE,iDAAiD,EAAE,+DAA4D;AACxH,OAAO,EAAE,6CAA6C,EAAE,2DAAwD;AAEhH,cAAc,CAAC,MAAM,CACnB,+DAA+D,EAC/D,iDAAiD,CAClD,CAAC;AAEF,cAAc,CAAC,MAAM,CACnB,0DAA0D,EAC1D,6CAA6C,CAC9C,CAAC;AAEF,OAAO,EAAE,6CAA6C,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalEditableControl/index';\nimport '../../../NucleonElement/index';\n\nimport { InternalTemplateConfigFormFilterValuesControlItem } from './InternalTemplateConfigFormFilterValuesControlItem';\nimport { InternalTemplateConfigFormFilterValuesControl } from './InternalTemplateConfigFormFilterValuesControl';\n\ncustomElements.define(\n 'foxy-internal-template-config-form-filter-values-control-item',\n InternalTemplateConfigFormFilterValuesControlItem\n);\n\ncustomElements.define(\n 'foxy-internal-template-config-form-filter-values-control',\n InternalTemplateConfigFormFilterValuesControl\n);\n\nexport { InternalTemplateConfigFormFilterValuesControl };\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.ts"],"names":[],"mappings":"AAAA,+DAA4D;AAC5D,uDAAoD;AACpD,0CAAuC;AAEvC,OAAO,EAAE,iDAAiD,EAAE,+DAA4D;AACxH,OAAO,EAAE,6CAA6C,EAAE,2DAAwD;AAEhH,cAAc,CAAC,MAAM,CACnB,+DAA+D,EAC/D,iDAAiD,CAClD,CAAC;AAEF,cAAc,CAAC,MAAM,CACnB,0DAA0D,EAC1D,6CAA6C,CAC9C,CAAC;AAEF,OAAO,EAAE,6CAA6C,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalEditableControl/index';\nimport '../../../../internal/InternalControl/index';\nimport '../../../NucleonElement/index';\n\nimport { InternalTemplateConfigFormFilterValuesControlItem } from './InternalTemplateConfigFormFilterValuesControlItem';\nimport { InternalTemplateConfigFormFilterValuesControl } from './InternalTemplateConfigFormFilterValuesControl';\n\ncustomElements.define(\n 'foxy-internal-template-config-form-filter-values-control-item',\n InternalTemplateConfigFormFilterValuesControlItem\n);\n\ncustomElements.define(\n 'foxy-internal-template-config-form-filter-values-control',\n InternalTemplateConfigFormFilterValuesControl\n);\n\nexport { InternalTemplateConfigFormFilterValuesControl };\n"]}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{a as e}from"./shared-5b4e2567.js";import"./shared-4d32d19e.js";import{_ as t}from"./shared-cb58dfcd.js";import{c as s,h as r,s as o}from"./shared-ba5c42c7.js";let l,i,a,d,n=e=>e;customElements.define("foxy-internal-summary-control",class extends e{constructor(){super(...arguments),this.layout=null,this.count=null,this.open=!1}static get properties(){return t(t({},super.properties),{},{layout:{},count:{type:Number},open:{type:Boolean}})}static get styles(){return[...super.styles,s(l||(l=n`::slotted(*){min-width:100%}:host(:not([layout=section])) slot::slotted(*){background-color:var(--lumo-contrast-5pct);padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)}details summary>div{border-radius:var(--lumo-border-radius)}details[open] summary>div{border-radius:var(--lumo-border-radius) var(--lumo-border-radius) 0 0}`))]}renderLightDom(){}renderControl(){return"details"===this.layout?r(i||(i=n` <details class="rounded overflow-hidden" ?open="${0}" @toggle="${0}"> <summary class="select-none cursor-pointer focus-outline-none group"> <div class="leading-s bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?hidden="${0}"> <p class="font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s" ?hidden="${0}"> <span> ${0}${0} </span> <span class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body" style="transform:scale(1.35)"> ${0} </span> </p> <p class="text-s text-secondary" ?hidden="${0}">${0}</p> </div> </summary> <div class="overflow-hidden grid" style="gap:1px"> <slot></slot> </div> </details> `),this.open,(e=>{const t=e.currentTarget;this.open=t.open,e.composed||e.bubbles||this.dispatchEvent(new CustomEvent("toggle"))}),!this.label&&!this.helperText,!this.label,this.label,"number"==typeof this.count?` (${this.count})`:"",o(a||(a=n`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`)),!this.helperText,this.helperText):r(d||(d=n` <div class="leading-s mb-s" ?hidden="${0}"> <p class="font-medium text-body text-l" ?hidden="${0}">${0}</p> <p class="text-s text-secondary" ?hidden="${0}">${0}</p> </div> <div class="rounded overflow-hidden grid" style="gap:1px"> <slot></slot> </div> `),!this.label&&!this.helperText,!this.label,this.label,!this.helperText,this.helperText)}});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import"./shared-8ef0ca65.js";import"./shared-0c134ce7.js";import{I as e,a as t}from"./shared-5b4e2567.js";import"./foxy-copy-to-clipboard.js";import"./foxy-nucleon-element.js";import"./foxy-form-dialog.js";import"./shared-4d32d19e.js";import{_ as s,m as i}from"./shared-cb58dfcd.js";import{h as r,s as o}from"./shared-ba5c42c7.js";import{s as l}from"./shared-53e476fd.js";import{g as a}from"./shared-bab2ea2c.js";import{F as n}from"./shared-343d1fd7.js";import{i as d}from"./shared-53e42a77.js";import{c as h}from"./shared-4e709717.js";import{u as c}from"./shared-f83207fb.js";let u,f=e=>e;let p,y,m,v,x,b,g,$,_=e=>e;customElements.define("foxy-internal-resource-picker-control-form",class extends e{constructor(){super(...arguments),this.selectionProps={}}static get properties(){return s(s({},super.properties),{},{selectionProps:{attribute:!1}})}renderBody(){return r(u||(u=f` <foxy-internal-async-list-control infer="selection" form="foxy-null" hide-delete-button hide-create-button @itemclick="${0}" ...="${0}"> </foxy-internal-async-list-control> `),(e=>{e.preventDefault(),this.edit({selection:e.detail}),this.submit()}),l(this.selectionProps))}}),customElements.define("foxy-internal-resource-picker-control",class extends t{constructor(){super(...arguments),this.getDisplayValueOptions=e=>({resource:e}),this.showCopyIdButton=!1,this.virtualHost=c("internal-resource-picker-control-"),this.getItemUrl=null,this.formProps={},this.filters=[],this.layout=null,this.first=null,this.item=null,this.form=null,this.__getItemRenderer=i((e=>new Function("ctx",`return ctx.html\`\n <${null!=e?e:"foxy-null"}\n related=\${JSON.stringify(ctx.related)}\n parent=\${ctx.parent}\n infer="card"\n href=\${ctx.href}\n ...=\${ctx.spread(ctx.props)}\n >\n </${null!=e?e:"foxy-null"}>\``)))}static get properties(){return s(s({},super.properties),{},{getDisplayValueOptions:{attribute:!1},showCopyIdButton:{type:Boolean,attribute:"show-copy-id-button"},virtualHost:{},getItemUrl:{attribute:!1},formProps:{type:Object},filters:{type:Array},layout:{},first:{},item:{},form:{}})}renderControl(){var e;const t=s(s({},this.formProps),{},{".selectionProps":{".filters":this.filters,".first":this.first,".item":this.item}});return r(p||(p=_` <foxy-form-dialog parent="foxy://${0}/select" header="header" infer="dialog" alert .props="${0}" .form="${0}" @fetch="${0}"> </foxy-form-dialog> ${0} `),this.virtualHost,t,null!==(e=this.form)&&void 0!==e?e:"foxy-internal-resource-picker-control-form",this.__handleFetchEvent,"summary-item"===this.layout?this.__renderSummaryItemLayout():this.__renderStandaloneLayout())}updated(e){var t,s;super.updated(e),e.has("item")&&(null===(s=(t=this.__getItemRenderer.cache).clear)||void 0===s||s.call(t))}__clear(){this._value="",this.dispatchEvent(new CustomEvent("clear"))}__renderSummaryItemLayout(){const e=this.renderRoot.querySelector("#value");return r(y||(y=_` <div class="leading-xs"> <div class="flex items-center gap-xs"> <div class="text-m text-body whitespace-nowrap flex-1">${0}</div> <button aria-label="${0}" class="${0}" ?disabled="${0}" @click="${0}"> <div class="truncate min-w-0"> ${0} </div> </button> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <div class="text-xs text-secondary">${0}</div> <div class="text-xs text-error" ?hidden="${0}"> ${0} </div> </div> </div> <foxy-nucleon infer="" href="${0}" id="value" @update="${0}"> </foxy-nucleon> `),this.label,this.t("select"),h({"text-right min-w-0 transition-colors transition-opacity":!0,"rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"cursor-pointer text-body hover-opacity-80":!this.disabled&&!this.readonly,"font-medium":!this.readonly}),this.disabled||this.readonly,(e=>{if(this.disabled||this.readonly)return;const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),this._value?r(m||(m=_` <foxy-i18n infer="" key="value" .options="${0}"> </foxy-i18n> `),(null==e?void 0:e.data)?this.getDisplayValueOptions(e.data):{context:(null==e?void 0:e.in("fail"))?"fail":"busy"}):this.placeholder,this.t("clear"),h({"rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,this.__clear,o(v||(v=_`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),this.helperText,this.disabled||this.readonly,this._errorMessage,d(this._value||void 0),(()=>this.requestUpdate()))}__renderStandaloneLayout(){var e,t,s,i,o;const n=this.__valueLoader,c="string"==typeof this._value?a(this._value):void 0,u="string"==typeof this._value?null===(e=this.getItemUrl)||void 0===e?void 0:e.call(this,this._value,null!==(t=null==n?void 0:n.data)&&void 0!==t?t:null):void 0;return r(x||(x=_` <div class="block group"> <div class="${0}"> <span class="mr-auto text-l">${0}</span> ${0} ${0} ${0} </div> <div class="text-secondary text-s" ?hidden="${0}">${0}</div> <button class="${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?disabled="${0}" @click="${0}"> <div class="${0}"> <foxy-nucleon class="block" infer="" href="${0}" id="valueLoader" @update="${0}"> ${0} </foxy-nucleon> </div> </button> <div class="mt-xs text-xs leading-xs text-error" ?hidden="${0}"> ${0} </div> </div> `),h({"flex items-center gap-s transition-colors font-medium":!0,"text-disabled":this.disabled}),this.label,u?r(b||(b=_` <a class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50" href="${0}"> <foxy-i18n infer="" key="view"></foxy-i18n> </a> `),u):"",this.showCopyIdButton&&null!==c?r(g||(g=_` <foxy-copy-to-clipboard layout="text" theme="contrast tertiary-inline" infer="copy-id" text="${0}"> </foxy-copy-to-clipboard> `),c):"",this.readonly||!this._value?"":r($||($=_` <vaadin-button theme="error tertiary-inline" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="clear"></foxy-i18n> </vaadin-button> `),this.disabled,this.__clear),!this.helperText,this.helperText,h({"block w-full bg-contrast-5 rounded text-left transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer hover-bg-contrast-10":!this.disabled&&!this.readonly,"cursor-default":this.disabled||this.readonly,"mt-s":!!this.label||!!this.helperText}),this.disabled||this.readonly,(e=>{const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),h({"transition-opacity":!0,"opacity-50":this.disabled}),d(this._value||void 0),(()=>this.requestUpdate()),this.__getItemRenderer(this.item)({html:r,data:null!==(s=null==n?void 0:n.data)&&void 0!==s?s:null,href:this._value||"",related:[],parent:"",props:{},spread:l,simplifyNsLoading:this.simplifyNsLoading,disabled:this.disabled,disabledControls:this.disabledControls,readonly:this.readonly,readonlyControls:this.readonlyControls,hidden:this.hidden,hiddenControls:this.hiddenControls,templates:this.templates,previous:null,next:null,group:null!==(o=null===(i=this.nucleon)||void 0===i?void 0:i.group)&&void 0!==o?o:"",lang:this.lang,ns:this.ns}),!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}__handleFetchEvent(e){if(!(e instanceof n))return;if(e.defaultPrevented)return;const{url:t,method:s}=e.request;return t===`foxy://${this.virtualHost}/select`&&"POST"===s?e.respondWith(this.__handleSelect(e.request)):t===`foxy://${this.virtualHost}/empty`&&"GET"===s?e.respondWith(this.__handleEmpty()):void 0}async __handleSelect(e){const t=await e.clone().json();return this._value=t.selection,new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}async __handleEmpty(){return new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}get __valueLoader(){return this.renderRoot.querySelector("#valueLoader")}});
|