npm - @foxy.io/elements - Versions diffs - 1.28.0 → 1.29.0-beta.1 - Mend

@foxy.io/elements 1.28.0 → 1.29.0-beta.1

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 (323) hide show

package/dist/cdn/translations/customer/en.json CHANGED Viewed

@@ -28,11 +28,11 @@
   },
   "address-form": {
     "header": {
+      "title_default_shipping": "Default shipping address",
+      "title_default_billing": "Default billing address",
       "title_existing": "Customer address #{{ id }}",
       "title_new": "New customer address",
-      "subtitle_default_shipping": "Default shipping address",
-      "subtitle_default_billing": "Default billing address",
-      "subtitle_custom": "Custom address",
+      "subtitle": "",
       "copy-id": {
         "failed_to_copy": "Failed to copy",
         "click_to_copy": "Copy ID",

package/dist/cdn/translations/item-form/en.json CHANGED Viewed

@@ -42,7 +42,6 @@
   },
   "subscription-frequency": {
     "label": "Subscription frequency",
-    "helper_text": "",
     "day": "Day",
     "day_plural": "Days",
     "week": "Week",

package/dist/elements/internal/InternalCalendar/InternalCalendar.js CHANGED Viewed

@@ -130,7 +130,8 @@ export class InternalCalendar extends ThemeableMixin(LitElement) {
         return html `
       <label
         class=${classMap({
-            'font-tnum select-none relative flex h-m items-center justify-center rounded': true,
+            'relative flex w-m h-m items-center justify-center rounded-s': true,
+            'font-tnum text-l select-none leading-none': true,
             'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,
             'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,
             'bg-primary text-primary-contrast': checked && !disabled,

package/dist/elements/internal/InternalCalendar/InternalCalendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalCalendar.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCalendar/InternalCalendar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseDate } from '../../../utils/parse-date';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nexport class InternalCalendar extends ThemeableMixin(LitElement) {\n static get properties(): PropertyDeclarations {\n return {\n checkAvailability: { attribute: false },\n readonly: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n value: { type: String },\n start: { type: String },\n lang: { type: String },\n };\n }\n\n checkAvailability: (date: Date) => boolean = () => true;\n\n readonly = false;\n\n disabled = false;\n\n value = '';\n\n start = '';\n\n lang = '';\n\n render(): TemplateResult {\n const thisMonth = new Date(this.__startAsDate ?? this.__valueAsDate ?? Date.now());\n const prevMonth = new Date(thisMonth);\n const nextMonth = new Date(thisMonth);\n const lang = this.lang \|\| navigator.language;\n\n prevMonth.setMonth(prevMonth.getMonth() - 1);\n nextMonth.setMonth(nextMonth.getMonth() + 1);\n\n return html`\n <div class=\"text-m text-body font-lumo leading-m\">\n <div class=\"grid p-xs\" style=\"grid-template: auto / max-content auto max-content\">\n <vaadin-button\n data-testid=\"prev\"\n aria-label=${prevMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n theme=\"icon tertiary\"\n class=\"px-xs\"\n ?disabled=${this.disabled}\n @click=${this.__handlePrevButtonClick}\n >\n <iron-icon icon=\"icons:chevron-left\"></iron-icon>\n </vaadin-button>\n\n <span\n data-testid=\"month\"\n class=${classMap({\n 'text-center self-center font-medium': true,\n 'text-disabled': this.disabled,\n })}\n >\n ${thisMonth.toLocaleDateString(lang, { month: 'long', year: 'numeric' })}\n </span>\n\n <vaadin-button\n data-testid=\"next\"\n aria-label=${nextMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n theme=\"icon tertiary\"\n class=\"px-xs\"\n ?disabled=${this.disabled}\n @click=${this.__handleNextButtonClick}\n >\n <iron-icon icon=\"icons:chevron-right\"></iron-icon>\n </vaadin-button>\n </div>\n\n ${this.__renderMonth(thisMonth.getMonth(), thisMonth.getFullYear())}\n </div>\n `;\n }\n\n private get __valueAsDate(): Date \| null {\n return parseDate(this.value);\n }\n\n private set __valueAsDate(value: Date \| null) {\n this.value = value ? serializeDate(value) : '';\n }\n\n private get __startAsDate(): Date \| null {\n return parseDate(this.start);\n }\n\n private set __startAsDate(value: Date \| null) {\n this.start = value ? serializeDate(value) : '';\n }\n\n private __renderMonth(month: number, year: number) {\n const lang = this.lang \|\| navigator.language;\n const date = new Date(year, month, 1, 0, 0, 0, 0);\n const items: TemplateResult[] = [];\n\n for (let i = 0; i < 7; ++i) {\n const weekdayDate = new Date();\n while (weekdayDate.getDay() !== i) weekdayDate.setDate(weekdayDate.getDate() + 1);\n\n items.push(html`\n <span\n class=${classMap({\n 'self-center text-xxs uppercase font-medium tracking-wider': true,\n 'text-secondary': !this.disabled,\n 'text-disabled': this.disabled,\n })}\n >\n ${weekdayDate.toLocaleString(lang, { weekday: 'short' })}\n </span>\n `);\n }\n\n while (date.getMonth() === month) {\n const checked =\n date.getFullYear() === this.__valueAsDate?.getFullYear() &&\n date.getMonth() === this.__valueAsDate?.getMonth() &&\n date.getDate() === this.__valueAsDate?.getDate();\n\n items.push(html`\n <div style=\"grid-column: ${date.getDay() + 1}\" data-testclass=\"day-of-month\">\n ${this.__renderDate(date.getDate(), month, year, checked)}\n </div>\n `);\n\n date.setDate(date.getDate() + 1);\n }\n\n return html`\n <form\n data-testid=\"grid\"\n class=\"grid gap-s p-s text-center\"\n style=\"grid-template: auto / repeat(7, 1fr);\"\n >\n ${items}\n </form>\n `;\n }\n\n private __renderDate(date: number, month: number, year: number, checked = false) {\n const disabled =\n this.disabled \|\| this.readonly \|\| !this.checkAvailability(new Date(year, month, date));\n\n return html`\n <label\n class=${classMap({\n 'font-tnum select-none relative flex h-m items-center justify-center rounded': true,\n 'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,\n 'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,\n 'bg-primary text-primary-contrast': checked && !disabled,\n 'border border-dashed border-contrast-20 text-disabled': !checked && disabled,\n 'border border-dashed border-primary text-primary': checked && disabled,\n })}\n >\n <input\n name=\"date\"\n type=\"radio\"\n value=${date}\n class=\"sr-only\"\n ?disabled=${this.readonly \|\| this.disabled \|\| disabled}\n @change=${() => {\n this.__valueAsDate = new Date(year, month, date);\n this.dispatchEvent(new CustomEvent('change'));\n }}\n />\n\n ${date}\n </label>\n `;\n }\n\n private __handlePrevButtonClick() {\n const currentStart = this.__startAsDate ?? new Date();\n this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() - 1));\n }\n\n private __handleNextButtonClick() {\n const currentStart = this.__startAsDate ?? new Date();\n this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() + 1));\n }\n}\n"]}
1	+ {"version":3,"file":"InternalCalendar.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCalendar/InternalCalendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwC,IAAI,EAAE,MAAM,aAAa,CAAC;AAErF,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,SAAS,EAAE,qCAAkC;AACtD,OAAO,EAAE,aAAa,EAAE,yCAAsC;AAE9D,MAAM,OAAO,gBAAiB,SAAQ,cAAc,CAAC,UAAU,CAAC;IAAhE;;QAYE,sBAAiB,GAA4B,GAAG,EAAE,CAAC,IAAI,CAAC;QAExD,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,UAAK,GAAG,EAAE,CAAC;QAEX,UAAK,GAAG,EAAE,CAAC;QAEX,SAAI,GAAG,EAAE,CAAC;IA8JZ,CAAC;IAnLC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,iBAAiB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YACvC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;YAC1C,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;YAC1C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACvB,CAAC;IACJ,CAAC;IAcD,MAAM;;QACJ,MAAM,SAAS,GAAG,IAAI,IAAI,aAAC,IAAI,CAAC,aAAa,mCAAI,IAAI,CAAC,aAAa,mCAAI,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,QAAQ,CAAC;QAE7C,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7C,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;QAE7C,OAAO,IAAI,CAAA;;;;;yBAKU,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;;;wBAGnE,IAAI,CAAC,QAAQ;qBAChB,IAAI,CAAC,uBAAuB;;;;;;;oBAO7B,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;;cAEA,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;;;;;yBAK3D,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;;;wBAGnE,IAAI,CAAC,QAAQ;qBAChB,IAAI,CAAC,uBAAuB;;;;;;UAMvC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,WAAW,EAAE,CAAC;;KAEtE,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,IAAY,aAAa,CAAC,KAAkB;QAC1C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,IAAY,aAAa,CAAC,KAAkB;QAC1C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;IAEO,aAAa,CAAC,KAAa,EAAE,IAAY;;QAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,QAAQ,CAAC;QAC7C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAClD,MAAM,KAAK,GAAqB,EAAE,CAAC;QAEnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE;YAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC;YAC/B,OAAO,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC;gBAAE,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;YAElF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;;kBAEH,QAAQ,CAAC;gBACf,2DAA2D,EAAE,IAAI;gBACjE,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;gBAChC,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,CAAC;;YAEA,WAAW,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;;OAE3D,CAAC,CAAC;SACJ;QAED,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE;YAChC,MAAM,OAAO,GACX,IAAI,CAAC,WAAW,EAAE,YAAK,IAAI,CAAC,aAAa,0CAAE,WAAW,GAAE;gBACxD,IAAI,CAAC,QAAQ,EAAE,YAAK,IAAI,CAAC,aAAa,0CAAE,QAAQ,GAAE;gBAClD,IAAI,CAAC,OAAO,EAAE,YAAK,IAAI,CAAC,aAAa,0CAAE,OAAO,GAAE,CAAC;YAEnD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;mCACc,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;YACxC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC;;OAE5D,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;;;;;UAML,KAAK;;KAEV,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,IAAY,EAAE,KAAa,EAAE,IAAY,EAAE,OAAO,GAAG,KAAK;QAC7E,MAAM,QAAQ,GACZ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QAEzF,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,6DAA6D,EAAE,IAAI;YACnE,2CAA2C,EAAE,IAAI;YACjD,iEAAiE,EAAE,CAAC,QAAQ;YAC5E,oCAAoC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ;YAC3D,kCAAkC,EAAE,OAAO,IAAI,CAAC,QAAQ;YACxD,uDAAuD,EAAE,CAAC,OAAO,IAAI,QAAQ;YAC7E,kDAAkD,EAAE,OAAO,IAAI,QAAQ;SACxE,CAAC;;;;;kBAKQ,IAAI;;sBAEA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,QAAQ;oBAC5C,GAAG,EAAE;YACb,IAAI,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;YACjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChD,CAAC;;;UAGD,IAAI;;KAET,CAAC;IACJ,CAAC;IAEO,uBAAuB;;QAC7B,MAAM,YAAY,SAAG,IAAI,CAAC,aAAa,mCAAI,IAAI,IAAI,EAAE,CAAC;QACtD,IAAI,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACpF,CAAC;IAEO,uBAAuB;;QAC7B,MAAM,YAAY,SAAG,IAAI,CAAC,aAAa,mCAAI,IAAI,IAAI,EAAE,CAAC;QACtD,IAAI,CAAC,aAAa,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACpF,CAAC;CACF","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseDate } from '../../../utils/parse-date';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nexport class InternalCalendar extends ThemeableMixin(LitElement) {\n static get properties(): PropertyDeclarations {\n return {\n checkAvailability: { attribute: false },\n readonly: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n value: { type: String },\n start: { type: String },\n lang: { type: String },\n };\n }\n\n checkAvailability: (date: Date) => boolean = () => true;\n\n readonly = false;\n\n disabled = false;\n\n value = '';\n\n start = '';\n\n lang = '';\n\n render(): TemplateResult {\n const thisMonth = new Date(this.__startAsDate ?? this.__valueAsDate ?? Date.now());\n const prevMonth = new Date(thisMonth);\n const nextMonth = new Date(thisMonth);\n const lang = this.lang \|\| navigator.language;\n\n prevMonth.setMonth(prevMonth.getMonth() - 1);\n nextMonth.setMonth(nextMonth.getMonth() + 1);\n\n return html`\n <div class=\"text-m text-body font-lumo leading-m\">\n <div class=\"grid p-xs\" style=\"grid-template: auto / max-content auto max-content\">\n <vaadin-button\n data-testid=\"prev\"\n aria-label=${prevMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n theme=\"icon tertiary\"\n class=\"px-xs\"\n ?disabled=${this.disabled}\n @click=${this.__handlePrevButtonClick}\n >\n <iron-icon icon=\"icons:chevron-left\"></iron-icon>\n </vaadin-button>\n\n <span\n data-testid=\"month\"\n class=${classMap({\n 'text-center self-center font-medium': true,\n 'text-disabled': this.disabled,\n })}\n >\n ${thisMonth.toLocaleDateString(lang, { month: 'long', year: 'numeric' })}\n </span>\n\n <vaadin-button\n data-testid=\"next\"\n aria-label=${nextMonth.toLocaleString(lang, { year: 'numeric', month: 'long' })}\n theme=\"icon tertiary\"\n class=\"px-xs\"\n ?disabled=${this.disabled}\n @click=${this.__handleNextButtonClick}\n >\n <iron-icon icon=\"icons:chevron-right\"></iron-icon>\n </vaadin-button>\n </div>\n\n ${this.__renderMonth(thisMonth.getMonth(), thisMonth.getFullYear())}\n </div>\n `;\n }\n\n private get __valueAsDate(): Date \| null {\n return parseDate(this.value);\n }\n\n private set __valueAsDate(value: Date \| null) {\n this.value = value ? serializeDate(value) : '';\n }\n\n private get __startAsDate(): Date \| null {\n return parseDate(this.start);\n }\n\n private set __startAsDate(value: Date \| null) {\n this.start = value ? serializeDate(value) : '';\n }\n\n private __renderMonth(month: number, year: number) {\n const lang = this.lang \|\| navigator.language;\n const date = new Date(year, month, 1, 0, 0, 0, 0);\n const items: TemplateResult[] = [];\n\n for (let i = 0; i < 7; ++i) {\n const weekdayDate = new Date();\n while (weekdayDate.getDay() !== i) weekdayDate.setDate(weekdayDate.getDate() + 1);\n\n items.push(html`\n <span\n class=${classMap({\n 'self-center text-xxs uppercase font-medium tracking-wider': true,\n 'text-secondary': !this.disabled,\n 'text-disabled': this.disabled,\n })}\n >\n ${weekdayDate.toLocaleString(lang, { weekday: 'short' })}\n </span>\n `);\n }\n\n while (date.getMonth() === month) {\n const checked =\n date.getFullYear() === this.__valueAsDate?.getFullYear() &&\n date.getMonth() === this.__valueAsDate?.getMonth() &&\n date.getDate() === this.__valueAsDate?.getDate();\n\n items.push(html`\n <div style=\"grid-column: ${date.getDay() + 1}\" data-testclass=\"day-of-month\">\n ${this.__renderDate(date.getDate(), month, year, checked)}\n </div>\n `);\n\n date.setDate(date.getDate() + 1);\n }\n\n return html`\n <form\n data-testid=\"grid\"\n class=\"grid gap-s p-s text-center\"\n style=\"grid-template: auto / repeat(7, 1fr);\"\n >\n ${items}\n </form>\n `;\n }\n\n private __renderDate(date: number, month: number, year: number, checked = false) {\n const disabled =\n this.disabled \|\| this.readonly \|\| !this.checkAvailability(new Date(year, month, date));\n\n return html`\n <label\n class=${classMap({\n 'relative flex w-m h-m items-center justify-center rounded-s': true,\n 'font-tnum text-l select-none leading-none': true,\n 'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,\n 'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,\n 'bg-primary text-primary-contrast': checked && !disabled,\n 'border border-dashed border-contrast-20 text-disabled': !checked && disabled,\n 'border border-dashed border-primary text-primary': checked && disabled,\n })}\n >\n <input\n name=\"date\"\n type=\"radio\"\n value=${date}\n class=\"sr-only\"\n ?disabled=${this.readonly \|\| this.disabled \|\| disabled}\n @change=${() => {\n this.__valueAsDate = new Date(year, month, date);\n this.dispatchEvent(new CustomEvent('change'));\n }}\n />\n\n ${date}\n </label>\n `;\n }\n\n private __handlePrevButtonClick() {\n const currentStart = this.__startAsDate ?? new Date();\n this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() - 1));\n }\n\n private __handleNextButtonClick() {\n const currentStart = this.__startAsDate ?? new Date();\n this.__startAsDate = new Date(currentStart.setMonth(currentStart.getMonth() + 1));\n }\n}\n"]}

package/dist/elements/internal/InternalCard/InternalCard.js CHANGED Viewed

@@ -40,13 +40,13 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         <div
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'items-center justify-center': true,
             'opacity-0 pointer-events-none': this.isBodyReady,
         })}
         >
           <foxy-spinner
             layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}
             state=${spinnerState}
-            class="m-auto"
             infer="spinner"
           >
           </foxy-spinner>

package/dist/elements/internal/InternalCard/InternalCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalCard.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/InternalCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,YAAiC,SAAQ,cAAc,CAAC,cAAc,CAAQ;IACzF;;;OAGG;IACH,UAAU;QACR,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAClC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,MAAM,CAAC;QAEX,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAKjB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,WAAW;SACnD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,IAAI,CAAC,WAAW;SAClD,CAAC;;;qBAGS,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACpD,YAAY~~;;;;;;;KAO3B~~,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { HALJSONResource as Data } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\n/*\n Internal base element for cards.\n \n @since 1.17.0\n * @element foxy-internal-card\n /\nexport class InternalCard<TData extends Data> extends ThemeableMixin(NucleonElement)<TData> {\n /\n Invoked together with `.render()` to obtain a template for card contents.\n * When extending `InternalCard`, prefer overriding this method to `.render()`.\n */\n renderBody(): TemplateResult {\n return html``;\n }\n\n render(): TemplateResult {\n const spinnerState = this.in('fail')\n ? 'error'\n : this.in({ idle: 'template' })\n ? 'empty'\n : 'busy';\n\n return html`\n <div\n aria-busy=${this.in('busy')}\n aria-live=\"polite\"\n class=\"relative leading-m text-body text-m font-lumo\"\n >\n <div\n class=${classMap({\n 'transition duration-500 ease-in-out': true,\n 'opacity-0 pointer-events-none': !this.isBodyReady,\n })}\n >\n ${this.renderBody()}\n </div>\n\n <div\n class=${classMap({\n 'transition duration-500 ease-in-out absolute inset-0 flex': true,\n 'opacity-0 pointer-events-none': this.isBodyReady,\n })}\n >\n <foxy-spinner\n layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}\n state=${spinnerState}\n ~~class=\"m-auto\"\n~~ infer=\"spinner\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n get isBodyReady(): boolean {\n return !!this.data;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalCard.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/InternalCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,YAAiC,SAAQ,cAAc,CAAC,cAAc,CAAQ;IACzF;;;OAGG;IACH,UAAU;QACR,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAClC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,MAAM,CAAC;QAEX,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAKjB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,WAAW;SACnD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,6BAA6B,EAAE,IAAI;YACnC,+BAA+B,EAAE,IAAI,CAAC,WAAW;SAClD,CAAC;;;qBAGS,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACpD,YAAY;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { HALJSONResource as Data } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\n/*\n Internal base element for cards.\n \n @since 1.17.0\n * @element foxy-internal-card\n /\nexport class InternalCard<TData extends Data> extends ThemeableMixin(NucleonElement)<TData> {\n /\n Invoked together with `.render()` to obtain a template for card contents.\n * When extending `InternalCard`, prefer overriding this method to `.render()`.\n */\n renderBody(): TemplateResult {\n return html``;\n }\n\n render(): TemplateResult {\n const spinnerState = this.in('fail')\n ? 'error'\n : this.in({ idle: 'template' })\n ? 'empty'\n : 'busy';\n\n return html`\n <div\n aria-busy=${this.in('busy')}\n aria-live=\"polite\"\n class=\"relative leading-m text-body text-m font-lumo\"\n >\n <div\n class=${classMap({\n 'transition duration-500 ease-in-out': true,\n 'opacity-0 pointer-events-none': !this.isBodyReady,\n })}\n >\n ${this.renderBody()}\n </div>\n\n <div\n class=${classMap({\n 'transition duration-500 ease-in-out absolute inset-0 flex': true,\n 'items-center justify-center': true,\n 'opacity-0 pointer-events-none': this.isBodyReady,\n })}\n >\n <foxy-spinner\n layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}\n state=${spinnerState}\n infer=\"spinner\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n get isBodyReady(): boolean {\n return !!this.data;\n }\n}\n"]}

package/dist/elements/internal/InternalControl/InternalControl.d.ts CHANGED Viewed

@@ -26,6 +26,7 @@ export declare class InternalControl extends InternalControl_base {
     nucleon: NucleonElement<any> | null;
     inferFromElement(key: string, element: HTMLElement): unknown | undefined;
     applyInferredProperties(context: Map<string, unknown>): void;
+    renderLightDom(): void;
     updated(changes: Map<keyof this, unknown>): void;
     /**
      * Renders the control itself. In most cases, you will need to implement

package/dist/elements/internal/InternalControl/InternalControl.js CHANGED Viewed

@@ -43,15 +43,18 @@ export class InternalControl extends ConfigurableMixin(TranslatableMixin(Themeab
         if (((_b = this.nucleon) === null || _b === void 0 ? void 0 : _b.in('idle')) === false)
             this.disabled = true;
     }
+    renderLightDom() {
+        if (typeof this.infer !== 'string')
+            return;
+        const lightDomTemplate = html `
+      <slot name="${this.infer}:before" slot="before"></slot>
+      <slot name="${this.infer}:after" slot="after"></slot>
+    `;
+        render(lightDomTemplate, this);
+    }
     updated(changes) {
         super.updated(changes);
-        if (typeof this.infer === 'string') {
-            const lightDomTemplate = html `
-        <slot name="${this.infer}:before" slot="before"></slot>
-        <slot name="${this.infer}:after" slot="after"></slot>
-      `;
-            render(lightDomTemplate, this);
-        }
+        this.renderLightDom();
     }
     /**
      * Renders the control itself. In most cases, you will need to implement

package/dist/elements/internal/InternalControl/InternalControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalControl/InternalControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CACpD,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAC/D;IAFD;;QAcE,wDAAwD;QACxD,YAAO,GAA+B,IAAI,CAAC;~~IA+C7C~~,CAAC;~~IA3DC~~,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;QAChD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,YAAY,cAAc;YAAE,OAAO,OAAO,CAAC;QAC3E,OAAO,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,uBAAuB,CAAC,OAA6B;;QACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,SAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAqC,mCAAI,IAAI,CAAC;QACnF,IAAI,OAAA,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,MAAM,OAAM,KAAK;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC/D,CAAC;IAED,~~OAAO,CAAC,OAAiC~~;~~QACvC~~,~~KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,~~IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,~~EAAE~~;~~YAClC~~,MAAM,gBAAgB,GAAG,IAAI,CAAA;~~sBACb~~,IAAI,CAAC,KAAK;~~sBACV~~,IAAI,CAAC,KAAK;~~OACzB~~,CAAC;~~YAEF~~,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;~~SAChC~~;~~IACH~~,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;QACzE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;KACnD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { render } from 'lit-html';\n\n/*\n An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound\n * to a property or as complex as a query builder, and it infers property values from the\n * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate\n * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its\n * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,\n * uses `display: none` to hide itself.\n \n @element foxy-internal-control\n * @since 1.17.0\n /\nexport class InternalControl extends ConfigurableMixin(\n TranslatableMixin(ThemeableMixin(InferrableMixin(LitElement)))\n) {\n static get inferredProperties(): string[] {\n return [...super.inferredProperties, 'nucleon'];\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n nucleon: { attribute: false },\n };\n }\n\n /* NucleonElement instance this control is bound to. /\n nucleon: NucleonElement<any> \| null = null;\n\n inferFromElement(key: string, element: HTMLElement): unknown \| undefined {\n if (key === 'nucleon' && element instanceof NucleonElement) return element;\n return super.inferFromElement(key, element);\n }\n\n applyInferredProperties(context: Map<string, unknown>): void {\n super.applyInferredProperties(context);\n\n this.nucleon = (context.get('nucleon') as NucleonElement<any> \| undefined) ?? null;\n if (this.nucleon?.in('idle') === false) this.disabled = true;\n }\n\n ~~updated~~(~~changes: Map<keyof this, unknown>~~): void {\n ~~super.updated(changes);\n\n~~ if (typeof this.infer ~~===~~ 'string') {\n const lightDomTemplate = html`\n <slot name=\"${this.infer}:before\" slot=\"before\"></slot>\n <slot name=\"${this.infer}:after\" slot=\"after\"></slot>\n `;\n\n render(lightDomTemplate, this);\n }\n }\n\n /\n Renders the control itself. In most cases, you will need to implement\n * this method instead of `.render()` in your class to keep the before and after templates/slots.\n /\n renderControl(): TemplateResult {\n return html``;\n }\n\n /\n Renders the control (if visible) and the before/after templates/slots.\n * You should probably implement `.renderControl()` method instead of this one in your class.\n */\n render(): TemplateResult {\n if (this.hidden) return html``;\n\n return html`\n ${this.renderTemplateOrSlot('before', this.nucleon)} ${this.renderControl()}\n ${this.renderTemplateOrSlot('after', this.nucleon)}\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalControl/InternalControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CACpD,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAC/D;IAFD;;QAcE,wDAAwD;QACxD,YAAO,GAA+B,IAAI,CAAC;IAkD7C,CAAC;IA9DC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;QAChD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,YAAY,cAAc;YAAE,OAAO,OAAO,CAAC;QAC3E,OAAO,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,uBAAuB,CAAC,OAA6B;;QACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,SAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAqC,mCAAI,IAAI,CAAC;QACnF,IAAI,OAAA,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,MAAM,OAAM,KAAK;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC/D,CAAC;IAED,cAAc;QACZ,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO;QAE3C,MAAM,gBAAgB,GAAG,IAAI,CAAA;oBACb,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,KAAK;KACzB,CAAC;QAEF,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;QACzE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;KACnD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { render } from 'lit-html';\n\n/*\n An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound\n * to a property or as complex as a query builder, and it infers property values from the\n * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate\n * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its\n * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,\n * uses `display: none` to hide itself.\n \n @element foxy-internal-control\n * @since 1.17.0\n /\nexport class InternalControl extends ConfigurableMixin(\n TranslatableMixin(ThemeableMixin(InferrableMixin(LitElement)))\n) {\n static get inferredProperties(): string[] {\n return [...super.inferredProperties, 'nucleon'];\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n nucleon: { attribute: false },\n };\n }\n\n /* NucleonElement instance this control is bound to. /\n nucleon: NucleonElement<any> \| null = null;\n\n inferFromElement(key: string, element: HTMLElement): unknown \| undefined {\n if (key === 'nucleon' && element instanceof NucleonElement) return element;\n return super.inferFromElement(key, element);\n }\n\n applyInferredProperties(context: Map<string, unknown>): void {\n super.applyInferredProperties(context);\n\n this.nucleon = (context.get('nucleon') as NucleonElement<any> \| undefined) ?? null;\n if (this.nucleon?.in('idle') === false) this.disabled = true;\n }\n\n renderLightDom(): void {\n if (typeof this.infer !== 'string') return;\n\n const lightDomTemplate = html`\n <slot name=\"${this.infer}:before\" slot=\"before\"></slot>\n <slot name=\"${this.infer}:after\" slot=\"after\"></slot>\n `;\n\n render(lightDomTemplate, this);\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n this.renderLightDom();\n }\n\n /\n Renders the control itself. In most cases, you will need to implement\n * this method instead of `.render()` in your class to keep the before and after templates/slots.\n /\n renderControl(): TemplateResult {\n return html``;\n }\n\n /\n Renders the control (if visible) and the before/after templates/slots.\n * You should probably implement `.renderControl()` method instead of this one in your class.\n */\n render(): TemplateResult {\n if (this.hidden) return html``;\n\n return html`\n ${this.renderTemplateOrSlot('before', this.nucleon)} ${this.renderControl()}\n ${this.renderTemplateOrSlot('after', this.nucleon)}\n `;\n }\n}\n"]}

package/dist/elements/internal/InternalForm/InternalForm.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import type { PropertyDeclarations } from 'lit-element';
 import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { TemplateResult } from 'lit-html';
 import type { Status } from './types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
 declare const Base: typeof NucleonElement & {
     styles: import("lit-element").CSSResultArray;
@@ -34,6 +35,7 @@ export declare class InternalForm<TData extends HALJSONResource> extends Base<TD
     get headerSubtitleOptions(): Record<string, unknown>;
     /** ID that will be written to clipboard when Copy ID button in header is clicked. */
     get headerCopyIdValue(): string | number;
+    get hiddenSelector(): BooleanSelector;
     /**
      * Renders optional form header.
      * - Customize which actions are rendered with `.renderHeaderActions()` method.

package/dist/elements/internal/InternalForm/InternalForm.js CHANGED Viewed

@@ -1,7 +1,7 @@
+import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
-import { getResourceId } from '@foxy.io/sdk/core';
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
@@ -58,6 +58,16 @@ export class InternalForm extends Base {
         var _a;
         return this.data ? (_a = getResourceId(this.data._links.self.href)) !== null && _a !== void 0 ? _a : '' : '';
     }
+    get hiddenSelector() {
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        if (this.href)
+            alwaysMatch.unshift('create');
+        if (!this.href)
+            alwaysMatch.unshift('delete', 'timestamps', 'submit');
+        if (!this.in({ idle: { snapshot: 'dirty' } }))
+            alwaysMatch.unshift('undo');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
     /**
      * Renders optional form header.
      * - Customize which actions are rendered with `.renderHeaderActions()` method.
@@ -130,34 +140,21 @@ export class InternalForm extends Base {
      * don't forget to add `super.renderBody()` to your template.
      */
     renderBody() {
-        if (this.data) {
-            const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });
-            const isDeleteHidden = this.hiddenSelector.matches('delete', true);
-            const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });
-            return html `
-        <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
-        ${!isDeleteHidden || isSnapshotDirty
-                ? html `
-              <div class="flex gap-s">
-                <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
-                <div class="w-full"></div>
-                <foxy-internal-undo-control class=${actionClass} infer="undo">
-                </foxy-internal-undo-control>
-                <foxy-internal-submit-control class=${actionClass} infer="submit">
-                </foxy-internal-submit-control>
-              </div>
-            `
-                : ''}
-      `;
-        }
-        else {
-            return html `
-        <div class="flex">
-          <foxy-internal-submit-control infer="create" theme="primary success" class="ml-auto">
-          </foxy-internal-submit-control>
-        </div>
-      `;
-        }
+        const nested = ['delete', 'undo', 'submit', 'create'];
+        return html `
+      <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
+      <div class="flex gap-m" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>
+        <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+        <div class="w-full"></div>
+        <foxy-internal-undo-control infer="undo"> </foxy-internal-undo-control>
+        <foxy-internal-submit-control infer="submit"> </foxy-internal-submit-control>
+        <foxy-internal-submit-control infer="create" theme="primary success">
+        </foxy-internal-submit-control>
+      </div>
+    `;
     }
     /**
      * Renders the entire form. You should probably implement `.renderBody()`

package/dist/elements/internal/InternalForm/InternalForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/*\n An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n \n @element foxy-internal-form\n * @since 1.17.0\n /\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n /* Validation errors with this prefix will show up at the top of the form. /\n static generalErrorPrefix = 'error:';\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n status: { type: Object },\n };\n }\n\n /* Status message to render at the top of the form. If `null`, the message is hidden. /\n status: null \| Status = null;\n\n /\n Renders header actions when the optional header is rendered.\n * Empty by default.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: TData): TemplateResult \| null {\n return null;\n }\n\n /* Getter that returns a i18n key for the optional form header title. /\n get headerTitleKey(): string {\n return 'title';\n }\n\n /* I18next options to pass to the header title translation function. /\n get headerTitleOptions(): Record<string, unknown> {\n return {\n ...this.data,\n context: this.data ? 'existing' : 'new',\n id: this.data ? getResourceId(this.data._links.self.href) : null,\n };\n }\n\n /* Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleKey(): string {\n return 'subtitle';\n }\n\n /* I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleOptions(): Record<string, unknown> {\n return this.data ?? {};\n }\n\n /* ID that will be written to clipboard when Copy ID button in header is clicked. /\n get headerCopyIdValue(): string \| number {\n return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n }\n\n /\n Renders optional form header.\n * - Customize which actions are rendered with `.renderHeaderActions()` method.\n * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n * - To hide the header completely, add `header` to `hidden-controls` attribute.\n /\n renderHeader(): TemplateResult {\n if (this.hiddenSelector.matches('header', true)) return html``;\n\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('header:before')}\n <h2>\n <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n <foxy-i18n\n options=${JSON.stringify(this.headerTitleOptions)}\n infer=\"header\"\n key=${this.headerTitleKey}\n >\n </foxy-i18n>\n ${data\n ? html`\n ${this.hiddenSelector.matches('header:copy-id', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-id\"\n class=\"text-m\"\n text=${this.headerCopyIdValue}\n >\n </foxy-copy-to-clipboard>\n `}\n ${this.hiddenSelector.matches('header:copy-json', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-json\"\n class=\"text-m\"\n icon=\"icons:code\"\n text=${JSON.stringify(data, null, 2)}\n >\n </foxy-copy-to-clipboard>\n `}\n `\n : ''}\n </span>\n ${data\n ? html`\n <foxy-i18n\n infer=\"header\"\n class=\"text-m text-secondary\"\n key=${this.headerSubtitleKey}\n .options=${this.headerSubtitleOptions}\n >\n </foxy-i18n>\n ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n }\n\n /\n Renders form body. This is the method you should implement in your forms\n * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n * don't forget to add `super.renderBody()` to your template.\n /\n renderBody(): TemplateResult {\n if (this.data) {\n const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });\n const isDeleteHidden = this.hiddenSelector.matches('delete', true);\n const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });\n\n return html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n ${!isDeleteHidden \|\| isSnapshotDirty\n ? html`\n <div class=\"flex gap-s\">\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n <div class=\"w-full\"></div>\n <foxy-internal-undo-control class=${actionClass} infer=\"undo\">\n </foxy-internal-undo-control>\n <foxy-internal-submit-control class=${actionClass} infer=\"submit\">\n </foxy-internal-submit-control>\n </div>\n `\n : ''}\n `;\n } else {\n return html`\n <div class=\"flex\">\n <foxy-internal-submit-control infer=\"create\" theme=\"primary success\" class=\"ml-auto\">\n </foxy-internal-submit-control>\n </div>\n `;\n }\n }\n\n /\n Renders the entire form. You should probably implement `.renderBody()`\n * instead of this method in your form to keep the spinner and the common layout features.\n */\n render(): TemplateResult {\n const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) \|\| !this.data);\n\n return html`\n <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n <div\n class=${classMap({\n 'space-y-m': true,\n 'transition-opacity': true,\n 'opacity-0 pointer-events-none': isSpinnerVisible,\n })}\n >\n ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'flex flex-col items-center justify-center gap-m': true,\n 'transition-opacity absolute inset-0': true,\n 'opacity-0 pointer-events-none': !isSpinnerVisible,\n })}\n >\n <foxy-spinner\n layout=${this.in('fail') ? 'vertical' : 'no-label'}\n state=${this.in('fail') ? 'error' : 'busy'}\n infer=\"spinner\"\n >\n </foxy-spinner>\n ${this.href && this.in('fail')\n ? html`\n <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n `;\n }\n\n private get __generalErrors() {\n const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n return this.errors.filter(v => v.startsWith(prefix));\n }\n\n private __renderGeneralError(err: string) {\n return html`\n <foxy-i18n\n class=\"leading-xs text-body rounded bg-error-10 block\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"error\"\n key=${err.replace('error:', '')}\n >\n </foxy-i18n>\n `;\n }\n\n private __renderStatus({ key, options }: Status) {\n if (this.hiddenSelector.matches('status', true)) return;\n return html`\n <p\n data-testid=\"status\"\n class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n <vaadin-button\n class=\"flex-shrink-0\"\n theme=\"success tertiary-inline\"\n @click=${() => (this.status = null)}\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n </vaadin-button>\n </p>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/*\n An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n \n @element foxy-internal-form\n * @since 1.17.0\n /\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n /* Validation errors with this prefix will show up at the top of the form. /\n static generalErrorPrefix = 'error:';\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n status: { type: Object },\n };\n }\n\n /* Status message to render at the top of the form. If `null`, the message is hidden. /\n status: null \| Status = null;\n\n /\n Renders header actions when the optional header is rendered.\n * Empty by default.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: TData): TemplateResult \| null {\n return null;\n }\n\n /* Getter that returns a i18n key for the optional form header title. /\n get headerTitleKey(): string {\n return 'title';\n }\n\n /* I18next options to pass to the header title translation function. /\n get headerTitleOptions(): Record<string, unknown> {\n return {\n ...this.data,\n context: this.data ? 'existing' : 'new',\n id: this.data ? getResourceId(this.data._links.self.href) : null,\n };\n }\n\n /* Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleKey(): string {\n return 'subtitle';\n }\n\n /* I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleOptions(): Record<string, unknown> {\n return this.data ?? {};\n }\n\n /* ID that will be written to clipboard when Copy ID button in header is clicked. /\n get headerCopyIdValue(): string \| number {\n return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = [super.hiddenSelector.toString()];\n if (this.href) alwaysMatch.unshift('create');\n if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n /\n Renders optional form header.\n * - Customize which actions are rendered with `.renderHeaderActions()` method.\n * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n * - To hide the header completely, add `header` to `hidden-controls` attribute.\n /\n renderHeader(): TemplateResult {\n if (this.hiddenSelector.matches('header', true)) return html``;\n\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('header:before')}\n <h2>\n <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n <foxy-i18n\n options=${JSON.stringify(this.headerTitleOptions)}\n infer=\"header\"\n key=${this.headerTitleKey}\n >\n </foxy-i18n>\n ${data\n ? html`\n ${this.hiddenSelector.matches('header:copy-id', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-id\"\n class=\"text-m\"\n text=${this.headerCopyIdValue}\n >\n </foxy-copy-to-clipboard>\n `}\n ${this.hiddenSelector.matches('header:copy-json', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-json\"\n class=\"text-m\"\n icon=\"icons:code\"\n text=${JSON.stringify(data, null, 2)}\n >\n </foxy-copy-to-clipboard>\n `}\n `\n : ''}\n </span>\n ${data\n ? html`\n <foxy-i18n\n infer=\"header\"\n class=\"text-m text-secondary\"\n key=${this.headerSubtitleKey}\n .options=${this.headerSubtitleOptions}\n >\n </foxy-i18n>\n ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n }\n\n /\n Renders form body. This is the method you should implement in your forms\n * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n * don't forget to add `super.renderBody()` to your template.\n /\n renderBody(): TemplateResult {\n const nested = ['delete', 'undo', 'submit', 'create'];\n\n return html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n <div class=\"w-full\"></div>\n\n <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n </foxy-internal-submit-control>\n </div>\n `;\n }\n\n /\n Renders the entire form. You should probably implement `.renderBody()`\n * instead of this method in your form to keep the spinner and the common layout features.\n */\n render(): TemplateResult {\n const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) \|\| !this.data);\n\n return html`\n <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n <div\n class=${classMap({\n 'space-y-m': true,\n 'transition-opacity': true,\n 'opacity-0 pointer-events-none': isSpinnerVisible,\n })}\n >\n ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'flex flex-col items-center justify-center gap-m': true,\n 'transition-opacity absolute inset-0': true,\n 'opacity-0 pointer-events-none': !isSpinnerVisible,\n })}\n >\n <foxy-spinner\n layout=${this.in('fail') ? 'vertical' : 'no-label'}\n state=${this.in('fail') ? 'error' : 'busy'}\n infer=\"spinner\"\n >\n </foxy-spinner>\n ${this.href && this.in('fail')\n ? html`\n <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n `;\n }\n\n private get __generalErrors() {\n const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n return this.errors.filter(v => v.startsWith(prefix));\n }\n\n private __renderGeneralError(err: string) {\n return html`\n <foxy-i18n\n class=\"leading-xs text-body rounded bg-error-10 block\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"error\"\n key=${err.replace('error:', '')}\n >\n </foxy-i18n>\n `;\n }\n\n private __renderStatus({ key, options }: Status) {\n if (this.hiddenSelector.matches('status', true)) return;\n return html`\n <p\n data-testid=\"status\"\n class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n <vaadin-button\n class=\"flex-shrink-0\"\n theme=\"success tertiary-inline\"\n @click=${() => (this.status = null)}\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n </vaadin-button>\n </p>\n `;\n }\n}\n"]}

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.d.ts CHANGED Viewed

@@ -1,16 +1,26 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { HALJSONResource } from '../../public/NucleonElement/types';
+import type { FormRenderer } from '../../public/FormDialog/types';
 import type { Option } from '../../public/QueryBuilder/types';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+declare type DisplayValueOptionsCb = (resource: HALJSONResource | null, context: string) => Record<string, unknown>;
 export declare class InternalResourcePickerControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    getDisplayValueOptions: DisplayValueOptionsCb;
     virtualHost: string;
+    formProps: Record<string, unknown>;
     filters: Option[];
+    layout: 'summary-item' | 'standalone' | null;
     first: string | null;
     item: string | null;
+    form: string | null | FormRenderer;
     private readonly __getItemRenderer;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
+    private __renderSummaryItemLayout;
+    private __renderStandaloneLayout;
     private __handleFetchEvent;
-    private __handleEmpty;
     private __handleSelect;
+    private __handleEmpty;
 }
+export {};

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.js CHANGED Viewed

@@ -1,17 +1,22 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { FetchEvent } from "../../public/NucleonElement/FetchEvent.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
 import { classMap } from "../../../utils/class-map.js";
 import { uniqueId } from 'lodash-es';
 import { spread } from '@open-wc/lit-helpers';
-import { html } from 'lit-html';
 import memoize from 'lodash-es/memoize';
 export class InternalResourcePickerControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.getDisplayValueOptions = (r, c) => ({ resource: r, context: c });
         this.virtualHost = uniqueId('internal-resource-picker-control-');
+        this.formProps = {};
         this.filters = [];
+        this.layout = null;
         this.first = null;
         this.item = null;
+        this.form = null;
         this.__getItemRenderer = memoize((item) => {
             return new Function('ctx', `return ctx.html\`
         <${item !== null && item !== void 0 ? item : 'foxy-null'}
@@ -27,31 +32,127 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            getDisplayValueOptions: { attribute: false },
             virtualHost: {},
+            formProps: { type: Object },
             filters: { type: Array },
+            layout: {},
             first: {},
             item: {},
+            form: {},
         };
     }
     renderControl() {
-        var _a, _b;
+        var _a;
+        const dialogProps = {
+            ...this.formProps,
+            '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },
+        };
         return html `
       <foxy-form-dialog
         parent="foxy://${this.virtualHost}/select"
+        header="header"
         infer="dialog"
-        form="foxy-internal-resource-picker-control-form"
         alert
-        .props=${{
-            '.selectionProps': {
-                '.filters': this.filters,
-                '.first': this.first,
-                '.item': this.item,
-            },
-        }}
+        .props=${dialogProps}
+        .form=${(_a = this.form) !== null && _a !== void 0 ? _a : 'foxy-internal-resource-picker-control-form'}
         @fetch=${this.__handleFetchEvent}
       >
       </foxy-form-dialog>
+      ${this.layout === 'summary-item'
+            ? this.__renderSummaryItemLayout()
+            : this.__renderStandaloneLayout()}
+    `;
+    }
+    updated(changes) {
+        var _a, _b;
+        super.updated(changes);
+        if (changes.has('item'))
+            (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    __renderSummaryItemLayout() {
+        var _a;
+        const resource = this.renderRoot.querySelector('#value');
+        const onClick = (evt) => {
+            if (this.disabled || this.readonly)
+                return;
+            const button = evt.currentTarget;
+            const dialog = this.renderRoot.querySelector('foxy-form-dialog');
+            dialog.href = '';
+            dialog.show(button);
+        };
+        return html `
+      <div class="flex items-start leading-xs gap-m">
+        <div class="flex-1">
+          <div class="text-m text-body whitespace-nowrap">${this.label}</div>
+          <div class="text-s text-secondary">${this.helperText}</div>
+          <div class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </div>
+        </div>
+        <div class="flex items-center gap-xs">
+          <button
+            aria-label=${this.t('select')}
+            class=${classMap({
+            'text-right min-w-0 transition-colors transition-opacity': true,
+            'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,
+            'font-medium': !this.readonly,
+        })}
+            ?disabled=${this.disabled || this.readonly}
+            @click=${onClick}
+          >
+            <div class="truncate min-w-0">
+              ${this._value
+            ? html `
+                    <foxy-i18n
+                      infer=""
+                      key="value"
+                      .options=${this.getDisplayValueOptions((_a = resource === null || resource === void 0 ? void 0 : resource.data) !== null && _a !== void 0 ? _a : null, (resource === null || resource === void 0 ? void 0 : resource.data) ? '' : (resource === null || resource === void 0 ? void 0 : resource.in('fail')) ? 'fail' : 'busy')}
+                    >
+                    </foxy-i18n>
+                  `
+            : this.placeholder}
+            </div>
+          </button>
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+            'rounded-full transition-colors': true,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+            'cursor-default text-disabled': this.disabled,
+        })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly || !this._value}
+            @click=${() => {
+            this._value = '';
+            this.dispatchEvent(new CustomEvent('clear'));
+        }}
+          >
+            ${svg `<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>`}
+          </button>
+        </div>
+      </div>
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(this._value || void 0)}
+        id="value"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+    }
+    __renderStandaloneLayout() {
+        var _a, _b;
+        return html `
       <div class="block group">
         <div
           class=${classMap({
@@ -130,12 +231,6 @@ export class InternalResourcePickerControl extends InternalEditableControl {
       </div>
     `;
     }
-    updated(changes) {
-        var _a, _b;
-        super.updated(changes);
-        if (changes.has('item'))
-            (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
     __handleFetchEvent(event) {
         if (!(event instanceof FetchEvent))
             return;
@@ -149,15 +244,15 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             return event.respondWith(this.__handleEmpty());
         }
     }
-    async __handleEmpty() {
+    async __handleSelect(request) {
+        const body = (await request.clone().json());
+        this._value = body.selection;
         return new Response(JSON.stringify({
             _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
             message: 'Resource selected.',
         }));
     }
-    async __handleSelect(request) {
-        const body = (await request.clone().json());
-        this._value = body.selection;
+    async __handleEmpty() {
         return new Response(JSON.stringify({
             _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
             message: 'Resource selected.',