npm - @foxy.io/elements - Versions diffs - 1.27.0-beta.1 → 1.27.0-beta.3 - Mend

@foxy.io/elements 1.27.0-beta.1 → 1.27.0-beta.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.

Files changed (246) hide show

package/dist/elements/public/UserForm/UserForm.js CHANGED Viewed

@@ -1,30 +1,34 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { validate as isEmail } from 'email-validator';
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { Checkbox } from "../../private/Checkbox/Checkbox.js";
-import { Group } from "../../private/Group/Group.js";
-import { roles } from "./roles.js";
 import { html } from 'lit-html';
-import memoize from 'lodash-es/memoize';
-const Base = ScopedElementsMixin(ResponsiveMixin(TranslatableMixin(InternalForm, 'user-form')));
+const NS = 'user-form';
+const Base = TranslatableMixin(InternalForm, NS);
 /**
  * Form element for `fx:user` resources.
  *
  * @slot first-name:before – new in v1.22.0
  * @slot first-name:after – new in v1.22.0
+ *
  * @slot last-name:before – new in v1.22.0
  * @slot last-name:after – new in v1.22.0
+ *
  * @slot email:before – new in v1.22.0
  * @slot email:after – new in v1.22.0
+ *
  * @slot phone:before – new in v1.22.0
  * @slot phone:after – new in v1.22.0
+ *
  * @slot role:before – new in v1.22.0
  * @slot role:after – new in v1.22.0
+ *
+ * @slot timestamps:before – new in v1.27.0
+ * @slot timestamps:after – new in v1.27.0
+ *
  * @slot create:before – new in v1.22.0
  * @slot create:after – new in v1.22.0
+ *
  * @slot delete:before – new in v1.22.0
  * @slot delete:after – new in v1.22.0
  *
@@ -35,182 +39,70 @@ export class UserForm extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
-        this.__getValidator = memoize((prefix) => () => {
-            return !this.errors.some(err => err.startsWith(prefix));
-        });
-        this.__bindField = memoize((key) => {
-            return (evt) => {
-                const target = evt.target;
-                this.edit({ [key]: target.value });
-            };
-        });
-    }
-    static get scopedElements() {
-        return {
-            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
-            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
-            'vaadin-text-field': customElements.get('vaadin-text-field'),
-            'vaadin-button': customElements.get('vaadin-button'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
-            'x-checkbox': Checkbox,
-            'foxy-i18n': customElements.get('foxy-i18n'),
-            'x-group': Group,
+        this.__roleGetValue = () => {
+            const value = [];
+            if (this.form.is_merchant)
+                value.push('merchant');
+            if (this.form.is_programmer)
+                value.push('backend_developer');
+            if (this.form.is_front_end_developer)
+                value.push('frontend_developer');
+            if (this.form.is_designer)
+                value.push('designer');
+            return value;
         };
+        this.__roleSetValue = (newValue) => {
+            this.edit({
+                is_merchant: newValue.includes('merchant'),
+                is_programmer: newValue.includes('backend_developer'),
+                is_front_end_developer: newValue.includes('frontend_developer'),
+                is_designer: newValue.includes('designer'),
+            });
+        };
+        this.__roleOptions = [
+            { label: 'option_merchant', value: 'merchant' },
+            { label: 'option_backend_developer', value: 'backend_developer' },
+            { label: 'option_frontend_developer', value: 'frontend_developer' },
+            { label: 'option_designer', value: 'designer' },
+        ];
     }
     static get v8n() {
         return [
-            ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',
-            ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',
-            ({ email: v }) => (v && v.length > 0) || 'email_required',
-            ({ email: v }) => !v || v.length <= 100 || 'email_too_long',
-            ({ email: v }) => !v || isEmail(v) || 'email_invalid_email',
-            ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',
+            ({ first_name: v }) => (v && v.length > 0) || 'first-name:v8n_required',
+            ({ first_name: v }) => !v || v.length <= 50 || 'first-name:v8n_too_long',
+            ({ last_name: v }) => (v && v.length > 0) || 'last-name:v8n_required',
+            ({ last_name: v }) => !v || v.length <= 50 || 'last-name:v8n_too_long',
+            ({ email: v }) => (v && v.length > 0) || 'email:v8n_required',
+            ({ email: v }) => !v || v.length <= 100 || 'email:v8n_too_long',
+            ({ email: v }) => !v || isEmail(v) || 'email:v8n_invalid_email',
+            ({ phone: v }) => !v || v.length <= 50 || 'phone:v8n_too_long',
         ];
     }
-    renderBody() {
-        const hiddenSelector = this.hiddenSelector;
-        const action = this.href ? 'delete' : 'create';
-        const fields = ['first_name', 'last_name', 'email', 'phone'];
-        return html `
-      <div class="grid sm-grid-cols-2 gap-m">
-        ${fields.map(field => this.__renderField(field))}
-        ${hiddenSelector.matches('role', true) ? '' : this.__renderRole()}
-        ${hiddenSelector.matches(action, true) ? '' : this.__renderAction()}
-      </div>
-    `;
-    }
-    __renderField(property) {
-        const control = property.replace('_', '-');
-        if (this.hiddenSelector.matches(control))
-            return;
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot(`${control}:before`)}
-        <vaadin-text-field
-          error-message=${this.__getErrorMessage(property)}
-          data-testid=${property}
-          label=${this.t(property)}
-          class="w-full"
-          value=${ifDefined(this.form[property])}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches(control, true)}
-          ?readonly=${this.readonlySelector.matches(control, true)}
-          .checkValidity=${this.__getValidator(property)}
-          @input=${this.__bindField(property)}
-          @keydown=${this.__handleKeyDown}
-        >
-        </vaadin-text-field>
-        ${this.renderTemplateOrSlot(`${control}:after`)}
-      </div>
-    `;
-    }
-    __renderRole() {
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches('role', true);
-        return html `
-      <div class="sm-col-span-2">
-        ${this.renderTemplateOrSlot('role:before')}
-        <x-group data-testid="role" frame>
-          ${roles.map((role, index) => html `
-              <hr
-                class=${index > 0 ? 'border-contrast-10' : 'hidden'}
-                style="margin-left: calc((var(--lumo-space-m) * 2) + 1.125rem)"
-              />
-              <x-checkbox
-                data-testclass="role-option"
-                class="w-full p-m"
-                ?readonly=${this.readonlySelector.matches('role', true)}
-                ?disabled=${isDisabled}
-                ?checked=${this.form[role.property]}
-                @change=${(evt) => {
-            const checkbox = evt.currentTarget;
-            this.edit({ [role.property]: checkbox.checked });
-        }}
-              >
-                <div class="flex items-start leading-s">
-                  <div class="flex-1 flex flex-col">
-                    <foxy-i18n key=${role.key} infer=""></foxy-i18n>
-                    <foxy-i18n
-                      class="text-s ${isDisabled ? '' : 'text-secondary'}"
-                      infer=""
-                      key="${role.key}_explainer"
-                    >
-                    </foxy-i18n>
-                  </div>
-                  <div class="mt-xs" style="width: 1.125rem; height: 1.125rem;">${role.icon}</div>
-                </div>
-              </x-checkbox>
-            `)}
-        </x-group>
-        ${this.renderTemplateOrSlot('role:after')}
-      </div>
-    `;
+    get readonlySelector() {
+        const alwaysMatch = [super.readonlySelector.toString()];
+        if (this.href)
+            alwaysMatch.unshift('affiliate-id');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    __renderAction() {
-        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
-        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
-        const isValid = isTemplateValid || isSnapshotValid;
-        const action = this.href ? 'delete' : 'create';
-        const isActionDisabled = (this.in({ idle: 'template' }) && !isValid) ||
-            this.in('busy') ||
-            this.in('fail') ||
-            this.disabledSelector.matches(action, true);
+    renderBody() {
         return html `
-      <div class="sm-col-span-2">
-        ${this.renderTemplateOrSlot(`${action}:before`)}
+      <foxy-internal-text-control infer="first-name"></foxy-internal-text-control>
+      <foxy-internal-text-control infer="last-name"></foxy-internal-text-control>
+      <foxy-internal-text-control infer="email"></foxy-internal-text-control>
+      <foxy-internal-text-control infer="phone"></foxy-internal-text-control>
-        <foxy-internal-confirm-dialog
-          data-testid="confirm"
-          message="delete_prompt"
-          confirm="delete"
-          cancel="cancel"
-          header="delete"
-          theme="primary error"
-          lang=${this.lang}
-          ns=${this.ns}
-          id="confirm"
-          @hide=${this.__handleConfirmHide}
-        >
-        </foxy-internal-confirm-dialog>
+      <foxy-internal-integer-control infer="affiliate-id"></foxy-internal-integer-control>
-        <vaadin-button
-          data-testid=${action}
-          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}
-          class="w-full"
-          ?disabled=${isActionDisabled}
-          @click=${this.__handleActionClick}
-        >
-          <foxy-i18n lang=${this.lang} key=${action} ns=${this.ns}></foxy-i18n>
-        </vaadin-button>
+      <foxy-internal-checkbox-group-control
+        infer="role"
+        .getValue=${this.__roleGetValue}
+        .setValue=${this.__roleSetValue}
+        .options=${this.__roleOptions}
+      >
+      </foxy-internal-checkbox-group-control>
-        ${this.renderTemplateOrSlot(`${action}:after`)}
-      </div>
+      ${super.renderBody()}
     `;
     }
-    __getErrorMessage(prefix) {
-        const error = this.errors.find(err => err.startsWith(prefix));
-        return error ? this.t(error.replace(prefix, 'v8n')) : '';
-    }
-    __handleActionClick(evt) {
-        if (this.in({ idle: 'snapshot' })) {
-            const confirm = this.renderRoot.querySelector('#confirm');
-            confirm.show(evt.currentTarget);
-        }
-        else {
-            this.submit();
-        }
-    }
-    __handleConfirmHide(evt) {
-        if (!evt.detail.cancelled)
-            this.delete();
-    }
-    __handleKeyDown(evt) {
-        if (evt.key === 'Enter')
-            this.submit();
-    }
 }
 //# sourceMappingURL=UserForm.js.map

package/dist/elements/public/UserForm/UserForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserForm.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/UserForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InternalConfirmDialog } from '../../internal/InternalConfirmDialog';\nimport type { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport type { Data, Templates } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { validate as isEmail } from 'email-validator';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Checkbox } from '../../private/Checkbox/Checkbox';\nimport { Group } from '../../private/Group/Group';\nimport { roles } from './roles';\nimport { html } from 'lit-html';\n\nimport memoize from 'lodash-es/memoize';\n\nconst Base = ScopedElementsMixin(ResponsiveMixin(TranslatableMixin(InternalForm, 'user-form')));\n\n/*\n Form element for `fx:user` resources.\n \n @slot first-name:before – new in v1.22.0\n * @slot first-name:after – new in v1.22.0\n * @slot last-name:before – new in v1.22.0\n * @slot last-name:after – new in v1.22.0\n * @slot email:before – new in v1.22.0\n * @slot email:after – new in v1.22.0\n * @slot phone:before – new in v1.22.0\n * @slot phone:after – new in v1.22.0\n * @slot role:before – new in v1.22.0\n * @slot role:after – new in v1.22.0\n * @slot create:before – new in v1.22.0\n * @slot create:after – new in v1.22.0\n * @slot delete:before – new in v1.22.0\n * @slot delete:after – new in v1.22.0\n \n @element foxy-user-form\n * @since 1.3.0\n /\nexport class UserForm extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n 'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'x-checkbox': Checkbox,\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'x-group': Group,\n };\n }\n\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ first_name: v }) => !v \|\| v.length <= 50 \|\| 'first_name_too_long',\n ({ last_name: v }) => !v \|\| v.length <= 50 \|\| 'last_name_too_long',\n ({ email: v }) => (v && v.length > 0) \|\| 'email_required',\n ({ email: v }) => !v \|\| v.length <= 100 \|\| 'email_too_long',\n ({ email: v }) => !v \|\| isEmail(v) \|\| 'email_invalid_email',\n ({ phone: v }) => !v \|\| v.length <= 50 \|\| 'phone_too_long',\n ];\n }\n\n templates: Templates = {};\n\n private __getValidator = memoize((prefix: string) => () => {\n return !this.errors.some(err => err.startsWith(prefix));\n });\n\n private __bindField = memoize((key: keyof Data) => {\n return (evt: CustomEvent) => {\n const target = evt.target as HTMLInputElement;\n this.edit({ [key]: target.value });\n };\n });\n\n renderBody(): TemplateResult {\n const hiddenSelector = this.hiddenSelector;\n const action = this.href ? 'delete' : 'create';\n const fields = ['first_name', 'last_name', 'email', 'phone'] as const;\n\n return html`\n <div class=\"grid sm-grid-cols-2 gap-m\">\n ${fields.map(field => this.__renderField(field))}\n ${hiddenSelector.matches('role', true) ? '' : this.__renderRole()}\n ${hiddenSelector.matches(action, true) ? '' : this.__renderAction()}\n </div>\n `;\n }\n\n private __renderField(property: keyof Data) {\n const control = property.replace('_', '-');\n if (this.hiddenSelector.matches(control)) return;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot(`${control}:before`)}\n\n <vaadin-text-field\n error-message=${this.__getErrorMessage(property)}\n data-testid=${property}\n label=${this.t(property)}\n class=\"w-full\"\n value=${ifDefined((this.form as any)[property])}\n ?disabled=${!this.in('idle') \|\| this.disabledSelector.matches(control, true)}\n ?readonly=${this.readonlySelector.matches(control, true)}\n .checkValidity=${this.__getValidator(property)}\n @input=${this.__bindField(property)}\n @keydown=${this.__handleKeyDown}\n >\n </vaadin-text-field>\n\n ${this.renderTemplateOrSlot(`${control}:after`)}\n </div>\n `;\n }\n\n private __renderRole() {\n const isDisabled = !this.in('idle') \|\| this.disabledSelector.matches('role', true);\n\n return html`\n <div class=\"sm-col-span-2\">\n ${this.renderTemplateOrSlot('role:before')}\n\n <x-group data-testid=\"role\" frame>\n ${roles.map(\n (role, index) => html`\n <hr\n class=${index > 0 ? 'border-contrast-10' : 'hidden'}\n style=\"margin-left: calc((var(--lumo-space-m) 2) + 1.125rem)\"\n />\n\n <x-checkbox\n data-testclass=\"role-option\"\n class=\"w-full p-m\"\n ?readonly=${this.readonlySelector.matches('role', true)}\n ?disabled=${isDisabled}\n ?checked=${this.form[role.property]}\n @change=${(evt: CustomEvent) => {\n const checkbox = evt.currentTarget as Checkbox;\n this.edit({ [role.property]: checkbox.checked });\n }}\n >\n <div class=\"flex items-start leading-s\">\n <div class=\"flex-1 flex flex-col\">\n <foxy-i18n key=${role.key} infer=\"\"></foxy-i18n>\n <foxy-i18n\n class=\"text-s ${isDisabled ? '' : 'text-secondary'}\"\n infer=\"\"\n key=\"${role.key}_explainer\"\n >\n </foxy-i18n>\n </div>\n\n <div class=\"mt-xs\" style=\"width: 1.125rem; height: 1.125rem;\">${role.icon}</div>\n </div>\n </x-checkbox>\n `\n )}\n </x-group>\n\n ${this.renderTemplateOrSlot('role:after')}\n </div>\n `;\n }\n\n private __renderAction() {\n const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n const isValid = isTemplateValid \|\| isSnapshotValid;\n const action = this.href ? 'delete' : 'create';\n const isActionDisabled =\n (this.in({ idle: 'template' }) && !isValid) \|\|\n this.in('busy') \|\|\n this.in('fail') \|\|\n this.disabledSelector.matches(action, true);\n\n return html`\n <div class=\"sm-col-span-2\">\n ${this.renderTemplateOrSlot(`${action}:before`)}\n\n <foxy-internal-confirm-dialog\n data-testid=\"confirm\"\n message=\"delete_prompt\"\n confirm=\"delete\"\n cancel=\"cancel\"\n header=\"delete\"\n theme=\"primary error\"\n lang=${this.lang}\n ns=${this.ns}\n id=\"confirm\"\n @hide=${this.__handleConfirmHide}\n >\n </foxy-internal-confirm-dialog>\n\n <vaadin-button\n data-testid=${action}\n theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}\n class=\"w-full\"\n ?disabled=${isActionDisabled}\n @click=${this.__handleActionClick}\n >\n <foxy-i18n lang=${this.lang} key=${action} ns=${this.ns}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot(`${action}:after`)}\n </div>\n `;\n }\n\n private __getErrorMessage(prefix: string) {\n const error = this.errors.find(err => err.startsWith(prefix));\n return error ? this.t(error.replace(prefix, 'v8n')) : '';\n }\n\n private __handleActionClick(evt: Event) {\n if (this.in({ idle: 'snapshot' })) {\n const confirm = this.renderRoot.querySelector('#confirm');\n (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n } else {\n this.submit();\n }\n }\n\n private __handleConfirmHide(evt: CustomEvent) {\n if (!evt.detail.cancelled) this.delete();\n }\n\n private __handleKeyDown(evt: KeyboardEvent) {\n if (evt.key === 'Enter') this.submit();\n }\n}\n"]}
1	+ {"version":3,"file":"UserForm.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/UserForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Data, Templates } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { validate as isEmail } from 'email-validator';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\n\nconst NS = 'user-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/*\n Form element for `fx:user` resources.\n \n @slot first-name:before – new in v1.22.0\n * @slot first-name:after – new in v1.22.0\n \n @slot last-name:before – new in v1.22.0\n * @slot last-name:after – new in v1.22.0\n \n @slot email:before – new in v1.22.0\n * @slot email:after – new in v1.22.0\n \n @slot phone:before – new in v1.22.0\n * @slot phone:after – new in v1.22.0\n \n @slot role:before – new in v1.22.0\n * @slot role:after – new in v1.22.0\n \n @slot timestamps:before – new in v1.27.0\n * @slot timestamps:after – new in v1.27.0\n \n @slot create:before – new in v1.22.0\n * @slot create:after – new in v1.22.0\n \n @slot delete:before – new in v1.22.0\n * @slot delete:after – new in v1.22.0\n \n @element foxy-user-form\n * @since 1.3.0\n */\nexport class UserForm extends Base<Data> {\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ first_name: v }) => (v && v.length > 0) \|\| 'first-name:v8n_required',\n ({ first_name: v }) => !v \|\| v.length <= 50 \|\| 'first-name:v8n_too_long',\n ({ last_name: v }) => (v && v.length > 0) \|\| 'last-name:v8n_required',\n ({ last_name: v }) => !v \|\| v.length <= 50 \|\| 'last-name:v8n_too_long',\n ({ email: v }) => (v && v.length > 0) \|\| 'email:v8n_required',\n ({ email: v }) => !v \|\| v.length <= 100 \|\| 'email:v8n_too_long',\n ({ email: v }) => !v \|\| isEmail(v) \|\| 'email:v8n_invalid_email',\n ({ phone: v }) => !v \|\| v.length <= 50 \|\| 'phone:v8n_too_long',\n ];\n }\n\n templates: Templates = {};\n\n private readonly __roleGetValue = () => {\n const value: string[] = [];\n\n if (this.form.is_merchant) value.push('merchant');\n if (this.form.is_programmer) value.push('backend_developer');\n if (this.form.is_front_end_developer) value.push('frontend_developer');\n if (this.form.is_designer) value.push('designer');\n\n return value;\n };\n\n private readonly __roleSetValue = (newValue: string[]) => {\n this.edit({\n is_merchant: newValue.includes('merchant'),\n is_programmer: newValue.includes('backend_developer'),\n is_front_end_developer: newValue.includes('frontend_developer'),\n is_designer: newValue.includes('designer'),\n });\n };\n\n private readonly __roleOptions = [\n { label: 'option_merchant', value: 'merchant' },\n { label: 'option_backend_developer', value: 'backend_developer' },\n { label: 'option_frontend_developer', value: 'frontend_developer' },\n { label: 'option_designer', value: 'designer' },\n ];\n\n get readonlySelector(): BooleanSelector {\n const alwaysMatch = [super.readonlySelector.toString()];\n if (this.href) alwaysMatch.unshift('affiliate-id');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n renderBody(): TemplateResult {\n return html`\n <foxy-internal-text-control infer=\"first-name\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"last-name\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"email\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"phone\"></foxy-internal-text-control>\n\n <foxy-internal-integer-control infer=\"affiliate-id\"></foxy-internal-integer-control>\n\n <foxy-internal-checkbox-group-control\n infer=\"role\"\n .getValue=${this.__roleGetValue}\n .setValue=${this.__roleSetValue}\n .options=${this.__roleOptions}\n >\n </foxy-internal-checkbox-group-control>\n\n ${super.renderBody()}\n `;\n }\n}\n"]}

package/dist/elements/public/UserForm/index.d.ts CHANGED Viewed

@@ -1,8 +1,6 @@
-import '@vaadin/vaadin-text-field';
-import '@vaadin/vaadin-button';
-import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalCheckboxGroupControl/index';
+import '../../internal/InternalIntegerControl/index';
+import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
-import '../Spinner/index';
-import '../I18n/index';
 import { UserForm } from './UserForm';
 export { UserForm };

package/dist/elements/public/UserForm/index.js CHANGED Viewed

@@ -1,9 +1,7 @@
-import '@vaadin/vaadin-text-field';
-import '@vaadin/vaadin-button';
-import "../../internal/InternalConfirmDialog/index.js";
+import "../../internal/InternalCheckboxGroupControl/index.js";
+import "../../internal/InternalIntegerControl/index.js";
+import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalForm/index.js";
-import "../Spinner/index.js";
-import "../I18n/index.js";
 import { UserForm } from "./UserForm.js";
 customElements.define('foxy-user-form', UserForm);
 export { UserForm };

package/dist/elements/public/UserForm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/index.ts"],"names":[],"mappings":"AAAA,~~OAAO,2BAA2B,CAAC~~;~~AACnC~~,~~OAAO,uBAAuB,CAAC~~;~~AAC/B~~,~~uDAAoD~~;~~AACpD~~,8CAA2C;~~AAC3C~~,~~6BAA0B;AAC1B,0BAAuB;AAEvB,~~OAAO,EAAE,QAAQ,EAAE,sBAAmB;AAEtC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import '~~@vaadin~~/~~vaadin-text-field';\nimport '@vaadin~~/~~vaadin-button~~';\nimport '../../internal/~~InternalConfirmDialog~~/index';\nimport '../../internal/~~InternalForm~~/index';\nimport '~~../Spinner~~/~~index';\nimport '../I18n~~/index';\n\nimport { UserForm } from './UserForm';\n\ncustomElements.define('foxy-user-form', UserForm);\n\nexport { UserForm };\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/index.ts"],"names":[],"mappings":"AAAA,8DAA2D;AAC3D,wDAAqD;AACrD,qDAAkD;AAClD,8CAA2C;AAE3C,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AAEtC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCheckboxGroupControl/index';\nimport '../../internal/InternalIntegerControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { UserForm } from './UserForm';\n\ncustomElements.define('foxy-user-form', UserForm);\n\nexport { UserForm };\n"]}

package/dist/elements/public/UserForm/types.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { Renderer } from '../../../mixins/configurable';
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 export declare type Rel = Rels.User;
-export declare type Data = Resource<Rel, undefined>;
+export declare type Data = Resource<Rel>;
 export declare type Templates = {
     'first-name:before'?: Renderer<UserForm>;
     'first-name:after'?: Renderer<UserForm>;
@@ -15,6 +15,8 @@ export declare type Templates = {
     'phone:after'?: Renderer<UserForm>;
     'role:before'?: Renderer<UserForm>;
     'role:after'?: Renderer<UserForm>;
+    'timestamps:before'?: Renderer<UserForm>;
+    'timestamps:after'?: Renderer<UserForm>;
     'create:before'?: Renderer<UserForm>;
     'create:after'?: Renderer<UserForm>;
     'delete:before'?: Renderer<UserForm>;

package/dist/elements/public/UserForm/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { UserForm } from './UserForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Rel = Rels.User;\nexport type Data = Resource<Rel~~, undefined~~>;\nexport type Templates = {\n 'first-name:before'?: Renderer<UserForm>;\n 'first-name:after'?: Renderer<UserForm>;\n 'last-name:before'?: Renderer<UserForm>;\n 'last-name:after'?: Renderer<UserForm>;\n 'email:before'?: Renderer<UserForm>;\n 'email:after'?: Renderer<UserForm>;\n 'phone:before'?: Renderer<UserForm>;\n 'phone:after'?: Renderer<UserForm>;\n 'role:before'?: Renderer<UserForm>;\n 'role:after'?: Renderer<UserForm>;\n 'create:before'?: Renderer<UserForm>;\n 'create:after'?: Renderer<UserForm>;\n 'delete:before'?: Renderer<UserForm>;\n 'delete:after'?: Renderer<UserForm>;\n};\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { UserForm } from './UserForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Rel = Rels.User;\nexport type Data = Resource<Rel>;\nexport type Templates = {\n 'first-name:before'?: Renderer<UserForm>;\n 'first-name:after'?: Renderer<UserForm>;\n 'last-name:before'?: Renderer<UserForm>;\n 'last-name:after'?: Renderer<UserForm>;\n 'email:before'?: Renderer<UserForm>;\n 'email:after'?: Renderer<UserForm>;\n 'phone:before'?: Renderer<UserForm>;\n 'phone:after'?: Renderer<UserForm>;\n 'role:before'?: Renderer<UserForm>;\n 'role:after'?: Renderer<UserForm>;\n 'timestamps:before'?: Renderer<UserForm>;\n 'timestamps:after'?: Renderer<UserForm>;\n 'create:before'?: Renderer<UserForm>;\n 'create:after'?: Renderer<UserForm>;\n 'delete:before'?: Renderer<UserForm>;\n 'delete:after'?: Renderer<UserForm>;\n};\n"]}

package/dist/elements/public/UsersTable/UsersTable.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { html } from 'lit-element';
 import { Table } from "../Table/Table.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { roles } from "../UserForm/roles.js";
+import { roles } from "./roles.js";
 export class UsersTable extends TranslatableMixin(Table, 'users-table') {
     constructor() {
         super(...arguments);

package/dist/elements/public/UsersTable/UsersTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UsersTable.js","sourceRoot":"","sources":["../../../../src/elements/public/UsersTable/UsersTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAMnD,OAAO,EAAE,KAAK,EAAE,0BAAuB;AACvC,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,KAAK,EAAE,~~6BAA0B~~;~~AAE1C~~,MAAM,OAAO,UAAW,SAAQ,iBAAiB,CAAC,KAAK,EAAE,aAAa,CAAO;IAA7E;;QAoFE,YAAO,GAAG;YACR,UAAU,CAAC,UAAU;YACrB,UAAU,CAAC,WAAW;YACtB,UAAU,CAAC,WAAW;YACtB,UAAU,CAAC,iBAAiB;YAC5B,UAAU,CAAC,aAAa;SACzB,CAAC;IAgBJ,CAAC;IAdC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,IAAI;aACX,IAAI,CAAC,EAAE;;;;;QAKZ,KAAK,CAAC,MAAM,EAAE;KACjB,CAAC;IACJ,CAAC;;AAxGM,qBAAU,GAAiB;IAChC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;UAEX,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS;;KAE9C;CACF,CAAC;AAEK,sBAAW,GAAiB;IACjC,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;mEAC8C,GAAG,CAAC,IAAI,CAAC,KAAK;KAC5E;CACF,CAAC;AAEK,sBAAW,GAAiB;IACjC,IAAI,EAAE,GAAG,CAAC,EAAE;QACV,MAAM,KAAK,GAAG;YACZ,aAAa;YACb,eAAe;YACf,wBAAwB;YACxB,aAAa;SACL,CAAC;QAEX,OAAO,IAAI,CAAA;;YAEL,KAAK,CAAC,GAAG,CACT,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEJ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;kBAG/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAE,CAAC,IAAI;;aAEzD,CACF;;OAEJ,CAAC;IACJ,CAAC;CACF,CAAC;AAEK,4BAAiB,GAAiB;IACvC,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;oBAGD,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;iBACpD,GAAG,CAAC,IAAI;;eAEV,GAAG,CAAC,EAAE;;;;;oBAKD,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;iBACpD,GAAG,CAAC,IAAI;;eAEV,GAAG,CAAC,EAAE;;;;KAIhB;CACF,CAAC;AAEK,wBAAa,GAAiB;IACnC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;;iBAIJ,CAAC,GAAgB,EAAE,EAAE;QAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAuB,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,EAAgB,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAe,CAAC;QAEvD,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;;0BAEiB,GAAG,CAAC,IAAI,oBAAoB,GAAG,CAAC,EAAE;;KAEvD;CACF,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit-element';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { Column } from '../Table/types';\nimport { Data } from './types';\nimport { FormDialog } from '../FormDialog/FormDialog';\nimport { Table } from '../Table/Table';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { roles } from '~~../UserForm/~~roles';\n\nexport class UsersTable extends TranslatableMixin(Table, 'users-table')<Data> {\n static nameColumn: Column<Data> = {\n cell: ctx => html`\n <span data-testclass=\"name\" class=\"text-m font-medium\">\n ${ctx.data.first_name} ${ctx.data.last_name}\n </span>\n `,\n };\n\n static emailColumn: Column<Data> = {\n hideBelow: 'md',\n cell: ctx => html`\n <span data-testclass=\"email\" class=\"text-m text-secondary\">${ctx.data.email}</span>\n `,\n };\n\n static rolesColumn: Column<Data> = {\n cell: ctx => {\n const props = [\n 'is_merchant',\n 'is_programmer',\n 'is_front_end_developer',\n 'is_designer',\n ] as const;\n\n return html`\n <div data-testclass=\"roles\" class=\"flex space-x-s\">\n ${props.map(\n property => html`\n <div\n class=${ctx.data[property] ? '' : 'text-disabled'}\n style=\"width: 1rem; height: 1rem;\"\n >\n ${roles.find(role => role.property === property)!.icon}\n </div>\n `\n )}\n </div>\n `;\n },\n };\n\n static lastUpdatedColumn: Column<Data> = {\n hideBelow: 'lg',\n cell: ctx => html`\n <span data-testclass=\"lastUpdated\" class=\"text-m text-secondary font-tnum\">\n <foxy-i18n\n options=${JSON.stringify({ value: ctx.data.date_modified })}\n lang=${ctx.lang}\n key=\"date\"\n ns=${ctx.ns}\n >\n </foxy-i18n>\n\n <foxy-i18n\n options=${JSON.stringify({ value: ctx.data.date_modified })}\n lang=${ctx.lang}\n key=\"time\"\n ns=${ctx.ns}\n >\n </foxy-i18n>\n </span>\n `,\n };\n\n static actionsColumn: Column<Data> = {\n cell: ctx => html`\n <vaadin-button\n data-testclass=\"actions\"\n theme=\"tertiary small\"\n @click=${(evt: CustomEvent) => {\n const button = evt.target as ButtonElement;\n const root = button.getRootNode() as ShadowRoot;\n const form = root.querySelector('#form') as FormDialog;\n\n form.href = ctx.data._links.self.href;\n form.show(button);\n }}\n >\n <foxy-i18n lang=${ctx.lang} key=\"update\" ns=${ctx.ns}></foxy-i18n>\n </vaadin-button>\n `,\n };\n\n columns = [\n UsersTable.nameColumn,\n UsersTable.emailColumn,\n UsersTable.rolesColumn,\n UsersTable.lastUpdatedColumn,\n UsersTable.actionsColumn,\n ];\n\n render(): TemplateResult {\n return html`\n <foxy-form-dialog\n parent=${this.href}\n form=\"foxy-user-form\"\n lang=${this.lang}\n ns=${this.ns}\n id=\"form\"\n >\n </foxy-form-dialog>\n\n ${super.render()}\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"UsersTable.js","sourceRoot":"","sources":["../../../../src/elements/public/UsersTable/UsersTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAMnD,OAAO,EAAE,KAAK,EAAE,0BAAuB;AACvC,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAEhC,MAAM,OAAO,UAAW,SAAQ,iBAAiB,CAAC,KAAK,EAAE,aAAa,CAAO;IAA7E;;QAoFE,YAAO,GAAG;YACR,UAAU,CAAC,UAAU;YACrB,UAAU,CAAC,WAAW;YACtB,UAAU,CAAC,WAAW;YACtB,UAAU,CAAC,iBAAiB;YAC5B,UAAU,CAAC,aAAa;SACzB,CAAC;IAgBJ,CAAC;IAdC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,IAAI;aACX,IAAI,CAAC,EAAE;;;;;QAKZ,KAAK,CAAC,MAAM,EAAE;KACjB,CAAC;IACJ,CAAC;;AAxGM,qBAAU,GAAiB;IAChC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;UAEX,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS;;KAE9C;CACF,CAAC;AAEK,sBAAW,GAAiB;IACjC,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;mEAC8C,GAAG,CAAC,IAAI,CAAC,KAAK;KAC5E;CACF,CAAC;AAEK,sBAAW,GAAiB;IACjC,IAAI,EAAE,GAAG,CAAC,EAAE;QACV,MAAM,KAAK,GAAG;YACZ,aAAa;YACb,eAAe;YACf,wBAAwB;YACxB,aAAa;SACL,CAAC;QAEX,OAAO,IAAI,CAAA;;YAEL,KAAK,CAAC,GAAG,CACT,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEJ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;kBAG/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAE,CAAC,IAAI;;aAEzD,CACF;;OAEJ,CAAC;IACJ,CAAC;CACF,CAAC;AAEK,4BAAiB,GAAiB;IACvC,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;oBAGD,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;iBACpD,GAAG,CAAC,IAAI;;eAEV,GAAG,CAAC,EAAE;;;;;oBAKD,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;iBACpD,GAAG,CAAC,IAAI;;eAEV,GAAG,CAAC,EAAE;;;;KAIhB;CACF,CAAC;AAEK,wBAAa,GAAiB;IACnC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;;iBAIJ,CAAC,GAAgB,EAAE,EAAE;QAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAuB,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,EAAgB,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAe,CAAC;QAEvD,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;;0BAEiB,GAAG,CAAC,IAAI,oBAAoB,GAAG,CAAC,EAAE;;KAEvD;CACF,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit-element';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { Column } from '../Table/types';\nimport { Data } from './types';\nimport { FormDialog } from '../FormDialog/FormDialog';\nimport { Table } from '../Table/Table';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { roles } from './roles';\n\nexport class UsersTable extends TranslatableMixin(Table, 'users-table')<Data> {\n static nameColumn: Column<Data> = {\n cell: ctx => html`\n <span data-testclass=\"name\" class=\"text-m font-medium\">\n ${ctx.data.first_name} ${ctx.data.last_name}\n </span>\n `,\n };\n\n static emailColumn: Column<Data> = {\n hideBelow: 'md',\n cell: ctx => html`\n <span data-testclass=\"email\" class=\"text-m text-secondary\">${ctx.data.email}</span>\n `,\n };\n\n static rolesColumn: Column<Data> = {\n cell: ctx => {\n const props = [\n 'is_merchant',\n 'is_programmer',\n 'is_front_end_developer',\n 'is_designer',\n ] as const;\n\n return html`\n <div data-testclass=\"roles\" class=\"flex space-x-s\">\n ${props.map(\n property => html`\n <div\n class=${ctx.data[property] ? '' : 'text-disabled'}\n style=\"width: 1rem; height: 1rem;\"\n >\n ${roles.find(role => role.property === property)!.icon}\n </div>\n `\n )}\n </div>\n `;\n },\n };\n\n static lastUpdatedColumn: Column<Data> = {\n hideBelow: 'lg',\n cell: ctx => html`\n <span data-testclass=\"lastUpdated\" class=\"text-m text-secondary font-tnum\">\n <foxy-i18n\n options=${JSON.stringify({ value: ctx.data.date_modified })}\n lang=${ctx.lang}\n key=\"date\"\n ns=${ctx.ns}\n >\n </foxy-i18n>\n\n <foxy-i18n\n options=${JSON.stringify({ value: ctx.data.date_modified })}\n lang=${ctx.lang}\n key=\"time\"\n ns=${ctx.ns}\n >\n </foxy-i18n>\n </span>\n `,\n };\n\n static actionsColumn: Column<Data> = {\n cell: ctx => html`\n <vaadin-button\n data-testclass=\"actions\"\n theme=\"tertiary small\"\n @click=${(evt: CustomEvent) => {\n const button = evt.target as ButtonElement;\n const root = button.getRootNode() as ShadowRoot;\n const form = root.querySelector('#form') as FormDialog;\n\n form.href = ctx.data._links.self.href;\n form.show(button);\n }}\n >\n <foxy-i18n lang=${ctx.lang} key=\"update\" ns=${ctx.ns}></foxy-i18n>\n </vaadin-button>\n `,\n };\n\n columns = [\n UsersTable.nameColumn,\n UsersTable.emailColumn,\n UsersTable.rolesColumn,\n UsersTable.lastUpdatedColumn,\n UsersTable.actionsColumn,\n ];\n\n render(): TemplateResult {\n return html`\n <foxy-form-dialog\n parent=${this.href}\n form=\"foxy-user-form\"\n lang=${this.lang}\n ns=${this.ns}\n id=\"form\"\n >\n </foxy-form-dialog>\n\n ${super.render()}\n `;\n }\n}\n"]}

package/dist/elements/public/UsersTable/roles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"roles.js","sourceRoot":"","sources":["../../../../src/elements/public/UsersTable/roles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,GAAG,EAAE,MAAM,UAAU,CAAC;AAWlD,MAAM,CAAC,MAAM,KAAK,GAAW;IAC3B;QACE,QAAQ,EAAE,aAAa;QACvB,IAAI,EAAE,GAAG,CAAA,k6CAAk6C;QAC36C,GAAG,EAAE,UAAU;KAChB;IACD;QACE,QAAQ,EAAE,eAAe;QACzB,IAAI,EAAE,GAAG,CAAA,o2BAAo2B;QAC72B,GAAG,EAAE,mBAAmB;KACzB;IACD;QACE,QAAQ,EAAE,wBAAwB;QAClC,IAAI,EAAE,GAAG,CAAA,6iCAA6iC;QACtjC,GAAG,EAAE,oBAAoB;KAC1B;IACD;QACE,QAAQ,EAAE,aAAa;QACvB,IAAI,EAAE,GAAG,CAAA,qkCAAqkC;QAC9kC,GAAG,EAAE,UAAU;KAChB;CACF,CAAC","sourcesContent":["import { SVGTemplateResult, svg } from 'lit-html';\n\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\n\ntype Role = {\n property: keyof Resource<Rels.User>;\n icon: SVGTemplateResult;\n key: string;\n};\n\nexport const roles: Role[] = [\n {\n property: 'is_merchant',\n icon: svg`<svg class=\"fill-current h-full w-full\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M22.8961 8.89L21.7932 4.52C21.5622 3.62 20.7429 3 19.7871 3H5.1979C4.25259 3 3.42283 3.63 3.20225 4.52L2.0994 8.89C1.84732 9.91 2.07839 10.95 2.75061 11.77C2.83464 11.88 2.95017 11.96 3.0447 12.06V19C3.0447 20.1 3.99001 21 5.14538 21H19.8501C21.0055 21 21.9508 20.1 21.9508 19V12.06C22.0453 11.97 22.1609 11.88 22.2449 11.78C22.9171 10.96 23.1587 9.91 22.8961 8.89ZM19.7556 4.99L20.8584 9.36C20.9635 9.78 20.8689 10.2 20.5958 10.53C20.4488 10.71 20.1337 11 19.6085 11C18.9678 11 18.4111 10.51 18.3376 9.86L17.7284 5L19.7556 4.99ZM13.5481 5H15.6067L16.1739 9.52C16.2264 9.91 16.1004 10.3 15.8273 10.59C15.5962 10.85 15.2601 11 14.8295 11C14.1258 11 13.5481 10.41 13.5481 9.69V5ZM8.81106 9.52L9.38874 5H11.4474V9.69C11.4474 10.41 10.8697 11 10.0925 11C9.73536 11 9.40975 10.85 9.15767 10.59C8.89509 10.3 8.76905 9.91 8.81106 9.52ZM4.13705 9.36L5.1979 5H7.26706L6.65787 9.86C6.57384 10.51 6.02766 11 5.38696 11C4.87229 11 4.54669 10.71 4.41014 10.53C4.12655 10.21 4.03202 9.78 4.13705 9.36ZM5.14538 19V12.97C5.22941 12.98 5.30293 13 5.38696 13C6.30075 13 7.13052 12.64 7.73971 12.05C8.36992 12.65 9.21019 13 10.166 13C11.0798 13 11.8991 12.64 12.5082 12.07C13.1279 12.64 13.9682 13 14.9135 13C15.7958 13 16.6361 12.65 17.2663 12.05C17.8755 12.64 18.7052 13 19.619 13C19.7031 13 19.7766 12.98 19.8606 12.97V19H5.14538Z\" /></svg>`,\n key: 'merchant',\n },\n {\n property: 'is_programmer',\n icon: svg`<svg class=\"fill-current h-full w-full\" viewBox=\"0 0 20 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3C0 1.34315 1.34315 0 3 0H17C18.6569 0 20 1.34315 20 3V15C20 16.6569 18.6569 18 17 18H3C1.34315 18 0 16.6569 0 15V3ZM3 2C2.44772 2 2 2.44772 2 3V15C2 15.5523 2.44772 16 3 16H17C17.5523 16 18 15.5523 18 15V3C18 2.44772 17.5523 2 17 2H3ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L9.70711 8.29289C9.89464 8.48043 10 8.73478 10 9C10 9.26522 9.89464 9.51957 9.70711 9.70711L5.70711 13.7071C5.31658 14.0976 4.68342 14.0976 4.29289 13.7071C3.90237 13.3166 3.90237 12.6834 4.29289 12.2929L7.58579 9L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289ZM9 13C9 12.4477 9.44771 12 10 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H10C9.44771 14 9 13.5523 9 13Z\"/></svg>`,\n key: 'backend_developer',\n },\n {\n property: 'is_front_end_developer',\n icon: svg`<svg class=\"fill-current h-full w-full\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.2747 4.03847C14.8058 4.1902 15.1132 4.74368 14.9615 5.27472L10.9615 19.2747C10.8098 19.8058 10.2563 20.1132 9.72528 19.9615C9.19424 19.8098 8.88675 19.2563 9.03848 18.7253L13.0385 4.72528C13.1902 4.19424 13.7437 3.88675 14.2747 4.03847ZM6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.7071L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289ZM17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C22.8946 11.4804 23 11.7348 23 12C23 12.2652 22.8946 12.5196 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z\" /></svg>`,\n key: 'frontend_developer',\n },\n {\n property: 'is_designer',\n icon: svg`<svg class=\"fill-current h-full w-full\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 20C4.49 20 0 15.51 0 10C0 4.49 4.49 0 10 0C15.51 0 20 4.04 20 9C20 12.31 17.31 15 14 15H12.23C11.95 15 11.73 15.22 11.73 15.5C11.73 15.62 11.78 15.73 11.86 15.83C12.27 16.3 12.5 16.89 12.5 17.5C12.5 18.88 11.38 20 10 20ZM10 2C5.59 2 2 5.59 2 10C2 14.41 5.59 18 10 18C10.28 18 10.5 17.78 10.5 17.5C10.5 17.34 10.42 17.22 10.36 17.15C9.95 16.69 9.73 16.1 9.73 15.5C9.73 14.12 10.85 13 12.23 13H14C16.21 13 18 11.21 18 9C18 5.14 14.41 2 10 2Z\" /><path d=\"M4.5 11C5.32843 11 6 10.3284 6 9.5C6 8.67157 5.32843 8 4.5 8C3.67157 8 3 8.67157 3 9.5C3 10.3284 3.67157 11 4.5 11Z\" /><path d=\"M7.5 7C8.32843 7 9 6.32843 9 5.5C9 4.67157 8.32843 4 7.5 4C6.67157 4 6 4.67157 6 5.5C6 6.32843 6.67157 7 7.5 7Z\" /><path d=\"M12.5 7C13.3284 7 14 6.32843 14 5.5C14 4.67157 13.3284 4 12.5 4C11.6716 4 11 4.67157 11 5.5C11 6.32843 11.6716 7 12.5 7Z\" /><path d=\"M15.5 11C16.3284 11 17 10.3284 17 9.5C17 8.67157 16.3284 8 15.5 8C14.6716 8 14 8.67157 14 9.5C14 10.3284 14.6716 11 15.5 11Z\" /></svg>`,\n key: 'designer',\n },\n];\n"]}

package/dist/mixins/themeable.js CHANGED Viewed

@@ -2501,7 +2501,8 @@ input::-webkit-date-and-time-value{
         }
     };
 };
-registerStyles('vaadin-date-time-picker', css `vaadin-date-time-picker-custom-field{
+try {
+    registerStyles('vaadin-date-time-picker', css `vaadin-date-time-picker-custom-field{
   --lumo-text-field-size:auto;
   padding:0;
 }
@@ -2509,27 +2510,56 @@ registerStyles('vaadin-date-time-picker', css `vaadin-date-time-picker-custom-fi
 vaadin-date-time-picker-custom-field::part(label){
   padding-bottom:0.5em;
 }
-  `);
-registerStyles('vaadin-date-time-picker-date-picker', css `:host{
+    `);
+}
+catch (_a) {
+    // ignore
+}
+try {
+    registerStyles('vaadin-date-time-picker-date-picker', css `:host{
   --lumo-text-field-size:auto;
 }
 vaadin-date-time-picker-date-text-field{
   padding:0;
 }
-  `);
-registerStyles('vaadin-date-time-picker-time-picker', css `:host{
+    `);
+}
+catch (_b) {
+    // ignore
+}
+try {
+    registerStyles('vaadin-date-time-picker-time-picker', css `:host{
   --lumo-text-field-size:auto;
 }
 vaadin-date-time-picker-time-text-field{
   padding:0;
 }
-  `);
-registerStyles('vaadin-button', css `:host([theme~='primary']){
+    `);
+}
+catch (_c) {
+    // ignore
+}
+try {
+    registerStyles('vaadin-button', css `:host([theme~='primary']){
   font-weight:500;
 }
-  `);
+    `);
+}
+catch (_d) {
+    // ignore
+}
+try {
+    /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */
+    registerStyles('vcf-tooltip', css `:host([hidden]) [part='container']{
+  display:none !important;
+}
+    `);
+}
+catch (_e) {
+    // ignore
+}
 /**
  * One of the base classes for each rel-specific element in the collection
  * providing shared TailwindCSS styles for Shadow DOM content.

package/dist/mixins/themeable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+IF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;GASF,CACF,CAAC;AAEF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;GAOF,CACF,CAAC;AAEF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;GAOF,CACF,CAAC;AAEF,cAAc,CACZ,eAAe,EACf,GAAG;;;GAIF,CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult \| CSSResultArray \| CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n return class ThemeableElement extends BaseElement {\n static get styles(): CSSResultArray {\n const originalCSS = super.styles;\n\n return [\n ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n css`\n @tailwind base;\n\n {\n -webkit-tap-highlight-color: transparent;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n :host {\n display: block;\n color: var(--lumo-body-text-color);\n line-height: var(--lumo-line-height-m);\n font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n }\n\n details > summary::-webkit-details-marker {\n display: none;\n }\n\n details > summary {\n list-style: none;\n }\n\n vaadin-select {\n margin-top: -4px;\n margin-bottom: -4px;\n }\n\n vaadin-text-area,\n vaadin-text-field,\n vaadin-date-picker,\n vaadin-email-field,\n vaadin-number-field,\n vaadin-custom-field,\n vaadin-integer-field,\n vaadin-password-field,\n vaadin-checkbox-group,\n vaadin-radio-group,\n vaadin-combo-box::part(text-field),\n vaadin-date-picker::part(text-field) {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n vaadin-text-area::part(label),\n vaadin-text-field::part(label),\n vaadin-date-picker::part(label),\n vaadin-email-field::part(label),\n vaadin-number-field::part(label),\n vaadin-custom-field::part(label),\n vaadin-integer-field::part(label),\n vaadin-password-field::part(label),\n vaadin-checkbox-group::part(label),\n vaadin-radio-group::part(label),\n vaadin-combo-box::part(label),\n vaadin-date-picker::part(label) {\n margin-left: 0;\n }\n\n vaadin-time-picker,\n vaadin-date-time-picker {\n width: 100%;\n }\n\n vaadin-button,\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(label) {\n margin: 0.1875em var(--lumo-space-m);\n }\n\n .appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n\n .appearance-none::-webkit-calendar-picker-indicator,\n .appearance-none::-webkit-outer-spin-button,\n .appearance-none::-webkit-inner-spin-button,\n .appearance-none::-webkit-list-button {\n opacity: 0 !important;\n width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n input::-webkit-date-and-time-value {\n text-align: inherit !important;\n }\n\n [hidden] {\n display: none !important;\n }\n\n @tailwind components;\n\n @tailwind utilities;\n\n @layer utilities {\n .border-radius-overflow-fix {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n @variants sm, md, lg, xl {\n .grid-rows-auto {\n grid-auto-rows: 1fr;\n }\n\n .icon-inline {\n --iron-icon-height: 1em;\n --iron-icon-width: 1em;\n }\n\n .bg-blurred {\n backdrop-filter: blur(25px);\n background: var(--lumo-tint-80pct);\n }\n\n .max-w-modal {\n max-width: 28rem;\n }\n\n .max-w-modal-wide {\n max-width: 50rem;\n }\n\n .w-narrow-modal {\n width: 18rem;\n }\n\n .snap-x-mandatory {\n scroll-snap-type: x mandatory;\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n }\n }\n `,\n ];\n }\n };\n};\n\nregisterStyles(\n 'vaadin-date-time-picker',\n css`\n vaadin-date-time-picker-custom-field {\n --lumo-text-field-size: auto;\n padding: 0;\n }\n\n vaadin-date-time-picker-custom-field::part(label) {\n padding-bottom: 0.5em;\n }\n `\n);\n\nregisterStyles(\n 'vaadin-date-time-picker-date-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-date-text-field {\n padding: 0;\n }\n `\n);\n\nregisterStyles(\n 'vaadin-date-time-picker-time-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-time-text-field {\n padding: 0;\n }\n `\n);\n\nregisterStyles(\n 'vaadin-button',\n css`\n :host([theme~='primary']) {\n font-weight: 500;\n }\n `\n);\n\n/*\n One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n \n @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}
1	+ {"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+IF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult \| CSSResultArray \| CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n return class ThemeableElement extends BaseElement {\n static get styles(): CSSResultArray {\n const originalCSS = super.styles;\n\n return [\n ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n css`\n @tailwind base;\n\n {\n -webkit-tap-highlight-color: transparent;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n :host {\n display: block;\n color: var(--lumo-body-text-color);\n line-height: var(--lumo-line-height-m);\n font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n }\n\n details > summary::-webkit-details-marker {\n display: none;\n }\n\n details > summary {\n list-style: none;\n }\n\n vaadin-select {\n margin-top: -4px;\n margin-bottom: -4px;\n }\n\n vaadin-text-area,\n vaadin-text-field,\n vaadin-date-picker,\n vaadin-email-field,\n vaadin-number-field,\n vaadin-custom-field,\n vaadin-integer-field,\n vaadin-password-field,\n vaadin-checkbox-group,\n vaadin-radio-group,\n vaadin-combo-box::part(text-field),\n vaadin-date-picker::part(text-field) {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n vaadin-text-area::part(label),\n vaadin-text-field::part(label),\n vaadin-date-picker::part(label),\n vaadin-email-field::part(label),\n vaadin-number-field::part(label),\n vaadin-custom-field::part(label),\n vaadin-integer-field::part(label),\n vaadin-password-field::part(label),\n vaadin-checkbox-group::part(label),\n vaadin-radio-group::part(label),\n vaadin-combo-box::part(label),\n vaadin-date-picker::part(label) {\n margin-left: 0;\n }\n\n vaadin-time-picker,\n vaadin-date-time-picker {\n width: 100%;\n }\n\n vaadin-button,\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(label) {\n margin: 0.1875em var(--lumo-space-m);\n }\n\n .appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n\n .appearance-none::-webkit-calendar-picker-indicator,\n .appearance-none::-webkit-outer-spin-button,\n .appearance-none::-webkit-inner-spin-button,\n .appearance-none::-webkit-list-button {\n opacity: 0 !important;\n width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n input::-webkit-date-and-time-value {\n text-align: inherit !important;\n }\n\n [hidden] {\n display: none !important;\n }\n\n @tailwind components;\n\n @tailwind utilities;\n\n @layer utilities {\n .border-radius-overflow-fix {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n @variants sm, md, lg, xl {\n .grid-rows-auto {\n grid-auto-rows: 1fr;\n }\n\n .icon-inline {\n --iron-icon-height: 1em;\n --iron-icon-width: 1em;\n }\n\n .bg-blurred {\n backdrop-filter: blur(25px);\n background: var(--lumo-tint-80pct);\n }\n\n .max-w-modal {\n max-width: 28rem;\n }\n\n .max-w-modal-wide {\n max-width: 50rem;\n }\n\n .w-narrow-modal {\n width: 18rem;\n }\n\n .snap-x-mandatory {\n scroll-snap-type: x mandatory;\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n }\n }\n `,\n ];\n }\n };\n};\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker',\n css`\n vaadin-date-time-picker-custom-field {\n --lumo-text-field-size: auto;\n padding: 0;\n }\n\n vaadin-date-time-picker-custom-field::part(label) {\n padding-bottom: 0.5em;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker-date-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-date-text-field {\n padding: 0;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker-time-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-time-text-field {\n padding: 0;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-button',\n css`\n :host([theme~='primary']) {\n font-weight: 500;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 /\n registerStyles(\n 'vcf-tooltip',\n css`\n :host([hidden]) [part='container'] {\n display: none !important;\n }\n `\n );\n} catch {\n // ignore\n}\n\n/\n One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n \n @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.27.0-beta.1",
+  "version": "1.27.0-beta.3",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",

package/dist/cdn/shared-20142d51.js DELETED Viewed

	@@ -1 +0,0 @@
1	- import"./foxy-spinner.js";import{I as e}from"./shared-5f6d7cc6.js";customElements.define("foxy-internal-card",e);

package/dist/cdn/shared-74086729.js DELETED Viewed

@@ -1 +0,0 @@

- import"./foxy-collection-page.js";import"./foxy-form-dialog.js";import"./foxy-pagination.js";import"./shared-8addaf74.js";import{I as e}from"./shared-d1ee06bb.js";import"./shared-36a09fe6.js";import"./shared-019ad470.js";import{_ as t}from"./shared-1522d76f.js";import{h as r,L as s}from"./shared-dc73b9a5.js";import{I as i}from"./shared-30cbf0a6.js";import{T as o}from"./shared-13afcc16.js";import{c as n}from"./shared-4e709717.js";let a,c=e=>e;class d extends(o(i(s))){constructor(){super(...arguments),this.summary=null,this.open=!1}static get properties(){return t(t({},super.properties),{},{summary:{type:String},open:{type:Boolean}})}render(){var e;return r(a||(a=c` <details class="w-full border border-contrast-10 rounded" ?open="${0}" @toggle="${0}"> <summary class="${0}"> <div class="flex items-center h-m pl-m pr-s"> <div class="flex items-center flex-1"> <foxy-i18n class="flex items-center text-xs tracking-wide uppercase font-medium text-body" infer="" key="${0}"> </foxy-i18n> <slot name="actions"></slot> </div> <iron-icon class="icon-inline text-xl text-body" icon="icons:expand-${0}"> </iron-icon> </div> </summary> <div class="border-t border-contrast-10"> <slot></slot> </div> </details> `),this.open,(e=>{this.open=e.currentTarget.open}),n({"focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50":!0,"transition-colors cursor-pointer hover-bg-contrast-5":!0,"rounded-t":!0,"rounded-b":!this.open}),null!==(e=this.summary)&&void 0!==e?e:"",this.open?"less":"more")}}customElements.define("foxy-internal-details",d);let l,f,m,p,h,u=e=>e;customElements.define("foxy-internal-async-details-control",class extends e{constructor(){super(...arguments),this.related=[],this.limit=20,this.first="",this.form="",this.item="",this.open=!1,this.__cachedCardRenderer=null,this.__itemRenderer=e=>{if(!this.form||!e.data)return this.__cardRenderer(e);const t=this.disabledSelector.matches("card",!0);return r(l||(l=u` <button ?disabled="${0}" class="${0}" @click="${0}"> ${0} </button> `),t,n({"focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50":!0,"text-left w-full block transition-colors":!0,"hover-bg-contrast-5":!t}),(t=>{const r=t.currentTarget,s=this.__dialog;s.header="header_update",s.href=e.href,s.show(r)}),this.__cardRenderer(e))}}static get properties(){return t(t({},super.properties),{},{related:{type:Array},first:{type:String},limit:{type:Number},form:{type:String},item:{type:String},open:{type:Boolean}})}renderControl(){let e;try{const t=new URL(this.first);t.searchParams.set("limit",String(this.limit)),e=t.toString()}catch(t){e=this.first}return r(f||(f=u` <foxy-internal-details summary="title" infer="" ?open="${0}" @toggle="${0}"> ${0} <foxy-pagination class="px-m pb-s" first="${0}" infer="pagination"> <foxy-collection-page class="-mx-m block divide-y divide-contrast-10 mb-s" infer="card" .related="${0}" .item="${0}"> </foxy-collection-page> </foxy-pagination> </foxy-internal-details> `),this.open,(e=>this.open=e.currentTarget.open),this.form?r(m||(m=u` <foxy-form-dialog parent="${0}" infer="dialog" id="form" .related="${0}" .form="${0}"> </foxy-form-dialog> ${0} `),e,this.related,this.form,this.readonly?"":r(p||(p=u` <button class="h-xs w-xs rounded-full text-success flex items-center justify-center text-l focus-outline-none focus-ring-2 focus-ring-primary-50" slot="actions" ?disabled="${0}" @click="${0}"> <iron-icon class="icon-inline" icon="icons:add"></iron-icon> </button> `),this.disabled,(e=>{e.preventDefault(),e.stopPropagation();const t=this.__dialog,r=e.currentTarget;t.header="header_create",t.href="",t.show(r)}))):"",e,this.related,this.__itemRenderer)}get __dialog(){return this.renderRoot.querySelector("#form")}get __cardRenderer(){var e;const t=this.item;if((null===(e=this.__cachedCardRenderer)||void 0===e?void 0:e.item)!==t){let e;e=null===t?()=>r(h||(h=u``)):"string"==typeof t?new Function("ctx",`return ctx.html\`<${t} related=\${JSON.stringify(ctx.related)} parent=\${ctx.parent} class="p-m" infer href=\${ctx.href}></${t}>\``):t,this.__cachedCardRenderer={item:t,render:e}}return this.__cachedCardRenderer.render}});