@nuralyui/input 0.0.2 → 0.0.3
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/input.style.d.ts.map +1 -1
- package/input.style.js +4 -0
- package/input.style.js.map +1 -1
- package/package.json +1 -1
package/input.style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA2MA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
|
package/input.style.js
CHANGED
|
@@ -132,6 +132,10 @@ const inputStyle = css `
|
|
|
132
132
|
border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));
|
|
133
133
|
border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));
|
|
134
134
|
border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius));
|
|
135
|
+
border-top-left-radius:var(--hybrid-input-border-top-left-radius,var(--hybrid-input-local-border-top-left-radius)) ;
|
|
136
|
+
border-top-right-radius: var(--hybrid-input-border-top-right-radius,var(--hybrid-input-local-border-top-right-radius));
|
|
137
|
+
border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius,var(--hybrid-input-local-border-bottom-left-radius));
|
|
138
|
+
border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius,var(--hybrid-input-local-border-bottom-right-radius));
|
|
135
139
|
display: flex;
|
|
136
140
|
position: relative;
|
|
137
141
|
}
|
package/input.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAEpD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KrB,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './variables.style.js';\n\nconst inputStyle = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));\n }\n\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n ::placeholder {\n color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));\n }\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));\n }\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));\n padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));\n }\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));\n }\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));\n }\n\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));\n }\n\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n #icons-separator {\n color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));\n padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));\n padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));\n }\n\n #input-container {\n border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));\n border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius)); \n display: flex;\n position: relative;\n }\n\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));\n border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));\n border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));\n opacity:0.6;\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));\n }\n\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\nconst sizeInputStyle = css`\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));\n }\n\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));\n }\n\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));\n padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));\n }\n`;\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
|
|
1
|
+
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLrB,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './variables.style.js';\n\nconst inputStyle = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));\n }\n\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n ::placeholder {\n color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));\n }\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));\n }\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));\n padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));\n }\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));\n }\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));\n }\n\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));\n }\n\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n #icons-separator {\n color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));\n padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));\n padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));\n }\n\n #input-container {\n border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));\n border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius)); \n border-top-left-radius:var(--hybrid-input-border-top-left-radius,var(--hybrid-input-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-input-border-top-right-radius,var(--hybrid-input-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius,var(--hybrid-input-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius,var(--hybrid-input-local-border-bottom-right-radius));\n display: flex;\n position: relative;\n }\n\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));\n border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));\n border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));\n opacity:0.6;\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));\n }\n\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\nconst sizeInputStyle = css`\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));\n }\n\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));\n }\n\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));\n padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));\n }\n`;\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
|