refs: formContainer: eventListeners: keydown: handler: handleKeyDown action*: eventListeners: click: handler: handleActionClick sectionAction*: eventListeners: click: handler: handleSectionActionClick tooltipIcon*: eventListeners: mouseenter: handler: handleTooltipMouseEnter mouseleave: handler: handleTooltipMouseLeave field*: eventListeners: value-input: handler: handleValueInput value-change: handler: handleValueChange image*: eventListeners: click: handler: handleImageClick contextmenu: handler: handleImageClick styles: # Segment links: rettangoli-fe resets every in a component shadow root to # `display: contents` with no color/decoration, which hides inline links and # drops them out of the tab order. Restore normal inline-link behaviour (same # tokens as the base theme's `a` rules) for anchors rendered from text segments. 'a.text-link, a.text-link:link, a.text-link:visited, a.text-link:active': display: inline color: var(--anchor-color, inherit) text-decoration: var(--anchor-text-decoration, underline) 'a.text-link:hover': color: var(--anchor-color-hover, var(--anchor-color, inherit)) text-decoration: var(--anchor-text-decoration-hover, underline) 'a.text-link:focus-visible': outline: var(--focus-ring-outline, none) box-shadow: inset 0 0 0 2px var(--ring) ':host([w="f"])': display: block !important min-width: "0" width: 100% ':host([w="f"]) [data-rtgl-render-target]': display: block !important min-width: "0" width: 100% ':host([h="f"])': display: flex !important flex-direction: column height: 100% min-height: "0" ':host([h="f"]) [data-rtgl-render-target]': display: flex !important flex: 1 1 auto flex-direction: column min-height: "0" ':host([data-rtgl-sticky])': display: flex !important flex-direction: column height: 100% max-height: 100% min-height: "0" overflow: hidden ':host([data-rtgl-sticky]) [data-rtgl-render-target]': display: flex !important flex: 1 1 auto flex-direction: column height: 100% max-height: 100% min-height: "0" overflow: hidden '#formContainer[data-sticky="true"]': height: 100% max-height: 100% min-height: "0" overflow: hidden '#formContainer[data-sticky="true"] > .form-fields': flex: 1 1 auto min-height: "0" '#formContainer[data-sticky="true"] > .form-actions': flex: 0 0 auto 'rtgl-grid[data-align-field-headers="true"]': grid-template-rows: auto auto row-gap: var(--spacing-md) '.form-field[data-form-row="true"][data-align-field-headers="true"]': display: grid grid-row: span 2 grid-template-columns: minmax(0, 1fr) grid-template-rows: subgrid '@media only screen and (max-width: 640px)': 'rtgl-grid[sm-cols="1"][data-align-field-headers="true"]': grid-template-rows: none row-gap: var(--spacing-lg) 'rtgl-grid[sm-cols="1"] > .form-field[data-form-row="true"][data-align-field-headers="true"]': display: flex grid-row: auto grid-template-columns: none grid-template-rows: none '@media only screen and (max-width: 768px)': 'rtgl-grid[md-cols="1"][data-align-field-headers="true"]': grid-template-rows: none row-gap: var(--spacing-lg) 'rtgl-grid[md-cols="1"] > .form-field[data-form-row="true"][data-align-field-headers="true"]': display: flex grid-row: auto grid-template-columns: none grid-template-rows: none '@media only screen and (max-width: 1024px)': 'rtgl-grid[lg-cols="1"][data-align-field-headers="true"]': grid-template-rows: none row-gap: var(--spacing-lg) 'rtgl-grid[lg-cols="1"] > .form-field[data-form-row="true"][data-align-field-headers="true"]': display: flex grid-row: auto grid-template-columns: none grid-template-rows: none '@media only screen and (max-width: 1280px)': 'rtgl-grid[xl-cols="1"][data-align-field-headers="true"]': grid-template-rows: none row-gap: var(--spacing-lg) 'rtgl-grid[xl-cols="1"] > .form-field[data-form-row="true"][data-align-field-headers="true"]': display: flex grid-row: auto grid-template-columns: none grid-template-rows: none .form-field-header: grid-row: 1 .form-field-control: grid-row: 2 template: - rtgl-view#formContainer w=f pv=${containerVerticalPadding} data-sticky=${sticky} ${containerAttrString}: - $if title || description: - rtgl-view class=form-header g=sm w=f ph=${containerHorizontalPadding} mb=md: - $if title: - rtgl-text s=lg: ${title} - $if descriptionSegments: - rtgl-text c=mu-fg: - $for seg, i in descriptionSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $elif description: - rtgl-text c=mu-fg: ${description} - 'rtgl-view class=form-fields g=lg w=f ph=${containerHorizontalPadding} style="padding-bottom: ${bottomSpacer}px;" ?sv=${sticky} ${fieldsAttrString}': - $for item, i in fieldLayout: - $if item._isSection: - rtgl-view#layoutItem${item._layoutIdx} data-form-section=true g=md w=f: - $if item._showSeparator: - rtgl-view data-form-section-separator=true w=f bwt=xs bc=bo: null - rtgl-view g=sm w=f: - rtgl-view d=h av=c w=f g=sm: - rtgl-view w=1fg: - $if item.label: - rtgl-text s=md: ${item.label} - $if item._action: - 'rtgl-button#sectionAction${item._idx} data-section-id=${item.id} data-section-action-id=${item._action.id} v=gh s=sm sq pre=${item._action.icon} :ariaLabel=${item._action.label} ?disabled=${item._action._disabled}': null - $if item._descriptionSegments: - rtgl-text s=sm c=mu-fg: - $for seg, i in item._descriptionSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $elif item._descriptionText: - rtgl-text s=sm c=mu-fg: ${item._descriptionText} $else: - rtgl-grid#layoutItem${item._layoutIdx} cols=${item._columns} ${item._responsiveColumnAttrs} g=lg w=f data-align-field-headers=${item._alignFieldHeaders}: - $for field, fieldIndex in item.fields: - rtgl-view class=form-field g=md w=f data-form-row=${item._isRow} data-align-field-headers=${item._alignFieldHeaders}: - $if field.label || field._descriptionText || field._descriptionSegments: - rtgl-view class=form-field-header g=sm: - rtgl-view d=h g=md av=c: - $if field.label: - rtgl-text: ${field.label} - $if field.required: - rtgl-text c=fg s=sm: "*" - $if field.tooltip: - rtgl-svg#tooltipIcon${field._idx} data-field-name=${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs: null - $if field._descriptionSegments: - rtgl-text s=sm c=mu-fg: - $for seg, i in field._descriptionSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $elif field._descriptionText: - rtgl-text s=sm c=mu-fg: ${field._descriptionText} - rtgl-view class=form-field-control g=md w=f: - $if field.type == "input-text": - rtgl-input#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} data-form-row=${item._isRow} w=f type=${field._inputType} placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "input-date": - rtgl-input-date#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f min=${field.min} max=${field.max} placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "input-time": - rtgl-input-time#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "input-datetime": - rtgl-input-datetime#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "input-duration": - rtgl-input-duration#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field._placeholder} ?disabled=${field._disabled}: null - $if field.type == "input-number": - rtgl-input-number#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "input-textarea": - rtgl-textarea#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f rows=${field.rows} placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "select": - rtgl-select#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f :options=${field.options} :image=${field.image} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled} ?searchable=${field.searchable} :searchPlaceholder=${field.searchPlaceholder} :emptySearchLabel=${field.emptySearchLabel}: null - $if field.type == "tag-select": - rtgl-tag-select#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-invalid=${field._invalid} data-field-name=${field.name} w=f :options=${field.options} :selectedValues=${field._selectedValues} :placeholder=${field.placeholder} :addOption=${field.addOption} ?no-add=${field.noAdd} ?disabled=${field._disabled}: null - $if field.type == "segmented-control": - rtgl-segmented-control#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-invalid=${field._invalid} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "color-picker": - rtgl-color-picker#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-invalid=${field._invalid} data-field-name=${field.name} ?disabled=${field._disabled}: null - $if field.type == "slider": - rtgl-slider#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-invalid=${field._invalid} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} ?disabled=${field._disabled}: null - $if field.type == "slider-with-input": - rtgl-slider-input#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} w=f :s=${field.s} min=${field.min} max=${field.max} :sliderMin=${field.sliderMin} :sliderMax=${field.sliderMax} step=${field.step} ?disabled=${field._disabled}: null - $if field.type == "popover-input": - rtgl-popover-input#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} label="${field.label}" placeholder=${field.placeholder} ?disabled=${field._disabled}: null - $if field.type == "checkbox": - $if field._checkboxTextSegments: - rtgl-checkbox#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} ?disabled=${field._disabled}: - $for seg, si in field._checkboxTextSegments: - $if seg.href: - a class=text-link href=${seg.href} target=${seg.target} rel=${seg.rel}: ${seg.text} $else: - ${seg.text} $else: - rtgl-checkbox#field${field._idx} aria-label=${field._accessibleLabel} aria-description=${field._accessibleDescription} aria-required=${field._required} aria-invalid=${field._invalid} data-field-name=${field.name} label="${field._checkboxText}" ?disabled=${field._disabled}: null - $if field.type == "image" && field._imageSrc: - rtgl-image#image${field._idx} data-field-name=${field.name} src=${field._imageSrc} w=${field.width} h=${field.height} cur=pointer: null - $if field.type == "image" && !field._imageSrc: - rtgl-view#image${field._idx} data-field-name=${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=pointer p=md: - rtgl-text c=mu-fg ta=c: ${field.placeholderText} - $if field.type == "read-only-text": - rtgl-text s=sm: ${field.content} - $if field.type == "slot": - 'slot#fieldSlot${field._idx} name=${field.slot} style="display: contents;"': null - $if field._error: - rtgl-text s=sm c=de role=alert: ${field._error} - $if actions.buttons.length > 0: - rtgl-view class=form-actions w=f ph=${containerHorizontalPadding} mt=lg: - $if actions._layout == "split": - rtgl-view d=h w=f g=sm: - rtgl-view d=h g=sm: - $for button, i in actions._leftButtons: - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label} - rtgl-view d=h g=sm ah=e w=1fg: - $for button, i in actions._rightButtons: - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label} - $if actions._layout == "vertical": - rtgl-view g=sm w=f: - $for button, i in actions._allButtons: - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} w=f ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label} - $if actions._layout == "stretch": - rtgl-view d=h g=sm w=f: - $for button, i in actions._allButtons: - rtgl-view w=1fg: - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} w=f ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label} - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} place="t" content="${tooltipState.content}": null