@aquera/nile-elements 0.0.3-4 → 0.0.3-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.css.js +11 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.js +2 -2
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-option/nile-option.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js +19 -6
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.d.ts +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js +34 -15
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.iife.js +152 -129
- package/dist/nile-option/nile-option.cjs.js +1 -1
- package/dist/nile-option/nile-option.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.cjs.js +1 -1
- package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.esm.js +11 -1
- package/dist/nile-option/nile-option.esm.js +2 -2
- package/dist/nile-select/index.cjs.js +1 -1
- package/dist/nile-select/index.esm.js +1 -1
- package/dist/nile-select/nile-select.cjs.js +1 -1
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.cjs.js +1 -1
- package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.esm.js +19 -6
- package/dist/nile-select/nile-select.esm.js +15 -14
- package/dist/src/nile-option/nile-option.css.js +11 -1
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.js +2 -2
- package/dist/src/nile-option/nile-option.js.map +1 -1
- package/dist/src/nile-select/nile-select.css.js +19 -6
- package/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +1 -0
- package/dist/src/nile-select/nile-select.js +34 -15
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-option/nile-option.css.ts +11 -1
- package/src/nile-option/nile-option.ts +2 -2
- package/src/nile-select/nile-select.css.ts +19 -6
- package/src/nile-select/nile-select.ts +38 -15
|
@@ -27,11 +27,15 @@ export const styles = css `
|
|
|
27
27
|
line-height: 1.8;
|
|
28
28
|
letter-spacing: normal;
|
|
29
29
|
color: hsl(240 5.3% 26.1%);
|
|
30
|
-
padding:
|
|
30
|
+
padding: 6px 0;
|
|
31
31
|
transition: 150ms fill;
|
|
32
32
|
cursor: pointer;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.option--single-select {
|
|
36
|
+
padding: 9px 12px;
|
|
37
|
+
}
|
|
38
|
+
|
|
35
39
|
.option--hover:not(.option--current):not(.option--disabled) {
|
|
36
40
|
background-color: rgba(0, 94, 166, 0.1);
|
|
37
41
|
color: hsl(0, 0%, 0%);
|
|
@@ -84,6 +88,12 @@ export const styles = css `
|
|
|
84
88
|
margin-inline-start: 0.5rem;
|
|
85
89
|
}
|
|
86
90
|
|
|
91
|
+
.option--checkbox{
|
|
92
|
+
pointer-events: none;
|
|
93
|
+
margin-left: 12px;
|
|
94
|
+
margin-right: 12px;
|
|
95
|
+
}
|
|
96
|
+
|
|
87
97
|
@media (forced-colors: active) {
|
|
88
98
|
:host(:hover:not([aria-disabled='true'])) .option {
|
|
89
99
|
outline: dashed 1px SelectedItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n padding: 6px 0;\n transition: 150ms fill;\n cursor: pointer;\n }\n\n .option--single-select {\n padding: 9px 12px;\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: rgba(0, 94, 166, 0.1);\n color: hsl(0, 0%, 0%);\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: rgba(0, 94, 166, 0.1);\n color: #005ea6;\n opacity: 1;\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: 0.25rem;\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: 0.5rem;\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: 0.5rem;\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: 12px;\n margin-right: 12px;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -123,7 +123,7 @@ let NileOption = class NileOption extends NileElement {
|
|
|
123
123
|
part="base"
|
|
124
124
|
class=${classMap({
|
|
125
125
|
option: true,
|
|
126
|
-
|
|
126
|
+
'option--single-select': !this.isMultipleSelect,
|
|
127
127
|
'option--current': this.selected && !this.isMultipleSelect,
|
|
128
128
|
'option--disabled': this.disabled,
|
|
129
129
|
'option--selected': this.selected && !this.isMultipleSelect,
|
|
@@ -133,7 +133,7 @@ let NileOption = class NileOption extends NileElement {
|
|
|
133
133
|
@mouseleave=${this.handleMouseLeave}
|
|
134
134
|
>
|
|
135
135
|
|
|
136
|
-
${this.isMultipleSelect ? html `<nile-checkbox
|
|
136
|
+
${this.isMultipleSelect ? html `<nile-checkbox class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
|
|
137
137
|
|
|
138
138
|
<slot part="prefix" name="prefix" class="option__prefix"></slot>
|
|
139
139
|
<slot
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.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 { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private cachedTextLabel: string;\n\n @query('.option__label') defaultSlot: HTMLSlotElement;\n\n @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n @state() selected = false; // the option is selected and has aria-selected=\"true\"\n @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n @state() hidden = false; // the option is hidden\n @state() isMultipleSelect = false;\n\n /**\n * The option's value. When selected, the containing form control will receive this value. The value must be unique\n * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n * multiple values.\n */\n @property({ reflect: true }) value = '';\n\n /** Draws the option in a disabled state, preventing selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', 'false');\n\n // Find the closest parent 'nile-select' element\n const parentSelect = this.closest('nile-select');\n\n // Check if the parent has the 'multiple' attribute\n if (parentSelect && parentSelect.hasAttribute('multiple')) {\n let multipleValue = parentSelect.getAttribute('multiple');\n if (multipleValue !== 'false') {\n if(multipleValue === ''){\n multipleValue = 'true';\n }\n this.isMultipleSelect = Boolean(multipleValue);\n }\n }\n }\n\n private handleDefaultSlotChange() {\n const textLabel = this.getTextLabel();\n\n // Ignore the first time the label is set\n if (typeof this.cachedTextLabel === 'undefined') {\n this.cachedTextLabel = textLabel;\n return;\n }\n\n // When the label changes, emit a slotchange event so parent controls see it\n if (textLabel !== this.cachedTextLabel) {\n this.cachedTextLabel = textLabel;\n this.emit('slotchange', {\n bubbles: true,\n composed: false,\n cancelable: false,\n });\n }\n }\n\n private handleMouseEnter() {\n this.hasHover = true;\n }\n\n private handleMouseLeave() {\n this.hasHover = false;\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('selected')\n handleSelectedChange() {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n\n @watch('value')\n handleValueChange() {\n // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n // instead of requiring them to cast the value to a string.\n if (typeof this.value !== 'string') {\n this.value = String(this.value);\n }\n\n // if (this.value.includes(' ')) {\n // console.error(\n // `Option values cannot include a space. All spaces have been replaced with underscores.`,\n // this\n // );\n // this.value = this.value.replace(/ /g, '_');\n // }\n }\n\n /** Returns a plain text label based on the option's content. */\n getTextLabel() {\n return (this.textContent ?? '').trim();\n }\n\n render() {\n return html`\n ${!this.hidden\n ? html` <div\n part=\"base\"\n class=${classMap({\n option: true,\n 'option--single-select': !this.isMultipleSelect,\n 'option--current': this.selected && !this.isMultipleSelect,\n 'option--disabled': this.disabled,\n 'option--selected': this.selected && !this.isMultipleSelect,\n 'option--hover': this.hasHover,\n })}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n\n ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n <slot\n part=\"label\"\n class=\"option__label\"\n @slotchange=${this.handleDefaultSlotChange}\n ></slot>\n <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n </div>`\n : ''}\n `;\n }\n}\n\nexport default NileOption;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-option': NileOption;\n }\n}\n"]}
|
|
@@ -177,11 +177,14 @@ export const styles = css `
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.select__tags-count {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
180
|
+
color: #005ea6;
|
|
181
|
+
font-family: Colfax-regular;
|
|
182
|
+
font-size: 14px;
|
|
183
|
+
font-style: normal;
|
|
184
|
+
font-weight: 400;
|
|
185
|
+
line-height: 14px;
|
|
186
|
+
letter-spacing: 0.2px;
|
|
187
|
+
margin: 6px;
|
|
185
188
|
}
|
|
186
189
|
|
|
187
190
|
.select__tags-count-clearable {
|
|
@@ -396,10 +399,20 @@ export const styles = css `
|
|
|
396
399
|
display: flex;
|
|
397
400
|
flex-direction: row;
|
|
398
401
|
align-items: flex-start;
|
|
399
|
-
padding: 8px
|
|
402
|
+
padding: 8px 12px 16px;
|
|
400
403
|
gap: 12px;
|
|
401
404
|
justify-content: space-between;
|
|
402
405
|
}
|
|
406
|
+
|
|
407
|
+
.tag__prefix[slot='prefix'] {
|
|
408
|
+
height: 14px;
|
|
409
|
+
display: inline-block;
|
|
410
|
+
overflow: hidden;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.tag__prefix[slot='prefix'] img {
|
|
414
|
+
max-height: 100%;
|
|
415
|
+
}
|
|
403
416
|
`;
|
|
404
417
|
export default [styles];
|
|
405
418
|
//# sourceMappingURL=nile-select.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqZxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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 .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: #005ea6;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n margin: 6px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid #000;\n background: #fff;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n border-color: #0059ff;\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .select--error .select__combobox {\n border-color: #e5434d;\n }\n\n .select--success {\n border-color: #43e5c0;\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: 0.25rem;\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: 1rem;\n font-weight: 400;\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 12px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -181,6 +181,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
|
|
|
181
181
|
private handleDefaultSlotChange;
|
|
182
182
|
private handleTagRemove;
|
|
183
183
|
private getAllOptions;
|
|
184
|
+
private getOptionPrefix;
|
|
184
185
|
private getFirstOption;
|
|
185
186
|
private setCurrentOption;
|
|
186
187
|
private setSelectedOptions;
|
|
@@ -22,6 +22,7 @@ import { scrollIntoView } from '../internal/scroll';
|
|
|
22
22
|
import { waitForEvent } from '../internal/event';
|
|
23
23
|
import { watch } from '../internal/watch';
|
|
24
24
|
import NileElement from '../internal/nile-element';
|
|
25
|
+
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
25
26
|
/**
|
|
26
27
|
* Nile icon component.
|
|
27
28
|
*
|
|
@@ -95,7 +96,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
95
96
|
/** The select's size. */
|
|
96
97
|
this.size = 'medium';
|
|
97
98
|
/** Placeholder text to show as a hint when the select is empty. */
|
|
98
|
-
this.placeholder = '';
|
|
99
|
+
this.placeholder = 'Select...';
|
|
99
100
|
/** Placeholder text to show as a hint when the select is empty. */
|
|
100
101
|
this.searchValue = '';
|
|
101
102
|
/** Allows more than one option to be selected. */
|
|
@@ -451,6 +452,23 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
451
452
|
getAllOptions() {
|
|
452
453
|
return [...this.querySelectorAll('nile-option')];
|
|
453
454
|
}
|
|
455
|
+
getOptionPrefix(option) {
|
|
456
|
+
const prefixSlot = option.shadowRoot?.querySelector('slot[name="prefix"]');
|
|
457
|
+
if (!prefixSlot)
|
|
458
|
+
return '';
|
|
459
|
+
const assignedNodes = prefixSlot.assignedNodes();
|
|
460
|
+
const htmlStrings = [];
|
|
461
|
+
assignedNodes.forEach(node => {
|
|
462
|
+
if (node instanceof HTMLElement) {
|
|
463
|
+
htmlStrings.push(node.outerHTML);
|
|
464
|
+
}
|
|
465
|
+
else if (node.nodeType === Node.TEXT_NODE) {
|
|
466
|
+
// Text node
|
|
467
|
+
htmlStrings.push(node.textContent || '');
|
|
468
|
+
}
|
|
469
|
+
});
|
|
470
|
+
return htmlStrings.join('');
|
|
471
|
+
}
|
|
454
472
|
// Gets the first <nile-option> element
|
|
455
473
|
getFirstOption() {
|
|
456
474
|
return this.querySelector('nile-option');
|
|
@@ -761,30 +779,31 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
761
779
|
<nile-tag
|
|
762
780
|
part="tag"
|
|
763
781
|
exportparts="
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
782
|
+
base:tag__base,
|
|
783
|
+
content:tag__content,
|
|
784
|
+
remove-button:tag__remove-button,
|
|
785
|
+
remove-button__base:tag__remove-button__base
|
|
786
|
+
"
|
|
769
787
|
?pill=${this.pill}
|
|
770
788
|
size=${this.size}
|
|
771
789
|
removable
|
|
772
790
|
@nile-remove=${(event) => this.handleTagRemove(event, option)}
|
|
773
791
|
>
|
|
792
|
+
${this.getOptionPrefix(option)
|
|
793
|
+
? html `<span class="tag__prefix" slot="prefix"
|
|
794
|
+
>${unsafeHTML(this.getOptionPrefix(option))}</span
|
|
795
|
+
>`
|
|
796
|
+
: ''}
|
|
774
797
|
${option.getTextLabel()}
|
|
775
798
|
</nile-tag>
|
|
776
799
|
`;
|
|
777
800
|
}
|
|
778
801
|
else if (index === this.maxOptionsVisible) {
|
|
779
802
|
return html `
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
size=${this.size}
|
|
785
|
-
>
|
|
786
|
-
+${this.selectedOptions.length - index}
|
|
787
|
-
</nile-tag>
|
|
803
|
+
|
|
804
|
+
|
|
805
|
+
<span class="select__tags-count">+${this.selectedOptions.length - index} More </span>
|
|
806
|
+
|
|
788
807
|
`;
|
|
789
808
|
}
|
|
790
809
|
else {
|
|
@@ -889,7 +908,7 @@ let NileSelect = class NileSelect extends NileElement {
|
|
|
889
908
|
?disabled="${this.selectedOptions.length === 0}"
|
|
890
909
|
?checked="${this.showSelected}"
|
|
891
910
|
>
|
|
892
|
-
|
|
911
|
+
Show Selected</nile-checkbox
|
|
893
912
|
>
|
|
894
913
|
</span>
|
|
895
914
|
<span class="select__clear" @click="${this.unSlectAll}"
|