npm - @aquera/nile-elements - Versions diffs - 0.1.39-beta-1.2 → 0.1.40-beta-1.1 - Mend

@aquera/nile-elements 0.1.39-beta-1.2 → 0.1.40-beta-1.1

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 (286) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'help-text',\n 'label'\n );\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* Disables the duplicate entries. /\n @property({ type: Boolean }) noDuplicates = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n @property({ type: String }) tagVariant: string = ''; // can be '', 'normal', 'success', etc.\n\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = 'type here...';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n // AUTO-COMPLETE-OPTIONS\n\n /* Virtual scroll in dropdown options. */\n @property({ type: Boolean }) enableVirtualScroll = false;\n\n @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n @property({ type: Array }) value: any[] = [];\n\n @property({ type: Boolean }) noWrap: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Array }) errorIndexes: number[] = [];\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('autoCompleteOptions')) {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n if (changedProperties.has('value')){\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n if (changedProperties.has('tags')){\n this.onTagsChanged();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n 'nile-chip--no-wrap': this.noWrap,\n })}\n >\n ${this.tags.map(\n (tag, index) => html`\n <nile-tag\n class=${classMap({\n 'nile-chip__tags': true,\n })}\n .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n @nile-remove=${() => this.handleRemove(tag)}\n removable\n ?pill=${this.tagVariant !== 'normal'}\n >\n ${tag}\n </nile-tag>\n `\n )}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .enableVirtualScroll=${this.enableVirtualScroll}\n .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\n .renderItemFunction=${this.renderItemFunction}\n .loading=\"${this.loading}\"\n .value=${this.inputValue} \n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n .noOutline=${true}\n .disabled=${this.disabled}\n openOnFocus\n exportparts=\"options__wrapper\"\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n // Add the selected value to the tags array only if it doesn't already exist\n if (!this.noDuplicates \|\| !this.tags.includes(event.detail.value)) {\n this.tags = [...this.tags, event.detail.value];\n this.emit('nile-chip-change', { value: this.tags });\n this.resetInput();\n }\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n\n if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n this.filteredAutoCompleteOptions = [\n ...this.filteredAutoCompleteOptions,\n value,\n ];\n }\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if(event.key === 'Tab'){\n event.preventDefault()\n }\n \n if (\n (event.key === 'Enter' \|\| event.key === 'Tab' ) \n && this.inputValue \n && (!this.noDuplicates \|\| !this.tags.includes(this.inputValue))\n ) {\n event.preventDefault()\n this.tags = [...this.tags, this.inputValue];\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n if(\n (event.key === 'Enter'\|\| event.key === 'Tab' ) \n && this.inputValue \n && (this.noDuplicates \|\| this.tags.includes(this.inputValue))\n ){\n this.emit('nile-duplicates-blocked');\n }\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n onTagsChanged() {\n if (this.noDuplicates)\n this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n }\n\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'help-text',\n 'label'\n );\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* Disables the duplicate entries. /\n @property({ type: Boolean }) noDuplicates = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n @property({ type: String }) tagVariant: string = ''; // can be '', 'normal', 'success', etc.\n\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = 'type here...';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n // AUTO-COMPLETE-OPTIONS\n\n /* Virtual scroll in dropdown options. */\n @property({ type: Boolean }) enableVirtualScroll = false;\n\n @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n @property({ type: Array }) value: any[] = [];\n\n @property({ type: Boolean }) noWrap: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Array }) errorIndexes: number[] = [];\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('autoCompleteOptions')) {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n if (changedProperties.has('value')){\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n if (changedProperties.has('tags')){\n this.onTagsChanged();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n 'nile-chip--no-wrap': this.noWrap,\n })}\n >\n ${this.tags.map(\n (tag, index) => html`\n <nile-tag\n class=${classMap({\n 'nile-chip__tags': true,\n })}\n .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n @nile-remove=${() => this.handleRemove(tag)}\n removable\n ?pill=${this.tagVariant !== 'normal'}\n >\n ${tag}\n </nile-tag>\n `\n )}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .enableVirtualScroll=${this.enableVirtualScroll}\n .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\n .renderItemFunction=${this.renderItemFunction}\n .loading=\"${this.loading}\"\n .value=${this.inputValue} \n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n .noOutline=${true}\n .noPadding=${true}\n .disabled=${this.disabled}\n openOnFocus\n exportparts=\"options__wrapper\"\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n // Add the selected value to the tags array only if it doesn't already exist\n if (!this.noDuplicates \|\| !this.tags.includes(event.detail.value)) {\n this.tags = [...this.tags, event.detail.value];\n this.emit('nile-chip-change', { value: this.tags });\n this.resetInput();\n }\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n\n if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n this.filteredAutoCompleteOptions = [\n ...this.filteredAutoCompleteOptions,\n value,\n ];\n }\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if(event.key === 'Tab'){\n event.preventDefault()\n }\n \n if (\n (event.key === 'Enter' \|\| event.key === 'Tab' ) \n && this.inputValue \n && (!this.noDuplicates \|\| !this.tags.includes(this.inputValue))\n ) {\n event.preventDefault()\n this.tags = [...this.tags, this.inputValue];\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n if(\n (event.key === 'Enter'\|\| event.key === 'Tab' ) \n && this.inputValue \n && (this.noDuplicates \|\| this.tags.includes(this.inputValue))\n ){\n this.emit('nile-duplicates-blocked');\n }\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n onTagsChanged() {\n if (this.noDuplicates)\n this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n }\n\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}

package/dist/src/nile-code-editor/nile-code-editor.css.js CHANGED Viewed

@@ -22,7 +22,7 @@ export const styles = css `
   .code__editor__container {
     display: flex;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-none));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     position: relative;
@@ -59,10 +59,10 @@ export const styles = css `
     position: absolute;
     border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));
     cursor: pointer;
-    right: 0px;
+    right: var(--nile-spacing-none, var(--ng-spacing-1-5));
     top: 5px;
     z-index: 1;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-none));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DxB,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';\n\n/\n CodeEditor CSS\n /\nexport const styles = css`\n {\n box-sizing:border-box;\n }\n\n :host {\n display: block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .code__editor__container {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-0));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n position: relative;\n }\n\n .no-scroller .cm-scroller{\n scrollbar-width: none;\n }\n\n .error {\n border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));\n }\n\n .noborder {\n border: none;\n }\n\n .cm-editor {\n flex: 1;\n min-width: 0;\n }\n\n .ͼ1.cm-focused {\n outline: none;\n }\n\n .cm-gutters{\n border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));\n border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));\n }\n\n .expand__icon__container{\n display: none;\n position: absolute;\n border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));\n cursor: pointer;\n right: ~~0px~~;\n top: 5px;\n z-index: 1;\n padding: var(--nile-spacing-sm, var(--ng-spacing-0));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .code__editor__container:hover > .expand__icon__container{\n display: flex;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DxB,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';\n\n/\n CodeEditor CSS\n /\nexport const styles = css`\n {\n box-sizing:border-box;\n }\n\n :host {\n display: block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .code__editor__container {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-none));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n position: relative;\n }\n\n .no-scroller .cm-scroller{\n scrollbar-width: none;\n }\n\n .error {\n border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));\n }\n\n .noborder {\n border: none;\n }\n\n .cm-editor {\n flex: 1;\n min-width: 0;\n }\n\n .ͼ1.cm-focused {\n outline: none;\n }\n\n .cm-gutters{\n border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));\n border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));\n }\n\n .expand__icon__container{\n display: none;\n position: absolute;\n border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));\n cursor: pointer;\n right: var(--nile-spacing-none, var(--ng-spacing-1-5));\n top: 5px;\n z-index: 1;\n padding: var(--nile-spacing-sm, var(--ng-spacing-none));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .code__editor__container:hover > .expand__icon__container{\n display: flex;\n }\n`;\n\nexport default [styles];\n"]}

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

@@ -29,9 +29,9 @@ export const styles = css `
   :host {
     --size: 25rem;
-    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
-    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
-    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
+    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
     display: contents;
   }
@@ -148,7 +148,7 @@ export const styles = css `
   .drawer__footer {
     text-align: right;
-    padding: var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6)) var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6));
+    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));
   }
   .drawer__footer ::slotted(nile-button:not(:last-of-type)) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KxB,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';\n\n/\n Drawer CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --size: 25rem;\n --header-spacing: var(--nile-line-height-small, var(--ng-spacing-5));\n --body-spacing: var(--nile-line-height-small, var(--ng-spacing-5));\n --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-5));\n\n display: contents;\n }\n\n .drawer {\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .drawer--contained {\n position: absolute;\n z-index: initial;\n }\n\n .drawer--fixed {\n position: fixed;\n z-index: 700;\n }\n\n .drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-2, 0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));\n overflow: auto;\n pointer-events: all;\n }\n\n .drawer__panel:focus {\n outline: none;\n }\n\n .drawer--top .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--end .drawer__panel {\n top: 0;\n inset-inline-end: 0;\n bottom: auto;\n inset-inline-start: auto;\n width: var(--size);\n height: 100%;\n }\n\n .drawer--bottom .drawer__panel {\n top: auto;\n inset-inline-end: auto;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--start .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: var(--size);\n height: 100%;\n }\n\n .drawer__header {\n display: flex;\n }\n\n .drawer__title {\n flex: 1 1 auto;\n font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-6, var(--ng-font-size-text-lg));\n line-height: 1.4;\n padding: var(--header-spacing);\n margin: 0;\n }\n\n .drawer__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 0.5rem;\n padding: 0 var(--header-spacing);\n }\n\n .drawer__header-actions nile-icon-button,\n .drawer__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n }\n\n .drawer__body {\n flex: 1 1 auto;\n display: block;\n padding: var(--body-spacing);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .drawer__footer {\n text-align: right;\n padding: var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6)) var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6));\n }\n\n .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n margin-inline-end: 0.5rem;\n }\n\n .drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n }\n\n .drawer__overlay {\n display: block;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(240 3.8% 46.1% / 33%);\n pointer-events: all;\n }\n\n .drawer--contained .drawer__overlay {\n display: none;\n }\n\n .drawer__close:hover {\n cursor:pointer;\n }\n\n @media (forced-colors: active) {\n .drawer__panel {\n border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));\n }\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KxB,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';\n\n/\n Drawer CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --size: 25rem;\n --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n\n display: contents;\n }\n\n .drawer {\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .drawer--contained {\n position: absolute;\n z-index: initial;\n }\n\n .drawer--fixed {\n position: fixed;\n z-index: 700;\n }\n\n .drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-2, 0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));\n overflow: auto;\n pointer-events: all;\n }\n\n .drawer__panel:focus {\n outline: none;\n }\n\n .drawer--top .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--end .drawer__panel {\n top: 0;\n inset-inline-end: 0;\n bottom: auto;\n inset-inline-start: auto;\n width: var(--size);\n height: 100%;\n }\n\n .drawer--bottom .drawer__panel {\n top: auto;\n inset-inline-end: auto;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--start .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: var(--size);\n height: 100%;\n }\n\n .drawer__header {\n display: flex;\n }\n\n .drawer__title {\n flex: 1 1 auto;\n font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-6, var(--ng-font-size-text-lg));\n line-height: 1.4;\n padding: var(--header-spacing);\n margin: 0;\n }\n\n .drawer__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 0.5rem;\n padding: 0 var(--header-spacing);\n }\n\n .drawer__header-actions nile-icon-button,\n .drawer__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n }\n\n .drawer__body {\n flex: 1 1 auto;\n display: block;\n padding: var(--body-spacing);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .drawer__footer {\n text-align: right;\n padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));\n }\n\n .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n margin-inline-end: 0.5rem;\n }\n\n .drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n }\n\n .drawer__overlay {\n display: block;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(240 3.8% 46.1% / 33%);\n pointer-events: all;\n }\n\n .drawer--contained .drawer__overlay {\n display: none;\n }\n\n .drawer__close:hover {\n cursor:pointer;\n }\n\n @media (forced-colors: active) {\n .drawer__panel {\n border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));\n }\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-empty-state/nile-empty-state.css.js CHANGED Viewed

@@ -94,7 +94,7 @@ export const styles = css `
   }
   .empty-state__body--tonal {
-    background: linear-gradient(180deg, var(--nile-colors-neutral-100, var(--ng-color-graylightmode-50)) 0%, var(--nile-colors-neutral-400, var(--ng-color-graylightmode-200)) 100%);
+    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
     width: 104px;
     height: 104px;
     border-radius: var(--nile-radius-full, var(--ng-radius-full));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,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';\n\n/\n EmptyState CSS\n */\nexport const styles = css`\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--ng-display-flex);\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: ~~linear-gradient(180deg,~~ var(--nile-~~colors~~-~~neutral-100~~, var(--ng-~~color~~-~~graylightmode~~-50)) ~~0%, var(--nile-colors-neutral-400, var(--ng-color-graylightmode-200)) 100%)~~;\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n\n background-color: white;\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,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';\n\n/\n EmptyState CSS\n */\nexport const styles = css`\n :host {\n display:inline-flex;\n width:100%;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .empty-state--sm {\n --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height:20px;\n \n --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:118px;\n --nile-es-img-width:152px;\n\n --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n }\n\n .empty-state--md {\n --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n --nile-es-img-height:128px;\n --nile-es-img-width:172px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state--lg {\n --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n --nile-es-img-height:160px;\n --nile-es-img-width:220px;\n\n --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .empty-state {\n min-width:300px;\n max-width:512px;\n width:100%;\n height:max-content;\n display:flex;\n flex-direction:column;\n row-gap:var(--nile-es-gap);\n }\n\n .empty-state__body {\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n align-items:center;\n row-gap:var(--nile-es-body-gap)\n }\n\n .empty-state__body--content {\n position:relative;\n }\n\n .empty-state__img__icon {\n display: var(--ng-display-flex);\n justify-content: center;\n align-items: center;\n }\n\n .empty-state__body--tonal {\n background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n width: 104px;\n height: 104px;\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n display:flex;\n justify-content:center;\n align-items:center;\n }\n\n .nile-flat-type-icon {\n height:var(--nile-es-icon-size);\n aspect-ratio:1 / 1;\n border-radius: var(--nile-es-flat-option-border-radius);\n\n background-color: white;\n display: grid;\n place-items: center;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .empty__state__text-section {\n display:flex;\n flex-direction:column;\n gap:var(--nile-es-text-gap);\n max-width:80%;\n }\n\n .empty-state__text {\n font-size: var(--nile-es-text-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n line-height: var(--nile-es-text-line-height);\n text-align: center;\n font-style: normal;\n }\n\n .empty-state__subtext {\n font-size: var(--nile-es-subtext-size);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n line-height: var(--nile-es-subtext-line-height);\n text-align: center;\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n font-style: normal;\n }\n\n .empty-state-actions {\n display:flex;\n justify-content:center;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-error-message/nile-error-message.css.js CHANGED Viewed

@@ -11,8 +11,8 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);
-    --ng-nile-private-max-width: var(--nile-width-535px, var(--ng-width-120));
-    --ng-nile-private-max-height: var(--nile-height-48px, var(--ng-height-48px));
+    --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));
+    --ng-private-error-max-height: var(--nile-height-48px, var(--ng-height-48px));
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
@@ -24,7 +24,7 @@ export const styles = css `
     letter-spacing: 0.2px;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
-    max-width: var(--nile-error-max-width, var(--ng-nile-private-max-width));
+    max-width: var(--nile-error-max-width, var(--ng-private-error-max-width));
   }
   .nile-error-message__error {
@@ -36,7 +36,7 @@ export const styles = css `
     color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
-    max-height: var(--nile-error-max-height, var(--ng-nile-private-max-height));
+    max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));
     overflow-x: auto;
   }
@@ -78,7 +78,7 @@ export const styles = css `
   }
   .nile-error-message__response-expanded.expanded {
-    max-height: var(--nile-error-max-dialog-height, var(--ng-nile-private-max-height));
+    max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
     padding: var(--nile-spacing-md, var(--ng-error-expanded-padding));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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';\n\n/\n ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);\n --ng-~~nile-~~private-max-width: var(--nile-width-535px, var(--ng-width-120));\n --ng-~~nile-~~private-max-height: var(--nile-height-48px, var(--ng-height-48px));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));\n max-width: var(--nile-error-max-width, var(--ng-~~nile-~~private-max-width)); \n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n max-height: var(--nile-error-max-height, var(--ng-~~nile-~~private-max-height));\n overflow-x: auto;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: var(--nile-line-height-small);\n height: auto;\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md));\n background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: var(--nile-spacing-none) var(--nile-spacing-none);\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: var(--nile-error-max-dialog-height, var(--ng-~~nile-~~private-max-height));\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: var(--nile-spacing-md, var(--ng-error-expanded-padding));\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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';\n\n/\n ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);\n --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));\n --ng-private-error-max-height: var(--nile-height-48px, var(--ng-height-48px));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));\n max-width: var(--nile-error-max-width, var(--ng-private-error-max-width)); \n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));\n overflow-x: auto;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: var(--nile-line-height-small);\n height: auto;\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md));\n background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: var(--nile-spacing-none) var(--nile-spacing-none);\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: var(--nile-spacing-md, var(--ng-error-expanded-padding));\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-file-preview/nile-file-preview.css.js CHANGED Viewed

@@ -93,7 +93,7 @@ export const styles = css `
   .icons-container {
     display: flex;
-    gap: var(--nile-spacing-xs, var(--ng-spacing-1));
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
   .general-icon {
@@ -242,7 +242,7 @@ export const styles = css `
     height: var(--nile-height-40px, var(--ng-height-40px));
     width: var(--nile-width-40px, var(--ng-width-10));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -302,7 +302,7 @@ export const styles = css `
     height: var(--nile-height-40px, var(--ng-height-40px));
     width: var(--nile-width-40px, var(--ng-width-10));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -416,7 +416,7 @@ export const styles = css `
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: var(--nile-spacing-5xl, --ng-spacing-5xl);
+    padding-top: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
   .corner-icon {
@@ -457,7 +457,7 @@ export const styles = css `
   .vertical-document-icon {
     height: var(--nile-height-80px, var(--ng-height-80px));
     width: var(--nile-width-80px, var(--ng-spacing-8xl));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2iBxB,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';\n\n/\n FileUpload CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n {\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body))\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: var(--nile-height-60px, var(--ng-height-60px));\n max-width: 648px;\n width: max(648px, 100%);\n min-width: 230px;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: var(--nile-spacing-xs, var(--ng-spacing-1));\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State /\n .uploading {\n height: 62px;\n width: 648px;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1)) \n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n }\n\n nile-progress-bar li span {\n background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n }\n\n / PREVIEW STATE /\n .preview {\n height: 62px;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px);\n }\n\n .preview-image-container img, iframe {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px); // check it once\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .preview-file-info p {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n / NO PREVIEW STATE /\n .no-preview {\n height: 62px;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);\n display: flex;\n justify-content: center;\n align-items: center;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n }\n\n .document-icon nile-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n / ERROR STATE /\n .error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error-container {\n width: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);\n display: flex;\n justify-content: center;\n align-items: center;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-red-400, var(--ng-colors-border-error));\n background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));\n }\n\n .error-icon nile-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n text-align: center;\n }\n\n .file-info p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center;\n }\n \n .file-info > nile-tooltip > p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n / VARTICAL STATE START /\n / Default State /\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n }\n\n / Drag State /\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-blue-700), var(--ng-colors-fg-primary-900);\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));\n }\n\n / Uploading State /\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n / border: 1px solid var(--nile-colors-neutral-400); /\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: var(--nile-spacing-5xl, --ng-spacing-5xl);\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n / Preview State /\n .vertical-preview {\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n object-fit: cover;\n width: var(--nile-width-80px, var(--ng-spacing-8xl));\n height: var(--nile-height-80px, var(--ng-height-80px));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n }\n\n / Vertical No Preview State /\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-document-icon {\n height: var(--nile-height-80px, var(--ng-height-80px));\n width: var(--nile-width-80px, var(--ng-spacing-8xl));\n padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));\n }\n\n / Veritcal Error State /\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-red-400, var(--ng-colors-border-error));\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: start;\n }\n\n .file-info-vertical-state p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n padding-bottom: 6px;\n text-align: center;\n }\n \n .file-info-vertical-state > nile-tooltip > p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n\n / Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n scrollbar-width: none;\n padding: var(--nile-radius-lg, var(--ng-spacing-lg));\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n`;\n\nexport default [styles];"]}
1	+ {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2iBxB,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';\n\n/\n FileUpload CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n {\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body))\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: var(--nile-height-60px, var(--ng-height-60px));\n max-width: 648px;\n width: max(648px, 100%);\n min-width: 230px;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State /\n .uploading {\n height: 62px;\n width: 648px;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1)) \n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n }\n\n nile-progress-bar li span {\n background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n }\n\n / PREVIEW STATE /\n .preview {\n height: 62px;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px);\n }\n\n .preview-image-container img, iframe {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px); // check it once\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .preview-file-info p {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n / NO PREVIEW STATE /\n .no-preview {\n height: 62px;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n display: flex;\n justify-content: center;\n align-items: center;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n }\n\n .document-icon nile-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n / ERROR STATE /\n .error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error-container {\n width: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n display: flex;\n justify-content: center;\n align-items: center;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-red-400, var(--ng-colors-border-error));\n background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));\n }\n\n .error-icon nile-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n text-align: center;\n }\n\n .file-info p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center;\n }\n \n .file-info > nile-tooltip > p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n / VARTICAL STATE START /\n / Default State /\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n }\n\n / Drag State /\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-blue-700), var(--ng-colors-fg-primary-900);\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));\n }\n\n / Uploading State /\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n / border: 1px solid var(--nile-colors-neutral-400); /\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n / Preview State /\n .vertical-preview {\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n object-fit: cover;\n width: var(--nile-width-80px, var(--ng-spacing-8xl));\n height: var(--nile-height-80px, var(--ng-height-80px));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n }\n\n / Vertical No Preview State /\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-document-icon {\n height: var(--nile-height-80px, var(--ng-height-80px));\n width: var(--nile-width-80px, var(--ng-spacing-8xl));\n padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));\n }\n\n / Veritcal Error State /\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-red-400, var(--ng-colors-border-error));\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: start;\n }\n\n .file-info-vertical-state p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n padding-bottom: 6px;\n text-align: center;\n }\n \n .file-info-vertical-state > nile-tooltip > p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n\n / Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n scrollbar-width: none;\n padding: var(--nile-radius-lg, var(--ng-spacing-lg));\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-file-upload/nile-file-upload.css.js CHANGED Viewed

@@ -46,18 +46,18 @@ export const styles = css `
     justify-content: space-between;
     gap: 18px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
       var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   .hover-border {
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
       var(--nile-colors-primary-600, var(--ng-colors-border-brand));
   }
@@ -75,7 +75,7 @@ export const styles = css `
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    position: relative;
+    position: relative;
   }
   .vertical-div:hover {
@@ -95,7 +95,7 @@ export const styles = css `
   }
   .content {
-    display: flex;
+    display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
@@ -107,7 +107,7 @@ export const styles = css `
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
   .content p {
     margin: var(--nile-spacing-none, var(--ng-spacing-none));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
@@ -125,9 +125,9 @@ export const styles = css `
   /* DRAGGING */
   .dragging {
     background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
       var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     display: flex;
     align-items: center;
@@ -166,12 +166,12 @@ export const styles = css `
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -202,9 +202,9 @@ export const styles = css `
   /* PREVIEW STATE */
   .preview {
-    border:
+    border:
       var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
       var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
@@ -227,12 +227,12 @@ export const styles = css `
     width: var(--nile-width-42px, 42px); // check it once
     object-fit: contain;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border:
+    border:
       var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
       var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -289,7 +289,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -316,7 +316,7 @@ export const styles = css `
   }
   /* ERROR STATE */
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -347,7 +347,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
   .file-info {
     width: 100%;
     display: flex;
@@ -541,7 +541,7 @@ export const styles = css `
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-sm);
     scrollbar-width: none;
     padding: 12px;
   }