@alto-avios/alto-ui 5.1.1 → 5.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-field_13g4l_1{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);width:100%;--clearButton-focus-width:48px;--input-field-max-height:48px;--input-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-sm)*2);--input-error-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-md)*2);--input-slot-min-width:46px}._input-field__grid_13g4l_20{display:grid;grid-template-columns:repeat(12,1fr)}._input-field__wrapper_13g4l_26{align-items:center;display:grid;grid-template-columns:1fr;height:var(--input-field-max-height);position:relative;grid-column-gap:var(--alto-sem-space-2xs);background:var(--alto-sem-color-bg-layer2-default);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-input-radius);box-sizing:border-box}._input-field__wrapper_13g4l_26[data-start-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr}._input-field__wrapper_13g4l_26[data-end-slot]{grid-template-columns:1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_13g4l_26[data-start-slot][data-end-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_13g4l_26:not([data-start-slot]):not([data-end-slot]) ._input-field__input_13g4l_56{border-radius:var(--alto-input-radius)}._input-field__wrapper_13g4l_26[data-end-slot]:not([data-start-slot]) ._input-field__input_13g4l_56,._input-field__wrapper_13g4l_26[data-start-slot] div:first-child{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__wrapper_13g4l_26[data-start-slot]:not([data-end-slot]) ._input-field__input_13g4l_56{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__input_13g4l_56{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:0;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);display:grid;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);height:var(--input-inner-field-height);justify-content:space-between;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm);width:100%}._input-field__input_13g4l_56::-moz-placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__input_13g4l_56::placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__wrapper_13g4l_26:has(._input-field__input_13g4l_56[data-hovered]):not([data-disabled]){border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-hover)}._input-field__input_13g4l_56[data-focus-visible]:not([data-disabled]){outline:none}._input-field__endSelect_13g4l_118[data-focused],._input-field__startSelect_13g4l_117[data-focused],._input-field__wrapper_13g4l_26:has(._input-field__input_13g4l_56[data-focus-visible]):not([data-disabled]),._input-field__wrapper_13g4l_26:has(._input-field__input_13g4l_56[data-focused]):not([data-disabled]){outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-none);outline-style:solid;outline-width:var(--alto-sem-border-width-md);z-index:1}._input-field__wrapper_13g4l_26:has(._input-field__input_13g4l_56[data-invalid]):not([data-disabled]){border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical)}._input-field__wrapper_13g4l_26:has(._input-field__input_13g4l_56[data-invalid]):not([data-disabled]) ._input-field__input_13g4l_56{height:var(--input-error-inner-field-height)}._input-field__endIcon_13g4l_146,._input-field__endSelect_13g4l_118,._input-field__endSlot_13g4l_148,._input-field__prefix_13g4l_141,._input-field__startIcon_13g4l_145,._input-field__startSelect_13g4l_117,._input-field__startSlot_13g4l_147,._input-field__suffix_13g4l_142{align-items:center;background:var(--alto-sem-color-bg-layer2-default);box-sizing:border-box;color:var(--alto-sem-color-fg-secondary);display:flex;height:var(--input-inner-field-height);justify-content:center;min-width:var(--input-slot-min-width);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__endIcon_13g4l_146,._input-field__endSelect_13g4l_118,._input-field__endSlot_13g4l_148,._input-field__suffix_13g4l_142{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__prefix_13g4l_141,._input-field__startSelect_13g4l_117{border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__endSelect_13g4l_118,._input-field__suffix_13g4l_142{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__prefix_13g4l_141,._input-field__suffix_13g4l_142{background-color:var(--alto-sem-color-bg-layer1-default)}._input-field__endSelect_13g4l_118,._input-field__startSelect_13g4l_117{background-color:var(--alto-sem-color-bg-layer2-default);padding:0}._input-field__startSelect_13g4l_117 select{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__endSelect_13g4l_118 select{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__endSelect_13g4l_118 select,._input-field__startSelect_13g4l_117 select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%234b4855' d='M9.586 19.492c-.352.274-.86.274-1.172 0l-6.25-5c-.43-.312-.469-.898-.156-1.328.312-.39.898-.469 1.328-.117L9 17.578l5.664-4.531a.89.89 0 0 1 1.29.117c.312.43.273 1.016-.157 1.328l-6.25 5zm6.25-13.945c.39.312.469.898.117 1.289-.312.43-.898.469-1.289.156L9 2.461 3.336 6.992c-.43.313-1.016.274-1.328-.156-.313-.39-.274-.977.156-1.29l6.25-5c.313-.273.82-.273 1.172 0z'/%3E%3C/svg%3E");background-position:right var(--alto-sem-space-xs) center;background-repeat:no-repeat;border:none;color:var(--alto-sem-color-fg-primary);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);height:100%;padding:var(--alto-sem-space-2xs) calc(var(--alto-sem-space-xs)*2 + 11px) var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__endSlot_13g4l_148[data-end-slot-button],._input-field__startSlot_13g4l_147[data-start-slot-button]{padding-bottom:0;padding-top:0}._input-field__clearButton_13g4l_229{position:absolute;right:var(--alto-sem-space-2xs)}._input-field__clearButton_13g4l_229:not(:last-child){right:calc(var(--input-end-slot-width) + 6px)}._input-field__wrapper_13g4l_26:has(._input-field__clearButton_13g4l_229) ._input-field__input_13g4l_56{padding-right:var(--clearButton-focus-width)}._input-field__wrapper_13g4l_26:has(._input-field__startIcon_13g4l_145):has(._input-field__endIcon_13g4l_146) ._input-field__input_13g4l_56,._input-field__wrapper_13g4l_26:has(._input-field__startSlot_13g4l_147):has(._input-field__endSlot_13g4l_148) ._input-field__input_13g4l_56{padding-left:0;padding-right:0}._input-field__wrapper_13g4l_26:has(._input-field__startIcon_13g4l_145) ._input-field__input_13g4l_56,._input-field__wrapper_13g4l_26:has(._input-field__startSlot_13g4l_147) ._input-field__input_13g4l_56{padding-left:0}._input-field__wrapper_13g4l_26:has(._input-field__endIcon_13g4l_146) ._input-field__input_13g4l_56,._input-field__wrapper_13g4l_26:has(._input-field__endSlot_13g4l_148) ._input-field__input_13g4l_56{padding-right:0}._input-field__wrapper_13g4l_26:has(._input-field__prefix_13g4l_141,._input-field__startSelect_13g4l_117) ._input-field__input_13g4l_56,._input-field__wrapper_13g4l_26:has(._input-field__suffix_13g4l_142,._input-field__endSelect_13g4l_118) ._input-field__input_13g4l_56{padding-left:var(--alto-sem-space-2xs);padding-right:var(--alto-sem-space-2xs)}._input-field__wrapper_13g4l_26:has(._input-field__suffix_13g4l_142,._input-field__endSelect_13g4l_118):not([data-start-slot]) ._input-field__input_13g4l_56{padding-left:var(--alto-sem-space-sm)}._input-field__wrapper_13g4l_26[data-has-end-button] ._input-field__endSlot_13g4l_148,._input-field__wrapper_13g4l_26[data-has-start-button] ._input-field__startSlot_13g4l_147{padding-left:var(--alto-sem-space-3xs);padding-right:var(--alto-sem-space-3xs)}._input-field__errorMessage_13g4l_287{margin-top:var(--alto-sem-space-2xs)}._input-field__input--hideSearchClear_13g4l_292::-webkit-search-cancel-button,._input-field__input--hideSearchClear_13g4l_292::-webkit-search-decoration,._input-field__input--hideSearchClear_13g4l_292::-webkit-search-results-button,._input-field__input--hideSearchClear_13g4l_292::-webkit-search-results-decoration{display:none}._input-field__input--hideSearchClear_13g4l_292::-ms-clear{display:none}._input-field__input--hideSearchClear_13g4l_292::-moz-search-clear-button{display:none}[dir=rtl] ._input-field__wrapper_13g4l_26[data-end-slot]:not([data-start-slot]) ._input-field__input_13g4l_56,[dir=rtl] ._input-field__wrapper_13g4l_26[data-start-slot] div:first-child{border-radius:0;border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius);padding-right:var(--alto-sem-space-sm)}[dir=rtl] ._input-field__wrapper_13g4l_26[data-end-slot] div:last-child,[dir=rtl] ._input-field__wrapper_13g4l_26[data-start-slot]:not([data-end-slot]) ._input-field__input_13g4l_56{border-radius:0;border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}[dir=rtl] ._input-field__prefix_13g4l_141,[dir=rtl] ._input-field__startSelect_13g4l_117{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-right:0}[dir=rtl] ._input-field__endSelect_13g4l_118,[dir=rtl] ._input-field__suffix_13g4l_142{border-left:0;border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}[dir=rtl] ._input-field__wrapper_13g4l_26:has(._input-field__startIcon_13g4l_145) ._input-field__input_13g4l_56,[dir=rtl] ._input-field__wrapper_13g4l_26:has(._input-field__startSlot_13g4l_147) ._input-field__input_13g4l_56{padding-right:0}[dir=rtl]._input-field__wrapper_13g4l_26:has(._input-field__endIcon_13g4l_146) ._input-field__input_13g4l_56,[dir=rtl]._input-field__wrapper_13g4l_26:has(._input-field__endSlot_13g4l_148) ._input-field__input_13g4l_56{padding-left:0}[dir=rtl] ._input-field__wrapper_13g4l_26:has(._input-field__clearButton_13g4l_229) ._input-field__input_13g4l_56{padding-left:var(--clearButton-focus-width)}[dir=rtl] ._input-field__clearButton_13g4l_229{left:var(--alto-sem-space-2xs);right:unset}[dir=rtl] ._input-field__clearButton_13g4l_229:not(:last-child){left:calc(var(--input-end-slot-width) + 6px);right:unset}._input-field__wrapper_13g4l_26:has([data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._input-field__wrapper_13g4l_26>[data-disabled]{border-color:var(--alto-sem-color-border-disabled-subtle);pointer-events:none}._input-field__wrapper_13g4l_26 select[disabled],._input-field__wrapper_13g4l_26>[data-disabled]{background:transparent;color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}
|
|
1
|
+
._input-field_14jbw_1{color:var(--alto-sem-color-fg-primary);font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);width:100%;--clearButton-focus-width:48px;--input-field-max-height:48px;--input-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-sm)*2);--input-error-inner-field-height:calc(var(--input-field-max-height) - var(--alto-sem-border-width-md)*2);--input-slot-min-width:46px}._input-field__grid_14jbw_20{display:grid;grid-template-columns:repeat(12,1fr)}._input-field__wrapper_14jbw_26{align-items:center;display:grid;grid-template-columns:1fr;height:var(--input-field-max-height);position:relative;grid-column-gap:var(--alto-sem-space-2xs);background:var(--alto-sem-color-bg-layer2-default);border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-input-radius);box-sizing:border-box}._input-field__wrapper_14jbw_26[data-start-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr}._input-field__wrapper_14jbw_26[data-end-slot]{grid-template-columns:1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_14jbw_26[data-start-slot][data-end-slot]{grid-template-columns:minmax(var(--input-slot-min-width),auto) 1fr minmax(var(--input-slot-min-width),auto)}._input-field__wrapper_14jbw_26:not([data-start-slot]):not([data-end-slot]) ._input-field__input_14jbw_56{border-radius:var(--alto-input-radius)}._input-field__wrapper_14jbw_26[data-end-slot]:not([data-start-slot]) ._input-field__input_14jbw_56,._input-field__wrapper_14jbw_26[data-start-slot] div:first-child{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__wrapper_14jbw_26[data-start-slot]:not([data-end-slot]) ._input-field__input_14jbw_56{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__input_14jbw_56{align-items:center;align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border:0;box-sizing:border-box;color:var(--alto-sem-color-fg-primary);display:grid;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);height:var(--input-inner-field-height);justify-content:space-between;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);padding:var(--alto-sem-space-xs) var(--alto-sem-space-sm);width:100%}._input-field__input_14jbw_56::-moz-placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__input_14jbw_56::placeholder{color:var(--alto-sem-color-fg-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-regular-font-weight)}._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-hovered]):not([data-disabled]){border:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-hover)}._input-field__input_14jbw_56[data-focus-visible]:not([data-disabled]){outline:none}._input-field__endSelect_14jbw_118[data-focused],._input-field__startSelect_14jbw_117[data-focused],._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-focus-visible]):not([data-disabled]),._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-focused]):not([data-disabled]){outline-color:var(--alto-sem-color-border-accent);outline-offset:var(--alto-sem-border-width-none);outline-style:solid;outline-width:var(--alto-sem-border-width-md);z-index:1}._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]){border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical)}._input-field__endIcon_14jbw_139,._input-field__endSelect_14jbw_118,._input-field__endSlot_14jbw_141,._input-field__prefix_14jbw_134,._input-field__startIcon_14jbw_138,._input-field__startSelect_14jbw_117,._input-field__startSlot_14jbw_140,._input-field__suffix_14jbw_135{align-items:center;background:var(--alto-sem-color-bg-layer2-default);box-sizing:border-box;color:var(--alto-sem-color-fg-secondary);display:flex;height:var(--input-inner-field-height);justify-content:center;min-width:var(--input-slot-min-width);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__endIcon_14jbw_139,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__endSelect_14jbw_118,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__endSlot_14jbw_141,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__input_14jbw_56,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__prefix_14jbw_134,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__startIcon_14jbw_138,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__startSelect_14jbw_117,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__startSlot_14jbw_140,._input-field__wrapper_14jbw_26:has(._input-field__input_14jbw_56[data-invalid]):not([data-disabled]) ._input-field__suffix_14jbw_135{height:var(--input-error-inner-field-height)}._input-field__endIcon_14jbw_139,._input-field__endSelect_14jbw_118,._input-field__endSlot_14jbw_141,._input-field__suffix_14jbw_135{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__prefix_14jbw_134,._input-field__startSelect_14jbw_117{border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__endSelect_14jbw_118,._input-field__suffix_14jbw_135{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}._input-field__prefix_14jbw_134,._input-field__suffix_14jbw_135{background-color:var(--alto-sem-color-bg-layer1-default)}._input-field__endSelect_14jbw_118,._input-field__startSelect_14jbw_117{background-color:var(--alto-sem-color-bg-layer2-default);padding:0}._input-field__startSelect_14jbw_117 select{border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}._input-field__endSelect_14jbw_118 select{border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius)}._input-field__endSelect_14jbw_118 select,._input-field__startSelect_14jbw_117 select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--alto-sem-color-bg-base);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%234b4855' d='M9.586 19.492c-.352.274-.86.274-1.172 0l-6.25-5c-.43-.312-.469-.898-.156-1.328.312-.39.898-.469 1.328-.117L9 17.578l5.664-4.531a.89.89 0 0 1 1.29.117c.312.43.273 1.016-.157 1.328l-6.25 5zm6.25-13.945c.39.312.469.898.117 1.289-.312.43-.898.469-1.289.156L9 2.461 3.336 6.992c-.43.313-1.016.274-1.328-.156-.313-.39-.274-.977.156-1.29l6.25-5c.313-.273.82-.273 1.172 0z'/%3E%3C/svg%3E");background-position:right var(--alto-sem-space-xs) center;background-repeat:no-repeat;border:none;color:var(--alto-sem-color-fg-primary);cursor:pointer;font-family:var(--alto-sem-text-body-font-family);height:100%;padding:var(--alto-sem-space-2xs) calc(var(--alto-sem-space-xs)*2 + 11px) var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._input-field__endSlot_14jbw_141[data-end-slot-button],._input-field__startSlot_14jbw_140[data-start-slot-button]{padding-bottom:0;padding-top:0}._input-field__clearButton_14jbw_261{position:absolute;right:var(--alto-sem-space-2xs)}._input-field__clearButton_14jbw_261:not(:last-child){right:calc(var(--input-end-slot-width) + 6px)}._input-field__wrapper_14jbw_26:has(._input-field__clearButton_14jbw_261) ._input-field__input_14jbw_56{padding-right:var(--clearButton-focus-width)}._input-field__wrapper_14jbw_26:has(._input-field__startIcon_14jbw_138):has(._input-field__endIcon_14jbw_139) ._input-field__input_14jbw_56,._input-field__wrapper_14jbw_26:has(._input-field__startSlot_14jbw_140):has(._input-field__endSlot_14jbw_141) ._input-field__input_14jbw_56{padding-left:0;padding-right:0}._input-field__wrapper_14jbw_26:has(._input-field__startIcon_14jbw_138) ._input-field__input_14jbw_56,._input-field__wrapper_14jbw_26:has(._input-field__startSlot_14jbw_140) ._input-field__input_14jbw_56{padding-left:0}._input-field__wrapper_14jbw_26:has(._input-field__endIcon_14jbw_139) ._input-field__input_14jbw_56,._input-field__wrapper_14jbw_26:has(._input-field__endSlot_14jbw_141) ._input-field__input_14jbw_56{padding-right:0}._input-field__wrapper_14jbw_26:has(._input-field__prefix_14jbw_134,._input-field__startSelect_14jbw_117) ._input-field__input_14jbw_56,._input-field__wrapper_14jbw_26:has(._input-field__suffix_14jbw_135,._input-field__endSelect_14jbw_118) ._input-field__input_14jbw_56{padding-left:var(--alto-sem-space-2xs);padding-right:var(--alto-sem-space-2xs)}._input-field__wrapper_14jbw_26:has(._input-field__suffix_14jbw_135,._input-field__endSelect_14jbw_118):not([data-start-slot]) ._input-field__input_14jbw_56{padding-left:var(--alto-sem-space-sm)}._input-field__wrapper_14jbw_26[data-has-end-button] ._input-field__endSlot_14jbw_141,._input-field__wrapper_14jbw_26[data-has-start-button] ._input-field__startSlot_14jbw_140{padding-left:var(--alto-sem-space-3xs);padding-right:var(--alto-sem-space-3xs)}._input-field__errorMessage_14jbw_319{margin-top:var(--alto-sem-space-2xs)}._input-field__input--hideSearchClear_14jbw_324::-webkit-search-cancel-button,._input-field__input--hideSearchClear_14jbw_324::-webkit-search-decoration,._input-field__input--hideSearchClear_14jbw_324::-webkit-search-results-button,._input-field__input--hideSearchClear_14jbw_324::-webkit-search-results-decoration{display:none}._input-field__input--hideSearchClear_14jbw_324::-ms-clear{display:none}._input-field__input--hideSearchClear_14jbw_324::-moz-search-clear-button{display:none}[dir=rtl] ._input-field__wrapper_14jbw_26[data-end-slot]:not([data-start-slot]) ._input-field__input_14jbw_56,[dir=rtl] ._input-field__wrapper_14jbw_26[data-start-slot] div:first-child{border-radius:0;border-bottom-right-radius:var(--alto-input-radius);border-top-right-radius:var(--alto-input-radius);padding-right:var(--alto-sem-space-sm)}[dir=rtl] ._input-field__wrapper_14jbw_26[data-end-slot] div:last-child,[dir=rtl] ._input-field__wrapper_14jbw_26[data-start-slot]:not([data-end-slot]) ._input-field__input_14jbw_56{border-radius:0;border-bottom-left-radius:var(--alto-input-radius);border-top-left-radius:var(--alto-input-radius)}[dir=rtl] ._input-field__prefix_14jbw_134,[dir=rtl] ._input-field__startSelect_14jbw_117{border-left:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default);border-right:0}[dir=rtl] ._input-field__endSelect_14jbw_118,[dir=rtl] ._input-field__suffix_14jbw_135{border-left:0;border-right:var(--alto-sem-border-width-sm) solid var(--alto-sem-color-border-primary-default)}[dir=rtl] ._input-field__wrapper_14jbw_26:has(._input-field__startIcon_14jbw_138) ._input-field__input_14jbw_56,[dir=rtl] ._input-field__wrapper_14jbw_26:has(._input-field__startSlot_14jbw_140) ._input-field__input_14jbw_56{padding-right:0}[dir=rtl]._input-field__wrapper_14jbw_26:has(._input-field__endIcon_14jbw_139) ._input-field__input_14jbw_56,[dir=rtl]._input-field__wrapper_14jbw_26:has(._input-field__endSlot_14jbw_141) ._input-field__input_14jbw_56{padding-left:0}[dir=rtl] ._input-field__wrapper_14jbw_26:has(._input-field__clearButton_14jbw_261) ._input-field__input_14jbw_56{padding-left:var(--clearButton-focus-width)}[dir=rtl] ._input-field__clearButton_14jbw_261{left:var(--alto-sem-space-2xs);right:unset}[dir=rtl] ._input-field__clearButton_14jbw_261:not(:last-child){left:calc(var(--input-end-slot-width) + 6px);right:unset}._input-field__wrapper_14jbw_26:has([data-disabled]){background:var(--alto-sem-color-bg-disabled-subtle);border-color:var(--alto-sem-color-border-disabled-subtle)}._input-field__wrapper_14jbw_26>[data-disabled]{border-color:var(--alto-sem-color-border-disabled-subtle);pointer-events:none}._input-field__wrapper_14jbw_26 select[disabled],._input-field__wrapper_14jbw_26>[data-disabled]{background:transparent;color:var(--alto-sem-color-fg-disabled-on-subtle);cursor:not-allowed}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{createContext as n,forwardRef as l,useContext as r,isValidElement as a,useRef as d,useLayoutEffect as s,useEffect as o}from"react";import{TextField as c,Input as u}from"react-aria-components";import{i as p,a as f}from"../../../input-DoPyN5PO.js";import{FieldHeader as _}from"../../FieldHeader/FieldHeader.js";import{IconButton as m}from"../../IconButton/IconButton.js";import{Button as
|
|
2
|
-
return e("div",{ref:n,className:`\n ${x["input-field__startIcon"]} \n ${i||""}\n `,...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},children:a})});$.displayName="Input.StartIcon";const L=l(({children:t,className:i},n)=>{const l=r(
|
|
3
|
-
return e("div",{ref:n,className:`\n ${x["input-field__endIcon"]} \n ${i||""}\n `,...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},children:a})});L.displayName="Input.EndIcon";const M=l(({children:t,className:n},l)=>{const d=r(
|
|
4
|
-
return e("div",{ref:l,className:`\n ${x["input-field__startSelect"]} \n ${n||""}\n `,...d.isDisabled?{"data-disabled":!0}:{},...d.isInvalid?{"data-invalid":!0}:{},children:i.cloneElement(t,{disabled:d.isDisabled,onFocusCapture:()=>{l&&"current"in l&&l.current&&(l.current.dataset.focused="true",l.current.dataset.focusVisible="true")},onBlurCapture:()=>{l&&"current"in l&&l.current&&(delete l.current.dataset.focused,delete l.current.dataset.focusVisible)}})})});M.displayName="Input.StartSelect";const k=l(({children:t,className:n},l)=>{const d=r(
|
|
5
|
-
return e("div",{ref:l,className:`\n ${x["input-field__endSelect"]} \n ${n||""}\n `,...d.isDisabled?{"data-disabled":!0}:{},...d.isInvalid?{"data-invalid":!0}:{},children:i.cloneElement(t,{disabled:d.isDisabled,onFocusCapture:()=>{l&&"current"in l&&l.current&&(l.current.dataset.focused="true",l.current.dataset.focusVisible="true")},onBlurCapture:()=>{l&&"current"in l&&l.current&&(delete l.current.dataset.focused,delete l.current.dataset.focusVisible)}})})});k.displayName="Input.EndSelect";const H=l(({label:n,description:l,placeholder:r,fieldColumns:a,fieldMaxWidthByChars:
|
|
6
|
-
return t(O,{...U,isDisabled:
|
|
7
|
-
/* @__PURE__ */e(
|
|
8
|
-
/* @__PURE__ */e(u,{ref:e=>{"function"==typeof X?X(e):X&&"current"in X&&(X.current=e),
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{createContext as n,forwardRef as l,useContext as r,isValidElement as a,useRef as d,useLayoutEffect as s,useEffect as o}from"react";import{TextField as c,Input as u}from"react-aria-components";import{i as p,a as f}from"../../../input-DoPyN5PO.js";import{FieldHeader as _}from"../../FieldHeader/FieldHeader.js";import{IconButton as m}from"../../IconButton/IconButton.js";import{Button as b}from"../../Button/Button.js";import{FieldError as y}from"../../FieldError/FieldError.js";import{getBaseValue as h,generateResponsiveClasses as v}from"../../../utils/breakpoint/responsiveSSR.js";import{useBreakpoint as I}from"../../../utils/breakpoint/hooks/useBreakpoint.js";import{resolveResponsiveProp as S}from"../../../utils/breakpoint/responsive.js";import{Icon as E}from"../../Icon/Icon.js";import '../../../assets/Input.css';const x={"input-field":"_input-field_14jbw_1","input-field__grid":"_input-field__grid_14jbw_20","input-field__wrapper":"_input-field__wrapper_14jbw_26","input-field__input":"_input-field__input_14jbw_56","input-field__startSelect":"_input-field__startSelect_14jbw_117","input-field__endSelect":"_input-field__endSelect_14jbw_118","input-field__prefix":"_input-field__prefix_14jbw_134","input-field__suffix":"_input-field__suffix_14jbw_135","input-field__startIcon":"_input-field__startIcon_14jbw_138","input-field__endIcon":"_input-field__endIcon_14jbw_139","input-field__startSlot":"_input-field__startSlot_14jbw_140","input-field__endSlot":"_input-field__endSlot_14jbw_141","input-field__clearButton":"_input-field__clearButton_14jbw_261","input-field__errorMessage":"_input-field__errorMessage_14jbw_319","input-field__input--hideSearchClear":"_input-field__input--hideSearchClear_14jbw_324"};function w(e){return a(e)&&(e.type===m||"function"==typeof e.type&&"IconButton"===e.type.name)}function N(e){return a(e)&&(e.type===b||"function"==typeof e.type&&"Button"===e.type.name)}let j=null;const R=e=>{if(!e.current)return 0;if(j){const t=j.get(e.current);if("number"==typeof t)return t}const t=[()=>e.current?.offsetWidth||0,()=>e.current?.clientWidth||0,()=>e.current?.scrollWidth||0,()=>Array.from(e.current?.children||[]).reduce((e,t)=>Math.max(e,t.clientWidth),0)];for(const i of t){const t=i();if(t>0)return j&&j.set(e.current,t),t}return j&&j.set(e.current,0),0},C=n({}),g=l(({children:t,visuallyHiddenLabel:i},n)=>{const l=r(C);return"string"!=typeof t?(console.warn("Input.Prefix only accepts a single string as a child"),/* @__PURE__ */e("div",{ref:n,className:x["input-field__prefix"],...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},"data-prefix-type":"invalid",style:{color:"red"},"aria-hidden":i?"true":void 0,children:"Invalid Prefix"})):/* @__PURE__ */e("div",{ref:n,className:x["input-field__prefix"],...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},"data-prefix-type":"text","aria-hidden":i?"true":void 0,children:t})});g.displayName="Input.Prefix";const D=l(({children:t,visuallyHiddenLabel:i},n)=>{const l=r(C);return"string"!=typeof t?(console.warn("Input.Suffix only accepts a single string as a child"),/* @__PURE__ */e("div",{ref:n,className:x["input-field__suffix"],...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},"data-suffix-type":"invalid",style:{color:"red"},"aria-hidden":i?"true":void 0,children:"Invalid Suffix"})):/* @__PURE__ */e("div",{ref:n,className:x["input-field__suffix"],...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},"data-suffix-type":"text","aria-hidden":i?"true":void 0,children:t})});D.displayName="Input.Suffix";const P=(e,t)=>{const n=e=>e.props.iconEndProps?t?{iconEndProps:{...e.props.iconEndProps,color:"disabledPrimary"}}:{iconEndProps:e.props.iconEndProps}:{};return i.Children.map(e,e=>{return i.isValidElement(e)?N(e)?i.cloneElement(e,{isDisabled:t,...n(e)}):a(l=e)&&(l.type===E||"function"==typeof l.type&&"Icon"===l.type.name)?i.cloneElement(e,{color:t?"disabledPrimary":e.props.color}):"string"==typeof(r=e.type)&&["button","input","select","textarea"].includes(r)?i.cloneElement(e,{disabled:t}):i.cloneElement(e,{isDisabled:t}):e;var l,r})},B=l(({children:t,className:n,increment:l,decrement:a},d)=>{const s=r(C);let o=P(t,s.isDisabled);return(l||a)&&(o=i.Children.map(t,e=>i.isValidElement(e)&&(N(e)||w(e))?i.cloneElement(e,{..."object"==typeof l&&null!==l?l:{},..."object"==typeof a&&null!==a?a:{}}):e)),/* @__PURE__ */e("div",{ref:d,className:`\n ${x["input-field__startSlot"]} \n ${n||""}\n `,...s.isDisabled?{"data-disabled":!0}:{},...s.isInvalid?{"data-invalid":!0}:{},"data-start-slot-button":i.Children.toArray(t).some(N)?"true":void 0,children:o})});B.displayName="Input.StartSlot";const V=l(({children:t,className:n,increment:l,decrement:a},d)=>{const s=r(C);let o=P(t,s.isDisabled);return(l||a)&&(o=i.Children.map(t,e=>i.isValidElement(e)&&(N(e)||w(e))?i.cloneElement(e,{..."object"==typeof l&&null!==l?l:{},..."object"==typeof a&&null!==a?a:{}}):e)),/* @__PURE__ */e("div",{ref:d,className:[x["input-field__endSlot"],n||""].filter(Boolean).join(" "),...s.isDisabled?{"data-disabled":!0}:{},...s.isInvalid?{"data-invalid":!0}:{},"data-end-slot-button":i.Children.toArray(t).some(N)?"true":void 0,children:o})});V.displayName="Input.EndSlot";const $=l(({children:t,className:i},n)=>{const l=r(C),a=P(t,l.isDisabled);/* @__PURE__ */
|
|
2
|
+
return e("div",{ref:n,className:`\n ${x["input-field__startIcon"]} \n ${i||""}\n `,...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},children:a})});$.displayName="Input.StartIcon";const L=l(({children:t,className:i},n)=>{const l=r(C),a=P(t,l.isDisabled);/* @__PURE__ */
|
|
3
|
+
return e("div",{ref:n,className:`\n ${x["input-field__endIcon"]} \n ${i||""}\n `,...l.isDisabled?{"data-disabled":!0}:{},...l.isInvalid?{"data-invalid":!0}:{},children:a})});L.displayName="Input.EndIcon";const M=l(({children:t,className:n},l)=>{const d=r(C);if(!(a(t)&&("select"===t.type||"string"==typeof t.type&&"select"===t.type.toLowerCase())))throw new Error("Input.StartSelect only accepts a select element");/* @__PURE__ */
|
|
4
|
+
return e("div",{ref:l,className:`\n ${x["input-field__startSelect"]} \n ${n||""}\n `,...d.isDisabled?{"data-disabled":!0}:{},...d.isInvalid?{"data-invalid":!0}:{},children:i.cloneElement(t,{disabled:d.isDisabled,onFocusCapture:()=>{l&&"current"in l&&l.current&&(l.current.dataset.focused="true",l.current.dataset.focusVisible="true")},onBlurCapture:()=>{l&&"current"in l&&l.current&&(delete l.current.dataset.focused,delete l.current.dataset.focusVisible)}})})});M.displayName="Input.StartSelect";const k=l(({children:t,className:n},l)=>{const d=r(C);if(!(a(t)&&("select"===t.type||"string"==typeof t.type&&"select"===t.type.toLowerCase())))throw new Error("Input.EndSelect only accepts a select element");/* @__PURE__ */
|
|
5
|
+
return e("div",{ref:l,className:`\n ${x["input-field__endSelect"]} \n ${n||""}\n `,...d.isDisabled?{"data-disabled":!0}:{},...d.isInvalid?{"data-invalid":!0}:{},children:i.cloneElement(t,{disabled:d.isDisabled,onFocusCapture:()=>{l&&"current"in l&&l.current&&(l.current.dataset.focused="true",l.current.dataset.focusVisible="true")},onBlurCapture:()=>{l&&"current"in l&&l.current&&(delete l.current.dataset.focused,delete l.current.dataset.focusVisible)}})})});k.displayName="Input.EndSelect";const H=l(({label:n,description:l,placeholder:r,fieldColumns:a,fieldMaxWidthByChars:b,isInvalid:E=!1,isDisabled:P=!1,isRequired:H=!1,inputProps:W,children:F,clearable:A=!1,clearButtonTooltip:T="Clear input",optionalTranslation:q,errorMessage:z,errorId:G,errorPrefix:J,errorPlacement:K="top",as:O=c,visuallyHiddenLabel:Q,...U},X)=>{const Y=v(f),Z=I(),ee=h(a,"twelve"),te=h(b,"ten"),ie=S(a,Z)??ee,ne=S(b,Z)??te,le=Y(a,"input-field-variant--columns"),re=Y(b,"input-field-variant--max-width-by-chars"),ae=W?.type||U.type;let de=A,se=ae,oe=`${x["input-field__input"]}`;"search"===ae&&(de=!0,oe+=" "+x["input-field__input--hideSearchClear"],se="search");const ce=i.useId(),ue=d(null),pe=d(null),fe=d(null),_e=d(null),me=d(null),be=d(null),ye=d(null),he=d(null),ve=d(null),Ie=d(null),Se=d(null),Ee=(e,t)=>{const i=e.current;if(!i)return;j=/* @__PURE__ */new WeakMap;const n=R(t.startSlotRef),l=R(t.endSlotRef),r=R(t.prefixRef),a=R(t.suffixRef),d=R(t.startSelectRef),s=R(t.endSelectRef),o=R(t.startIconRef),c=R(t.endIconRef);j=null;const u=n||r||d||o;u>0?(i.style.setProperty("--input-start-slot-width",`${u}px`),i.dataset.startSlot="true"):delete i.dataset.startSlot;const p=l||a||s||c;p>0?(i.style.setProperty("--input-end-slot-width",`${p}px`),i.dataset.endSlot="true"):delete i.dataset.endSlot};s(()=>{Ee(ue,{startSlotRef:pe,endSlotRef:fe,prefixRef:_e,suffixRef:me,startSelectRef:be,endSelectRef:ye,startIconRef:Ie,endIconRef:Se})},[F]),o(()=>{const e=setTimeout(()=>{Ee(ue,{startSlotRef:pe,endSlotRef:fe,prefixRef:_e,suffixRef:me,startSelectRef:be,endSelectRef:ye,startIconRef:Ie,endIconRef:Se})},100);return()=>clearTimeout(e)},[F]);const xe=i.Children.toArray(F),we=xe.find(e=>i.isValidElement(e)&&e.type===B),Ne=xe.find(e=>i.isValidElement(e)&&e.type===V),je=e=>{if(!e)return!1;return i.Children.toArray(e.props.children).some(e=>N(e)||w(e))},Re=je(we),Ce=je(Ne),ge=xe.find(e=>i.isValidElement(e)&&e.type===g),De=xe.find(e=>i.isValidElement(e)&&e.type===D),Pe=xe.find(e=>i.isValidElement(e)&&e.type===M),Be=xe.find(e=>i.isValidElement(e)&&e.type===k),Ve=xe.find(e=>i.isValidElement(e)&&e.type===$),$e=xe.find(e=>i.isValidElement(e)&&e.type===L),Le=de&&null!=W?.value&&String(W.value).length>0&&!P;let Me="",ke=[];a&&b?(Me=p({fieldColumns:ie,fieldMaxWidthByChars:ne}),ke=[...le,...re]):a?(Me=p({fieldColumns:ie}),ke=le):b?(Me=p({fieldMaxWidthByChars:ne}),ke=re):Me=p({});const He=Le?/* @__PURE__ */e("div",{ref:ve,children:/* @__PURE__ */e(m,{iconProps:{iconName:"circle-xmark",iconPrefix:"fas"},emphasis:"quaternary",size:"sm",styleVariant:"neutral",onClick:e=>{e.preventDefault(),e.stopPropagation(),he.current&&(he.current.focus(),W&&"value"in W&&W.onChange?.({target:{value:""}}))},tooltipLabel:T})}):null;/* @__PURE__ */
|
|
6
|
+
return t(O,{...U,isDisabled:P,...z||E?{isInvalid:E}:{},className:`\n ${x["input-field"]} \n `,children:[(n||l||"top"===K)&&/* @__PURE__ */e(_,{label:n,description:l,optionalTranslation:q,isInvalid:E,isRequired:H,errorMessage:z,showError:"top"===K,errorId:G,errorPrefix:J,labelFor:W?.id,visuallyHiddenLabel:Q}),
|
|
7
|
+
/* @__PURE__ */e(C.Provider,{value:{isDisabled:P,isInvalid:E,inputId:ce},children:/* @__PURE__ */e("div",{className:x["input-field__grid"],children:/* @__PURE__ */t("div",{ref:ue,className:[x["input-field__wrapper"],f["input-field-variant"],Me,...ke].filter(Boolean).join(" "),...Re?{"data-has-start-button":"true"}:{},...Ce?{"data-has-end-button":"true"}:{},children:[Ve?i.cloneElement(Ve,{ref:Ie}):Pe?i.cloneElement(Pe,{ref:be}):we?i.cloneElement(we,{ref:pe}):ge?i.cloneElement(ge,{ref:_e,visuallyHiddenLabel:Q}):null,
|
|
8
|
+
/* @__PURE__ */e(u,{ref:e=>{"function"==typeof X?X(e):X&&"current"in X&&(X.current=e),he.current=e},...W,type:se,placeholder:r,className:oe,"data-disabled":!!P||void 0,"data-invalid":!!E||void 0,"data-required":!!H||void 0,disabled:!!P||void 0}),de&&/* @__PURE__ */e("div",{className:x["input-field__clearButton"],children:He}),$e?i.cloneElement($e,{ref:Se}):Be?i.cloneElement(Be,{ref:ye}):Ne?i.cloneElement(Ne,{ref:fe}):De?i.cloneElement(De,{ref:me,visuallyHiddenLabel:Q}):null]})})}),"bottom"===K?/* @__PURE__ */e("div",{className:x["input-field__errorMessage"],children:/* @__PURE__ */e(y,{id:G,fieldLabel:n,errorPrefix:J,children:z})}):null]})});H.displayName="Input",H.StartSlot=B,H.EndSlot=V,H.Prefix=g,H.Suffix=D,H.StartSelect=M,H.EndSelect=k,H.StartIcon=$,H.EndIcon=L;export{C as InputContext,H as default};
|
|
9
9
|
//# sourceMappingURL=Input.js.map
|