@c2n/text-field 0.0.12 → 0.0.14
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/custom-elements.json +1 -0
- package/dist/chunks/{text-field-CEaLhsMN.js → text-field-CV9hc-5j.js} +6 -10
- package/dist/text-field-clear.js +1 -1
- package/dist/text-field.js +1 -1
- package/package.json +4 -3
- package/react.d.ts +6 -0
- package/types/src/text-field.d.ts +1 -2
- package/types/src/text-field.d.ts.map +1 -1
- package/vue.d.ts +6 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/text-field.ts","declarations":[{"kind":"class","description":"A single-line input wrapped in a themeable field. The native `<input>` keeps its behaviour (`type`, `name`,\n`autocomplete`, `maxlength`, `pattern`, `input`/`change` events); the field adds `prefix-icon` / `suffix-icon` slots\nsized by `--c2-text-field__icon--size`, an optional clear button (`clearable`), helper text (`help`), an error\nmessage (`error` + `error-text`), a character counter when `maxlength` is set, and a `help-icon` slot beside the\nfield. Pair it with `c2-label` for a caption. Give the host a `width`: the field fills it.","name":"TextField","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-text-field--min-height","default":"36px"},{"type":{"text":"pixel"},"description":"Space between the icons and the text.","name":"--c2-text-field--gap","default":"8px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-right-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-left-radius","default":"6px"},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-right-radius","default":"6px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-top","default":"6px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-right","default":"10px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-bottom","default":"6px"},{"type":{"text":"padding"},"name":"--c2-text-field--padding-left","default":"12px"},{"type":{"text":"border"},"name":"--c2-text-field--border-top","default":"1px solid #bcbcc6"},{"type":{"text":"border"},"name":"--c2-text-field--border-right","default":"1px solid #bcbcc6"},{"type":{"text":"border"},"name":"--c2-text-field--border-bottom","default":"1px solid #bcbcc6"},{"type":{"text":"border"},"name":"--c2-text-field--border-left","default":"1px solid #bcbcc6"},{"type":{"text":"color"},"name":"--c2-text-field--color","default":"#18181b"},{"type":{"text":"color"},"name":"--c2-text-field--background","default":"#ffffff"},{"type":{"text":"font-size"},"name":"--c2-text-field--font-size","default":"14px"},{"type":{"text":"font-weight"},"name":"--c2-text-field--font-weight"},{"type":{"text":"font-style"},"name":"--c2-text-field--font-style"},{"type":{"text":"font-family"},"name":"--c2-text-field--font-family"},{"type":{"text":"pixel"},"name":"--c2-text-field--line-height","default":"20px"},{"type":{"text":"color"},"name":"--c2-text-field__placeholder--color","default":"#71717a"},{"type":{"text":"opacity"},"name":"--c2-text-field__placeholder--opacity","default":"1"},{"type":{"text":"font-weight"},"name":"--c2-text-field__placeholder--font-weight"},{"type":{"text":"font-style"},"name":"--c2-text-field__placeholder--font-style"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-top","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-right","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-bottom","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-left","default":"1px solid #a1a1aa"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-top","default":"1px solid #476ef9"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-right","default":"1px solid #476ef9"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-bottom","default":"1px solid #476ef9"},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-left","default":"1px solid #476ef9"},{"type":{"text":"color"},"name":"--c2-text-field__focus--color"},{"type":{"text":"color"},"name":"--c2-text-field__focus--background"},{"type":{"text":"outline"},"name":"--c2-text-field__focus--outline","default":"3px solid rgba(71, 110, 249, 0.2)"},{"type":{"text":"pixel"},"name":"--c2-text-field__focus--outline-offset","default":"0px"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-top","default":"1px solid #dc2626"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-right","default":"1px solid #dc2626"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-bottom","default":"1px solid #dc2626"},{"type":{"text":"border"},"name":"--c2-text-field__error--border-left","default":"1px solid #dc2626"},{"type":{"text":"color"},"name":"--c2-text-field__error--color"},{"type":{"text":"color"},"name":"--c2-text-field__error--background"},{"type":{"text":"outline"},"name":"--c2-text-field__error__focus--outline","default":"3px solid rgba(220, 38, 38, 0.2)"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-top","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-right","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-bottom","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-left","default":"1px solid #e4e4e7"},{"type":{"text":"color"},"name":"--c2-text-field__read-only--color"},{"type":{"text":"color"},"name":"--c2-text-field__read-only--background","default":"#fafafa"},{"type":{"text":"opacity"},"name":"--c2-text-field__disabled--opacity","default":"0.38"},{"type":{"text":"pixel"},"name":"--c2-text-field__icon--size","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__icon--color","default":"#71717a"},{"type":{"text":"pixel"},"name":"--c2-text-field__clear-icon--size","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon--color","default":"#a1a1aa"},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon__hover--color","default":"#18181b"},{"type":{"text":"pixel"},"name":"--c2-text-field__help-icon--size","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__help-icon--color","default":"#71717a"},{"type":{"text":"pixel"},"description":"Space between the field and the help icon.","name":"--c2-text-field__help-icon--gap","default":"8px"},{"type":{"text":"pixel"},"description":"Space between the field and the helper line.","name":"--c2-text-field__supporting-text--gap","default":"4px"},{"type":{"text":"font-size"},"name":"--c2-text-field__supporting-text--font-size","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-text-field__supporting-text--line-height","default":"16px"},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text--color","default":"#71717a"},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text__error--color","default":"#dc2626"}],"slots":[{"description":"Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`. Icons are sized by `--c2-text-field__icon--size`; an adornment keeps its own width.","name":"prefix-icon"},{"description":"Icon or adornment at the end of the field, after the clear button.","name":"suffix-icon"},{"description":"Replaces the default cross of the clear button.","name":"clear-icon"},{"description":"Icon shown beside the field, outside the border, e.g. a tooltip trigger.","name":"help-icon"},{"description":"Rich helper content below the field. `help` and `error-text` are the plain-text shortcuts.","name":"supporting-text"}],"members":[{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"default":"true"},{"kind":"field","name":"internals","privacy":"private","readonly":true},{"kind":"field","name":"customValidityMessage","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"disabledByForm","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","attribute":"readOnly","reflects":true},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","attribute":"disabled","reflects":true},{"kind":"field","name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","attribute":"error","reflects":true},{"kind":"field","name":"maxLength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","attribute":"maxLength"},{"kind":"field","name":"minLength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","attribute":"minLength"},{"kind":"field","name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","attribute":"pattern"},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","attribute":"required","reflects":true},{"kind":"field","name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","attribute":"type"},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","attribute":"name"},{"kind":"field","name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","attribute":"autocomplete"},{"kind":"field","name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","attribute":"placeholder"},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","attribute":"aria-label"},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","attribute":"value"},{"kind":"field","name":"errorText","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","attribute":"error-text"},{"kind":"field","name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","attribute":"help"},{"kind":"field","name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","attribute":"clearable","reflects":true},{"kind":"field","name":"dirty","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"focused","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['supporting-text'])"},{"kind":"field","name":"input","type":{"text":"HTMLInputElement | null | undefined"},"privacy":"private","readonly":true},{"kind":"field","name":"form","description":"The containing form, when this control is associated with one.","readonly":true},{"kind":"field","name":"labels","description":"Labels associated with this form control.","readonly":true},{"kind":"field","name":"validity","readonly":true},{"kind":"field","name":"validationMessage","readonly":true},{"kind":"field","name":"willValidate","readonly":true},{"kind":"method","name":"reset","description":"Restores the initial value (the `value` attribute) and clears the dirty and error flags."},{"kind":"method","name":"formResetCallback"},{"kind":"method","name":"formDisabledCallback","parameters":[{"name":"disabled","type":{"text":"boolean"}}]},{"kind":"method","name":"formStateRestoreCallback","parameters":[{"name":"state","type":{"text":"string | File | FormData | null"}}]},{"kind":"method","name":"checkValidity","description":"Checks all current constraints and fires `invalid` on this element when they fail."},{"kind":"method","name":"reportValidity","description":"Checks all current constraints and asks the browser to show validation feedback."},{"kind":"method","name":"setCustomValidity","parameters":[{"name":"message","type":{"text":"string"}}],"description":"Sets or clears a custom validation error."},{"kind":"field","name":"handleFocus"},{"kind":"method","name":"isDirty","description":"True once the user has typed in the field."},{"kind":"method","name":"focus","return":{"type":{"text":"void"}},"parameters":[{"name":"options","optional":true,"type":{"text":"FocusOptions | undefined"}}]},{"kind":"method","name":"blur","return":{"type":{"text":"void"}}},{"kind":"method","name":"select","return":{"type":{"text":"void"}},"description":"Selects the whole text."},{"kind":"method","name":"handleInput","privacy":"protected","parameters":[{"name":"event","type":{"text":"InputEvent"}}]},{"kind":"method","name":"handleFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"forwardFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"description":"A click anywhere on the field (icons, padding) focuses the input."},{"kind":"method","name":"handleFocusout","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"handleClear","privacy":"protected"},{"kind":"method","name":"renderPrefixSlot","privacy":"protected"},{"kind":"method","name":"renderSuffixSlot","privacy":"protected"},{"kind":"method","name":"renderHelpIconSlot","privacy":"protected"},{"kind":"method","name":"renderClearButton","privacy":"protected"},{"kind":"method","name":"renderSupportingText","privacy":"protected"},{"kind":"method","name":"redispatchEvent","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"syncFormState","privacy":"private"},{"kind":"field","name":"effectiveDisabled","privacy":"private","readonly":true},{"kind":"field","name":"stateClasses","privacy":"private","readonly":true}],"events":[{"type":{"text":"InputEvent"},"description":"Re-dispatched from the inner input on every keystroke; `value` is already updated.","name":"input"},{"type":{"text":"Event"},"description":"Re-dispatched from the inner input when the value is committed (blur or Enter).","name":"change"},{"type":{"text":"Event"},"description":"Fired after the clear button emptied the field (an `input` and a `change` event follow).","name":"clear"}],"attributes":[{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","fieldName":"readOnly"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","fieldName":"disabled"},{"name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","fieldName":"error"},{"name":"maxlength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","fieldName":"maxLength"},{"name":"minlength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","fieldName":"minLength"},{"name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","fieldName":"pattern"},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","fieldName":"required"},{"name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","fieldName":"type"},{"name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","fieldName":"name"},{"name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","fieldName":"autocomplete"},{"name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","fieldName":"placeholder"},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","fieldName":"ariaLabel"},{"name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","fieldName":"value"},{"name":"error-text","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","fieldName":"errorText"},{"name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","fieldName":"help"},{"name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","fieldName":"clearable"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-text-field","customElement":true}],"exports":[{"kind":"js","name":"TextField","declaration":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"custom-element-definition","name":"c2-text-field","declaration":{"name":"TextField","module":"src/text-field.ts"}}]},{"kind":"javascript-module","path":"src/text-field-clear.ts","declarations":[{"kind":"class","description":"A `c2-text-field` that always shows a clear button while it has a value. Prefer `c2-text-field` with the\n`clearable` attribute; this element remains for markup that cannot toggle attributes. Inherits every attribute,\nslot, event and CSS variable of `c2-text-field`.","name":"TextFieldClear","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-text-field-clear__clear-icon--size","default":"24px"},{"type":{"text":"color"},"name":"--c2-text-field-clear__clear-icon--color","default":"rgb(70, 70, 70)"},{"type":{"text":"pixel"},"name":"--c2-text-field--min-height","default":"36px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"description":"Space between the icons and the text.","name":"--c2-text-field--gap","default":"8px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-left-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-top-right-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-left-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border-radius"},"name":"--c2-text-field--border-bottom-right-radius","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-top","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-right","default":"10px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-bottom","default":"6px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"padding"},"name":"--c2-text-field--padding-left","default":"12px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-top","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-right","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-bottom","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field--border-left","default":"1px solid #bcbcc6","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field--color","default":"#18181b","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field--background","default":"#ffffff","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-size"},"name":"--c2-text-field--font-size","default":"14px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-weight"},"name":"--c2-text-field--font-weight","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-style"},"name":"--c2-text-field--font-style","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-family"},"name":"--c2-text-field--font-family","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field--line-height","default":"20px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__placeholder--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"opacity"},"name":"--c2-text-field__placeholder--opacity","default":"1","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-weight"},"name":"--c2-text-field__placeholder--font-weight","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-style"},"name":"--c2-text-field__placeholder--font-style","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-top","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-right","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-bottom","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__hover--border-left","default":"1px solid #a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-top","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-right","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-bottom","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__focus--border-left","default":"1px solid #476ef9","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__focus--color","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__focus--background","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"outline"},"name":"--c2-text-field__focus--outline","default":"3px solid rgba(71, 110, 249, 0.2)","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__focus--outline-offset","default":"0px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-top","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-right","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-bottom","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__error--border-left","default":"1px solid #dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__error--color","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__error--background","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"outline"},"name":"--c2-text-field__error__focus--outline","default":"3px solid rgba(220, 38, 38, 0.2)","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-top","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-right","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-bottom","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"border"},"name":"--c2-text-field__read-only--border-left","default":"1px solid #e4e4e7","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__read-only--color","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__read-only--background","default":"#fafafa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"opacity"},"name":"--c2-text-field__disabled--opacity","default":"0.38","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__icon--size","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__icon--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__clear-icon--size","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon--color","default":"#a1a1aa","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__clear-icon__hover--color","default":"#18181b","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__help-icon--size","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__help-icon--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"description":"Space between the field and the help icon.","name":"--c2-text-field__help-icon--gap","default":"8px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"description":"Space between the field and the helper line.","name":"--c2-text-field__supporting-text--gap","default":"4px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"font-size"},"name":"--c2-text-field__supporting-text--font-size","default":"12px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"pixel"},"name":"--c2-text-field__supporting-text--line-height","default":"16px","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text--color","default":"#71717a","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"color"},"name":"--c2-text-field__supporting-text__error--color","default":"#dc2626","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"slots":[{"description":"Replaces the default cross icon.","name":"clear-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`. Icons are sized by `--c2-text-field__icon--size`; an adornment keeps its own width.","name":"prefix-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Icon or adornment at the end of the field, after the clear button.","name":"suffix-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Icon shown beside the field, outside the border, e.g. a tooltip trigger.","name":"help-icon","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"description":"Rich helper content below the field. `help` and `error-text` are the plain-text shortcuts.","name":"supporting-text","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"members":[{"kind":"field","name":"showClear","type":{"text":"boolean"},"default":"false"},{"kind":"method","name":"handleInput","privacy":"protected","parameters":[{"name":"event","type":{"text":"InputEvent"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"clearHandle","privacy":"protected"},{"kind":"method","name":"renderClearIcon"},{"kind":"method","name":"renderSuffixSlot","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"default":"true","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"internals","privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"customValidityMessage","type":{"text":"string"},"privacy":"private","default":"''","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"disabledByForm","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"readOnly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","attribute":"readOnly","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","attribute":"disabled","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","attribute":"error","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"maxLength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","attribute":"maxLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"minLength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","attribute":"minLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","attribute":"pattern","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","attribute":"required","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","attribute":"type","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","attribute":"name","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","attribute":"autocomplete","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","attribute":"placeholder","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","attribute":"aria-label","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","attribute":"value","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"errorText","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","attribute":"error-text","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","attribute":"help","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","attribute":"clearable","reflects":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"dirty","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"focused","type":{"text":"boolean"},"privacy":"private","default":"false","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['supporting-text'])","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"input","type":{"text":"HTMLInputElement | null | undefined"},"privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"form","description":"The containing form, when this control is associated with one.","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"labels","description":"Labels associated with this form control.","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"validity","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"validationMessage","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"willValidate","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"reset","description":"Restores the initial value (the `value` attribute) and clears the dirty and error flags.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"formResetCallback","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"formDisabledCallback","parameters":[{"name":"disabled","type":{"text":"boolean"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"formStateRestoreCallback","parameters":[{"name":"state","type":{"text":"string | File | FormData | null"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"checkValidity","description":"Checks all current constraints and fires `invalid` on this element when they fail.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"reportValidity","description":"Checks all current constraints and asks the browser to show validation feedback.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"setCustomValidity","parameters":[{"name":"message","type":{"text":"string"}}],"description":"Sets or clears a custom validation error.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"handleFocus","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"isDirty","description":"True once the user has typed in the field.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"focus","return":{"type":{"text":"void"}},"parameters":[{"name":"options","optional":true,"type":{"text":"FocusOptions | undefined"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"blur","return":{"type":{"text":"void"}},"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"select","return":{"type":{"text":"void"}},"description":"Selects the whole text.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"handleFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"forwardFocusin","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"description":"A click anywhere on the field (icons, padding) focuses the input.","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"handleFocusout","privacy":"protected","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"handleClear","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderPrefixSlot","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderHelpIconSlot","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderClearButton","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"renderSupportingText","privacy":"protected","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"redispatchEvent","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}],"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"method","name":"syncFormState","privacy":"private","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"effectiveDisabled","privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"kind":"field","name":"stateClasses","privacy":"private","readonly":true,"inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"superclass":{"name":"TextField","module":"/src/text-field"},"tagName":"c2-text-field-clear","customElement":true,"attributes":[{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Shows the value but refuses edits. Rendered on a light grey background.","fieldName":"readOnly","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input and dims the field.","fieldName":"disabled","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"error","type":{"text":"boolean"},"default":"false","description":"Marks the field invalid: red border and, when set, `error-text` replaces the helper text.","fieldName":"error","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"maxlength","type":{"text":"number"},"default":"-1","description":"Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field.","fieldName":"maxLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"minlength","type":{"text":"number"},"default":"-1","description":"Minimum number of characters, forwarded to the input.","fieldName":"minLength","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"pattern","type":{"text":"string"},"default":"''","description":"Regular expression the value must match, forwarded to the input.","fieldName":"pattern","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator.","fieldName":"required","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"type","type":{"text":"TextFieldType"},"default":"'text'","description":"Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`.","fieldName":"type","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the input.","fieldName":"name","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"autocomplete","type":{"text":"string"},"default":"''","description":"`autocomplete` hint forwarded to the input, e.g. `email` or `current-password`.","fieldName":"autocomplete","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"placeholder","type":{"text":"string"},"default":"''","description":"Text shown while the field is empty.","fieldName":"placeholder","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the native input.","fieldName":"ariaLabel","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"value","type":{"text":"string"},"default":"''","description":"The current text. Setting the attribute after the user has typed no longer updates it, like a native input.","fieldName":"value","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"error-text","type":{"text":"string"},"default":"''","description":"Message shown under the field while `error` is set.","fieldName":"errorText","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"help","type":{"text":"string"},"default":"''","description":"Helper text shown under the field.","fieldName":"help","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"name":"clearable","type":{"text":"boolean"},"default":"false","description":"Shows a clear button at the end of the field while it has a value.","fieldName":"clearable","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}],"events":[{"type":{"text":"InputEvent"},"description":"Re-dispatched from the inner input on every keystroke; `value` is already updated.","name":"input","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"Event"},"description":"Re-dispatched from the inner input when the value is committed (blur or Enter).","name":"change","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}},{"type":{"text":"Event"},"description":"Fired after the clear button emptied the field (an `input` and a `change` event follow).","name":"clear","inheritedFrom":{"name":"TextField","module":"src/text-field.ts"}}]}],"exports":[{"kind":"js","name":"TextFieldClear","declaration":{"name":"TextFieldClear","module":"src/text-field-clear.ts"}},{"kind":"custom-element-definition","name":"c2-text-field-clear","declaration":{"name":"TextFieldClear","module":"src/text-field-clear.ts"}}]}]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { query, state } from "lit/decorators.js";
|
|
3
|
+
import { property } from "@c2n/core/lit-helper.js";
|
|
3
4
|
import { customElement } from "@c2n/core/element-helper.js";
|
|
4
5
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
5
6
|
import { classMap } from "lit/directives/class-map.js";
|
|
6
7
|
import { live } from "lit/directives/live.js";
|
|
7
8
|
import { addClasses } from "@c2n/core/css-helper.js";
|
|
8
|
-
import { redispatchEvent } from "@c2n/core/dom-helper.js";
|
|
9
|
+
import { SlotPresenceController, redispatchEvent } from "@c2n/core/dom-helper.js";
|
|
9
10
|
//#region src/text-field.scss?inline
|
|
10
11
|
var text_field_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: inline-flex;\n flex-direction: column;\n gap: var(--c2-text-field__supporting-text--gap,4px);\n vertical-align: middle;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.c2-text-field-row {\n display: flex;\n align-items: center;\n gap: var(--c2-text-field__help-icon--gap,8px);\n}\n\n.c2-text-field {\n display: flex;\n flex: 1;\n min-width: 0;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n cursor: text;\n text-align: inherit;\n min-height: var(--c2-text-field--min-height,36px);\n gap: var(--c2-text-field--gap,8px);\n padding-top: var(--c2-text-field--padding-top,6px);\n padding-bottom: var(--c2-text-field--padding-bottom,6px);\n padding-right: var(--c2-text-field--padding-right,10px);\n padding-left: var(--c2-text-field--padding-left,12px);\n border-top: var(--c2-text-field--border-top,1px solid #bcbcc6);\n border-bottom: var(--c2-text-field--border-bottom,1px solid #bcbcc6);\n border-right: var(--c2-text-field--border-right,1px solid #bcbcc6);\n border-left: var(--c2-text-field--border-left,1px solid #bcbcc6);\n border-top-left-radius: var(--c2-text-field--border-top-left-radius,6px);\n border-top-right-radius: var(--c2-text-field--border-top-right-radius,6px);\n border-bottom-left-radius: var(--c2-text-field--border-bottom-left-radius,6px);\n border-bottom-right-radius: var(--c2-text-field--border-bottom-right-radius,6px);\n color: var(--c2-text-field--color,#18181b);\n background: var(--c2-text-field--background,#ffffff);\n font-size: var(--c2-text-field--font-size,14px);\n font-weight: var(--c2-text-field--font-weight);\n font-style: var(--c2-text-field--font-style);\n font-family: var(--c2-text-field--font-family);\n line-height: var(--c2-text-field--line-height,20px);\n outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n outline-color: transparent;\n outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n will-change: border, background, outline-color;\n transition: border 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), outline-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-text-field .input {\n flex: 1;\n min-width: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n color: inherit;\n caret-color: inherit;\n font: inherit;\n line-height: inherit;\n text-align: inherit;\n}\n.c2-text-field .input::placeholder {\n font-weight: var(--c2-text-field__placeholder--font-weight);\n font-style: var(--c2-text-field__placeholder--font-style);\n color: var(--c2-text-field__placeholder--color,#71717a);\n opacity: var(--c2-text-field__placeholder--opacity,1);\n}\n.c2-text-field .input::-webkit-search-cancel-button, .c2-text-field .input::-webkit-search-decoration {\n appearance: none;\n}\n@media (forced-colors: active) {\n .c2-text-field .input {\n background: Field;\n }\n}\n.c2-text-field:hover {\n border-top: var(--c2-text-field__hover--border-top,var(--c2-text-field--border-top,1px solid #a1a1aa));\n border-bottom: var(--c2-text-field__hover--border-bottom,var(--c2-text-field--border-bottom,1px solid #a1a1aa));\n border-right: var(--c2-text-field__hover--border-right,var(--c2-text-field--border-right,1px solid #a1a1aa));\n border-left: var(--c2-text-field__hover--border-left,var(--c2-text-field--border-left,1px solid #a1a1aa));\n}\n.c2-text-field.focus-within {\n border-top: var(--c2-text-field__focus--border-top,var(--c2-text-field--border-top,1px solid #476ef9));\n border-bottom: var(--c2-text-field__focus--border-bottom,var(--c2-text-field--border-bottom,1px solid #476ef9));\n border-right: var(--c2-text-field__focus--border-right,var(--c2-text-field--border-right,1px solid #476ef9));\n border-left: var(--c2-text-field__focus--border-left,var(--c2-text-field--border-left,1px solid #476ef9));\n color: var(--c2-text-field__focus--color,var(--c2-text-field--color,#18181b));\n background: var(--c2-text-field__focus--background,var(--c2-text-field--background,#ffffff));\n outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n}\n.c2-text-field.error {\n border-top: var(--c2-text-field__error--border-top,1px solid #dc2626);\n border-bottom: var(--c2-text-field__error--border-bottom,1px solid #dc2626);\n border-right: var(--c2-text-field__error--border-right,1px solid #dc2626);\n border-left: var(--c2-text-field__error--border-left,1px solid #dc2626);\n color: var(--c2-text-field__error--color,var(--c2-text-field--color,#18181b));\n background: var(--c2-text-field__error--background,var(--c2-text-field--background,#ffffff));\n}\n.c2-text-field.error.focus-within {\n outline: var(--c2-text-field__error__focus--outline,3px solid rgba(220, 38, 38, 0.2));\n}\n.c2-text-field.read-only {\n cursor: default;\n border-top: var(--c2-text-field__read-only--border-top,1px solid #e4e4e7);\n border-bottom: var(--c2-text-field__read-only--border-bottom,1px solid #e4e4e7);\n border-right: var(--c2-text-field__read-only--border-right,1px solid #e4e4e7);\n border-left: var(--c2-text-field__read-only--border-left,1px solid #e4e4e7);\n color: var(--c2-text-field__read-only--color,var(--c2-text-field--color,#18181b));\n background: var(--c2-text-field__read-only--background,#fafafa);\n}\n.c2-text-field.disabled {\n cursor: default;\n opacity: var(--c2-text-field__disabled--opacity,0.38);\n pointer-events: none;\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n flex: none;\n color: var(--c2-text-field__icon--color,#71717a);\n --c2-feather-icon--size: var(--c2-text-field__icon--size,16px);\n --c2-mat-icon--font-size: var(--c2-text-field__icon--size,16px);\n}\n\n::slotted(svg[slot=prefix-icon]),\n::slotted(svg[slot=suffix-icon]) {\n width: var(--c2-text-field__icon--size,16px);\n height: var(--c2-text-field__icon--size,16px);\n}\n\n.clear-button {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n width: var(--c2-text-field__clear-icon--size,16px);\n height: var(--c2-text-field__clear-icon--size,16px);\n color: var(--c2-text-field__clear-icon--color,#a1a1aa);\n transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.clear-button:hover, .clear-button:focus-visible {\n color: var(--c2-text-field__clear-icon__hover--color,#18181b);\n}\n.clear-button:focus-visible {\n outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n outline-offset: 2px;\n border-radius: 4px;\n}\n.clear-button svg,\n.clear-button ::slotted(*) {\n width: 100%;\n height: 100%;\n --c2-feather-icon--size: var(--c2-text-field__clear-icon--size,16px);\n --c2-mat-icon--font-size: var(--c2-text-field__clear-icon--size,16px);\n}\n\n::slotted([slot=help-icon]) {\n flex: none;\n width: var(--c2-text-field__help-icon--size,16px);\n height: var(--c2-text-field__help-icon--size,16px);\n color: var(--c2-text-field__help-icon--color,#71717a);\n --c2-feather-icon--size: var(--c2-text-field__help-icon--size,16px);\n --c2-mat-icon--font-size: var(--c2-text-field__help-icon--size,16px);\n}\n\n.supporting-text {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 12px;\n font-size: var(--c2-text-field__supporting-text--font-size,12px);\n line-height: var(--c2-text-field__supporting-text--line-height,16px);\n color: var(--c2-text-field__supporting-text--color,#71717a);\n}\n.supporting-text.error {\n color: var(--c2-text-field__supporting-text__error--color,#dc2626);\n}\n.supporting-text .supporting-text__message {\n flex: 1;\n min-width: 0;\n}\n.supporting-text .supporting-text__counter {\n flex: none;\n font-variant-numeric: tabular-nums;\n}";
|
|
11
12
|
//#endregion
|
|
@@ -42,7 +43,7 @@ var TextField = class TextField extends LitElement {
|
|
|
42
43
|
this.clearable = false;
|
|
43
44
|
this.dirty = false;
|
|
44
45
|
this.focused = false;
|
|
45
|
-
this.
|
|
46
|
+
this.slotPresence = new SlotPresenceController(this, ["supporting-text"]);
|
|
46
47
|
this.handleFocus = () => {
|
|
47
48
|
this.focus();
|
|
48
49
|
};
|
|
@@ -157,10 +158,6 @@ var TextField = class TextField extends LitElement {
|
|
|
157
158
|
this.focused = false;
|
|
158
159
|
redispatchEvent(this, event);
|
|
159
160
|
}
|
|
160
|
-
handleSupportingSlotChange(event) {
|
|
161
|
-
const slot = event.target;
|
|
162
|
-
this.hasSupportingSlot = slot.assignedNodes({ flatten: true }).length > 0;
|
|
163
|
-
}
|
|
164
161
|
renderPrefixSlot() {
|
|
165
162
|
return html`<slot name="prefix-icon"></slot>`;
|
|
166
163
|
}
|
|
@@ -185,10 +182,10 @@ var TextField = class TextField extends LitElement {
|
|
|
185
182
|
renderSupportingText() {
|
|
186
183
|
const message = this.error && !this.disabled && !!this.errorText ? this.errorText : this.help;
|
|
187
184
|
const counter = this.maxLength > 0 ? `${this.value.length} / ${this.maxLength}` : "";
|
|
188
|
-
if (!message && !counter && !this.
|
|
185
|
+
if (!message && !counter && !this.slotPresence.has("supporting-text")) return html`<slot name="supporting-text" hidden @slotchange=${this.slotPresence.handleSlotChange}></slot>`;
|
|
189
186
|
return html`<div class="supporting-text ${classMap({ error: this.error && !this.disabled })}">
|
|
190
187
|
<div class="supporting-text__message">
|
|
191
|
-
<slot name="supporting-text" @slotchange=${this.
|
|
188
|
+
<slot name="supporting-text" @slotchange=${this.slotPresence.handleSlotChange}>${message}</slot>
|
|
192
189
|
</div>
|
|
193
190
|
${counter ? html`<span class="supporting-text__counter">${counter}</span>` : nothing}
|
|
194
191
|
</div>`;
|
|
@@ -287,7 +284,6 @@ __decorate([property({
|
|
|
287
284
|
})], TextField.prototype, "clearable", void 0);
|
|
288
285
|
__decorate([state()], TextField.prototype, "dirty", void 0);
|
|
289
286
|
__decorate([state()], TextField.prototype, "focused", void 0);
|
|
290
|
-
__decorate([state()], TextField.prototype, "hasSupportingSlot", void 0);
|
|
291
287
|
__decorate([query(".input")], TextField.prototype, "input", void 0);
|
|
292
288
|
TextField = __decorate([customElement("c2-text-field")], TextField);
|
|
293
289
|
//#endregion
|
package/dist/text-field-clear.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as __decorate, t as TextField } from "./chunks/text-field-
|
|
1
|
+
import { n as __decorate, t as TextField } from "./chunks/text-field-CV9hc-5j.js";
|
|
2
2
|
import { html, nothing, unsafeCSS } from "lit";
|
|
3
3
|
import { state } from "lit/decorators.js";
|
|
4
4
|
import { customElement } from "@c2n/core/element-helper.js";
|
package/dist/text-field.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as TextField } from "./chunks/text-field-
|
|
1
|
+
import { t as TextField } from "./chunks/text-field-CV9hc-5j.js";
|
|
2
2
|
export { TextField };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/text-field",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/text-field.js",
|
|
6
6
|
"exports": {
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"files": [
|
|
26
26
|
"dist",
|
|
27
27
|
"types",
|
|
28
|
+
"custom-elements.json",
|
|
28
29
|
"react.d.ts",
|
|
29
30
|
"react.js",
|
|
30
31
|
"vue.d.ts",
|
|
@@ -64,12 +65,12 @@
|
|
|
64
65
|
}
|
|
65
66
|
},
|
|
66
67
|
"dependencies": {
|
|
67
|
-
"@c2n/core": "0.0.
|
|
68
|
+
"@c2n/core": "0.0.14",
|
|
68
69
|
"lit": "3.3.3"
|
|
69
70
|
},
|
|
70
71
|
"devDependencies": {
|
|
71
72
|
"@c2n/config": "*"
|
|
72
73
|
},
|
|
73
74
|
"customElements": "custom-elements.json",
|
|
74
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
|
|
75
76
|
}
|
package/react.d.ts
CHANGED
|
@@ -24,10 +24,16 @@ declare module 'react' {
|
|
|
24
24
|
namespace JSX {
|
|
25
25
|
interface IntrinsicElements {
|
|
26
26
|
'c2-text-field': C2Props<TextField> & {
|
|
27
|
+
readonly?: Attribute
|
|
28
|
+
maxlength?: Attribute
|
|
29
|
+
minlength?: Attribute
|
|
27
30
|
'aria-label'?: Attribute
|
|
28
31
|
'error-text'?: Attribute
|
|
29
32
|
}
|
|
30
33
|
'c2-text-field-clear': C2Props<TextFieldClear> & {
|
|
34
|
+
readonly?: Attribute
|
|
35
|
+
maxlength?: Attribute
|
|
36
|
+
minlength?: Attribute
|
|
31
37
|
'aria-label'?: Attribute
|
|
32
38
|
'error-text'?: Attribute
|
|
33
39
|
}
|
|
@@ -150,7 +150,7 @@ export declare class TextField extends LitElement {
|
|
|
150
150
|
clearable: boolean;
|
|
151
151
|
private dirty;
|
|
152
152
|
private focused;
|
|
153
|
-
private
|
|
153
|
+
private readonly slotPresence;
|
|
154
154
|
private readonly input?;
|
|
155
155
|
/** The containing form, when this control is associated with one. */
|
|
156
156
|
get form(): HTMLFormElement | null;
|
|
@@ -184,7 +184,6 @@ export declare class TextField extends LitElement {
|
|
|
184
184
|
protected forwardFocusin(event: Event): void;
|
|
185
185
|
protected handleFocusout(event: Event): void;
|
|
186
186
|
protected handleClear: (event: Event) => void;
|
|
187
|
-
private handleSupportingSlotChange;
|
|
188
187
|
protected renderPrefixSlot(): import("lit-html").TemplateResult<1>;
|
|
189
188
|
protected renderSuffixSlot(): import("lit-html").TemplateResult<1>;
|
|
190
189
|
protected renderHelpIconSlot(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAQ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field.ts"],"names":[],"mappings":"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"}
|
package/vue.d.ts
CHANGED
|
@@ -18,6 +18,9 @@ declare module 'vue' {
|
|
|
18
18
|
interface GlobalComponents {
|
|
19
19
|
'c2-text-field': DefineComponent<
|
|
20
20
|
C2Props<TextField> & {
|
|
21
|
+
readonly?: unknown
|
|
22
|
+
maxlength?: unknown
|
|
23
|
+
minlength?: unknown
|
|
21
24
|
'aria-label'?: unknown
|
|
22
25
|
'error-text'?: unknown
|
|
23
26
|
onInput?: (event: TextFieldEventMap['input']) => void
|
|
@@ -27,6 +30,9 @@ declare module 'vue' {
|
|
|
27
30
|
>
|
|
28
31
|
'c2-text-field-clear': DefineComponent<
|
|
29
32
|
C2Props<TextFieldClear> & {
|
|
33
|
+
readonly?: unknown
|
|
34
|
+
maxlength?: unknown
|
|
35
|
+
minlength?: unknown
|
|
30
36
|
'aria-label'?: unknown
|
|
31
37
|
'error-text'?: unknown
|
|
32
38
|
onInput?: (event: TextFieldClearEventMap['input']) => void
|