npm - @aquera/nile-elements - Versions diffs - 0.0.72 → 0.0.74 - Mend

@aquera/nile-elements 0.0.72 → 0.0.74

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.

Files changed (30) hide show

package/README.md +11 -0
package/dist/index.iife.js +62 -52
package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
package/dist/nile-calendar/nile-calendar.esm.js +8 -5
package/dist/nile-checkbox/nile-checkbox.cjs.js +1 -1
package/dist/nile-checkbox/nile-checkbox.cjs.js.map +1 -1
package/dist/nile-checkbox/nile-checkbox.css.cjs.js +1 -1
package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map +1 -1
package/dist/nile-checkbox/nile-checkbox.css.esm.js +5 -0
package/dist/nile-checkbox/nile-checkbox.esm.js +47 -45
package/dist/nile-input/nile-input.css.cjs.js +1 -1
package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
package/dist/nile-input/nile-input.css.esm.js +2 -2
package/dist/src/nile-calendar/nile-calendar.d.ts +1 -0
package/dist/src/nile-calendar/nile-calendar.js +11 -3
package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
package/dist/src/nile-checkbox/nile-checkbox.css.js +5 -0
package/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
package/dist/src/nile-checkbox/nile-checkbox.d.ts +2 -0
package/dist/src/nile-checkbox/nile-checkbox.js +52 -43
package/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
package/dist/src/nile-input/nile-input.css.js +2 -2
package/dist/src/nile-input/nile-input.css.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +1 -1
package/src/nile-calendar/nile-calendar.ts +12 -6
package/src/nile-checkbox/nile-checkbox.css.ts +5 -0
package/src/nile-checkbox/nile-checkbox.ts +57 -50
package/src/nile-input/nile-input.css.ts +2 -2

package/dist/src/nile-checkbox/nile-checkbox.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit-element';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--only__subtitle{\n align-items: center;\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: 3px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: 4px;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n\n / Checked/indeterminate + focus /\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px var(--nile-checkbox-color-outline-standard);\n outline-offset: 1px;\n }\n\n / Disabled /\n .checkbox--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n font-family: var(--nile-font-family-serif);\n margin-left: 8px;\n user-select: none;\n color: var(--nile-colors-dark-900);\n font-style: normal;\n letter-spacing: 0.2px;\n box-sizing: border-box;\n }\n\n .checkbox__label__text {\n display: block;\n font-size: 14px;\n font-weight: 500;\n color: #344054;\n }\n\n .checkbox__sublabel__text {\n display: block;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #475467;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: 12px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit-element';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--only__subtitle{\n align-items: center;\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: 3px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: 4px;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n\n / Checked/indeterminate + focus /\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px var(--nile-checkbox-color-outline-standard);\n outline-offset: 1px;\n }\n\n / Disabled /\n .checkbox--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n font-family: var(--nile-font-family-serif);\n margin-left: 8px;\n user-select: none;\n color: var(--nile-colors-dark-900);\n font-style: normal;\n letter-spacing: 0.2px;\n box-sizing: border-box;\n }\n\n .checkbox__icon__container{\n display:flex;\n align-items:center;\n }\n\n .checkbox__label__text {\n display: block;\n font-size: 14px;\n font-weight: 500;\n color: #344054;\n }\n\n .checkbox__sublabel__text {\n display: block;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #475467;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: 12px;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-checkbox/nile-checkbox.d.ts CHANGED Viewed

@@ -71,6 +71,8 @@ export declare class NileCheckbox extends NileElement {
     form: string;
     /** Makes the checkbox a required field. */
     required: boolean;
+    labelContainer: HTMLElement;
+    checkboxIconContainer: HTMLElement;
     private handleClick;
     private handleBlur;
     private handleInput;

package/dist/src/nile-checkbox/nile-checkbox.js CHANGED Viewed

@@ -129,6 +129,7 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         if (changedProperties.has('helpText')) {
             this.updateHostClass();
         }
+        this.checkboxIconContainer.style.height = this.labelContainer.scrollHeight + 'px';
     }
     updateHostClass() {
         if (this.helpText) {
@@ -150,57 +151,59 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             'checkbox--disabled': this.disabled,
             'checkbox--focused': this.hasFocus,
             'checkbox--indeterminate': this.indeterminate
-        })}
+        })}
       >
-        <span
-          part="control${this.checked ? ' control--checked' : ''}${this
+        <div class="checkbox__icon__container">
+          <span
+            part="control${this.checked ? ' control--checked' : ''}${this
             .indeterminate
             ? ' control--indeterminate'
             : ''}"
-          class="checkbox__control"
-        >
-          <!-- An empty title prevents browser validation tooltips from appearing on hover -->
-          <input
-            class="checkbox__input"
-            type="checkbox"
-            title=${this.title}
-            name=${this.name}
-            value=${ifDefined(this.value)}
-            .indeterminate=${live(this.indeterminate)}
-            .checked=${live(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            aria-checked=${this.checked ? 'true' : 'false'}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-          />
-          ${this.checked
+            class="checkbox__control"
+          >
+            <!-- An empty title prevents browser validation tooltips from appearing on hover -->
+            <input
+              class="checkbox__input"
+              type="checkbox"
+              title=${this.title}
+              name=${this.name}
+              value=${ifDefined(this.value)}
+              .indeterminate=${live(this.indeterminate)}
+              .checked=${live(this.checked)}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              aria-checked=${this.checked ? 'true' : 'false'}
+              @click=${this.handleClick}
+              @input=${this.handleInput}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+            />
+            ${this.checked
             ? html `
-                <nile-icon
-                  part="checked-icon"
-                  class="checkbox__checked-icon"
-                  color="white"
-                  library="system"
-                  name="tick"
-                  size="12"
-                ></nile-icon>
-              `
+                  <nile-icon
+                    part="checked-icon"
+                    class="checkbox__checked-icon"
+                    color="white"
+                    library="system"
+                    name="tick"
+                    size="12"
+                  ></nile-icon>
+                `
             : ''}
-          ${!this.checked && this.indeterminate
+            ${!this.checked && this.indeterminate
             ? html `
-                <nile-icon
-                  part="indeterminate-icon"
-                  class="checkbox__indeterminate-icon"
-                  library="system"
-                  color="white"
-                  name="minus"
-                  size="12"
-                ></nile-icon>
-              `
+                  <nile-icon
+                    part="indeterminate-icon"
+                    class="checkbox__indeterminate-icon"
+                    library="system"
+                    color="white"
+                    name="minus"
+                    size="12"
+                  ></nile-icon>
+                `
             : ''}
-        </span>
+          </span>
+        </div>
         <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel ? 'margin-left:0;' : ''}">
           ${this.label ? html `<span class="checkbox__label__text">${this.label}</span>` : ``}
@@ -277,6 +280,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileCheckbox.prototype, "required", void 0);
+__decorate([
+    query('.checkbox__label__text')
+], NileCheckbox.prototype, "labelContainer", void 0);
+__decorate([
+    query('div.checkbox__icon__container')
+], NileCheckbox.prototype, "checkboxIconContainer", void 0);
 __decorate([
     watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })
 ], NileCheckbox.prototype, "handleStateChange", null);

package/dist/src/nile-checkbox/nile-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n property,\n nothing,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\n/\n @summary Checkboxes allow the user to toggle an option on or off.\n \n @dependency nile-icon\n \n @slot - The checkbox's label.\n \n @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n \n @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n /\n\n/\n Nile icon component.\n \n @tag nile-checkbox\n \n /\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n\n static styles: CSSResultGroup = styles;\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n\n @property() title = ''; // make reactive to pass through\n\n /** The name of the checkbox, submitted as a name/value pair with form data. /\n @property() name = '';\n\n /* The current value of the checkbox, submitted as a name/value pair with form data. /\n @property() value: boolean;\n\n /* The checkbox's size. /\n @property({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Disables the checkbox. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Label, declared this property for backward compatibility of old component /\n @property({ type: String, reflect: true }) label = '';\n\n /* Sublabel, declared this property for backward compatibility of old component /\n @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';\n\n /\n Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* The default value of the form control. Primarily used for resetting the form control. /\n @defaultValue('checked') defaultChecked = false;\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ type: Boolean }) showHelpText = false;\n\n /\n By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n /\n @property({ reflect: true }) form = '';\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n composed: true,\n bubbles: true,\n detail: {\n checked: this.checked,\n },\n })\n );\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n\n private handleInput() {\n this.emit('input');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n\n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n\n /* Simulates a click on the checkbox. /\n click() {\n this.input.click();\n }\n\n /* Sets focus on the checkbox. /\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n\n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n\n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate\n })}\n >\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n <!-- An empty title prevents browser validation tooltips from appearing on hover -->\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${ this.title }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\" style=\"${!this.label && !this.subLabel?'margin-left:0;':''}\">\n ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n ${this.subLabel ? html`<span class=\"checkbox__sublabel__text\">${this.subLabel}</span>` : ``}\n <slot></slot>\n </div>\n </label>\n\n ${hasHelpText\n ? html`\n <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n `\n : nothing}\n ${hasErrorMessage\n ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`\n : nothing}\n `;\n }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n property,\n nothing,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\n/\n @summary Checkboxes allow the user to toggle an option on or off.\n \n @dependency nile-icon\n \n @slot - The checkbox's label.\n \n @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n \n @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n /\n\n/\n Nile icon component.\n \n @tag nile-checkbox\n \n /\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n\n static styles: CSSResultGroup = styles;\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n\n @property() title = ''; // make reactive to pass through\n\n /** The name of the checkbox, submitted as a name/value pair with form data. /\n @property() name = '';\n\n /* The current value of the checkbox, submitted as a name/value pair with form data. /\n @property() value: boolean;\n\n /* The checkbox's size. /\n @property({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Disables the checkbox. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Label, declared this property for backward compatibility of old component /\n @property({ type: String, reflect: true }) label = '';\n\n /* Sublabel, declared this property for backward compatibility of old component /\n @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';\n\n /\n Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* The default value of the form control. Primarily used for resetting the form control. /\n @defaultValue('checked') defaultChecked = false;\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ type: Boolean }) showHelpText = false;\n\n /\n By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n /\n @property({ reflect: true }) form = '';\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n @query('.checkbox__label__text') labelContainer:HTMLElement;\n\n @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n composed: true,\n bubbles: true,\n detail: {\n checked: this.checked,\n },\n })\n );\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n\n private handleInput() {\n this.emit('input');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n\n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n\n /* Simulates a click on the checkbox. /\n click() {\n this.input.click();\n }\n\n /* Sets focus on the checkbox. /\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';\n }\n\n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n\n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate\n })} \n >\n <div class=\"checkbox__icon__container\">\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n <!-- An empty title prevents browser validation tooltips from appearing on hover -->\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${ this.title }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n </div>\n\n <div part=\"label\" class=\"checkbox__label\" style=\"${!this.label && !this.subLabel?'margin-left:0;':''}\">\n ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n ${this.subLabel ? html`<span class=\"checkbox__sublabel__text\">${this.subLabel}</span>` : ``}\n <slot></slot>\n </div>\n </label>\n\n ${hasHelpText\n ? html`\n <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n `\n : nothing}\n ${hasErrorMessage\n ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`\n : nothing}\n `;\n }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}\n"]}

package/dist/src/nile-input/nile-input.css.js CHANGED Viewed

@@ -196,10 +196,10 @@ export const styles = css `
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-sans-serif);
-    font-size: 16px;
+    font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    line-height: 24px;
+    line-height: 16px;
     letter-spacing: 0.2px;
   }

package/dist/src/nile-input/nile-input.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit-element';\n\n/\n Input CSS\n /\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n / Label /\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 6px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n / Error message /\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n / Standard inputs /\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #85aad1;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .input--destructive:active {\n border: 1px solid #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / Filled inputs /\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #667085;\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n /\n * Size modifiers\n /\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted() {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted() {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 40px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted() {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted() {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted() {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted() {\n margin-inline-end: 1.25rem;\n }\n\n /\n Pill modifier\n /\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /\n * Clearable + Password Toggle\n /\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n / Don't show the browser's password toggle in Edge /\n ::-ms-reveal {\n display: none;\n }\n\n / Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n line-height: 16px;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit-element';\n\n/\n Input CSS\n /\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n / Label /\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 6px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: #a4121c;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7f7f7f;\n margin-top: 6px;\n }\n\n / Error message /\n .form-control__error-message {\n display: block;\n color: #a4121c;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n / Standard inputs /\n .input--standard {\n background-color: var(--nile-input-standard-background-color);\n border: solid 1px var(--nile-input-standard-border-color);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #85aad1;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(133, 170, 209, 0.24);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n .input--standard.input--destructive {\n border-color: #fda29b;\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n .input--destructive:active {\n border: 1px solid #fda29b;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n / Filled inputs /\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-sans-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: #667085;\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: #000;\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input--standard:focus {\n border-radius: 4px;\n border: 1px solid #85aad1;\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n /\n * Size modifiers\n /\n\n .input--small {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted() {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted() {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: var(--nile-input-font-size-medium);\n height: 40px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted() {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted() {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted() {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted() {\n margin-inline-end: 1.25rem;\n }\n\n /\n Pill modifier\n /\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /\n * Clearable + Password Toggle\n /\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n / Don't show the browser's password toggle in Edge /\n ::-ms-reveal {\n display: none;\n }\n\n / Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n\n .input__non-printable {\n border-radius: 4px;\n max-width: 400px;\n background-color: var(--nile-colors-white-base);\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: 10px;\n font-size: 12px;\n max-height: 300px;\n overflow-y: scroll;\n line-height: 16px;\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: 10px;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: 4px;\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: 16px;\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"]}