From 574d226a8f94ec8444dbd7ea16e8a7f3a965e9d0 Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Fri, 22 May 2026 10:25:09 -0500 Subject: [PATCH 1/6] implemented readonly property for form components --- .../dt-church-health-circle.js | 36 +++++++++- .../dt-church-health-circle.stories.js | 8 +++ .../form/dt-connection/dt-connection.js | 16 ++++- .../dt-connection/dt-connection.stories.js | 17 +++++ src/components/form/dt-date/dt-date.js | 14 +++- .../form/dt-date/dt-date.stories.js | 9 +++ .../form/dt-datetime/dt-datetime.js | 21 +++++- .../form/dt-datetime/dt-datetime.stories.js | 9 +++ src/components/form/dt-form-base.js | 38 +++++++++++ .../form/dt-location-map/dt-location-map.js | 30 ++++++++- .../dt-location-map.stories.js | 9 +++ .../form/dt-location/dt-location.js | 17 ++++- .../form/dt-location/dt-location.stories.js | 11 ++++ .../dt-multi-select-button-group.js | 2 +- .../dt-multi-select-button-group.stories.js | 10 +++ .../form/dt-multi-select/dt-multi-select.js | 16 ++++- .../dt-multi-select.stories.js | 10 +++ .../dt-multi-text-groups.js | 66 +++++++++++++++---- .../dt-multi-text-groups.stories.js | 29 ++++++++ .../form/dt-multi-text/dt-multi-text.js | 14 +++- .../dt-multi-text/dt-multi-text.stories.js | 18 +++++ src/components/form/dt-number/dt-number.js | 8 ++- .../form/dt-number/dt-number.stories.js | 9 +++ .../form/dt-single-select/dt-single-select.js | 8 ++- .../dt-single-select.stories.js | 10 +++ src/components/form/dt-tags/dt-tags.js | 16 ++++- .../form/dt-tags/dt-tags.stories.js | 10 +++ src/components/form/dt-text/dt-text.js | 8 ++- .../form/dt-text/dt-text.stories.js | 9 +++ .../form/dt-textarea/dt-textarea.js | 8 ++- .../form/dt-textarea/dt-textarea.stories.js | 9 +++ src/components/form/dt-toggle/dt-toggle.js | 2 +- .../form/dt-toggle/dt-toggle.stories.js | 9 +++ .../dt-users-connection.js | 8 ++- .../dt-users-connection.stories.js | 11 ++++ 35 files changed, 488 insertions(+), 37 deletions(-) diff --git a/src/components/form/dt-church-health-circle/dt-church-health-circle.js b/src/components/form/dt-church-health-circle/dt-church-health-circle.js index 91a432f..5e29863 100644 --- a/src/components/form/dt-church-health-circle/dt-church-health-circle.js +++ b/src/components/form/dt-church-health-circle/dt-church-health-circle.js @@ -5,6 +5,7 @@ import { DtMultiSelect } from '../dt-multi-select/dt-multi-select.js'; import './dt-church-health-circle-icon.js'; import '../dt-toggle/dt-toggle.js'; + export class DtChurchHealthCircle extends DtMultiSelect { static get styles() { return [ @@ -63,6 +64,9 @@ export class DtChurchHealthCircle extends DtMultiSelect { .health-circle--disabled dt-church-health-icon { cursor: not-allowed; } + .health-circle--readonly dt-church-health-icon { + cursor: not-allowed; + } dt-church-health-icon { position: absolute; @@ -81,6 +85,12 @@ export class DtChurchHealthCircle extends DtMultiSelect { transform: rotate(var(--az)) translate(var(--radius)) rotate(calc(-1 * var(--az))); } + + .corner-button{ + position: absolute; + top: 0; + right: 0; + } `, css` dt-toggle::part(root) { @@ -170,6 +180,7 @@ export class DtChurchHealthCircle extends DtMultiSelect { 'health-circle': true, 'health-circle--committed': this.isCommited, 'health-circle--disabled': this.disabled, + 'health-circle--readonly': this.readonly, })} >
@@ -181,7 +192,7 @@ export class DtChurchHealthCircle extends DtMultiSelect { .active=${(this.value || []).indexOf(key) !== -1} .style="--i: ${index + 1}" .missingIcon="${this.missingIcon}" - ?disabled=${this.disabled} + ?disabled=${this.disabled || this.readonly} data-value="${key}" @change="${this.handleIconClick}" > @@ -191,7 +202,9 @@ export class DtChurchHealthCircle extends DtMultiSelect { ${this.renderIconLoading()} ${this.renderIconSaved()}
- + + ${!this.readonly + ? html` - + ` + : + null} ${this.renderError()} + ${this.readonly && !this.disabled + ? html` +
+ +
`:null} `; } diff --git a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js index 778dffe..72b11cb 100644 --- a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js +++ b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js @@ -165,6 +165,7 @@ export default { .options="${args.options}" missingIcon="${ifDefined(args.missingIcon)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} ?loading="${args.loading}" ?saved="${args.saved}" error="${ifDefined(args.error)}" @@ -222,6 +223,13 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + value: ['church_bible'], + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-connection/dt-connection.js b/src/components/form/dt-connection/dt-connection.js index 2e3c12f..5d6437e 100644 --- a/src/components/form/dt-connection/dt-connection.js +++ b/src/components/form/dt-connection/dt-connection.js @@ -217,6 +217,8 @@ export class DtConnection extends DtTags { .filter(i => !i.delete) .map( opt => html` + ${!this.readonly + ? html`
x -
+ ` + : + html`
+ ${opt.label} +
`} `, ); } @@ -285,6 +291,8 @@ export class DtConnection extends DtTags { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
+ ${this._renderSelectedOptions()} +
`} `; } } diff --git a/src/components/form/dt-connection/dt-connection.stories.js b/src/components/form/dt-connection/dt-connection.stories.js index dba9610..23f5aa9 100644 --- a/src/components/form/dt-connection/dt-connection.stories.js +++ b/src/components/form/dt-connection/dt-connection.stories.js @@ -135,6 +135,7 @@ export default { placeholder, value, disabled, + readonly, required, requiredMessage, icon, @@ -160,6 +161,7 @@ export default { .options="${options}" .value="${value}" ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage="${ifDefined(requiredMessage)}" icon="${ifDefined(icon)}" @@ -277,6 +279,21 @@ export const Disabled = { disabled: true, }, }; +export const ReadOnly = { + args: { + value: [basicOptions[1], + { + id: 2, + label: 'test', + }, + { + id: 3, + label: 'WeeWoo', + }], + options: basicOptions, + readonly: true, + }, +}; export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-date/dt-date.js b/src/components/form/dt-date/dt-date.js index 028e215..5128d23 100644 --- a/src/components/form/dt-date/dt-date.js +++ b/src/components/form/dt-date/dt-date.js @@ -232,9 +232,17 @@ export class DtDate extends DtFormBase { this.timestamp = new Date(this.value).getTime(); } + let readonlyValue = this.value; + if (this.value) { + const [y, m, d] = this.value.split('-'); + readonlyValue = `${m}/${d}/${y}`; + } + return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIcons()} -
+
` + : + html`
+ ${readonlyValue} +
`} `; } diff --git a/src/components/form/dt-date/dt-date.stories.js b/src/components/form/dt-date/dt-date.stories.js index 95d47c0..e8a102a 100644 --- a/src/components/form/dt-date/dt-date.stories.js +++ b/src/components/form/dt-date/dt-date.stories.js @@ -45,6 +45,7 @@ export default { value = '', timestamp, disabled = false, + readonly = false, required = false, requiredMessage, icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', @@ -64,6 +65,7 @@ export default { value=${ifDefined(value)} timestamp=${ifDefined(timestamp)} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon=${ifDefined(icon)} @@ -121,6 +123,13 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + value: '2020-01-01', + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-datetime/dt-datetime.js b/src/components/form/dt-datetime/dt-datetime.js index a7070f4..5014a09 100644 --- a/src/components/form/dt-datetime/dt-datetime.js +++ b/src/components/form/dt-datetime/dt-datetime.js @@ -35,9 +35,24 @@ export class DtDatetime extends DtDate { this.timestamp = new Date(this.value).getTime(); } + let readonlyValue = this.value; + if (this.value) { + const dateObj = new Date(this.value); + readonlyValue = new Intl.DateTimeFormat('en-US', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + hour12: true + }).format(dateObj); + } + return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIcons()} -
+
` + : + html`
+ ${readonlyValue} +
`} `; } } diff --git a/src/components/form/dt-datetime/dt-datetime.stories.js b/src/components/form/dt-datetime/dt-datetime.stories.js index ba859bd..9b98eeb 100644 --- a/src/components/form/dt-datetime/dt-datetime.stories.js +++ b/src/components/form/dt-datetime/dt-datetime.stories.js @@ -45,6 +45,7 @@ export default { value = '', timestamp, disabled = false, + readonly = false, required = false, requiredMessage, icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', @@ -64,6 +65,7 @@ export default { value=${ifDefined(value)} timestamp=${ifDefined(timestamp)} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon=${ifDefined(icon)} @@ -121,6 +123,13 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + value: '2023-07-21T17:00', + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-form-base.js b/src/components/form/dt-form-base.js index 9c2c59c..38d1fc6 100644 --- a/src/components/form/dt-form-base.js +++ b/src/components/form/dt-form-base.js @@ -25,6 +25,16 @@ export default class DtFormBase extends DtBase { return [ ...super.styles, css` + .readonly-btn { + background-color: transparent; + border: none; + cursor: pointer; + height: 0.9em; + padding: 0; + color: var(--primary-color, #cc4b37); + transform: scale(1.5); + } + .input-group { position: relative; } @@ -54,6 +64,13 @@ export default class DtFormBase extends DtBase { color: var(--success-color); width: 1.4rem; } + + .readonly-options { + margin-top: .5rem; + margin-left: 1.2rem; + line-height: 1.6; + font-family: var(--font-family); + } `, css` @keyframes fadeOut { @@ -125,6 +142,8 @@ export default class DtFormBase extends DtBase { privateLabel: { type: String }, /** Disables field. */ disabled: { type: Boolean }, + /** Shows data without the form input field. */ + readonly: { type: Boolean }, /** Validates that field is not empty when form is submitted and displays error if not. */ required: { type: Boolean }, /** Error message to be displayed for required field validation. */ @@ -319,10 +338,29 @@ export default class DtFormBase extends DtBase { ? html`` : null} ${this.label} + ${this.readonly && !this.disabled + ? html` + + + `:null} `; } + switchReadOnly() { + this.readonly = false; + } + _errorClasses() { return { 'error-container': true, diff --git a/src/components/form/dt-location-map/dt-location-map.js b/src/components/form/dt-location-map/dt-location-map.js index 3518aec..ac11c25 100644 --- a/src/components/form/dt-location-map/dt-location-map.js +++ b/src/components/form/dt-location-map/dt-location-map.js @@ -262,7 +262,22 @@ export class DtLocationMap extends DtFormBase { ? html`` : null} ${this.label} - ${!this.open && (this.limit == 0 || this.locations.length < this.limit) + ${this.readonly && !this.disabled + ? html` + + + `:null} + ${!this.readonly && !this.open && (this.limit == 0 || this.locations.length < this.limit) ? html` - + ` + : + html`
+ ${opt.label} +
`} `, ); } @@ -225,6 +232,8 @@ export class DtLocation extends DtTags { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIconInvalid()} ${this.renderError()} -
+
` + : + html`
+ ${this._renderSelectedOptions()} +
`} `; } } diff --git a/src/components/form/dt-location/dt-location.stories.js b/src/components/form/dt-location/dt-location.stories.js index e199398..5f3bc25 100644 --- a/src/components/form/dt-location/dt-location.stories.js +++ b/src/components/form/dt-location/dt-location.stories.js @@ -124,6 +124,7 @@ export default { placeholder, value, disabled, + readonly, required, requiredMessage, icon, @@ -148,6 +149,7 @@ export default { .filters="${filters}" .value="${value}" ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage="${ifDefined(requiredMessage)}" icon="${ifDefined(icon)}" @@ -231,6 +233,15 @@ export const Disabled = { disabled: true, }, }; + +export const ReadOnly = { + args: { + value: [basicOptions[1]], + options: basicOptions, + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js index 50d3c52..0cf2df0 100644 --- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js +++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js @@ -168,7 +168,7 @@ export class DtMultiSelectButtonGroup extends DtFormBase { context=${context} .value=${opt.id} @click="${this._clickOption}" - ?disabled="${this.disabled}" + ?disabled="${this.disabled || this.readonly}" ?outline="${outline}" role="button" value="${opt.id}" diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js index e6c1b52..89a43ae 100644 --- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js +++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js @@ -85,6 +85,7 @@ export default { options, value = [], disabled = false, + readonly = false, required = false, requiredMessage, icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', @@ -104,6 +105,7 @@ export default { .options=${options} .value=${value} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon=${ifDefined(icon)} @@ -158,6 +160,14 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + value: ['opt2'], + options: basicOptions, + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-multi-select/dt-multi-select.js b/src/components/form/dt-multi-select/dt-multi-select.js index 6e83d1f..d27e628 100644 --- a/src/components/form/dt-multi-select/dt-multi-select.js +++ b/src/components/form/dt-multi-select/dt-multi-select.js @@ -408,6 +408,8 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) { .filter(val => val.charAt(0) !== '-') .map( val => html` + ${!this.readonly + ? html`
x -
+ ` + : + html`
+ ${this.options.find(option => option.id === val).label} +
`} `, ) ); @@ -465,6 +471,8 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIcons()} -
+ ` + : + html`
+ ${this._renderSelectedOptions()} +
`} `; } } diff --git a/src/components/form/dt-multi-select/dt-multi-select.stories.js b/src/components/form/dt-multi-select/dt-multi-select.stories.js index 9e31180..4a34591 100644 --- a/src/components/form/dt-multi-select/dt-multi-select.stories.js +++ b/src/components/form/dt-multi-select/dt-multi-select.stories.js @@ -84,6 +84,7 @@ export default { placeholder = 'Select Options', value = [], disabled = false, + readonly = false, required = false, requiredMessage, icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', @@ -105,6 +106,7 @@ export default { .options=${options} .value=${value} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon=${ifDefined(icon)} @@ -203,6 +205,14 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + value: ['opt2'], + options: basicOptions, + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js index d05be02..9dbee7c 100644 --- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js +++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js @@ -138,9 +138,9 @@ export class DtMultiTextGroups extends DtMultiText { verified: false, value: '', tempKey: Date.now().toString(), - type: group.id, + group: group.id, }; - if (this.value[0]?.type) { + if (this.value[0]?.group) { this.value = [...this.value, newValue]; } else { @@ -180,7 +180,7 @@ export class DtMultiTextGroups extends DtMultiText { // add `delete` prop to clicked item if (x.meta_id === keyToRemove || x.tempKey === keyToRemove) { item.delete = true; - this.activeGroup = item.type; + this.activeGroup = item.group; } return item; }); @@ -209,7 +209,7 @@ export class DtMultiTextGroups extends DtMultiText { // update this item's value in the list this.value = this.value.map(x => { if (x.meta_id === key || x.tempKey === key) { - this.activeGroup = x.type; + this.activeGroup = x.group; return { ...x, @@ -345,7 +345,7 @@ export class DtMultiTextGroups extends DtMultiText { /> ${when( - (this.value[0]?.type) || (!this.groups && itemCount > 1), + (this.value[0]?.group) || (!this.groups && itemCount > 1), () => html` + `: + html` - + ` + : + html`
+ ${label} +
`} `; }); } @@ -288,6 +294,8 @@ export class DtTags extends DtMultiSelect { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
+ ${this._renderSelectedOptions()} +
`} `; } } diff --git a/src/components/form/dt-tags/dt-tags.stories.js b/src/components/form/dt-tags/dt-tags.stories.js index 2477b3d..62dcb11 100644 --- a/src/components/form/dt-tags/dt-tags.stories.js +++ b/src/components/form/dt-tags/dt-tags.stories.js @@ -113,6 +113,7 @@ export default { placeholder, value, disabled, + readonly, required, requiredMessage, icon, @@ -137,6 +138,7 @@ export default { .options="${options}" .value="${value}" ?disabled="${disabled}" + ?readonly="${readonly}" ?required="${required}" requiredMessage="${requiredMessage}" icon="${icon}" @@ -254,6 +256,14 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + value: ['qui est esse', 'opt8'], + options: basicOptions, + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-text/dt-text.js b/src/components/form/dt-text/dt-text.js index 5f0be74..d267f3e 100644 --- a/src/components/form/dt-text/dt-text.js +++ b/src/components/form/dt-text/dt-text.js @@ -159,6 +159,8 @@ export class DtText extends DtFormBase { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIcons()} -
+ ` + : + html`
+ ${this.value || ''} +
`} `; } } diff --git a/src/components/form/dt-text/dt-text.stories.js b/src/components/form/dt-text/dt-text.stories.js index d087e73..c2e75e9 100644 --- a/src/components/form/dt-text/dt-text.stories.js +++ b/src/components/form/dt-text/dt-text.stories.js @@ -47,6 +47,7 @@ export default { label = 'Field Name', value, disabled = false, + readonly = false, required = false, requiredMessage, icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', @@ -67,6 +68,7 @@ export default { value=${ifDefined(value)} type=${ifDefined(type)} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon="${ifDefined(icon)}" @@ -112,6 +114,13 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + readonly: true, + value: 'Lorem Ipsum', + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-textarea/dt-textarea.js b/src/components/form/dt-textarea/dt-textarea.js index 06e8b52..cd589ad 100644 --- a/src/components/form/dt-textarea/dt-textarea.js +++ b/src/components/form/dt-textarea/dt-textarea.js @@ -144,6 +144,8 @@ export class DtTextArea extends DtFormBase { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIcons()} -
+ ` + : + html`
+ ${this.value || ''} +
`} `; } } diff --git a/src/components/form/dt-textarea/dt-textarea.stories.js b/src/components/form/dt-textarea/dt-textarea.stories.js index 8fc807a..84c5d4b 100644 --- a/src/components/form/dt-textarea/dt-textarea.stories.js +++ b/src/components/form/dt-textarea/dt-textarea.stories.js @@ -43,6 +43,7 @@ export default { label = 'Field Name', value, disabled = false, + readonly = false, required = false, requiredMessage, icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', @@ -61,6 +62,7 @@ export default { label=${ifDefined(label)} value=${ifDefined(value)} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon="${ifDefined(icon)}" @@ -106,6 +108,13 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + readonly: true, + value: 'Lorem Ipsum', + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-toggle/dt-toggle.js b/src/components/form/dt-toggle/dt-toggle.js index de909f2..8eff6e6 100644 --- a/src/components/form/dt-toggle/dt-toggle.js +++ b/src/components/form/dt-toggle/dt-toggle.js @@ -229,7 +229,7 @@ export class DtToggle extends DtFormBase { class="toggle-input" .checked=${this.checked || 0} @click=${this.onChange} - ?disabled=${this.disabled} + ?disabled=${this.disabled || this.readonly} /> ${this.icons ? html` ${check} ${cross} ` : html``} diff --git a/src/components/form/dt-toggle/dt-toggle.stories.js b/src/components/form/dt-toggle/dt-toggle.stories.js index 82d5a89..2d2fa20 100644 --- a/src/components/form/dt-toggle/dt-toggle.stories.js +++ b/src/components/form/dt-toggle/dt-toggle.stories.js @@ -43,6 +43,7 @@ export default { name = 'field-name', label = 'Field Name', disabled = false, + readonly = false, checked = false, icons = false, required = false, @@ -64,6 +65,7 @@ export default { ?checked=${checked} ?icons=${icons} ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage=${ifDefined(requiredMessage)} icon="${ifDefined(icon)}" @@ -115,6 +117,13 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + checked: false, + readonly: true, + }, +}; + export const DisabledOn = { args: { checked: true, diff --git a/src/components/form/dt-users-connection/dt-users-connection.js b/src/components/form/dt-users-connection/dt-users-connection.js index 5e962c9..3efb77a 100644 --- a/src/components/form/dt-users-connection/dt-users-connection.js +++ b/src/components/form/dt-users-connection/dt-users-connection.js @@ -238,6 +238,8 @@ export class DtUsersConnection extends DtTags { .filter(i => !i.delete) .map( opt => html` + ${!this.readonly + ? html`
x -
+ ` + : + html`
+ ${opt.label} +
`} `, ); } diff --git a/src/components/form/dt-users-connection/dt-users-connection.stories.js b/src/components/form/dt-users-connection/dt-users-connection.stories.js index afb42c6..2bc8975 100644 --- a/src/components/form/dt-users-connection/dt-users-connection.stories.js +++ b/src/components/form/dt-users-connection/dt-users-connection.stories.js @@ -109,6 +109,7 @@ export default { value, open, disabled, + readonly, required, requiredMessage, icon, @@ -135,6 +136,7 @@ export default { .value="${value}" .open="${open}" ?disabled=${disabled} + ?readonly=${readonly} ?required=${required} requiredMessage="${ifDefined(requiredMessage)}" icon="${ifDefined(icon)}" @@ -229,6 +231,15 @@ export const Disabled = { disabled: true, }, }; + +export const ReadOnly = { + args: { + value: [basicOptions[1], basicOptions[2]], + options: basicOptions, + readonly: true, + }, +}; + export const PrivateField = { args: { private: true, From 73cced119b710b46b5274d6b372243871e9d6446 Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Fri, 22 May 2026 10:29:46 -0500 Subject: [PATCH 2/6] format: lint check --- src/components/dt-base.js | 1 + .../dt-church-health-circle.stories.js | 10 ++++------ src/components/form/dt-connection/dt-connection.js | 2 +- src/components/form/dt-date/dt-date.js | 1 + .../form/dt-file-upload/dt-file-upload.js | 14 +++++++------- src/components/form/dt-location/dt-location.js | 2 +- .../form/dt-multi-select/dt-multi-select.js | 2 +- .../form/dt-single-select/dt-single-select.js | 2 +- src/components/form/dt-tags/dt-tags.js | 2 +- src/services/componentService.js | 14 +++++++------- src/services/googleGeocodeService.js | 5 +++-- 11 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/components/dt-base.js b/src/components/dt-base.js index 5f30338..85fc39c 100644 --- a/src/components/dt-base.js +++ b/src/components/dt-base.js @@ -18,6 +18,7 @@ export default class DtBase extends LitElement { `, ]; } + static get properties() { return { /** diff --git a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js index 72b11cb..2d93f2c 100644 --- a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js +++ b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js @@ -156,8 +156,7 @@ export default { error: '', onChange: action('on-change'), }, - render: args => { - return html` + render: args => html`
- `; - }, + `, }; export const Empty = {}; @@ -296,11 +294,11 @@ export const ApiSettings = { ], settings: null, }, -};*/ +}; */ /* export const ApiGroup = { args: { groupId: 3, group: null, }, -};*/ +}; */ diff --git a/src/components/form/dt-connection/dt-connection.js b/src/components/form/dt-connection/dt-connection.js index 5d6437e..183fe2c 100644 --- a/src/components/form/dt-connection/dt-connection.js +++ b/src/components/form/dt-connection/dt-connection.js @@ -287,7 +287,7 @@ export class DtConnection extends DtTags { } render() { - const optionListStyles = this.optionListStyles; + const {optionListStyles} = this; return html` ${this.labelTemplate()} diff --git a/src/components/form/dt-date/dt-date.js b/src/components/form/dt-date/dt-date.js index 5128d23..ac3f55f 100644 --- a/src/components/form/dt-date/dt-date.js +++ b/src/components/form/dt-date/dt-date.js @@ -218,6 +218,7 @@ export class DtDate extends DtFormBase { }; return classes; } + get fieldContainerClasses() { return { 'field-container': true, diff --git a/src/components/form/dt-file-upload/dt-file-upload.js b/src/components/form/dt-file-upload/dt-file-upload.js index 40677c6..4845a20 100644 --- a/src/components/form/dt-file-upload/dt-file-upload.js +++ b/src/components/form/dt-file-upload/dt-file-upload.js @@ -721,7 +721,7 @@ export class DtFileUpload extends DtFormBase { if (file.name) { const parts = file.name.split('.'); if (parts.length > 1) { - const ext = '.' + parts.pop().toLowerCase(); + const ext = `.${ parts.pop().toLowerCase()}`; if (mapping[ext]) { return mapping[ext]; } @@ -1258,7 +1258,7 @@ export class DtFileUpload extends DtFormBase { if (this._isStandaloneMode()) { // Standalone mode: use direct URL if available - const url = file.url; + const {url} = file; if (!url) return; const fileKey = file.key || file; const fileName = @@ -1278,8 +1278,8 @@ export class DtFileUpload extends DtFormBase { new CustomEvent('dt:download-file', { bubbles: true, detail: { - fileKey: fileKey, - fileName: fileName, + fileKey, + fileName, metaKey: this.metaKey || '', }, }), @@ -1298,8 +1298,8 @@ export class DtFileUpload extends DtFormBase { const event = new CustomEvent('dt:download-file', { bubbles: true, detail: { - fileKey: fileKey, - fileName: fileName, + fileKey, + fileName, metaKey: this.metaKey, onSuccess: () => { // Download triggered successfully @@ -1484,7 +1484,7 @@ export class DtFileUpload extends DtFormBase { const name = file.name || (typeof key === 'string' ? key.split('/').pop() : ''); - const size = file.size; + const {size} = file; const previewUrl = this._getFilePreviewUrl(file); const isImage = this._isImage(file); const isEditing = this._editingFileKey === key; diff --git a/src/components/form/dt-location/dt-location.js b/src/components/form/dt-location/dt-location.js index 2872228..4416e62 100644 --- a/src/components/form/dt-location/dt-location.js +++ b/src/components/form/dt-location/dt-location.js @@ -228,7 +228,7 @@ export class DtLocation extends DtTags { } render() { - const optionListStyles = this.optionListStyles; + const {optionListStyles} = this; return html` ${this.labelTemplate()} diff --git a/src/components/form/dt-multi-select/dt-multi-select.js b/src/components/form/dt-multi-select/dt-multi-select.js index d27e628..a7670e8 100644 --- a/src/components/form/dt-multi-select/dt-multi-select.js +++ b/src/components/form/dt-multi-select/dt-multi-select.js @@ -467,7 +467,7 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) { } render() { - const optionListStyles = this.optionListStyles; + const {optionListStyles} = this; return html` ${this.labelTemplate()} diff --git a/src/components/form/dt-single-select/dt-single-select.js b/src/components/form/dt-single-select/dt-single-select.js index e4c4acf..193b81b 100644 --- a/src/components/form/dt-single-select/dt-single-select.js +++ b/src/components/form/dt-single-select/dt-single-select.js @@ -235,7 +235,7 @@ export class DtSingleSelect extends DtFormBase { aria-label="${this.name}" @change="${this._change}" class="${classMap(this.classes)}" - style="${this.color ? 'background-color: ' + this.color + ';' : ''}" + style="${this.color ? `background-color: ${ this.color };` : ''}" ?disabled="${this.disabled}" ?required=${this.required} part="select" diff --git a/src/components/form/dt-tags/dt-tags.js b/src/components/form/dt-tags/dt-tags.js index 9803d5d..07f00e2 100644 --- a/src/components/form/dt-tags/dt-tags.js +++ b/src/components/form/dt-tags/dt-tags.js @@ -290,7 +290,7 @@ export class DtTags extends DtMultiSelect { } render() { - const optionListStyles = this.optionListStyles; + const {optionListStyles} = this; return html` ${this.labelTemplate()} diff --git a/src/services/componentService.js b/src/services/componentService.js index 5330a86..9e5b97b 100644 --- a/src/services/componentService.js +++ b/src/services/componentService.js @@ -302,9 +302,9 @@ export default class ComponentService { new CustomEvent('dt:post:update', { detail: { response: apiResponse, - field: field, + field, value: apiValue, - component: component, + component, }, }), ); @@ -355,9 +355,9 @@ export default class ComponentService { new CustomEvent('dt:post:update', { detail: { response: apiResponse, - field: field, + field, value: apiValue, - component: component, + component, }, }), ); @@ -855,10 +855,10 @@ export default class ComponentService { } // Handle object arrays - const getObjectKey = obj => { + const getObjectKey = obj => // Use stringified object as key to ensure uniqueness - return JSON.stringify(obj); - }; + JSON.stringify(obj) + ; const value1Map = new Map(value1.map(item => [getObjectKey(item), item])); const value2Map = new Map(value2.map(item => [getObjectKey(item), item])); diff --git a/src/services/googleGeocodeService.js b/src/services/googleGeocodeService.js index 2458eed..eb7b13a 100644 --- a/src/services/googleGeocodeService.js +++ b/src/services/googleGeocodeService.js @@ -9,6 +9,7 @@ export default class GoogleGeocodeService { document.body.appendChild(script); } } + /** * Search places via Mapbox API * @param query @@ -71,8 +72,8 @@ export default class GoogleGeocodeService { async _getPlaceSuggestionsRest(query, language = 'en') { // Legacy failed; fallback to Places v1 REST const url = - 'https://places.googleapis.com/v1/places:autocomplete?key=' + - encodeURIComponent(this.token); + `https://places.googleapis.com/v1/places:autocomplete?key=${ + encodeURIComponent(this.token)}`; const body = { input: query, // language, From b82fc256377d24d0bb99942ea4583498d172d44b Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Fri, 22 May 2026 10:38:58 -0500 Subject: [PATCH 3/6] fix: changed multi-text-groups "meta_id" to "key" --- .../form/dt-multi-text-groups/dt-multi-text-groups.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js index 9dbee7c..e9db36a 100644 --- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js +++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js @@ -161,6 +161,7 @@ export class DtMultiTextGroups extends DtMultiText { _removeItem(e) { const keyToRemove = e.currentTarget.dataset.key; + console.log(e.currentTarget); if (keyToRemove) { const event = new CustomEvent('change', { bubbles: true, @@ -178,7 +179,7 @@ export class DtMultiTextGroups extends DtMultiText { .map(x => { const item = { ...x }; // add `delete` prop to clicked item - if (x.meta_id === keyToRemove || x.tempKey === keyToRemove) { + if (x.key === keyToRemove || x.tempKey === keyToRemove) { item.delete = true; this.activeGroup = item.group; } @@ -208,7 +209,7 @@ export class DtMultiTextGroups extends DtMultiText { // update this item's value in the list this.value = this.value.map(x => { - if (x.meta_id === key || x.tempKey === key) { + if (x.key === key || x.tempKey === key) { this.activeGroup = x.group; return { @@ -330,7 +331,7 @@ export class DtMultiTextGroups extends DtMultiText { return html`
@@ -485,6 +486,7 @@ export class DtMultiTextGroups extends DtMultiText { )} `; } + return null; }); } From 3e7b76be71d06faf836fcd851a4d604d2daa883b Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Wed, 27 May 2026 14:02:50 -0500 Subject: [PATCH 4/6] resolved comments & added readonly disabled stories --- .../dt-church-health-circle.stories.js | 8 ++++ .../form/dt-connection/dt-connection.js | 6 ++- .../dt-connection/dt-connection.stories.js | 16 +++++-- .../form/dt-date/dt-date.stories.js | 8 ++++ .../form/dt-datetime/dt-datetime.stories.js | 8 ++++ .../form/dt-file-upload/dt-file-upload.js | 22 +++++++++- .../dt-file-upload/dt-file-upload.stories.js | 42 +++++++++++++++++++ src/components/form/dt-form-base.js | 4 ++ .../dt-location-map/dt-location-map-item.js | 21 +++++++++- .../form/dt-location-map/dt-location-map.js | 16 ++----- .../dt-location-map.stories.js | 8 ++++ .../form/dt-location/dt-location.stories.js | 9 ++++ .../dt-multi-select-button-group.js | 17 +++++++- .../dt-multi-select-button-group.stories.js | 9 ++++ .../dt-multi-select.stories.js | 9 ++++ .../dt-multi-text-groups.js | 10 ++++- .../dt-multi-text-groups.stories.js | 28 +++++++++++++ .../form/dt-multi-text/dt-multi-text.js | 32 +++++++++++--- .../dt-multi-text/dt-multi-text.stories.js | 25 ++++++++++- .../form/dt-number/dt-number.stories.js | 8 ++++ .../dt-single-select.stories.js | 9 ++++ .../form/dt-tags/dt-tags.stories.js | 9 ++++ .../form/dt-text/dt-text.stories.js | 8 ++++ .../form/dt-textarea/dt-textarea.stories.js | 8 ++++ .../form/dt-toggle/dt-toggle.stories.js | 8 ++++ .../dt-users-connection.js | 4 +- .../dt-users-connection.stories.js | 19 ++++++++- src/components/kitchen-sink.stories.js | 23 ++++++++++ 28 files changed, 360 insertions(+), 34 deletions(-) diff --git a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js index 2d93f2c..c7e5ae6 100644 --- a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js +++ b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js @@ -228,6 +228,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: ['church_bible'], + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-connection/dt-connection.js b/src/components/form/dt-connection/dt-connection.js index 183fe2c..1058b26 100644 --- a/src/components/form/dt-connection/dt-connection.js +++ b/src/components/form/dt-connection/dt-connection.js @@ -244,9 +244,11 @@ export class DtConnection extends DtTags {
` : html`
- ${opt.label} + ${opt.link + ? html`${opt.label}` + : html`
${opt.label}
`}
`} - `, + `, ); } diff --git a/src/components/form/dt-connection/dt-connection.stories.js b/src/components/form/dt-connection/dt-connection.stories.js index 23f5aa9..78cb707 100644 --- a/src/components/form/dt-connection/dt-connection.stories.js +++ b/src/components/form/dt-connection/dt-connection.stories.js @@ -285,15 +285,25 @@ export const ReadOnly = { { id: 2, label: 'test', - }, + }], + options: basicOptions, + readonly: true, + }, +}; + +export const ReadOnlyDisabled = { + args: { + value: [basicOptions[1], { - id: 3, - label: 'WeeWoo', + id: 2, + label: 'test', }], options: basicOptions, readonly: true, + disabled: true, }, }; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-date/dt-date.stories.js b/src/components/form/dt-date/dt-date.stories.js index e8a102a..478e95d 100644 --- a/src/components/form/dt-date/dt-date.stories.js +++ b/src/components/form/dt-date/dt-date.stories.js @@ -130,6 +130,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: '2020-01-01', + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-datetime/dt-datetime.stories.js b/src/components/form/dt-datetime/dt-datetime.stories.js index 9b98eeb..7bce445 100644 --- a/src/components/form/dt-datetime/dt-datetime.stories.js +++ b/src/components/form/dt-datetime/dt-datetime.stories.js @@ -130,6 +130,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: '2023-07-21T17:00', + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-file-upload/dt-file-upload.js b/src/components/form/dt-file-upload/dt-file-upload.js index 4845a20..6ec3109 100644 --- a/src/components/form/dt-file-upload/dt-file-upload.js +++ b/src/components/form/dt-file-upload/dt-file-upload.js @@ -1372,6 +1372,21 @@ export class DtFileUpload extends DtFormBase { ? html`${iconContent}` : html``} ${this.label} + ${this.readonly && !this.disabled + ? html` + + + `:null} `; } @@ -1384,6 +1399,8 @@ export class DtFileUpload extends DtFormBase { return html`
${this.labelTemplate()} + ${!this.readonly + ? html`
` : null} ${this.renderIconSaved(hasGeometry)} -
+
` + : + html`
+ +
` + } + +
${repeat( this.locations || [], opt => opt.id, (opt, idx) => this.renderItem(opt, idx), )} ${this.renderError()} ${this.renderIconInvalid()} -
` - : - html`
- ${repeat( - this.locations || [], - opt => html`
- ${opt.label} -
`, - )} -
`} +
`; } } diff --git a/src/components/form/dt-location-map/dt-location-map.stories.js b/src/components/form/dt-location-map/dt-location-map.stories.js index 5c6f2f6..c4f77a0 100644 --- a/src/components/form/dt-location-map/dt-location-map.stories.js +++ b/src/components/form/dt-location-map/dt-location-map.stories.js @@ -225,6 +225,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: [basicOptions[0], basicOptions[1], basicOptions[2]], + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { value: [basicOptions[0]], diff --git a/src/components/form/dt-location/dt-location.stories.js b/src/components/form/dt-location/dt-location.stories.js index 5f3bc25..61486d1 100644 --- a/src/components/form/dt-location/dt-location.stories.js +++ b/src/components/form/dt-location/dt-location.stories.js @@ -242,6 +242,15 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: [basicOptions[1]], + options: basicOptions, + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js index 0cf2df0..be280ce 100644 --- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js +++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js @@ -216,6 +216,8 @@ export class DtMultiSelectButtonGroup extends DtFormBase { render() { return html` ${this.labelTemplate()} + ${!this.readonly + ? html`
${this.renderIcons()} -
- `; + ` + : + html`
+ ${this.options + .filter(opt => (this.value ?? []) + .includes(opt.id)) + .map( + opt => html` +
+ ${opt.label} +
`)} +
` + }` } } diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js index 89a43ae..48336d5 100644 --- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js +++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js @@ -161,10 +161,19 @@ export const Disabled = { }; export const ReadOnly = { + args: { + value: ['opt1', 'opt2'], + options: basicOptions, + readonly: true, + }, +}; + +export const ReadOnlyDisabled = { args: { value: ['opt2'], options: basicOptions, readonly: true, + disabled: true, }, }; diff --git a/src/components/form/dt-multi-select/dt-multi-select.stories.js b/src/components/form/dt-multi-select/dt-multi-select.stories.js index 4a34591..a605e80 100644 --- a/src/components/form/dt-multi-select/dt-multi-select.stories.js +++ b/src/components/form/dt-multi-select/dt-multi-select.stories.js @@ -206,10 +206,19 @@ export const Disabled = { }; export const ReadOnly = { + args: { + value: ['opt1', 'opt2'], + options: basicOptions, + readonly: true, + }, +}; + +export const ReadOnlyDisabled = { args: { value: ['opt2'], options: basicOptions, readonly: true, + disabled: true, }, }; diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js index e9db36a..f839583 100644 --- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js +++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js @@ -583,14 +583,20 @@ export class DtMultiTextGroups extends DtMultiText { ` : html` - ${repeat(this.groups, group => html`

${group.label}

+ + ${this.value ? repeat(this.groups, group => html`

${group.label}

+
${repeat( (this.value || []).filter(item => item.group === group.id), item => html`
${item.value}
` )}
` - )}` + ) : html` +
+ No items to show. +
+ `}` } `; } diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js index 26c4a6d..037e2f1 100644 --- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js +++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js @@ -197,6 +197,34 @@ export const ReadOnly = { } } +export const ReadOnlyDisabled = { + args: { + groups: [ + { id: 'one', label: 'Group 1' }, + { id: 'two', label: 'Group 2' } + ], + readonly: true, + disabled: true, + value: [ + { + value: 'Lorem Ipsum', + key: 'comm_channel_1', + group: 'one' + }, + { + value: 'Lorem Ipsu2', + key: 'comm_channel_2', + group: 'two' + }, + { + value: 'Lorem Ipsum', + key: 'comm_channel_3', + group: 'two' + } + ], + } +} + export const privateField = { args: { groups: [ diff --git a/src/components/form/dt-multi-text/dt-multi-text.js b/src/components/form/dt-multi-text/dt-multi-text.js index bb498cb..6f01203 100644 --- a/src/components/form/dt-multi-text/dt-multi-text.js +++ b/src/components/form/dt-multi-text/dt-multi-text.js @@ -437,7 +437,22 @@ export class DtMultiText extends DtText { ? html`` : null} ${this.label} - + ${this.readonly && !this.disabled + ? html` + + + `: + html` - + `} `; } @@ -468,9 +483,16 @@ export class DtMultiText extends DtText { html`
${repeat( this.value || [], - opt => html`
- ${opt.value} -
`, + opt => + { + if (opt.type === 'email') { + return html`
${opt.value}
`; + } + if (opt.type === 'tel') { + return html`
${opt.value}
`; + } + return html`
${opt.value}
`; + } )}
`} `; diff --git a/src/components/form/dt-multi-text/dt-multi-text.stories.js b/src/components/form/dt-multi-text/dt-multi-text.stories.js index 9e8c93d..3609b5b 100644 --- a/src/components/form/dt-multi-text/dt-multi-text.stories.js +++ b/src/components/form/dt-multi-text/dt-multi-text.stories.js @@ -164,12 +164,33 @@ export const ReadOnly = { readonly: true, value: [ { - value: 'Lorem Ipsum', + value: 'email@test.com', key: 'comm_channel_1', + type: 'email', }, { - value: 'Lorem Ipsum', + value: '+1 123 456 7890', + key: 'comm_channel_2', + type: 'tel', + } + ], + }, +}; + +export const ReadOnlyDisabled = { + args: { + readonly: true, + disabled: true, + value: [ + { + value: 'email@test.com', + key: 'comm_channel_1', + type: 'email', + }, + { + value: '+1 123 456 7890', key: 'comm_channel_2', + type: 'tel', } ], }, diff --git a/src/components/form/dt-number/dt-number.stories.js b/src/components/form/dt-number/dt-number.stories.js index e100054..6617592 100644 --- a/src/components/form/dt-number/dt-number.stories.js +++ b/src/components/form/dt-number/dt-number.stories.js @@ -121,6 +121,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + readonly: true, + disabled: true, + value: 42, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-single-select/dt-single-select.stories.js b/src/components/form/dt-single-select/dt-single-select.stories.js index 453ad09..95ae587 100644 --- a/src/components/form/dt-single-select/dt-single-select.stories.js +++ b/src/components/form/dt-single-select/dt-single-select.stories.js @@ -188,6 +188,15 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: 'opt2', + options: basicOptions, + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-tags/dt-tags.stories.js b/src/components/form/dt-tags/dt-tags.stories.js index 62dcb11..f8cf75e 100644 --- a/src/components/form/dt-tags/dt-tags.stories.js +++ b/src/components/form/dt-tags/dt-tags.stories.js @@ -264,6 +264,15 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + value: ['qui est esse', 'opt8'], + options: basicOptions, + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-text/dt-text.stories.js b/src/components/form/dt-text/dt-text.stories.js index c2e75e9..a744b24 100644 --- a/src/components/form/dt-text/dt-text.stories.js +++ b/src/components/form/dt-text/dt-text.stories.js @@ -121,6 +121,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + readonly: true, + disabled: true, + value: 'Lorem Ipsum', + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-textarea/dt-textarea.stories.js b/src/components/form/dt-textarea/dt-textarea.stories.js index 84c5d4b..a8e2394 100644 --- a/src/components/form/dt-textarea/dt-textarea.stories.js +++ b/src/components/form/dt-textarea/dt-textarea.stories.js @@ -115,6 +115,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + readonly: true, + disabled: true, + value: 'Lorem Ipsum', + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/form/dt-toggle/dt-toggle.stories.js b/src/components/form/dt-toggle/dt-toggle.stories.js index 2d2fa20..551275a 100644 --- a/src/components/form/dt-toggle/dt-toggle.stories.js +++ b/src/components/form/dt-toggle/dt-toggle.stories.js @@ -124,6 +124,14 @@ export const ReadOnly = { }, }; +export const ReadOnlyDisabled = { + args: { + checked: false, + readonly: true, + disabled: true, + }, +}; + export const DisabledOn = { args: { checked: true, diff --git a/src/components/form/dt-users-connection/dt-users-connection.js b/src/components/form/dt-users-connection/dt-users-connection.js index 3efb77a..628e303 100644 --- a/src/components/form/dt-users-connection/dt-users-connection.js +++ b/src/components/form/dt-users-connection/dt-users-connection.js @@ -258,7 +258,9 @@ export class DtUsersConnection extends DtTags { ` : html`
- ${opt.label} + ${opt.link + ? html`${opt.label}` + : html`
${opt.label}
`}
`} `, ); diff --git a/src/components/form/dt-users-connection/dt-users-connection.stories.js b/src/components/form/dt-users-connection/dt-users-connection.stories.js index 2bc8975..b789fed 100644 --- a/src/components/form/dt-users-connection/dt-users-connection.stories.js +++ b/src/components/form/dt-users-connection/dt-users-connection.stories.js @@ -234,12 +234,29 @@ export const Disabled = { export const ReadOnly = { args: { - value: [basicOptions[1], basicOptions[2]], + value: [basicOptions[1], { + id: 2, + label: 'test', + link: '/#opt2', + }], options: basicOptions, readonly: true, }, }; +export const ReadOnlyDisabled = { + args: { + value: [basicOptions[1], { + id: 2, + label: 'test', + link: '/#opt2', + }], + options: basicOptions, + readonly: true, + disabled: true, + }, +}; + export const PrivateField = { args: { private: true, diff --git a/src/components/kitchen-sink.stories.js b/src/components/kitchen-sink.stories.js index 5571a74..5f9961f 100644 --- a/src/components/kitchen-sink.stories.js +++ b/src/components/kitchen-sink.stories.js @@ -114,6 +114,7 @@ export default { value='' label="Text Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -123,6 +124,7 @@ export default { value='' label="Textarea Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -131,6 +133,7 @@ export default { name='numberField' label="Number Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -139,6 +142,7 @@ export default { name="multiTextField" label="MultiText Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -147,6 +151,7 @@ export default { name="multiTextGroupsField" label="MultiText Groups Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" .groups=${groups} > @@ -156,6 +161,7 @@ export default { name="dateField" label="Date Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -164,6 +170,7 @@ export default { name="dateTimeField" label="Date Time Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -172,6 +179,7 @@ export default { name="toggleField" label="Boolean Field" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -181,6 +189,7 @@ export default { value="opt1" options="${JSON.stringify(options)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -190,6 +199,7 @@ export default { value="${JSON.stringify(options.slice(0, 2).map(o => o.id))}" options="${JSON.stringify(options)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -199,6 +209,7 @@ export default { value="${JSON.stringify(options.slice(0, 2).map(o => o.id))}" options="${JSON.stringify(options)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -207,6 +218,7 @@ export default { value="${JSON.stringify(['personal'])}" options="${JSON.stringify(tags)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -214,6 +226,7 @@ export default { label="Connection Field" options="${JSON.stringify(posts)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -222,6 +235,7 @@ export default { options="${JSON.stringify(posts)}" filters="${JSON.stringify(locationFilters)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -229,6 +243,7 @@ export default { label="Location Meta Field" options="${JSON.stringify(posts)}" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -236,6 +251,7 @@ export default { label="File Upload Field" name="fileUploadField" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" > @@ -245,6 +261,7 @@ export default { label="Button" context="primary" ?disabled=${args.disabled} + ?readonly=${args.readonly} error="${ifDefined(args.error)}" >Click Me @@ -259,6 +276,12 @@ export const Disabled = { }, }; +export const ReadOnly = { + args: { + readonly: true, + }, +}; + export const Error = { args: { error: 'Custom error message', From 346b36b7e019683d706c3756d5f78ed6aaaebe8d Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Thu, 28 May 2026 12:04:05 -0500 Subject: [PATCH 5/6] Added link icons & fixed multi-text-groups tests --- src/components/form/dt-form-base.js | 3 ++ .../dt-location-map/dt-location-map-item.js | 5 ++- .../dt-multi-text-groups.test.js | 40 +++++++++---------- .../form/dt-multi-text/dt-multi-text.js | 10 ++++- 4 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/components/form/dt-form-base.js b/src/components/form/dt-form-base.js index 1cf9092..2c14cbe 100644 --- a/src/components/form/dt-form-base.js +++ b/src/components/form/dt-form-base.js @@ -75,6 +75,9 @@ export default class DtFormBase extends DtBase { .readonly-options a { color: var(--primary-color, #0a84ff); } + .readonly-options dt-icon { + color: var(--primary-color, #0a84ff); + } `, css` @keyframes fadeOut { diff --git a/src/components/form/dt-location-map/dt-location-map-item.js b/src/components/form/dt-location-map/dt-location-map-item.js index cc262e5..081393d 100644 --- a/src/components/form/dt-location-map/dt-location-map-item.js +++ b/src/components/form/dt-location-map/dt-location-map-item.js @@ -802,8 +802,9 @@ export default class DtLocationMapItem extends DtBase { ` : html`
- -
` + + + ` } diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js index c92225e..8dfdfb9 100644 --- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js +++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js @@ -9,7 +9,7 @@ describe('DtMultiTextGroups', () => { const el = await fixture( html`` ); @@ -22,13 +22,13 @@ describe('DtMultiTextGroups', () => { const el = await fixture( html`${opt.value}`; + return html`
+ ${opt.value} + +
`; } if (opt.type === 'tel') { - return html`
${opt.value}
`; + return html`
+ ${opt.value} + +
`; } return html`
${opt.value}
`; } From 56283117adf22404655ec1eb4419adea7a23a66d Mon Sep 17 00:00:00 2001 From: jlamanskygitt Date: Fri, 29 May 2026 11:42:24 -0500 Subject: [PATCH 6/6] Added values to readonly stories & adjusted icon logic --- src/components/form/dt-form-base.js | 2 + .../dt-location-map/dt-location-map-item.js | 19 ++++- .../dt-multi-select-button-group.js | 17 +++- .../dt-multi-select-button-group.stories.js | 2 +- .../dt-multi-text-groups.stories.js | 4 +- .../form/dt-multi-text/dt-multi-text.js | 6 +- .../dt-multi-text/dt-multi-text.stories.js | 10 +-- src/components/kitchen-sink.stories.js | 82 ++++++++++++++++++- 8 files changed, 122 insertions(+), 20 deletions(-) diff --git a/src/components/form/dt-form-base.js b/src/components/form/dt-form-base.js index 2c14cbe..c81cbf2 100644 --- a/src/components/form/dt-form-base.js +++ b/src/components/form/dt-form-base.js @@ -77,6 +77,8 @@ export default class DtFormBase extends DtBase { } .readonly-options dt-icon { color: var(--primary-color, #0a84ff); + line-height: 0; + vertical-align: middle; } `, css` diff --git a/src/components/form/dt-location-map/dt-location-map-item.js b/src/components/form/dt-location-map/dt-location-map-item.js index 081393d..6cb44ba 100644 --- a/src/components/form/dt-location-map/dt-location-map-item.js +++ b/src/components/form/dt-location-map/dt-location-map-item.js @@ -248,6 +248,16 @@ export default class DtLocationMapItem extends DtBase { cursor: pointer; font: inherit; } + + .location-item-wrapper { + display: inline-flex; + align-items: center; + } + .location-item-wrapper dt-icon { + color: var(--primary-color, #0a84ff); + line-height: 0; + vertical-align: middle; + padding-left: .5rem; `, css` /* === Inline Icons === */ @@ -801,11 +811,12 @@ export default class DtLocationMapItem extends DtBase { ${this.renderIconSaved(hasGeometry)} ` : - html`
+ html`${existingValue ? + html`
- -
` - } + +
` : null} + `} html` -
- ${opt.label} +
+ ${opt.label} + ${opt.icon + ? html`${this.iconAltText}` + : null}
`)}
` }` diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js index 48336d5..a6fed59 100644 --- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js +++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js @@ -162,7 +162,7 @@ export const Disabled = { export const ReadOnly = { args: { - value: ['opt1', 'opt2'], + value: ['opt1', 'opt2', 'opt7'], options: basicOptions, readonly: true, }, diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js index 037e2f1..deb0683 100644 --- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js +++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js @@ -212,12 +212,12 @@ export const ReadOnlyDisabled = { group: 'one' }, { - value: 'Lorem Ipsu2', + value: 'Lorem Ipsum', key: 'comm_channel_2', group: 'two' }, { - value: 'Lorem Ipsum', + value: 'Lorem Ipsum2', key: 'comm_channel_3', group: 'two' } diff --git a/src/components/form/dt-multi-text/dt-multi-text.js b/src/components/form/dt-multi-text/dt-multi-text.js index 75cba6c..ab5e593 100644 --- a/src/components/form/dt-multi-text/dt-multi-text.js +++ b/src/components/form/dt-multi-text/dt-multi-text.js @@ -485,15 +485,15 @@ export class DtMultiText extends DtText { this.value || [], opt => { - if (opt.type === 'email') { + if (this.type === 'email') { return html``; } - if (opt.type === 'tel') { + if (this.type === 'tel') { return html``; } diff --git a/src/components/form/dt-multi-text/dt-multi-text.stories.js b/src/components/form/dt-multi-text/dt-multi-text.stories.js index 3609b5b..717d2aa 100644 --- a/src/components/form/dt-multi-text/dt-multi-text.stories.js +++ b/src/components/form/dt-multi-text/dt-multi-text.stories.js @@ -166,14 +166,13 @@ export const ReadOnly = { { value: 'email@test.com', key: 'comm_channel_1', - type: 'email', }, { - value: '+1 123 456 7890', + value: 'example@example.com', key: 'comm_channel_2', - type: 'tel', } ], + type: 'email', }, }; @@ -183,16 +182,15 @@ export const ReadOnlyDisabled = { disabled: true, value: [ { - value: 'email@test.com', + value: '+5-987-654-3210', key: 'comm_channel_1', - type: 'email', }, { value: '+1 123 456 7890', key: 'comm_channel_2', - type: 'tel', } ], + type: 'tel', }, }; diff --git a/src/components/kitchen-sink.stories.js b/src/components/kitchen-sink.stories.js index 5f9961f..c09e92c 100644 --- a/src/components/kitchen-sink.stories.js +++ b/src/components/kitchen-sink.stories.js @@ -1,6 +1,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { argTypes } from '../stories-theme.js'; +import sampleImage from '../../assets/dt-caret.png'; import './layout/dt-tile/dt-tile.js'; import './form/dt-label/dt-label.js'; @@ -22,10 +23,15 @@ import './form/dt-connection/dt-connection.js'; import './form/dt-users-connection/dt-users-connection.js'; import './form/dt-file-upload/dt-file-upload.js'; +// Sample image used for Storybook previews (local asset). +const SAMPLE_IMAGE_URL = sampleImage; +const SAMPLE_THUMBNAIL_URL = sampleImage; + const options = [ { id: 'opt1', label: 'Option 1', + icon: 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png', }, { id: 'opt2', @@ -111,7 +117,7 @@ export default {