@simai-studio/ui 5.20261023.214 → 5.20261025.207
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/README.md +4 -4
- package/distr/component/button-group/css/button-group.min.css +1 -1
- package/distr/core/contracts/public-variables.v1.json +88 -0
- package/distr/core/contracts/third-party-notices.v1.json +1 -1
- package/distr/core/css/core.css +3 -2
- package/distr/core/js/composition/overlay.mjs +472 -24
- package/distr/core/js/composition/sortable-inserter.mjs +534 -0
- package/distr/core/js/core-loader.js +1 -1
- package/distr/core/js/core-loader.min.js +1 -1
- package/distr/core/js/core-rules.js +242 -185
- package/distr/core/js/core-rules.min.js +1 -1
- package/distr/core/js/open-surface-mark.js +88 -0
- package/distr/core/js/template-utilities.generated.json +3 -0
- package/distr/rule/js/rule.min.js +1 -1
- package/distr/rule/rule.json +47 -1
- package/distr/smart/color/css/color.min.css +1 -0
- package/distr/smart/color/js/color.min.js +36 -17
- package/distr/smart/color/smart.manifest.json +45 -4
- package/distr/smart/color/template/default.js +13 -2
- package/distr/smart/composition-overlay/css/composition-overlay.min.css +1 -1
- package/distr/smart/composition-overlay/js/composition-overlay.min.js +1 -1
- package/distr/smart/composition-overlay/smart.manifest.json +178 -11
- package/distr/smart/dropdown/css/dropdown.min.css +1 -0
- package/distr/smart/dropdown/js/dropdown.min.js +41 -21
- package/distr/smart/dropdown/smart.manifest.json +62 -3
- package/distr/smart/dropdown/template/default.js +5 -1
- package/distr/smart/field-renderers/js/field-renderers.min.js +54 -42
- package/distr/smart/image-field/css/image-field.min.css +1 -0
- package/distr/smart/image-field/js/image-field.min.js +62 -0
- package/distr/smart/image-field/smart.manifest.json +519 -0
- package/distr/smart/image-field/studio.fixture.json +15 -0
- package/distr/smart/image-field/studio.scenario.json +22 -0
- package/distr/smart/image-field/template/default.js +125 -0
- package/distr/smart/inputs/css/inputs.min.css +1 -0
- package/distr/smart/inputs/js/inputs.min.js +93 -75
- package/distr/smart/inputs/smart.manifest.json +62 -3
- package/distr/smart/inputs/template/default.js +8 -2
- package/distr/smart/sortable/css/sortable.min.css +1 -1
- package/distr/smart/sortable/js/sortable.min.js +1 -1
- package/distr/smart/sortable/smart.manifest.json +101 -14
- package/distr/smart/switch/css/switch.min.css +1 -0
- package/distr/smart/switch/js/switch.min.js +31 -13
- package/distr/smart/switch/smart.manifest.json +62 -3
- package/distr/smart/switch/template/default.js +2 -0
- package/distr/smart/textarea/css/textarea.min.css +1 -0
- package/distr/smart/textarea/js/textarea.min.js +51 -32
- package/distr/smart/textarea/smart.manifest.json +62 -3
- package/distr/smart/textarea/template/default.js +8 -1
- package/package-manifest.json +50 -39
- package/package.json +5 -4
|
@@ -1 +1,2 @@
|
|
|
1
|
+
@layer sf.components{.sf-field-inherited-slot{flex:none;gap:var(--sf-space-1\/4);min-width:0;min-inline-size:0}.sf-field-inherited-slot--size-1\/2{--sf-field-inherited-slot--inset: calc((var(--sf-ui-1\/2--control-height) - var(--sf-ui-1\/3--control-height)) / 2 - var(--sf-px))}.sf-field-inherited-slot--size-1{--sf-field-inherited-slot--inset: calc((var(--sf-ui-1--control-height) - var(--sf-ui-1\/2--control-height)) / 2 - var(--sf-px))}.sf-field-inherited-slot--size-2{--sf-field-inherited-slot--inset: calc((var(--sf-ui-2--control-height) - var(--sf-ui-1--control-height)) / 2 - var(--sf-px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-field-inherited{padding-right:0px;padding-right:var(--sf-field-inherited-slot--inset, 0px)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-field-inherited{padding-right:0px;padding-right:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited:where(:dir(ltr)){padding-right:0px;padding-right:var(--sf-field-inherited-slot--inset, 0px)}_:-ms-input-placeholder, [dir="rtl"] .sf-field-inherited{padding-left:0px;padding-left:var(--sf-field-inherited-slot--inset, 0px)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-field-inherited{padding-left:0px;padding-left:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited:where(:dir(rtl)){padding-left:0px;padding-left:var(--sf-field-inherited-slot--inset, 0px)}.sf-field-inherited{color:var(--sf-on-surface-variant);white-space:nowrap;-webkit-padding-end:0px;padding-inline-end:0px;-webkit-padding-end:var(--sf-field-inherited-slot--inset, 0px);padding-inline-end:var(--sf-field-inherited-slot--inset, 0px)}.sf-field-inherited--size-1\/3{font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3)}.sf-field-inherited--size-1\/2{font-size:var(--sf-text-size-1\/2);line-height:var(--sf-text-height-1\/2)}.sf-field-inherited--size-1{font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-field-inherited-slot>.sf-field-reset{margin-right:0px;margin-right:var(--sf-field-inherited-slot--inset, 0px)}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-field-inherited-slot>.sf-field-reset{margin-right:0px;margin-right:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited-slot>.sf-field-reset:where(:dir(ltr)){margin-right:0px;margin-right:var(--sf-field-inherited-slot--inset, 0px)}_:-ms-input-placeholder, [dir="rtl"] .sf-field-inherited-slot>.sf-field-reset{margin-left:0px;margin-left:var(--sf-field-inherited-slot--inset, 0px)}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-field-inherited-slot>.sf-field-reset{margin-left:0px;margin-left:var(--sf-field-inherited-slot--inset, 0px)}}.sf-field-inherited-slot>.sf-field-reset:where(:dir(rtl)){margin-left:0px;margin-left:var(--sf-field-inherited-slot--inset, 0px)}.sf-field-inherited-slot>.sf-field-reset{flex:none;-webkit-margin-end:0px;margin-inline-end:0px;-webkit-margin-end:var(--sf-field-inherited-slot--inset, 0px);margin-inline-end:var(--sf-field-inherited-slot--inset, 0px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}}.sf-input-field>.sf-field-inherited-slot:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-input-field>.sf-field-inherited-slot{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-input-field>.sf-field-inherited-slot{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}}.sf-input-field>.sf-field-inherited-slot:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}.sf-input-field>.sf-field-inherited-slot{align-self:center;-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-input-field--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-input-field--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:0px;padding-right:var(--sf-input-field--padding-inline-end, 0px)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:0px;padding-right:var(--sf-input-field--padding-inline-end, 0px)}}.sf-input-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(ltr)){padding-right:0px;padding-right:var(--sf-input-field--padding-inline-end, 0px)}_:-ms-input-placeholder, [dir="rtl"] .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:0px;padding-left:var(--sf-input-field--padding-inline-end, 0px)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:0px;padding-left:var(--sf-input-field--padding-inline-end, 0px)}}.sf-input-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(rtl)){padding-left:0px;padding-left:var(--sf-input-field--padding-inline-end, 0px)}.sf-input-field>.sf-field-inherited-slot>.sf-field-inherited{-webkit-padding-end:0px;padding-inline-end:0px;-webkit-padding-end:var(--sf-input-field--padding-inline-end, 0px);padding-inline-end:var(--sf-input-field--padding-inline-end, 0px)}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>input{--sf-dropdown-input--padding-inline-end: 0px;min-width:0;min-inline-size:0}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>input{--sf-dropdown-input--padding-inline-end: 0px;min-width:0;min-width:0;min-inline-size:0}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>input{--sf-dropdown-input--padding-inline-end: 0px;min-width:0;min-inline-size:0}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(ltr)){margin-right:calc(-1*0px);margin-right:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button:where(:dir(rtl)){margin-left:calc(-1*0px);margin-left:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field[\:has\(\%3E.sf-field-inherited-slot\)]>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field:has(>.sf-field-inherited-slot)>button{position:static;flex:none;margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));-webkit-margin-end:calc(-1*0px);margin-inline-end:calc(-1*0px);-webkit-margin-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px));margin-inline-end:calc(-1*var(--sf-icon-button--padding-inline-end, 0px))}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot{margin-top:calc(-1*0px);margin-bottom:calc(-1*0px);margin-block:calc(-1*0px) calc(-1*0px);margin-top:calc(-1*0px);margin-top:calc(-1*var(--sf-dropdown-field--padding-top, 0px));margin-bottom:calc(-1*0px);margin-bottom:calc(-1*var(--sf-dropdown-field--padding-bottom, 0px));margin-block:calc(-1*var(--sf-dropdown-field--padding-top, 0px)) calc(-1*var(--sf-dropdown-field--padding-bottom, 0px))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:var(--sf-space-1\/4)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-right:var(--sf-space-1\/4)}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(ltr)){padding-right:var(--sf-space-1\/4)}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:var(--sf-space-1\/4)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{padding-left:var(--sf-space-1\/4)}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited:where(:dir(rtl)){padding-left:var(--sf-space-1\/4)}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-inherited{-webkit-padding-end:var(--sf-space-1\/4);padding-inline-end:var(--sf-space-1\/4)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-right:0}@supports not (margin-inline-end: initial){html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-right:0}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset:where(:dir(ltr)){margin-right:0}_:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-left:0}@supports not (margin-inline-end: initial){[dir="rtl"] .sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{margin-left:0}}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset:where(:dir(rtl)){margin-left:0}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{-webkit-margin-end:0;margin-inline-end:0}.sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-field-reset--padding: var(--sf-ui-1\/3--space-y-tightness-default)}.sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-field-reset--padding: var(--sf-ui-1\/2--space-y-tightness-default)}.sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-field-reset--padding: var(--sf-ui-1--space-y-tightness-default)}.sf-dropdown .sf-dropdown-field>.sf-field-inherited-slot>.sf-field-reset{--sf-icon-button--padding-top: var(--sf-field-reset--padding);--sf-icon-button--padding-bottom: var(--sf-field-reset--padding);--sf-icon-button--padding-inline-start: var(--sf-field-reset--padding);--sf-icon-button--padding-inline-end: var(--sf-field-reset--padding)}.sf-textarea-inherited,.sf-switch-inherited,.sf-color-inherited-slot{--sf-field-inherited-slot--inset: 0px}.sf-textarea-inherited{justify-content:flex-end}sf-switch[data-inherited] .sf-switch-toggler{opacity:.64}}
|
|
1
2
|
@layer sf.components{.sf-input.sf-input--bordered>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input.sf-input--filled>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input.sf-input--size-1>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input.sf-input--size-1>.sf-input-field>.sf-input-left>sf-icon>.sf-icon{--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-input.sf-input--size-2>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input.sf-input--size-2>.sf-input-field>.sf-input-left>sf-icon>.sf-icon{--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-input-left>sf-icon>.sf-icon{--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-input.error>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon{--sf-icon--color: var(--sf-error)}}@layer sf.states{.sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input:has(input:enabled:not(:disabled):not(.disabled):hover)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input:has(input:enabled:not(:disabled):not(.disabled):active)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input:has(input:enabled:not(:disabled):not(.disabled).focus-visible)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input:has(input:enabled:not(:disabled):not(.disabled):hover)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input:has(input:enabled:not(:disabled):not(.disabled):active)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input:has(input:enabled:not(:disabled):not(.disabled):focus-visible)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input[\:has\(input\:disabled\)]>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input[\:has\(input\:disabled\)]>.sf-input-field>.sf-input-left>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-disable)}.sf-input:has(input:disabled)>.sf-input-field>.sf-input-hint>sf-icon>.sf-icon,.sf-input:has(input:disabled)>.sf-input-field>.sf-input-left>sf-icon>.sf-icon{--sf-icon--color: var(--sf-on-disable)}}
|
|
@@ -1,99 +1,117 @@
|
|
|
1
|
-
(()=>{"use strict";var t={e138a730fd7c(t,e,n){n.d(e,{U:()=>i,h:()=>s});let a=0;const r=new WeakMap;function s(t,{prefix:e="sf-field",required:n=!1,invalid:s=!1,hint:i="",errorMessage:o=""}={}){const l=function(t,e){if(t&&r.has(t))return r.get(t);const n=(t?.id?String(t.id).trim():"")||`${e}-${++a}`,s={controlId:`${n}-control`,messageId:`${n}-message`};return!t||"object"!=typeof t&&"function"!=typeof t||r.set(t,s),s}(t,e),u=Boolean(s),d=u&&o?o:i;return{...l,required:Boolean(n),invalid:u,message:d,describedBy:d?l.messageId:"",errorMessageId:u&&o?l.messageId:""}}function i(t,e,{prefix:n="sf-field",required:a=!1,invalid:r=!1,messageNode:i=null,labelNode:o=null,errorMessage:l=""}={}){if(!t||!e)return null;const u=s(t,{prefix:n,required:a,invalid:r,hint:i?.textContent?.trim()||"",errorMessage:l});var d,c;return e.id||(e.id=u.controlId),"LABEL"!==t.tagName||t.hasAttribute("for")||t.setAttribute("for",e.id),!o?.textContent?.trim()||e.hasAttribute("aria-label")||e.hasAttribute("aria-labelledby")||(o.id||(o.id=`${e.id}-label`),e.setAttribute("aria-labelledby",o.id)),e.required=u.required,t.classList.toggle("error",u.invalid),e.classList.toggle("error",u.invalid),u.invalid?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid"),i&&(i.id||(i.id=u.messageId),e.setAttribute("aria-describedby",(d=e.getAttribute("aria-describedby"),c=[i.id],[...new Set([...String(d||"").split(/\s+/).filter(Boolean),...c.filter(Boolean)])].join(" ")))),u.errorMessageId&&i?e.setAttribute("aria-errormessage",i.id):e.removeAttribute("aria-errormessage"),u}},"98e26702f55a"(t,e,n){function a(){const t=globalThis.SF=globalThis.SF||{};return t.__deprecationNotes instanceof Map||Object.defineProperty(t,"__deprecationNotes",{value:new Map,configurable:!0}),t.__deprecationNotes}function r({component:t="",kind:e="attribute",attribute:n="",from:r,to:s=null}={}){if(!r)return;const i=[t,e,n,r].join("|"),o=a(),l=o.get(i);if(l)l.count+=1;else if(o.set(i,{component:t,kind:e,attribute:n,from:r,to:s,count:1}),function(){const t=globalThis.document?.documentElement;return"warn"===t?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const a=t?`${t}: `:"",i="value"===e?`${n}="${r}"`:`${e} ${r}`;globalThis.console?.warn?.(`[SIMAI Framework] ${a}${i} is a legacy name${s?`; write ${s}`:""}. See contracts/changes/journal.json.`)}}if(n.d(e,{id:()=>l,vl:()=>u}),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const t=globalThis.SF.deprecations||{};t.list=function(){return[...a().values()].map(t=>({...t}))},t.clear=function(){a().clear()},t.note=r,globalThis.SF.deprecations=t}const s=Object.freeze(["1/2","1","2"]),i=Object.freeze({"1/3":"1/2",3:"2"}),o=new Set;function l(t,e="field",n="1"){const a=String(t??"").trim().toLowerCase();if(s.includes(a))return a;if(Object.hasOwn(i,a)){const t=i[a];r({component:e,kind:"value",attribute:"size",from:a,to:t});const n=`${e}:${a}`;return o.has(n)||"undefined"==typeof console||(o.add(n),console.warn(`[SIMAI Framework] ${e}: size ${a} is retired for form fields; rendering size ${t}.`)),t}return n}function u(t,e){if(t?.classList)for(const[n,a]of Object.entries(i)){const a=`${e}--size-${n}`;t.classList.contains(a)&&t.classList.replace(a,`${e}--size-${l(n,e)}`)}}},f8ed4bd5aa8a(t,e,n){n.d(e,{m3:()=>k,Lu:()=>L});class a{lifecycleName(){return this.componentName??this.constructor.componentName}constructor(t){this.props=t,this.id=t?.id,this.params=t?.param,this.attrs=t?.attrs||{},this.template=null,window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:beforeRender`,{detail:this}))}getUtilityMap(){return this.constructor.utilityMap||null}extractUtilityClasses(t){if(!Array.isArray(t))return[];const e=new Set;return t.forEach(t=>{if("string"!=typeof t)return;const n=t.match(/\(([^)]+)\)/g);n&&n.forEach(t=>{t.slice(1,-1).split(/\s+/).filter(Boolean).forEach(t=>{t.startsWith(".")&&t.length>1&&e.add(t.slice(1))})})}),Array.from(e)}applyLayoutUtilities(t,e){if(!t||!e)return;const n=this.getUtilityMap();if(!n||!n[e])return;this.extractUtilityClasses(n[e]).forEach(e=>t.classList.add(e))}render(){return this.html=this.template,"function"==typeof this.init&&this.init(),this.html&&window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:render`,{detail:this})),this.html}destroy(){this.destroyInternal?.(),this.props=null,this.id=null,this.params=null,this.template=null,this.html&&(this.html.remove(),this.html=null),window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:destroy`,{detail:this}))}destroyInternal(){}}const r=function(t,e){if(t&&e)if("undefined"==typeof window||"function"!=typeof window.registerSfComponent){if("undefined"!=typeof window&&window.SF?.Loader?.registerComponent)window.SF.Loader.registerComponent(t,e);else if("undefined"!=typeof window){(window.SF_PENDING_COMPONENTS=window.SF_PENDING_COMPONENTS||[]).push([t,e])}}else window.registerSfComponent(t,e)},s=JSON.parse('{".sf-input":["display/flex (.flex)","flex-direction/column (.flex-col)","flex-wrap/nowrap (.flex-nowrap)","gap/var(--sf-space-1\\\\/4)","justify-content/flex-start (.justify-start)"],".sf-input .sf-input-field":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-label":["display/flex (.flex)","flex-direction/row (.flex-row)","align-items/flex-start (.items-start)"],".sf-input .sf-input-field input":["flex/1 (.flex-1)"],".sf-input .sf-input-field .sf-icon":["display/flex (.flex)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-text-container":["flex/1 (.flex-1)","display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-group":["display/flex (.flex)","flex-direction/column (.flex-col)","flex-wrap/nowrap (.flex-nowrap)","justify-content/center (.justify-center)","align-items/flex-start (.items-start)"],".sf-input .sf-input-text-container-alt":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/center (.justify-center)","align-items/center (.items-center)"],".sf-input .sf-icon-alt":["display/flex (.flex)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-hint-text-wrap":["flex/1 (.flex-1)","display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","gap/var(--sf-b0)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"]}');var i=n("e138a730fd7c"),o=n("98e26702f55a");const l=new WeakMap,u=new WeakSet;let d=null;const c="label.sf-input",p="sfInputBound",f=new Set(["text","email","password","search","tel","url"]),h=new Set(["","none","text","tel","url","email","numeric","decimal","search"]),m=new Set(["bordered","filled","hidden"]);function g(t){if(""===t||null==t)return null;const e=Number(t);return Number.isInteger(e)&&e>=0?e:null}function b(t,e=!1){return null==t||""===t?e:"boolean"==typeof t?t:["1","true","yes","on"].includes(String(t).toLowerCase())}function y(t){return t?.querySelector?.(".sf-input-field input, input")||null}function w(t){return t?.querySelector?.(".sf-input-hint-text-wrap")||null}function x(t){const e=w(t);return{messageNode:e,errorMessage:"error"===e?.dataset.fieldMessage&&e.textContent?.trim()||""}}function v(t){if(!t||"string"!=typeof t)return null;const e=t.trim();if(!e)return null;try{const t=JSON.parse(e);return t&&"object"==typeof t?t:null}catch{return null}}function S(t,e,n){const a={...t},r=n.dataset.maskLazy??e.dataset.maskLazy,s=n.dataset.maskPlaceholderChar??e.dataset.maskPlaceholderChar;return void 0!==r&&""!==r&&(a.lazy=b(r,!0)),void 0!==s&&""!==s&&(a.placeholderChar=String(s)),a}async function $(t,e){const n=function(t,e){if(!b(e.dataset.mask??t.dataset.mask,!1))return null;const n=v(e.dataset.maskOptions),a=v(t.dataset.maskOptions);if(n)return S(n,t,e);if(a)return S(a,t,e);const r=e.dataset.maskPattern??t.dataset.maskPattern;return r?S({mask:String(r)},t,e):null}(t,e);if(!n)return;const a={};t.__sfInputMaskRequest=a;try{const r=await function(){const t=()=>window.SF?.Mask?.create?window.SF.Mask:null,e=t();return e?Promise.resolve(e):d||(d=new Promise(e=>{const n=[[window,"sf-mask-ready"],[window,"sf-loader-ready"],[window,"load"],[document,"DOMContentLoaded"]],a=()=>{const r=t();r&&(n.forEach(([t,e])=>t.removeEventListener(e,a)),d=null,e(r))};n.forEach(([t,e])=>t.addEventListener(e,a))}),d)}();if(t.__sfInputMaskRequest!==a)return;const s=await r.create(e,n);if(!s)return;if("1"!==t.dataset[p]||t.__sfInputMaskRequest!==a||y(t)!==e)return void r.destroy(s);t.__sfInputMask=s}catch(t){console.warn("SF.Input mask init failed",t)}}function k(t){if((0,o.vl)(t,"sf-input"),!t||"1"===t.dataset[p])return;const e=y(t);if(!e)return;const n=()=>{},a=()=>t.classList.add("sf-input--pointer-focus"),r=()=>t.classList.remove("sf-input--pointer-focus");e.addEventListener("input",n),e.addEventListener("pointerdown",a),e.addEventListener("blur",r),t.__sfInputNoopHandler=n,t.__sfInputPointerFocusHandler=a,t.__sfInputBlurHandler=r,t.dataset[p]="1";const s=x(t);(0,i.U)(t,e,{prefix:"sf-input",labelNode:t.querySelector(".sf-input-text"),required:e.required||Boolean(t.querySelector(".sf-input-required")),invalid:t.classList.contains("error")||e.classList.contains("error"),...s}),t.__sfInputReleaseReset=function(t,e){const n=t.ownerDocument;u.has(n)||(n.addEventListener("reset",t=>{const e=t.target;if("FORM"!==e?.tagName)return;const n=Array.from(e.elements);setTimeout(()=>{if(!t.defaultPrevented)for(const t of n)if(t.isConnected&&t.form===e)for(const e of l.get(t)||[])e()},0)},!0),u.add(n));let a=l.get(t);return a||l.set(t,a=new Set),a.add(e),()=>a.delete(e)}(e,()=>{t.__sfInputMask&&(t.__sfInputMask.value=e.value)}),$(t,e)}function L(t){if(!t||"1"!==t.dataset[p])return;delete t.__sfInputMaskRequest;const e=y(t);e&&t.__sfInputNoopHandler&&e.removeEventListener("input",t.__sfInputNoopHandler),e&&t.__sfInputPointerFocusHandler&&e.removeEventListener("pointerdown",t.__sfInputPointerFocusHandler),e&&t.__sfInputBlurHandler&&e.removeEventListener("blur",t.__sfInputBlurHandler),t.__sfInputMask&&window.SF?.Mask?.destroy?.(t.__sfInputMask),t.__sfInputReleaseReset?.(),delete t.__sfInputReleaseReset,delete t.__sfInputMask,delete t.__sfInputNoopHandler,delete t.__sfInputPointerFocusHandler,delete t.__sfInputBlurHandler,t.classList.remove("sf-input--pointer-focus"),delete t.dataset[p]}function _(t=document){t.querySelectorAll(c).forEach(k)}class I extends a{static componentName="Inputs";html=null;constructor(t){super(t);const{size:e="1",type:n="bordered",label:a="",required:r=!1,placeholder:s="",inputType:i="text",autocomplete:l="",inputMode:u="",minLength:d="",maxLength:c="",pattern:p="",hint:y="",value:w="",name:x="",leftIcon:v="",rightText:S="",hintIcon:$="",disabled:k=!1,readonly:L=!1,error:_=!1,invalid:I=!1,errorMessage:E="",mask:C=!1,maskPattern:A="",maskLazy:M="",maskPlaceholderChar:P="",maskOptions:q=""}=this.params||{},O=this.attrs.class||this.attrs.className,j=(0,o.id)(e,"sf-input"),F=function(t,e,n){const a=String(t||n);return e.has(a)?a:n}(n,m,"bordered");this.template=document.createElement("label"),this.id&&(this.template.id=this.id),this.template.classList.add("sf-input",`sf-input--size-${j}`,`sf-input--${F}`),this.template.classList.toggle("error",b(I||_,!1)),this.template.dataset.mask=String(b(C,!1)),this.template.dataset.maskPattern=String(A||""),this.template.dataset.maskLazy=String(M??""),this.template.dataset.maskPlaceholderChar=String(P||""),this.template.dataset.maskOptions=String(q||""),O&&this.template.classList.add(...`${O}`.split(" ").filter(Boolean));const T=document.createElement("span");T.classList.add("sf-input-label");const N=document.createElement("span");if(N.classList.add("sf-input-text"),N.textContent=a,T.append(N),b(r,!0)){const t=document.createElement("span");t.classList.add("sf-input-required"),t.textContent="*",T.append(t)}const z=document.createElement("span");if(z.classList.add("sf-input-field"),v){const t=document.createElement("i");t.classList.add("sf-icon"),t.textContent=String(v),z.append(t)}const B=document.createElement("input");B.type=function(t){const e=String(t||"text").toLowerCase();return f.has(e)?e:"text"}(i),B.placeholder=String(s??""),l&&(B.autocomplete=String(l)),B.inputMode=function(t){const e=String(t||"").toLowerCase();return h.has(e)?e:""}(u);const R=g(d),H=g(c);if(null!==R&&(B.minLength=R),null!==H&&(B.maxLength=H),p&&(B.pattern=String(p)),B.value=String(w??""),B.defaultValue=String(w??""),x&&(B.name=String(x)),B.disabled=b(k,!1),B.readOnly=b(L,!1),B.required=b(r,!0),B.dataset.mask=String(b(C,!1)),B.dataset.maskPattern=String(A||""),B.dataset.maskLazy=String(M??""),B.dataset.maskPlaceholderChar=String(P||""),B.dataset.maskOptions=String(q||""),B.classList.toggle("error",b(I||_,!1)),z.append(B),S){const t=document.createElement("span");t.classList.add("sf-input-right"),t.textContent=String(S),z.append(t)}if($){const t=document.createElement("i");t.classList.add("sf-icon","sf-icon-hint"),t.textContent=String($),z.append(t)}this.template.append(T,z);const U=b(I||_,!1)&&E?E:y;if(U){const t=document.createElement("span");t.classList.add("sf-input-hint-text-wrap"),t.textContent=String(U),t.dataset.fieldMessage=b(I||_,!1)&&E?"error":"hint",this.template.append(t)}this.applyLayoutUtilities(this.template,".sf-input"),this.applyLayoutUtilities(T,".sf-input .sf-input-label"),this.applyLayoutUtilities(z,".sf-input .sf-input-field"),this.applyLayoutUtilities(B,".sf-input .sf-input-field input")}init(){k(this.template)}destroyInternal(){L(this.template)}}I.utilityMap=s,r("Inputs",I),"undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.Input=window.SF.Input||{},window.SF.Input.setState=function(t,e={}){const n=t instanceof HTMLElement?t.closest(c)||t:null;if(!n)return!1;const a=y(n);if(!a)return!1;if(Object.prototype.hasOwnProperty.call(e,"disabled")&&(a.disabled=b(e.disabled)),Object.prototype.hasOwnProperty.call(e,"error")){const t=b(e.error);n.classList.toggle("error",t),a.classList.toggle("error",t)}if(Object.prototype.hasOwnProperty.call(e,"invalid")){const t=b(e.invalid);n.classList.toggle("error",t),a.classList.toggle("error",t)}if(Object.prototype.hasOwnProperty.call(e,"errorMessage")){const t=String(e.errorMessage??""),r=t?function(t){const e=w(t);if(e)return e;const n=document.createElement("span");return n.classList.add("sf-input-hint-text-wrap"),t.append(n),n}(n):w(n);if(r){r.textContent=t;const e=n.classList.contains("error")||a.classList.contains("error");r.dataset.fieldMessage=t&&e?"error":"hint"}}return Object.prototype.hasOwnProperty.call(e,"value")&&(a.value=String(e.value??""),a.dispatchEvent(new Event("input",{bubbles:!0}))),(0,i.U)(n,a,{prefix:"sf-input",labelNode:n.querySelector(".sf-input-text"),required:a.required||Boolean(n.querySelector(".sf-input-required")),invalid:n.classList.contains("error")||a.classList.contains("error"),...x(n)}),!0}),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>_()):_();new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&(t.matches?.(c)&&k(t),_(t))})})}).observe(document.documentElement,{childList:!0,subtree:!0})},"44b791419862"(t,e,n){n.a(t,async(t,e)=>{try{var a=n("f8ed4bd5aa8a"),r=n("fbe0570fcc69"),s=n("98e26702f55a"),i=n("e602dd4d6e16"),o=t([r,i]);[r,i]=o.then?(await o)():o;var l=n.n(r);const u=new Set(["text","email","password","search","tel","url"]),d=new Set(["","none","text","tel","url","email","numeric","decimal","search"]),c=(new Set(["bordered","filled","hidden"]),(t,e,n)=>e.has(t)?t:n);class p extends(l()){static get props(){return{size:{default:"1"},appearance:{default:"bordered",values:["bordered","filled","hidden"],aliases:["type"]},label:{default:""},required:{type:Boolean,default:!1},placeholder:{default:""},inputType:{default:"text"},autocomplete:{default:""},inputmode:{default:""},minlength:{default:""},maxlength:{default:""},pattern:{default:""},hint:{default:""},value:{default:""},defaultValue:{default:""},name:{default:""},iconStart:{type:String,default:null},textEnd:{type:String,default:null},leftIcon:{default:""},rightText:{default:""},hintIcon:{default:""},rootClass:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},error:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},errorMessage:{default:""},mask:{type:Boolean,default:!1},maskPattern:{default:""},maskLazy:{default:""},maskPlaceholderChar:{default:""},maskOptions:{default:""},ariaLabel:{attribute:"aria-label",default:""}}}constructor(){super(),this._boundRoot=null}get size(){return(0,s.id)(this.getAttribute("size")||"1","sf-input")}get appearance(){return this.getProp("appearance")}get type(){return this.appearance}get label(){return this.getAttribute("label")||""}get required(){return this.getBooleanAttr("required",!1)}get placeholder(){return this.getAttribute("placeholder")||""}get inputType(){return c(this.getAttribute("input-type")||"text",u,"text")}get autocomplete(){return this.getAttribute("autocomplete")||""}get inputmode(){return c(this.getAttribute("inputmode")||"",d,"")}get minlength(){return this.getAttribute("minlength")||""}get maxlength(){return this.getAttribute("maxlength")||""}get pattern(){return this.getAttribute("pattern")||""}get hint(){return this.getAttribute("hint")||""}get value(){const t=this.getInputElement();return t?t.value:this.getAttribute("value")||""}set value(t){const e=this.getInputElement(),n=String(t??"");null==t?this.removeAttribute("value"):this.setAttribute("value",n);const a=this.querySelector(".sf-input")?.__sfInputMask;a?a.value=n:e&&e.value!==n&&(e.value=n)}get defaultValue(){return this.getAttribute("default-value")??this.getAttribute("value")??""}set defaultValue(t){null!=t?this.setAttribute("default-value",String(t)):this.removeAttribute("default-value")}get name(){return this.getAttribute("name")||""}get leftIcon(){return this.getAttribute("icon-start")??this.getAttribute("left-icon")??""}get rightText(){return this.getAttribute("text-end")??this.getAttribute("right-text")??""}get iconStart(){return this.leftIcon}get textEnd(){return this.rightText}get hintIcon(){return this.getAttribute("hint-icon")||""}get disabled(){return this.getBooleanAttr("disabled",!1)}get readonly(){return this.getBooleanAttr("readonly",!1)}get error(){return this.getBooleanAttr("error",!1)}get invalid(){return this.getBooleanAttr("invalid",!1)}get errorMessage(){return this.getAttribute("error-message")||""}get mask(){return this.getBooleanAttr("mask",!1)}get maskPattern(){return this.getAttribute("mask-pattern")||""}get maskLazy(){return this.hasAttribute("mask-lazy")?this.getBooleanAttr("mask-lazy",!0):""}get maskPlaceholderChar(){return this.getAttribute("mask-placeholder-char")||""}get maskOptions(){return this.getAttribute("mask-options")||""}get ariaLabel(){return this.getProp("ariaLabel")||""}templateContext(){const t=this.getPropsContext(),e=this.hasAttribute("value"),n=this.getInputElement();return this.createTemplateContext({...t,leftIcon:t.iconStart??t.leftIcon,rightText:t.textEnd??t.rightText,iconStart:this.iconStart,textEnd:this.textEnd,type:this.type,maskLazy:this.maskLazy,value:e?t.value:n?n.value:this.defaultValue,defaultValue:this.defaultValue,hasControlledValue:e,component:this})}onDisconnected(){this._boundRoot&&((0,a.Lu)(this._boundRoot),this._boundRoot=null)}afterRender(){if(this._boundRoot&&((0,a.Lu)(this._boundRoot),this._boundRoot=null),this._boundRoot=this.querySelector(".sf-input"),this._boundRoot){const t=this.invalid||this.error;this._boundRoot.classList.toggle("error",t),this.getInputElement()?.classList.toggle("error",t),(0,a.m3)(this._boundRoot)}}getInputElement(){return this.querySelector(".sf-input-field input, input")}template(){return(0,i.P)(this.templateContext())}get state(){const t=this.querySelector(".sf-input"),e=this.getInputElement();return{value:e?.value||"",disabled:!!e?.disabled,invalid:"true"===e?.getAttribute("aria-invalid"),error:t?.classList?.contains("error")||e?.classList?.contains("error")||!1}}onInput(t,e){return"function"==typeof t&&this.addEventListener("input",t,e),this}onChange(t,e){return"function"==typeof t&&this.addEventListener("change",t,e),this}onKeyUp(t,e){return"function"==typeof t&&this.addEventListener("keyup",t,e),this}onKeyDown(t,e){return"function"==typeof t&&this.addEventListener("keydown",t,e),this}onFocus(t,e){return"function"==typeof t&&this.addEventListener("focusin",t,e),this}onBlur(t,e){return"function"==typeof t&&this.addEventListener("focusout",t,e),this}}p.define("sf-input"),e()}catch(t){e(t)}})},e602dd4d6e16(t,e,n){n.a(t,async(t,a)=>{try{n.d(e,{P:()=>l});var r=n("ddf1cdb42ecc"),s=n("e138a730fd7c"),i=t([r]),o=i.then?(await i)():i;r=o[0];function l(t){const{size:e,appearance:n,type:a,label:i,required:o,placeholder:l,inputType:u,autocomplete:d,inputmode:c,minlength:p,maxlength:f,pattern:h,hint:m,value:g,defaultValue:b,hasControlledValue:y,name:w,leftIcon:x,rightText:v,hintIcon:S,disabled:$,error:k,invalid:L,errorMessage:_,mask:I,rootClass:E,rootStyle:C,readonly:A,maskPattern:M,maskLazy:P,maskPlaceholderChar:q,maskOptions:O,ariaLabel:j}=t,F=""===P?"":String(P),T=y?g:b,N=(0,s.h)(t.component,{prefix:"sf-input",required:o,invalid:L||k,hint:m,errorMessage:_}),z=["sf-input",N.invalid?"error":"",`sf-input--size-${e}`,`sf-input--${n??a}`,E,"flex","flex-col"];if("hidden"===a)return r.html`<input
|
|
1
|
+
(()=>{"use strict";var t={e138a730fd7c(t,e,n){n.d(e,{U:()=>a,h:()=>s});let i=0;const r=new WeakMap;function s(t,{prefix:e="sf-field",required:n=!1,invalid:s=!1,hint:a="",errorMessage:o=""}={}){const l=function(t,e){if(t&&r.has(t))return r.get(t);const n=(t?.id?String(t.id).trim():"")||`${e}-${++i}`,s={controlId:`${n}-control`,messageId:`${n}-message`};return!t||"object"!=typeof t&&"function"!=typeof t||r.set(t,s),s}(t,e),u=Boolean(s),d=u&&o?o:a;return{...l,required:Boolean(n),invalid:u,message:d,describedBy:d?l.messageId:"",errorMessageId:u&&o?l.messageId:""}}function a(t,e,{prefix:n="sf-field",required:i=!1,invalid:r=!1,messageNode:a=null,labelNode:o=null,errorMessage:l=""}={}){if(!t||!e)return null;const u=s(t,{prefix:n,required:i,invalid:r,hint:a?.textContent?.trim()||"",errorMessage:l});var d,c;return e.id||(e.id=u.controlId),"LABEL"!==t.tagName||t.hasAttribute("for")||t.setAttribute("for",e.id),!o?.textContent?.trim()||e.hasAttribute("aria-label")||e.hasAttribute("aria-labelledby")||(o.id||(o.id=`${e.id}-label`),e.setAttribute("aria-labelledby",o.id)),e.required=u.required,t.classList.toggle("error",u.invalid),e.classList.toggle("error",u.invalid),u.invalid?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid"),a&&(a.id||(a.id=u.messageId),e.setAttribute("aria-describedby",(d=e.getAttribute("aria-describedby"),c=[a.id],[...new Set([...String(d||"").split(/\s+/).filter(Boolean),...c.filter(Boolean)])].join(" ")))),u.errorMessageId&&a?e.setAttribute("aria-errormessage",a.id):e.removeAttribute("aria-errormessage"),u}},"98e26702f55a"(t,e,n){function i(){const t=globalThis.SF=globalThis.SF||{};return t.__deprecationNotes instanceof Map||Object.defineProperty(t,"__deprecationNotes",{value:new Map,configurable:!0}),t.__deprecationNotes}function r({component:t="",kind:e="attribute",attribute:n="",from:r,to:s=null}={}){if(!r)return;const a=[t,e,n,r].join("|"),o=i(),l=o.get(a);if(l)l.count+=1;else if(o.set(a,{component:t,kind:e,attribute:n,from:r,to:s,count:1}),function(){const t=globalThis.document?.documentElement;return"warn"===t?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const i=t?`${t}: `:"",a="value"===e?`${n}="${r}"`:`${e} ${r}`;globalThis.console?.warn?.(`[SIMAI Framework] ${i}${a} is a legacy name${s?`; write ${s}`:""}. See contracts/changes/journal.json.`)}}if(n.d(e,{id:()=>l,vl:()=>u}),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const t=globalThis.SF.deprecations||{};t.list=function(){return[...i().values()].map(t=>({...t}))},t.clear=function(){i().clear()},t.note=r,globalThis.SF.deprecations=t}const s=Object.freeze(["1/2","1","2"]),a=Object.freeze({"1/3":"1/2",3:"2"}),o=new Set;function l(t,e="field",n="1"){const i=String(t??"").trim().toLowerCase();if(s.includes(i))return i;if(Object.hasOwn(a,i)){const t=a[i];r({component:e,kind:"value",attribute:"size",from:i,to:t});const n=`${e}:${i}`;return o.has(n)||"undefined"==typeof console||(o.add(n),console.warn(`[SIMAI Framework] ${e}: size ${i} is retired for form fields; rendering size ${t}.`)),t}return n}function u(t,e){if(t?.classList)for(const[n,i]of Object.entries(a)){const i=`${e}--size-${n}`;t.classList.contains(i)&&t.classList.replace(i,`${e}--size-${l(n,e)}`)}}},f8ed4bd5aa8a(t,e,n){n.d(e,{m3:()=>k,Lu:()=>_});class i{lifecycleName(){return this.componentName??this.constructor.componentName}constructor(t){this.props=t,this.id=t?.id,this.params=t?.param,this.attrs=t?.attrs||{},this.template=null,window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:beforeRender`,{detail:this}))}getUtilityMap(){return this.constructor.utilityMap||null}extractUtilityClasses(t){if(!Array.isArray(t))return[];const e=new Set;return t.forEach(t=>{if("string"!=typeof t)return;const n=t.match(/\(([^)]+)\)/g);n&&n.forEach(t=>{t.slice(1,-1).split(/\s+/).filter(Boolean).forEach(t=>{t.startsWith(".")&&t.length>1&&e.add(t.slice(1))})})}),Array.from(e)}applyLayoutUtilities(t,e){if(!t||!e)return;const n=this.getUtilityMap();if(!n||!n[e])return;this.extractUtilityClasses(n[e]).forEach(e=>t.classList.add(e))}render(){return this.html=this.template,"function"==typeof this.init&&this.init(),this.html&&window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:render`,{detail:this})),this.html}destroy(){this.destroyInternal?.(),this.props=null,this.id=null,this.params=null,this.template=null,this.html&&(this.html.remove(),this.html=null),window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:destroy`,{detail:this}))}destroyInternal(){}}const r=function(t,e){if(t&&e)if("undefined"==typeof window||"function"!=typeof window.registerSfComponent){if("undefined"!=typeof window&&window.SF?.Loader?.registerComponent)window.SF.Loader.registerComponent(t,e);else if("undefined"!=typeof window){(window.SF_PENDING_COMPONENTS=window.SF_PENDING_COMPONENTS||[]).push([t,e])}}else window.registerSfComponent(t,e)},s=JSON.parse('{".sf-input":["display/flex (.flex)","flex-direction/column (.flex-col)","flex-wrap/nowrap (.flex-nowrap)","gap/var(--sf-space-1\\\\/4)","justify-content/flex-start (.justify-start)"],".sf-input .sf-input-field":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-label":["display/flex (.flex)","flex-direction/row (.flex-row)","align-items/flex-start (.items-start)"],".sf-input .sf-input-field input":["flex/1 (.flex-1)"],".sf-input .sf-input-field .sf-icon":["display/flex (.flex)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-text-container":["flex/1 (.flex-1)","display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-group":["display/flex (.flex)","flex-direction/column (.flex-col)","flex-wrap/nowrap (.flex-nowrap)","justify-content/center (.justify-center)","align-items/flex-start (.items-start)"],".sf-input .sf-input-text-container-alt":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","justify-content/center (.justify-center)","align-items/center (.items-center)"],".sf-input .sf-icon-alt":["display/flex (.flex)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"],".sf-input .sf-input-hint-text-wrap":["flex/1 (.flex-1)","display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","gap/var(--sf-b0)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"]}');var a=n("e138a730fd7c"),o=n("98e26702f55a");const l=new WeakMap,u=new WeakSet;let d=null;const c="label.sf-input",f="sfInputBound",h=new Set(["text","email","password","search","tel","url"]),p=new Set(["","none","text","tel","url","email","numeric","decimal","search"]),m=new Set(["bordered","filled","hidden"]);function g(t){if(""===t||null==t)return null;const e=Number(t);return Number.isInteger(e)&&e>=0?e:null}function b(t,e=!1){return null==t||""===t?e:"boolean"==typeof t?t:["1","true","yes","on"].includes(String(t).toLowerCase())}function y(t){return t?.querySelector?.(".sf-input-field input, input")||null}function v(t){return t?.querySelector?.(".sf-input-hint-text-wrap")||null}function w(t){const e=v(t);return{messageNode:e,errorMessage:"error"===e?.dataset.fieldMessage&&e.textContent?.trim()||""}}function x(t){if(!t||"string"!=typeof t)return null;const e=t.trim();if(!e)return null;try{const t=JSON.parse(e);return t&&"object"==typeof t?t:null}catch{return null}}function S(t,e,n){const i={...t},r=n.dataset.maskLazy??e.dataset.maskLazy,s=n.dataset.maskPlaceholderChar??e.dataset.maskPlaceholderChar;return void 0!==r&&""!==r&&(i.lazy=b(r,!0)),void 0!==s&&""!==s&&(i.placeholderChar=String(s)),i}async function $(t,e){const n=function(t,e){if(!b(e.dataset.mask??t.dataset.mask,!1))return null;const n=x(e.dataset.maskOptions),i=x(t.dataset.maskOptions);if(n)return S(n,t,e);if(i)return S(i,t,e);const r=e.dataset.maskPattern??t.dataset.maskPattern;return r?S({mask:String(r)},t,e):null}(t,e);if(!n)return;const i={};t.__sfInputMaskRequest=i;try{const r=await function(){const t=()=>window.SF?.Mask?.create?window.SF.Mask:null,e=t();return e?Promise.resolve(e):d||(d=new Promise(e=>{const n=[[window,"sf-mask-ready"],[window,"sf-loader-ready"],[window,"load"],[document,"DOMContentLoaded"]],i=()=>{const r=t();r&&(n.forEach(([t,e])=>t.removeEventListener(e,i)),d=null,e(r))};n.forEach(([t,e])=>t.addEventListener(e,i))}),d)}();if(t.__sfInputMaskRequest!==i)return;const s=await r.create(e,n);if(!s)return;if("1"!==t.dataset[f]||t.__sfInputMaskRequest!==i||y(t)!==e)return void r.destroy(s);t.__sfInputMask=s}catch(t){console.warn("SF.Input mask init failed",t)}}function k(t){if((0,o.vl)(t,"sf-input"),!t||"1"===t.dataset[f])return;const e=y(t);if(!e)return;const n=()=>{},i=()=>t.classList.add("sf-input--pointer-focus"),r=()=>t.classList.remove("sf-input--pointer-focus");e.addEventListener("input",n),e.addEventListener("pointerdown",i),e.addEventListener("blur",r),t.__sfInputNoopHandler=n,t.__sfInputPointerFocusHandler=i,t.__sfInputBlurHandler=r,t.dataset[f]="1";const s=w(t);(0,a.U)(t,e,{prefix:"sf-input",labelNode:t.querySelector(".sf-input-text"),required:e.required||Boolean(t.querySelector(".sf-input-required")),invalid:t.classList.contains("error")||e.classList.contains("error"),...s}),t.__sfInputReleaseReset=function(t,e){const n=t.ownerDocument;u.has(n)||(n.addEventListener("reset",t=>{const e=t.target;if("FORM"!==e?.tagName)return;const n=Array.from(e.elements);setTimeout(()=>{if(!t.defaultPrevented)for(const t of n)if(t.isConnected&&t.form===e)for(const e of l.get(t)||[])e()},0)},!0),u.add(n));let i=l.get(t);return i||l.set(t,i=new Set),i.add(e),()=>i.delete(e)}(e,()=>{t.__sfInputMask&&(t.__sfInputMask.value=e.value)}),$(t,e)}function _(t){if(!t||"1"!==t.dataset[f])return;delete t.__sfInputMaskRequest;const e=y(t);e&&t.__sfInputNoopHandler&&e.removeEventListener("input",t.__sfInputNoopHandler),e&&t.__sfInputPointerFocusHandler&&e.removeEventListener("pointerdown",t.__sfInputPointerFocusHandler),e&&t.__sfInputBlurHandler&&e.removeEventListener("blur",t.__sfInputBlurHandler),t.__sfInputMask&&window.SF?.Mask?.destroy?.(t.__sfInputMask),t.__sfInputReleaseReset?.(),delete t.__sfInputReleaseReset,delete t.__sfInputMask,delete t.__sfInputNoopHandler,delete t.__sfInputPointerFocusHandler,delete t.__sfInputBlurHandler,t.classList.remove("sf-input--pointer-focus"),delete t.dataset[f]}function I(t=document){t.querySelectorAll(c).forEach(k)}class L extends i{static componentName="Inputs";html=null;constructor(t){super(t);const{size:e="1",type:n="bordered",label:i="",required:r=!1,placeholder:s="",inputType:a="text",autocomplete:l="",inputMode:u="",minLength:d="",maxLength:c="",pattern:f="",hint:y="",value:v="",name:w="",leftIcon:x="",rightText:S="",hintIcon:$="",disabled:k=!1,readonly:_=!1,error:I=!1,invalid:L=!1,errorMessage:E="",mask:A=!1,maskPattern:C="",maskLazy:M="",maskPlaceholderChar:T="",maskOptions:O=""}=this.params||{},P=this.attrs.class||this.attrs.className,q=(0,o.id)(e,"sf-input"),F=function(t,e,n){const i=String(t||n);return e.has(i)?i:n}(n,m,"bordered");this.template=document.createElement("label"),this.id&&(this.template.id=this.id),this.template.classList.add("sf-input",`sf-input--size-${q}`,`sf-input--${F}`),this.template.classList.toggle("error",b(L||I,!1)),this.template.dataset.mask=String(b(A,!1)),this.template.dataset.maskPattern=String(C||""),this.template.dataset.maskLazy=String(M??""),this.template.dataset.maskPlaceholderChar=String(T||""),this.template.dataset.maskOptions=String(O||""),P&&this.template.classList.add(...`${P}`.split(" ").filter(Boolean));const j=document.createElement("span");j.classList.add("sf-input-label");const z=document.createElement("span");if(z.classList.add("sf-input-text"),z.textContent=i,j.append(z),b(r,!0)){const t=document.createElement("span");t.classList.add("sf-input-required"),t.textContent="*",j.append(t)}const V=document.createElement("span");if(V.classList.add("sf-input-field"),x){const t=document.createElement("i");t.classList.add("sf-icon"),t.textContent=String(x),V.append(t)}const N=document.createElement("input");N.type=function(t){const e=String(t||"text").toLowerCase();return h.has(e)?e:"text"}(a),N.placeholder=String(s??""),l&&(N.autocomplete=String(l)),N.inputMode=function(t){const e=String(t||"").toLowerCase();return p.has(e)?e:""}(u);const B=g(d),R=g(c);if(null!==B&&(N.minLength=B),null!==R&&(N.maxLength=R),f&&(N.pattern=String(f)),N.value=String(v??""),N.defaultValue=String(v??""),w&&(N.name=String(w)),N.disabled=b(k,!1),N.readOnly=b(_,!1),N.required=b(r,!0),N.dataset.mask=String(b(A,!1)),N.dataset.maskPattern=String(C||""),N.dataset.maskLazy=String(M??""),N.dataset.maskPlaceholderChar=String(T||""),N.dataset.maskOptions=String(O||""),N.classList.toggle("error",b(L||I,!1)),V.append(N),S){const t=document.createElement("span");t.classList.add("sf-input-right"),t.textContent=String(S),V.append(t)}if($){const t=document.createElement("i");t.classList.add("sf-icon","sf-icon-hint"),t.textContent=String($),V.append(t)}this.template.append(j,V);const D=b(L||I,!1)&&E?E:y;if(D){const t=document.createElement("span");t.classList.add("sf-input-hint-text-wrap"),t.textContent=String(D),t.dataset.fieldMessage=b(L||I,!1)&&E?"error":"hint",this.template.append(t)}this.applyLayoutUtilities(this.template,".sf-input"),this.applyLayoutUtilities(j,".sf-input .sf-input-label"),this.applyLayoutUtilities(V,".sf-input .sf-input-field"),this.applyLayoutUtilities(N,".sf-input .sf-input-field input")}init(){k(this.template)}destroyInternal(){_(this.template)}}L.utilityMap=s,r("Inputs",L),"undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.Input=window.SF.Input||{},window.SF.Input.setState=function(t,e={}){const n=t instanceof HTMLElement?t.closest(c)||t:null;if(!n)return!1;const i=y(n);if(!i)return!1;if(Object.prototype.hasOwnProperty.call(e,"disabled")&&(i.disabled=b(e.disabled)),Object.prototype.hasOwnProperty.call(e,"error")){const t=b(e.error);n.classList.toggle("error",t),i.classList.toggle("error",t)}if(Object.prototype.hasOwnProperty.call(e,"invalid")){const t=b(e.invalid);n.classList.toggle("error",t),i.classList.toggle("error",t)}if(Object.prototype.hasOwnProperty.call(e,"errorMessage")){const t=String(e.errorMessage??""),r=t?function(t){const e=v(t);if(e)return e;const n=document.createElement("span");return n.classList.add("sf-input-hint-text-wrap"),t.append(n),n}(n):v(n);if(r){r.textContent=t;const e=n.classList.contains("error")||i.classList.contains("error");r.dataset.fieldMessage=t&&e?"error":"hint"}}return Object.prototype.hasOwnProperty.call(e,"value")&&(i.value=String(e.value??""),i.dispatchEvent(new Event("input",{bubbles:!0}))),(0,a.U)(n,i,{prefix:"sf-input",labelNode:n.querySelector(".sf-input-text"),required:i.required||Boolean(n.querySelector(".sf-input-required")),invalid:n.classList.contains("error")||i.classList.contains("error"),...w(n)}),!0}),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>I()):I();new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof Element&&(t.matches?.(c)&&k(t),I(t))})})}).observe(document.documentElement,{childList:!0,subtree:!0})},"778671c79fa6"(t,e,n){n.a(t,async(t,i)=>{try{n.d(e,{vZ:()=>f});var r=n("ddf1cdb42ecc"),s=n("0d662e4d7d63"),a=t([r,s]);[r,s]=a.then?(await a)():a;const o="sf-field:reset",l={en:{inherited:"inherited",reset:"Reset to inherited",described:"Inherited: {value}"},ru:{inherited:"наследуется",reset:"Сбросить к наследуемому",described:"Наследуется: {value}"}},u=Object.freeze({"1/2":"1/3",1:"1/2",2:"1"}),d=t=>u[String(t)]||"1/2",c=t=>class extends t{constructor(){super(),this.__sfInheritedSync=()=>this.syncInheritedState(),this.addEventListener("input",this.__sfInheritedSync),this.addEventListener("change",this.__sfInheritedSync)}get inheritedValue(){return this.getAttribute("inherited-value")||""}set inheritedValue(t){null==t||""===t?this.removeAttribute("inherited-value"):this.setAttribute("inherited-value",String(t))}get inheritedText(){return this.getAttribute("inherited-text")||(0,s.pageText)(l,"inherited",this)}get resetLabel(){return this.getAttribute("reset-label")||(0,s.pageText)(l,"reset",this)}get hasInheritedValue(){return""!==this.inheritedValue}get isInherited(){return this.hasInheritedValue&&""===this.inheritedOwnValue()}inheritedOwnValue(){return String(this.value??"")}inheritedDisplayValue(){return this.inheritedValue}inheritedFocusTarget(){return null}clearOwnValue(){this.value=""}inheritedDescription(){return(0,s.pageText)(l,"described",this).replace("{value}",this.inheritedDisplayValue())}resetToInherited(){if(!this.hasInheritedValue||""===this.inheritedOwnValue())return!1;if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return!1;const t=new CustomEvent(o,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.inheritedOwnValue(),inheritedValue:this.inheritedValue,name:this.getAttribute("name")||""}});if(!this.dispatchEvent(t))return!1;this.clearOwnValue(),this.syncInheritedState();const e=()=>this.inheritedFocusTarget()?.focus?.({preventScroll:!0});return e(),this.contains(document.activeElement)||requestAnimationFrame(e),!0}syncInheritedState(){if(!this.hasInheritedValue&&!this.__sfInheritedDescribed)return void this.removeAttribute("data-inherited");const t=this.isInherited,e=this.hasInheritedValue&&!t;t?this.setAttribute("data-inherited","true"):this.removeAttribute("data-inherited"),this.querySelectorAll(":scope [data-inherited-marker]").forEach(e=>{e.hidden=!t}),this.querySelectorAll(":scope [data-inherited-reset]").forEach(t=>{t.hidden=!e});const n=this.inheritedFocusTarget();n&&(t?(n.setAttribute("aria-description",this.inheritedDescription()),this.__sfInheritedDescribed=n):this.__sfInheritedDescribed===n&&(n.removeAttribute("aria-description"),this.__sfInheritedDescribed=null))}};function f(t,{size:e="1",disabled:n=!1,className:i=""}={}){if(!t?.hasInheritedValue)return r.nothing;const s=d(e),a=t.isInherited;return r.html`
|
|
2
|
+
<span class="sf-field-inherited-slot sf-field-inherited-slot--size-${e} flex items-cross-center ${i}">
|
|
3
|
+
<span class="sf-field-inherited sf-field-inherited--size-${s}"
|
|
4
|
+
data-inherited-marker
|
|
5
|
+
aria-hidden="true"
|
|
6
|
+
?hidden=${!a}>${t.inheritedText}</span>
|
|
7
|
+
<button
|
|
8
|
+
type="button"
|
|
9
|
+
class="sf-field-reset sf-icon-button sf-icon-button--icon sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-${s}"
|
|
10
|
+
data-inherited-reset
|
|
11
|
+
aria-label=${t.resetLabel}
|
|
12
|
+
title=${t.resetLabel}
|
|
13
|
+
?hidden=${a}
|
|
14
|
+
?disabled=${n}
|
|
15
|
+
@click=${e=>{e.preventDefault(),e.stopPropagation(),t.resetToInherited()}}
|
|
16
|
+
><i class="sf-icon" aria-hidden="true">restart_alt</i></button>
|
|
17
|
+
</span>
|
|
18
|
+
`}n.d(e,["kU",0,c]),i()}catch(h){i(h)}})},"44b791419862"(t,e,n){n.a(t,async(t,e)=>{try{var i=n("f8ed4bd5aa8a"),r=n("fbe0570fcc69"),s=n("98e26702f55a"),a=n("778671c79fa6"),o=n("e602dd4d6e16"),l=t([r,a,o]);[r,a,o]=l.then?(await l)():l;var u=n.n(r);const d=new Set(["text","email","password","search","tel","url"]),c=new Set(["","none","text","tel","url","email","numeric","decimal","search"]),f=(new Set(["bordered","filled","hidden"]),(t,e,n)=>e.has(t)?t:n);class h extends((0,a.kU)(u())){static get props(){return{size:{default:"1"},appearance:{default:"bordered",values:["bordered","filled","hidden"],aliases:["type"]},label:{default:""},required:{type:Boolean,default:!1},placeholder:{default:""},inputType:{default:"text"},autocomplete:{default:""},inputmode:{default:""},minlength:{default:""},maxlength:{default:""},pattern:{default:""},hint:{default:""},value:{default:""},defaultValue:{default:""},name:{default:""},iconStart:{type:String,default:null},textEnd:{type:String,default:null},leftIcon:{default:""},rightText:{default:""},hintIcon:{default:""},rootClass:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},error:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},errorMessage:{default:""},mask:{type:Boolean,default:!1},maskPattern:{default:""},maskLazy:{default:""},maskPlaceholderChar:{default:""},maskOptions:{default:""},ariaLabel:{attribute:"aria-label",default:""},inheritedValue:{attribute:"inherited-value",default:""},inheritedText:{attribute:"inherited-text",default:""},resetLabel:{attribute:"reset-label",default:""}}}constructor(){super(),this._boundRoot=null}get size(){return(0,s.id)(this.getAttribute("size")||"1","sf-input")}get appearance(){return this.getProp("appearance")}get type(){return this.appearance}get label(){return this.getAttribute("label")||""}get required(){return this.getBooleanAttr("required",!1)}get placeholder(){return this.getAttribute("placeholder")||""}get inputType(){return f(this.getAttribute("input-type")||"text",d,"text")}get autocomplete(){return this.getAttribute("autocomplete")||""}get inputmode(){return f(this.getAttribute("inputmode")||"",c,"")}get minlength(){return this.getAttribute("minlength")||""}get maxlength(){return this.getAttribute("maxlength")||""}get pattern(){return this.getAttribute("pattern")||""}get hint(){return this.getAttribute("hint")||""}get value(){const t=this.getInputElement();return t?t.value:this.getAttribute("value")||""}set value(t){const e=this.getInputElement(),n=String(t??"");null==t?this.removeAttribute("value"):this.setAttribute("value",n);const i=this.querySelector(".sf-input")?.__sfInputMask;i?i.value=n:e&&e.value!==n&&(e.value=n)}get defaultValue(){return this.getAttribute("default-value")??this.getAttribute("value")??""}set defaultValue(t){null!=t?this.setAttribute("default-value",String(t)):this.removeAttribute("default-value")}get name(){return this.getAttribute("name")||""}get leftIcon(){return this.getAttribute("icon-start")??this.getAttribute("left-icon")??""}get rightText(){return this.getAttribute("text-end")??this.getAttribute("right-text")??""}get iconStart(){return this.leftIcon}get textEnd(){return this.rightText}get hintIcon(){return this.getAttribute("hint-icon")||""}get disabled(){return this.getBooleanAttr("disabled",!1)}get readonly(){return this.getBooleanAttr("readonly",!1)}get error(){return this.getBooleanAttr("error",!1)}get invalid(){return this.getBooleanAttr("invalid",!1)}get errorMessage(){return this.getAttribute("error-message")||""}get mask(){return this.getBooleanAttr("mask",!1)}get maskPattern(){return this.getAttribute("mask-pattern")||""}get maskLazy(){return this.hasAttribute("mask-lazy")?this.getBooleanAttr("mask-lazy",!0):""}get maskPlaceholderChar(){return this.getAttribute("mask-placeholder-char")||""}get maskOptions(){return this.getAttribute("mask-options")||""}get ariaLabel(){return this.getProp("ariaLabel")||""}inheritedFocusTarget(){return this.getInputElement()}clearOwnValue(){const t=this.getInputElement();if(this.hasAttribute("value"))this.value="";else{const e=this.querySelector(".sf-input")?.__sfInputMask;e?e.value="":t&&(t.value="")}t?.dispatchEvent(new Event("input",{bubbles:!0})),t?.dispatchEvent(new Event("change",{bubbles:!0}))}templateContext(){const t=this.getPropsContext(),e=this.hasAttribute("value"),n=this.getInputElement();return this.createTemplateContext({...t,leftIcon:t.iconStart??t.leftIcon,rightText:t.textEnd??t.rightText,iconStart:this.iconStart,textEnd:this.textEnd,type:this.type,maskLazy:this.maskLazy,value:e?t.value:n?n.value:this.defaultValue,defaultValue:this.defaultValue,hasControlledValue:e,inheritedValue:this.inheritedValue,inheritedText:this.inheritedText,resetLabel:this.resetLabel,component:this})}onDisconnected(){this._boundRoot&&((0,i.Lu)(this._boundRoot),this._boundRoot=null)}afterRender(){if(this._boundRoot&&((0,i.Lu)(this._boundRoot),this._boundRoot=null),this._boundRoot=this.querySelector(".sf-input"),this._boundRoot){const t=this.invalid||this.error;this._boundRoot.classList.toggle("error",t),this.getInputElement()?.classList.toggle("error",t),(0,i.m3)(this._boundRoot)}this.syncInheritedState()}getInputElement(){return this.querySelector(".sf-input-field input, input")}template(){return(0,o.P)(this.templateContext())}get state(){const t=this.querySelector(".sf-input"),e=this.getInputElement();return{value:e?.value||"",disabled:!!e?.disabled,invalid:"true"===e?.getAttribute("aria-invalid"),error:t?.classList?.contains("error")||e?.classList?.contains("error")||!1}}onInput(t,e){return"function"==typeof t&&this.addEventListener("input",t,e),this}onChange(t,e){return"function"==typeof t&&this.addEventListener("change",t,e),this}onKeyUp(t,e){return"function"==typeof t&&this.addEventListener("keyup",t,e),this}onKeyDown(t,e){return"function"==typeof t&&this.addEventListener("keydown",t,e),this}onFocus(t,e){return"function"==typeof t&&this.addEventListener("focusin",t,e),this}onBlur(t,e){return"function"==typeof t&&this.addEventListener("focusout",t,e),this}}h.define("sf-input"),e()}catch(t){e(t)}})},e602dd4d6e16(t,e,n){n.a(t,async(t,i)=>{try{n.d(e,{P:()=>l});var r=n("ddf1cdb42ecc"),s=n("e138a730fd7c"),a=n("778671c79fa6"),o=t([r,a]);[r,a]=o.then?(await o)():o;function l(t){const{size:e,appearance:n,type:i,label:o,required:l,placeholder:u,inputType:d,autocomplete:c,inputmode:f,minlength:h,maxlength:p,pattern:m,hint:g,value:b,defaultValue:y,hasControlledValue:v,name:w,leftIcon:x,rightText:S,hintIcon:$,disabled:k,error:_,invalid:I,errorMessage:L,mask:E,rootClass:A,rootStyle:C,readonly:M,maskPattern:T,maskLazy:O,maskPlaceholderChar:P,maskOptions:q,ariaLabel:F}=t,j=""===O?"":String(O),z=t.inheritedValue||u,V=(0,a.vZ)(t.component,{size:e,disabled:k||M}),N=v?b:y,B=(0,s.h)(t.component,{prefix:"sf-input",required:l,invalid:I||_,hint:g,errorMessage:L}),R=["sf-input",B.invalid?"error":"",`sf-input--size-${e}`,`sf-input--${n??i}`,A,"flex","flex-col"];if("hidden"===i)return r.html`<input
|
|
2
19
|
style=${C||r.nothing}
|
|
3
20
|
type="hidden"
|
|
4
|
-
.value=${
|
|
21
|
+
.value=${N}
|
|
5
22
|
name=${w||""}
|
|
6
|
-
?disabled=${
|
|
7
|
-
?readonly=${
|
|
8
|
-
data-mask=${String(
|
|
9
|
-
data-mask-pattern=${
|
|
10
|
-
data-mask-lazy=${
|
|
11
|
-
data-mask-placeholder-char=${
|
|
12
|
-
data-mask-options=${
|
|
13
|
-
/>`;const
|
|
14
|
-
<span class="sf-input-text">${
|
|
15
|
-
${
|
|
16
|
-
`:"",
|
|
17
|
-
${
|
|
18
|
-
${
|
|
19
|
-
`,
|
|
23
|
+
?disabled=${k}
|
|
24
|
+
?readonly=${M}
|
|
25
|
+
data-mask=${String(E)}
|
|
26
|
+
data-mask-pattern=${T||""}
|
|
27
|
+
data-mask-lazy=${j}
|
|
28
|
+
data-mask-placeholder-char=${P||""}
|
|
29
|
+
data-mask-options=${q||""}
|
|
30
|
+
/>`;const D=t.component?.hasSlotContent?.("label")?t.component.getSlotContent("label"):o?r.html`
|
|
31
|
+
<span class="sf-input-text">${o}</span>
|
|
32
|
+
${l?r.html`<span class="sf-input-required">*</span>`:""}
|
|
33
|
+
`:"",U=t.component?.hasSlotContent?.("start")?t.component.getSlotContent("start"):t.component?.hasSlotContent?.("left")?t.component.getSlotContent("left"):x?r.html`<span class="sf-input-left flex"><sf-icon icon="${x}"></sf-icon></span>`:"",H=t.component?.hasSlotContent?.("end")?t.component.getSlotContent("end"):t.component?.hasSlotContent?.("right")?t.component.getSlotContent("right"):r.html`
|
|
34
|
+
${S?r.html`<span class="sf-input-right"><span class="sf-input-text">${S}</span></span>`:""}
|
|
35
|
+
${$?r.html`<span class="sf-input-hint flex"><sf-icon icon="${$}"></sf-icon></span>`:""}
|
|
36
|
+
`,W=t.component?.hasSlotContent?.("hint")?t.component.getSlotContent("hint"):g,G=t.component?.hasSlotContent?.("error")?t.component.getSlotContent("error"):L,J=B.invalid&&G?G:W,K=!D&&F?F:r.nothing;return r.html`
|
|
20
37
|
<label
|
|
21
|
-
class=${
|
|
38
|
+
class=${R.join(" ")}
|
|
22
39
|
style=${C||r.nothing}
|
|
23
|
-
data-mask=${String(
|
|
24
|
-
data-mask-pattern=${
|
|
25
|
-
data-mask-lazy=${
|
|
26
|
-
data-mask-placeholder-char=${
|
|
27
|
-
data-mask-options=${
|
|
40
|
+
data-mask=${String(E)}
|
|
41
|
+
data-mask-pattern=${T||""}
|
|
42
|
+
data-mask-lazy=${j}
|
|
43
|
+
data-mask-placeholder-char=${P||""}
|
|
44
|
+
data-mask-options=${q||""}
|
|
28
45
|
>
|
|
29
|
-
${
|
|
46
|
+
${D?r.html`
|
|
30
47
|
<span class="sf-input-label flex">
|
|
31
|
-
${
|
|
48
|
+
${D}
|
|
32
49
|
</span>
|
|
33
50
|
`:""}
|
|
34
51
|
|
|
35
52
|
<span class="sf-input-field items-cross-center transition flex">
|
|
36
|
-
${
|
|
37
|
-
${
|
|
53
|
+
${U}
|
|
54
|
+
${v?r.html`
|
|
38
55
|
<input
|
|
39
|
-
id=${
|
|
40
|
-
type=${
|
|
41
|
-
autocomplete=${
|
|
42
|
-
inputmode=${
|
|
43
|
-
minlength=${""===
|
|
44
|
-
maxlength=${""===
|
|
45
|
-
pattern=${
|
|
46
|
-
placeholder=${
|
|
47
|
-
.value=${
|
|
48
|
-
.defaultValue=${
|
|
56
|
+
id=${B.controlId}
|
|
57
|
+
type=${d}
|
|
58
|
+
autocomplete=${c||r.nothing}
|
|
59
|
+
inputmode=${f||r.nothing}
|
|
60
|
+
minlength=${""===h?r.nothing:h}
|
|
61
|
+
maxlength=${""===p?r.nothing:p}
|
|
62
|
+
pattern=${m||r.nothing}
|
|
63
|
+
placeholder=${z}
|
|
64
|
+
.value=${b}
|
|
65
|
+
.defaultValue=${y}
|
|
49
66
|
name=${w||""}
|
|
50
|
-
?disabled=${
|
|
51
|
-
?readonly=${
|
|
52
|
-
?required=${
|
|
53
|
-
aria-label=${
|
|
54
|
-
aria-invalid=${
|
|
55
|
-
aria-describedby=${
|
|
56
|
-
aria-errormessage=${
|
|
57
|
-
data-mask=${String(
|
|
58
|
-
data-mask-pattern=${
|
|
59
|
-
data-mask-lazy=${
|
|
60
|
-
data-mask-placeholder-char=${
|
|
61
|
-
data-mask-options=${
|
|
67
|
+
?disabled=${k}
|
|
68
|
+
?readonly=${M}
|
|
69
|
+
?required=${B.required}
|
|
70
|
+
aria-label=${K}
|
|
71
|
+
aria-invalid=${B.invalid?"true":r.nothing}
|
|
72
|
+
aria-describedby=${J?B.messageId:r.nothing}
|
|
73
|
+
aria-errormessage=${B.invalid&&G?B.messageId:r.nothing}
|
|
74
|
+
data-mask=${String(E)}
|
|
75
|
+
data-mask-pattern=${T||""}
|
|
76
|
+
data-mask-lazy=${j}
|
|
77
|
+
data-mask-placeholder-char=${P||""}
|
|
78
|
+
data-mask-options=${q||""}
|
|
62
79
|
/>
|
|
63
80
|
`:r.html`
|
|
64
81
|
<input
|
|
65
|
-
id=${
|
|
66
|
-
type=${
|
|
67
|
-
autocomplete=${
|
|
68
|
-
inputmode=${
|
|
69
|
-
minlength=${""===
|
|
70
|
-
maxlength=${""===
|
|
71
|
-
pattern=${
|
|
72
|
-
placeholder=${
|
|
73
|
-
.defaultValue=${
|
|
74
|
-
.value=${
|
|
82
|
+
id=${B.controlId}
|
|
83
|
+
type=${d}
|
|
84
|
+
autocomplete=${c||r.nothing}
|
|
85
|
+
inputmode=${f||r.nothing}
|
|
86
|
+
minlength=${""===h?r.nothing:h}
|
|
87
|
+
maxlength=${""===p?r.nothing:p}
|
|
88
|
+
pattern=${m||r.nothing}
|
|
89
|
+
placeholder=${z}
|
|
90
|
+
.defaultValue=${N}
|
|
91
|
+
.value=${b}
|
|
75
92
|
name=${w||""}
|
|
76
|
-
?disabled=${
|
|
77
|
-
?readonly=${
|
|
78
|
-
?required=${
|
|
79
|
-
aria-label=${
|
|
80
|
-
aria-invalid=${
|
|
81
|
-
aria-describedby=${
|
|
82
|
-
aria-errormessage=${
|
|
83
|
-
data-mask=${String(
|
|
84
|
-
data-mask-pattern=${
|
|
85
|
-
data-mask-lazy=${
|
|
86
|
-
data-mask-placeholder-char=${
|
|
87
|
-
data-mask-options=${
|
|
93
|
+
?disabled=${k}
|
|
94
|
+
?readonly=${M}
|
|
95
|
+
?required=${B.required}
|
|
96
|
+
aria-label=${K}
|
|
97
|
+
aria-invalid=${B.invalid?"true":r.nothing}
|
|
98
|
+
aria-describedby=${J?B.messageId:r.nothing}
|
|
99
|
+
aria-errormessage=${B.invalid&&G?B.messageId:r.nothing}
|
|
100
|
+
data-mask=${String(E)}
|
|
101
|
+
data-mask-pattern=${T||""}
|
|
102
|
+
data-mask-lazy=${j}
|
|
103
|
+
data-mask-placeholder-char=${P||""}
|
|
104
|
+
data-mask-options=${q||""}
|
|
88
105
|
/>
|
|
89
106
|
`}
|
|
107
|
+
${V}
|
|
90
108
|
${H}
|
|
91
109
|
</span>
|
|
92
110
|
|
|
93
|
-
${
|
|
94
|
-
id=${
|
|
111
|
+
${J?r.html`<span
|
|
112
|
+
id=${B.messageId}
|
|
95
113
|
class="sf-input-hint-text-wrap"
|
|
96
|
-
data-field-message=${
|
|
97
|
-
>${
|
|
114
|
+
data-field-message=${B.invalid&&G?"error":"hint"}
|
|
115
|
+
>${J}</span>`:""}
|
|
98
116
|
</label>
|
|
99
|
-
`}
|
|
117
|
+
`}i()}catch(u){i(u)}})},ddf1cdb42ecc(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const e={};function n(i){const r=e[i];if(void 0!==r)return r.exports;const s=e[i]={exports:{}};return t[i](s,s.exports,n),s.exports}(()=>{const t="function"==typeof Symbol,e=t?Symbol("webpack queues"):"__webpack_queues__",i=t?Symbol("webpack exports"):"__webpack_exports__",r=t?Symbol("webpack error"):"__webpack_error__",s=t=>{t?.d<1&&(t.d=1,t.forEach(t=>t.r--),t.forEach(t=>t.r--?t.r++:t()))};n.a=(t,n,a)=>{let o;a&&((o=[]).d=-1);const l=new Set,u=t.exports;let d,c,f;const h=new Promise((t,e)=>{f=e,c=t});h[i]=u,h[e]=t=>(o&&t(o),l.forEach(t),h.catch(t=>{})),t.exports=h;n(t=>{let n;d=(t=>t.map(t=>{if(null!==t&&"object"==typeof t){if(t[e])return t;if(t.then){const n=[];n.d=0,t.then(t=>{a[i]=t,s(n)},t=>{a[r]=t,s(n)});const a={};return a[e]=t=>t(n),a}}const n={};return n[e]=t=>{},n[i]=t,n}))(t);const a=()=>d.map(t=>{if(t[r])throw t[r];return t[i]}),u=new Promise(t=>{n=()=>t(a),n.r=0;const i=t=>t!==o&&!l.has(t)&&(l.add(t),t&&!t.d&&(n.r++,t.push(n)));d.map(t=>t[e](i))});return n.r?u:a()},t=>(t?f(h[r]=t):c(u),s(o))),o?.d<0&&(o.d=0)}})(),n.n=t=>{const e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{if(Array.isArray(e))for(var i=0;i<e.length;){var r=e[i++],s=e[i++];n.o(t,r)?0===s&&i++:0===s?Object.defineProperty(t,r,{enumerable:!0,value:e[i++]}):Object.defineProperty(t,r,{enumerable:!0,get:s})}else for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);n("44b791419862")})();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schema_version": 2,
|
|
3
3
|
"id": "smart.inputs",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.2.0",
|
|
5
5
|
"title": "Inputs",
|
|
6
6
|
"summary": "A native single-line form control with Framework presentation, validation messaging and optional mask integration.",
|
|
7
7
|
"kind": "smart",
|
|
@@ -205,6 +205,21 @@
|
|
|
205
205
|
"type": "string",
|
|
206
206
|
"default": "",
|
|
207
207
|
"description": "Accessible name for a field rendered without a visible label; it lands on the native input."
|
|
208
|
+
},
|
|
209
|
+
"inherited-value": {
|
|
210
|
+
"type": "string",
|
|
211
|
+
"default": "",
|
|
212
|
+
"description": "What the field falls back to while it holds no value of its own -- a default from a parent setting, a brand, a theme. Shown as inherited, in the placeholder's ink with an «inherited» marker, never as the value: the form value stays empty. Once the field holds a value of its own, a reset button returns it here. A number field is sf-input with inputmode numeric or decimal and takes it the same way."
|
|
213
|
+
},
|
|
214
|
+
"inherited-text": {
|
|
215
|
+
"type": "string",
|
|
216
|
+
"default": "",
|
|
217
|
+
"description": "The words of the marker shown while the inherited value applies. Unset, it follows the page's language («inherited», «наследуется»)."
|
|
218
|
+
},
|
|
219
|
+
"reset-label": {
|
|
220
|
+
"type": "string",
|
|
221
|
+
"default": "",
|
|
222
|
+
"description": "The accessible name of the button that returns the field to the inherited value. Unset, it follows the page's language («Reset to inherited», «Сбросить к наследуемому»)."
|
|
208
223
|
}
|
|
209
224
|
},
|
|
210
225
|
"additionalProperties": false
|
|
@@ -382,6 +397,14 @@
|
|
|
382
397
|
"type": "object",
|
|
383
398
|
"description": "The element, for chaining."
|
|
384
399
|
}
|
|
400
|
+
},
|
|
401
|
+
"resetToInherited": {
|
|
402
|
+
"summary": "Returns the field to its inherited value, as the reset button does: fires the cancellable sf-field:reset, then empties the own value and focuses the control. Returns whether it was reset (false without an inherited value, without an own value, while disabled or readonly, or when the event was prevented).",
|
|
403
|
+
"arguments": [],
|
|
404
|
+
"returns": {
|
|
405
|
+
"type": "boolean",
|
|
406
|
+
"description": "Whether the field was reset."
|
|
407
|
+
}
|
|
385
408
|
}
|
|
386
409
|
},
|
|
387
410
|
"events": {
|
|
@@ -399,6 +422,26 @@
|
|
|
399
422
|
"type": "null",
|
|
400
423
|
"description": "A native Event: there is no detail."
|
|
401
424
|
}
|
|
425
|
+
},
|
|
426
|
+
"sf-field:reset": {
|
|
427
|
+
"summary": "The person pressed the reset back to the inherited value. Fired before the field is emptied and cancellable: preventDefault keeps the value. When it is not prevented the field empties, says so with its ordinary change, shows the inherited value again and takes focus back.",
|
|
428
|
+
"payload": {
|
|
429
|
+
"type": "object",
|
|
430
|
+
"properties": {
|
|
431
|
+
"value": {
|
|
432
|
+
"type": "string",
|
|
433
|
+
"description": "The field's own value before the reset."
|
|
434
|
+
},
|
|
435
|
+
"inheritedValue": {
|
|
436
|
+
"type": "string",
|
|
437
|
+
"description": "The inherited value it returns to."
|
|
438
|
+
},
|
|
439
|
+
"name": {
|
|
440
|
+
"type": "string",
|
|
441
|
+
"description": "The form name, empty when the field has none."
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
}
|
|
402
445
|
}
|
|
403
446
|
},
|
|
404
447
|
"state": {
|
|
@@ -440,7 +483,7 @@
|
|
|
440
483
|
"Tab",
|
|
441
484
|
"native text editing"
|
|
442
485
|
],
|
|
443
|
-
"focus": "Keep visible focus on the active control."
|
|
486
|
+
"focus": "Keep visible focus on the active control. After a reset back to the inherited value, focus returns to the control; while the value is inherited, the control carries it as aria-description and the visible marker is aria-hidden."
|
|
444
487
|
},
|
|
445
488
|
"presentation": {
|
|
446
489
|
"themes": [
|
|
@@ -502,7 +545,23 @@
|
|
|
502
545
|
"source_artifacts": [
|
|
503
546
|
{
|
|
504
547
|
"path": "src/smart/inputs/index.js",
|
|
505
|
-
"sha256": "
|
|
548
|
+
"sha256": "faf537081abaeb4783d19f98462d7b98e644e806003fb72cacd8dadb15ff469a"
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"path": "src/smart/inputs/rule.js",
|
|
552
|
+
"sha256": "6cb3199df8e04d261cdb5324b5b94fa60ebe5e94fd11a04d11bba32e15e1d3db"
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"path": "src/smart/inputs/js/templates/default.js",
|
|
556
|
+
"sha256": "0ff4836618d8620cc1dc7f0a50fa0c86b2d7074c8dcaabfc8e7a2f664fb76b99"
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
"path": "src/smart/helpers/inherited-value.js",
|
|
560
|
+
"sha256": "0c8658ab61678cd5f89badea902be244b92ba96240fb802c60438227f8f9faa9"
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"path": "src/smart/helpers/inherited-value.css",
|
|
564
|
+
"sha256": "2a10b6d5c8e26c7d1541511c99257e9474b16d30c6e8352e96ed9b47f70b6a2a"
|
|
506
565
|
}
|
|
507
566
|
],
|
|
508
567
|
"generated_runtime": [
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { html, nothing } from 'lit';
|
|
2
2
|
import { createFieldContract } from '../../../../component/field-contract';
|
|
3
|
+
import { renderInheritedSlot } from '../../../helpers/inherited-value';
|
|
3
4
|
import './default.css'
|
|
4
5
|
export function renderInputTemplate(context) {
|
|
5
6
|
const {
|
|
@@ -38,6 +39,10 @@ export function renderInputTemplate(context) {
|
|
|
38
39
|
ariaLabel,
|
|
39
40
|
} = context;
|
|
40
41
|
const maskLazyValue = maskLazy === '' ? '' : String(maskLazy);
|
|
42
|
+
// While the field holds nothing of its own, the inherited value is what the
|
|
43
|
+
// empty field shows, in the placeholder's ink -- never as its value.
|
|
44
|
+
const shownPlaceholder = context.inheritedValue || placeholder;
|
|
45
|
+
const inheritedSlot = renderInheritedSlot(context.component, {size, disabled: disabled || readonly});
|
|
41
46
|
const inputValue = hasControlledValue ? value : defaultValue;
|
|
42
47
|
const field = createFieldContract(context.component, {
|
|
43
48
|
prefix: 'sf-input',
|
|
@@ -152,7 +157,7 @@ export function renderInputTemplate(context) {
|
|
|
152
157
|
minlength=${minlength === '' ? nothing : minlength}
|
|
153
158
|
maxlength=${maxlength === '' ? nothing : maxlength}
|
|
154
159
|
pattern=${pattern || nothing}
|
|
155
|
-
placeholder=${
|
|
160
|
+
placeholder=${shownPlaceholder}
|
|
156
161
|
.value=${value}
|
|
157
162
|
.defaultValue=${defaultValue}
|
|
158
163
|
name=${name || ''}
|
|
@@ -179,7 +184,7 @@ export function renderInputTemplate(context) {
|
|
|
179
184
|
minlength=${minlength === '' ? nothing : minlength}
|
|
180
185
|
maxlength=${maxlength === '' ? nothing : maxlength}
|
|
181
186
|
pattern=${pattern || nothing}
|
|
182
|
-
placeholder=${
|
|
187
|
+
placeholder=${shownPlaceholder}
|
|
183
188
|
.defaultValue=${inputValue}
|
|
184
189
|
.value=${value}
|
|
185
190
|
name=${name || ''}
|
|
@@ -197,6 +202,7 @@ export function renderInputTemplate(context) {
|
|
|
197
202
|
data-mask-options=${maskOptions || ''}
|
|
198
203
|
/>
|
|
199
204
|
`}
|
|
205
|
+
${inheritedSlot}
|
|
200
206
|
${rightContent}
|
|
201
207
|
</span>
|
|
202
208
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer sf.base{sf-sortable{display:block}}@layer sf.components{[data-sf-sortable-item][data-sf-sortable-dragging]{opacity:.4}[data-sf-sortable-item].focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);outline-offset:2px}[data-sf-sortable-item].focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);outline-offset:2px}[data-sf-sortable-item]:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);outline-offset:2px}[data-sf-sortable-handle]{cursor:-webkit-grab;cursor:grab;touch-action:none}.sf-sortable-ghost{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));margin:0;pointer-events:none;opacity:.9;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);box-shadow:var(--sf-ui-shadow-4, 0 4px 12px rgba(0, 0, 0, 0.3))}.sf-sortable-indicator{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));border-radius:2px;background:Highlight;background:var(--sf-primary, Highlight);pointer-events:none}.sf-sortable-indicator[hidden]{display:none}[data-sf-sortable-item][data-sf-sortable-lifted]{display:none !important}.sf-sortable-column-outline{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));box-sizing:border-box;border:var(--sf-px) dashed Highlight;border:var(--sf-px) dashed var(--sf-outline-primary, var(--sf-primary, Highlight));border-radius:4px;border-radius:var(--sf-radius--ui, 4px);background-color:transparent;background-color:var(--sf-primary-transparent-select, transparent);pointer-events:none}[data-sf-sortable-column-source]{opacity:.4}.sf-sortable-placeholder{box-sizing:border-box;flex:none;border:var(--sf-px) dashed Highlight;border:var(--sf-px) dashed var(--sf-outline-primary, var(--sf-primary, Highlight));border-radius:4px;border-radius:var(--sf-radius--ui, 4px);background-color:transparent;background-color:var(--sf-primary-transparent-select, transparent);pointer-events:none}.sf-sortable-live{position:absolute;width:1px;inline-size:1px;height:1px;block-size:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}html[data-sf-sortable-active],html[data-sf-sortable-active] *{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}
|
|
1
|
+
@layer sf.base{sf-sortable{display:block}sf-sortable[data-sf-sortable-inserter]{position:relative}}@layer sf.components{[data-sf-sortable-item][data-sf-sortable-dragging]{opacity:.4}[data-sf-sortable-item].focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);outline-offset:2px}[data-sf-sortable-item].focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);outline-offset:2px}[data-sf-sortable-item]:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) Highlight;outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);outline-offset:2px}[data-sf-sortable-handle]{cursor:-webkit-grab;cursor:grab;touch-action:none}.sf-sortable-ghost{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));margin:0;pointer-events:none;opacity:.9;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);box-shadow:var(--sf-ui-shadow-4, 0 4px 12px rgba(0, 0, 0, 0.3))}.sf-sortable-indicator{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));border-radius:2px;background:Highlight;background:var(--sf-primary, Highlight);pointer-events:none}.sf-sortable-indicator[hidden]{display:none}[data-sf-sortable-item][data-sf-sortable-lifted]{display:none !important}.sf-sortable-column-outline{position:fixed;z-index:90;z-index:var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));box-sizing:border-box;border:var(--sf-px) dashed Highlight;border:var(--sf-px) dashed var(--sf-outline-primary, var(--sf-primary, Highlight));border-radius:4px;border-radius:var(--sf-radius--ui, 4px);background-color:transparent;background-color:var(--sf-primary-transparent-select, transparent);pointer-events:none}[data-sf-sortable-column-source]{opacity:.4}.sf-sortable-placeholder{box-sizing:border-box;flex:none;border:var(--sf-px) dashed Highlight;border:var(--sf-px) dashed var(--sf-outline-primary, var(--sf-primary, Highlight));border-radius:4px;border-radius:var(--sf-radius--ui, 4px);background-color:transparent;background-color:var(--sf-primary-transparent-select, transparent);pointer-events:none}.sf-sortable-live{position:absolute;width:1px;inline-size:1px;height:1px;block-size:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.sf-sortable-insert{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}.sf-sortable-insert[data-shown],.sf-sortable-insert[focus-within]{opacity:1}.sf-sortable-insert[data-shown],.sf-sortable-insert:focus-within{opacity:1}.sf-sortable-insert[data-shown] .sf-sortable-insert-button{pointer-events:auto}.sf-sortable-insert::before{content:"";position:absolute;border-radius:var(--sf-px);background:Highlight;background:var(--sf-primary, Highlight);pointer-events:none}.sf-sortable-insert[data-axis=y]::before{left:0;right:0;inset-inline:0;top:calc(var(--sf-px)*-1);inset-block-start:calc(var(--sf-px)*-1);height:calc(var(--sf-px)*2);block-size:calc(var(--sf-px)*2)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-sortable-insert[data-axis=x]::before{left:calc(var(--sf-px)*-1)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-sortable-insert[data-axis=x]::before{left:calc(var(--sf-px)*-1)}}.sf-sortable-insert[data-axis=x]::before:where(:dir(ltr)){left:calc(var(--sf-px)*-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-sortable-insert[data-axis=x]::before{right:calc(var(--sf-px)*-1)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-sortable-insert[data-axis=x]::before{right:calc(var(--sf-px)*-1)}}.sf-sortable-insert[data-axis=x]::before:where(:dir(rtl)){right:calc(var(--sf-px)*-1)}.sf-sortable-insert[data-axis=x]::before{top:0;bottom:0;inset-block:0;inset-inline-start:calc(var(--sf-px)*-1);width:calc(var(--sf-px)*2);inline-size:calc(var(--sf-px)*2)}.sf-sortable-insert .sf-sortable-insert-button.sf-icon-button{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;margin:0;background-color:Canvas;background-color:var(--sf-elevation-1--surface, Canvas);--sf-on-surface-variant: var(--sf-on-elevation-1--variant);background-image:linear-gradient(transparent, transparent);background-image:linear-gradient(var(--sf-icon-button--background-color, transparent), var(--sf-icon-button--background-color, transparent));--sf-icon-button--box-shadow: var(--sf-elevation-1--shadow)}html[data-sf-sortable-active] .sf-sortable-insert{display:none}html[data-sf-sortable-active],html[data-sf-sortable-active] *{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}
|