@aquera/nile-elements 0.0.1-beta.1 → 0.0.1-beta.3

package/dist/nile-select/nile-select.css.esm.js

@@ -0,0 +1,436 @@
+import{i as e}from"../index-f1b94546.esm.js";const o=e`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .form-control .form-control__label {
+    display: none;
+  }
+
+  .form-control .form-control__help-text {
+    display: none;
+  }
+
+  /* Label */
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: #333333;
+    margin-bottom: 0.75rem;
+  }
+
+  .form-control--has-label.form-control--small .form-control__label {
+    font-size: 0.875rem;
+  }
+
+  .form-control--has-label.form-control--medium .form-control__label {
+    font-size: 1rem;
+  }
+
+  .form-control--has-label.form-control--large .form-control__label {
+    font-size: 1.25rem;
+  }
+
+  :host([required]) .form-control--has-label .form-control__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+    color: inherit;
+  }
+
+  /* Help text */
+  .form-control--has-help-text .form-control__help-text {
+    display: block;
+    color: #666666;
+    margin-top: 0.75rem;
+  }
+
+  .form-control--has-help-text.form-control--small .form-control__help-text {
+    font-size: 0.75rem;
+  }
+
+  .form-control--has-help-text.form-control--medium .form-control__help-text {
+    font-size: 0.875rem;
+  }
+
+  .form-control--has-help-text.form-control--large .form-control__help-text {
+    font-size: 1rem;
+  }
+
+  .form-control--has-help-text.form-control--radio-group
+    .form-control__help-text {
+    margin-top: 0.25rem;
+  }
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: 900;
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol';
+    font-weight: 400;
+    letter-spacing: normal;
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition: 150ms color, 150ms border, 150ms box-shadow,
+      150ms background-color;
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: #333333;
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select:not(.select--disabled):hover .select__display-input {
+    color: #333333;
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-wrap: no-wrap;
+    margin-inline-start: 0.5rem;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .select__tags-count {
+    position: absolute;
+    right: 0;
+    border: 1px solid rgb(169, 218, 218);
+    border-radius: 0.25rem;
+    margin-right: 30px;
+  }
+
+  .select__tags-count-clearable {
+    margin-right: 50px;
+  }
+
+  .select__tags::slotted(nile-tag) {
+    cursor: pointer !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(nile-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* Standard selects */
+  .select--standard .select__combobox {
+    background-color: #ffffff;
+    border: solid 1px #cccccc;
+  }
+
+  .select--standard.select--disabled .select__combobox {
+    background-color: #f4f4f4;
+    border-color: #cccccc;
+    color: #999999;
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .select--standard:not(.select--disabled).select--open .select__combobox,
+  .select--standard:not(.select--disabled).select--focused .select__combobox {
+    background-color: #f4f4f4;
+    border-color: #0059ff;
+    box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);
+  }
+
+  /* Filled selects */
+  .select--filled .select__combobox {
+    border: none;
+    background-color: #f4f4f4;
+    color: #333333;
+  }
+
+  .select--filled:hover:not(.select--disabled) .select__combobox {
+    background-color: #f4f4f4;
+  }
+
+  .select--filled.select--disabled .select__combobox {
+    background-color: #f4f4f4;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select--filled:not(.select--disabled).select--open .select__combobox,
+  .select--filled:not(.select--disabled).select--focused .select__combobox {
+    background-color: #f4f4f4;
+    outline: 3px solid rgba(0, 89, 255, 0.4);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    min-height: 1.875rem;
+    padding-block: 0;
+    padding-inline: 0.5rem;
+  }
+
+  .select--small .select__clear {
+    margin-inline-start: 0.5rem;
+  }
+
+  .select--small .select__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    border-radius: 0.25rem;
+    font-size: 1rem;
+    min-height: 2.5rem;
+    padding-block: 0;
+    padding-inline: 0.75rem;
+  }
+
+  .select--medium .select__clear {
+    margin-inline-start: 0.75rem;
+  }
+
+  .select--medium .select__prefix::slotted(*) {
+    margin-inline-end: 0.75rem;
+    /* margin-inline-start: 0.75rem; */
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-inline-start: 0;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+
+  .select--large .select__combobox {
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    min-height: 3.125rem;
+    padding-block: 0;
+    padding-inline: 1rem;
+  }
+
+  .select--large .select__clear {
+    margin-inline-start: 1rem;
+  }
+
+  .select--large .select__prefix::slotted(*) {
+    margin-inline-end: 1rem;
+  }
+
+  .select--large.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 4px;
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Pills */
+  .select--pill.select--small .select__combobox {
+    border-radius: 1.875rem;
+  }
+
+  .select--pill.select--medium .select__combobox {
+    border-radius: 2.5rem;
+  }
+
+  .select--pill.select--large .select__combobox {
+    border-radius: 3.125rem;
+  }
+
+  /* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: #aaaaaa;
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: #aaaaaa;
+    border: none;
+    background: none;
+    padding: 0;
+    transition: 150ms color;
+    cursor: pointer;
+  }
+
+  .select__clear:hover {
+    color: #999999;
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: 250ms rotate ease;
+    rotate: 0;
+    margin-inline-start: 0.25rem;
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: block;
+    position: relative;
+    font-size: 1rem;
+    font-weight: 400;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
+    background: #ffffff;
+    border: solid 1px #cccccc;
+    border-radius: 0.25rem;
+    padding-block: 0.25rem 0;
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  /* Listbox */
+  .select__search-enabled {
+    padding-top: 50px;
+
+  }
+
+  .select__listbox::slotted(nile-divider) {
+    --spacing: 0.25rem;
+  }
+
+  .select__listbox::slotted(small) {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #888888;
+    padding-block: 0.25rem;
+    padding-inline: 1rem;
+  }
+
+  .select__search {
+    position: absolute;
+    top: 0px;
+    height: 15px;
+    width: calc(100% - 16px);
+    padding: 8px;
+  }
+
+  .select__footer {
+    position: sticky;
+    bottom: 0px;
+    background: #fafafa;
+    border: 1px solid #e5e9eb;
+    display: flex;
+    height: 15px;
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 12px;
+    gap: 12px;
+    justify-content: space-between;
+  }
+`;export{o as s};

package/dist/nile-select/nile-select.esm.js

@@ -0,0 +1,185 @@
+import{__decorate as i}from"tslib";import{y as s}from"../index-f1b94546.esm.js";import{query as e,state as o,customElement as t}from"lit/decorators.js";import{s as n}from"./nile-select.css.esm.js";import"../nile-icon/index.esm.js";import"../nile-popup/nile-popup.esm.js";import"../nile-tag/nile-tag.esm.js";import{s as l,a as c}from"../internal/animate.esm.js";import{classMap as r}from"lit/directives/class-map.js";import{d as m}from"../internal/default-value.esm.js";import{F as a}from"../internal/form.esm.js";import{s as p,g as h}from"../utilities/animation-registry.esm.js";import{H as v}from"../internal/slot.esm.js";import{s as d}from"../internal/scroll.esm.js";import{w as g}from"../internal/event.esm.js";import{w as u}from"../internal/watch.esm.js";import{N as j}from"../internal/nile-element.esm.js";import{e as b}from"../property-bf6307e2.esm.js";import"lit";import"lit/directives/unsafe-svg.js";import"lit/directives/unsafe-html.js";import"../nile-icon/icons/svg/index.esm.js";import"../nile-icon/icons/svg/access-review.esm.js";import"../nile-icon/icons/svg/action.esm.js";import"../nile-icon/icons/svg/actionworkflow.esm.js";import"../nile-icon/icons/svg/agents.esm.js";import"../nile-icon/icons/svg/aggregation.esm.js";import"../nile-icon/icons/svg/allsearch.esm.js";import"../nile-icon/icons/svg/application.esm.js";import"../nile-icon/icons/svg/approve.esm.js";import"../nile-icon/icons/svg/arrowdown.esm.js";import"../nile-icon/icons/svg/arrowleft.esm.js";import"../nile-icon/icons/svg/arrowright.esm.js";import"../nile-icon/icons/svg/arrowup.esm.js";import"../nile-icon/icons/svg/attributemap.esm.js";import"../nile-icon/icons/svg/bell.esm.js";import"../nile-icon/icons/svg/boolean.esm.js";import"../nile-icon/icons/svg/bulk-sync.esm.js";import"../nile-icon/icons/svg/button-loading-black.esm.js";import"../nile-icon/icons/svg/button-loading-blue.esm.js";import"../nile-icon/icons/svg/button-loading-white.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/caution.esm.js";import"../nile-icon/icons/svg/close.esm.js";import"../nile-icon/icons/svg/collapse-1.esm.js";import"../nile-icon/icons/svg/collapse.esm.js";import"../nile-icon/icons/svg/compact.esm.js";import"../nile-icon/icons/svg/compare-tiles.esm.js";import"../nile-icon/icons/svg/component-menu.esm.js";import"../nile-icon/icons/svg/connect.esm.js";import"../nile-icon/icons/svg/copy.esm.js";import"../nile-icon/icons/svg/correlation.esm.js";import"../nile-icon/icons/svg/dashboard.esm.js";import"../nile-icon/icons/svg/database.esm.js";import"../nile-icon/icons/svg/databaseview.esm.js";import"../nile-icon/icons/svg/default-1.esm.js";import"../nile-icon/icons/svg/default.esm.js";import"../nile-icon/icons/svg/directory.esm.js";import"../nile-icon/icons/svg/disabled.esm.js";import"../nile-icon/icons/svg/document.esm.js";import"../nile-icon/icons/svg/done.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/draglist.esm.js";import"../nile-icon/icons/svg/enable.esm.js";import"../nile-icon/icons/svg/entitlement.esm.js";import"../nile-icon/icons/svg/error.esm.js";import"../nile-icon/icons/svg/escalate.esm.js";import"../nile-icon/icons/svg/event.esm.js";import"../nile-icon/icons/svg/exactmatch.esm.js";import"../nile-icon/icons/svg/expand-1.esm.js";import"../nile-icon/icons/svg/expand.esm.js";import"../nile-icon/icons/svg/eye.esm.js";import"../nile-icon/icons/svg/eyeclosed.esm.js";import"../nile-icon/icons/svg/filter.esm.js";import"../nile-icon/icons/svg/firewall.esm.js";import"../nile-icon/icons/svg/flow-h.esm.js";import"../nile-icon/icons/svg/flow.esm.js";import"../nile-icon/icons/svg/flowmap.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/frequency.esm.js";import"../nile-icon/icons/svg/fullscreen.esm.js";import"../nile-icon/icons/svg/fullscreenshrink.esm.js";import"../nile-icon/icons/svg/generation-phase.esm.js";import"../nile-icon/icons/svg/global-search.esm.js";import"../nile-icon/icons/svg/goto.esm.js";import"../nile-icon/icons/svg/groupby.esm.js";import"../nile-icon/icons/svg/guide.esm.js";import"../nile-icon/icons/svg/helpsupport.esm.js";import"../nile-icon/icons/svg/help-1.esm.js";import"../nile-icon/icons/svg/help.esm.js";import"../nile-icon/icons/svg/history.esm.js";import"../nile-icon/icons/svg/identityledger.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/info2.esm.js";import"../nile-icon/icons/svg/js.esm.js";import"../nile-icon/icons/svg/link.esm.js";import"../nile-icon/icons/svg/loader.esm.js";import"../nile-icon/icons/svg/loading.esm.js";import"../nile-icon/icons/svg/loading2.esm.js";import"../nile-icon/icons/svg/lock.esm.js";import"../nile-icon/icons/svg/logs.esm.js";import"../nile-icon/icons/svg/manage.esm.js";import"../nile-icon/icons/svg/map.esm.js";import"../nile-icon/icons/svg/mapcreate.esm.js";import"../nile-icon/icons/svg/mapdont.esm.js";import"../nile-icon/icons/svg/mapupdate.esm.js";import"../nile-icon/icons/svg/maximize.esm.js";import"../nile-icon/icons/svg/minus.esm.js";import"../nile-icon/icons/svg/moveleft.esm.js";import"../nile-icon/icons/svg/moveright.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/not.esm.js";import"../nile-icon/icons/svg/note.esm.js";import"../nile-icon/icons/svg/notificationadd.esm.js";import"../nile-icon/icons/svg/notificationadded.esm.js";import"../nile-icon/icons/svg/null.esm.js";import"../nile-icon/icons/svg/number.esm.js";import"../nile-icon/icons/svg/options.esm.js";import"../nile-icon/icons/svg/orchestration.esm.js";import"../nile-icon/icons/svg/partner.esm.js";import"../nile-icon/icons/svg/pencil.esm.js";import"../nile-icon/icons/svg/people-task.esm.js";import"../nile-icon/icons/svg/pin.esm.js";import"../nile-icon/icons/svg/plus.esm.js";import"../nile-icon/icons/svg/potentialmatch.esm.js";import"../nile-icon/icons/svg/poweron.esm.js";import"../nile-icon/icons/svg/privilage.esm.js";import"../nile-icon/icons/svg/radio.esm.js";import"../nile-icon/icons/svg/radioactive.esm.js";import"../nile-icon/icons/svg/radiodone.esm.js";import"../nile-icon/icons/svg/readexpression.esm.js";import"../nile-icon/icons/svg/readonly.esm.js";import"../nile-icon/icons/svg/redo.esm.js";import"../nile-icon/icons/svg/refresh.esm.js";import"../nile-icon/icons/svg/reminder.esm.js";import"../nile-icon/icons/svg/resource.esm.js";import"../nile-icon/icons/svg/revokation-cycle.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/run.esm.js";import"../nile-icon/icons/svg/save.esm.js";import"../nile-icon/icons/svg/schedule.esm.js";import"../nile-icon/icons/svg/script.esm.js";import"../nile-icon/icons/svg/search.esm.js";import"../nile-icon/icons/svg/select.esm.js";import"../nile-icon/icons/svg/selectapplication.esm.js";import"../nile-icon/icons/svg/selectattributes.esm.js";import"../nile-icon/icons/svg/selectuser.esm.js";import"../nile-icon/icons/svg/send.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/sort.esm.js";import"../nile-icon/icons/svg/stop.esm.js";import"../nile-icon/icons/svg/string.esm.js";import"../nile-icon/icons/svg/sync.esm.js";import"../nile-icon/icons/svg/test.esm.js";import"../nile-icon/icons/svg/textarea-expander.esm.js";import"../nile-icon/icons/svg/tick.esm.js";import"../nile-icon/icons/svg/timeupdate.esm.js";import"../nile-icon/icons/svg/timezone.esm.js";import"../nile-icon/icons/svg/trash.esm.js";import"../nile-icon/icons/svg/undo-1.esm.js";import"../nile-icon/icons/svg/undo.esm.js";import"../nile-icon/icons/svg/unmute.esm.js";import"../nile-icon/icons/svg/upgrade.esm.js";import"../nile-icon/icons/svg/upload.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user.esm.js";import"../nile-icon/icons/svg/useractive.esm.js";import"../nile-icon/icons/svg/useradd.esm.js";import"../nile-icon/icons/svg/useraddgroup.esm.js";import"../nile-icon/icons/svg/userfind.esm.js";import"../nile-icon/icons/svg/userimport.esm.js";import"../nile-icon/icons/svg/userimportgroup.esm.js";import"../nile-icon/icons/svg/usermixed.esm.js";import"../nile-icon/icons/svg/userremove-1.esm.js";import"../nile-icon/icons/svg/userremove-2.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/userupdate.esm.js";import"../nile-icon/icons/svg/users.esm.js";import"../nile-icon/icons/svg/validationexpression.esm.js";import"../nile-icon/icons/svg/variable-new-1.esm.js";import"../nile-icon/icons/svg/variable-new.esm.js";import"../nile-icon/icons/svg/variable-global.esm.js";import"../nile-icon/icons/svg/variable-local-1.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable.esm.js";import"../nile-icon/icons/svg/video.esm.js";import"../nile-icon/icons/svg/warning.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow.esm.js";import"../nile-icon/icons/svg/writeexpression.esm.js";import"../nile-icon/icons/svg/back.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/globe.esm.js";import"../nile-icon/icons/svg/phone.esm.js";import"../nile-icon/icons/svg/storybook.esm.js";import"../nile-icon/icons/svg/swap.esm.js";import"../nile-popup/nile-popup.css.esm.js";import"../nile-tag/nile-tag.css.esm.js";import"../nile-icon-button/nile-icon-button.esm.js";import"../nile-icon-button/nile-icon-button.css.esm.js";import"lit/static-html.js";import"lit/directives/if-defined.js";import"../internal/offset.esm.js";let f=class extends j{constructor(){super(...arguments),this.formControlController=new a(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new v(this,"help-text","label"),this.typeToSelectString="",this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.name="",this.value="",this.defaultValue="",this.size="medium",this.placeholder="",this.searchValue="",this.searchEnabled=!1,this.multiple=!1,this.maxOptionsVisible=3,this.disabled=!1,this.clearable=!1,this.open=!1,this.hoist=!1,this.filled=!1,this.pill=!1,this.label="",this.placement="bottom",this.helpText="",this.form="",this.required=!1,this.showSelected=!1}get validity(){return this.valueInput.validity}get validationMessage(){return this.valueInput.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.open=!1}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("nile-focus")}handleBlur(){this.hasFocus=!1,this.emit("nile-blur")}handleDocumentFocusIn(i){const s=i.composedPath();this&&!s.includes(this)&&this.hide()}handleFooterClick(i){i.stopPropagation(),i.preventDefault()}toggleShowSelected(i){if(i.stopPropagation(),i.preventDefault(),0===this.selectedOptions?.length)return;this.showSelected=!this.showSelected;this.getAllOptions().forEach((i=>{i.selected||(i.hidden=this.showSelected)})),this.requestUpdate()}unSlectAll(){this.showSelected=!1;this.getAllOptions().forEach((i=>{i.selected=!1,i.hidden=!1})),this.value="",this.selectionChanged()}handleDocumentKeyDown(i){const s=i.target,e=null!==s.closest(".select__clear"),o=null!==s.closest("nile-icon-button");if(!e&&!o){if("Escape"===i.key&&this.open&&(i.preventDefault(),i.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===i.key||" "===i.key&&""===this.typeToSelectString)return i.preventDefault(),i.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then((()=>{this.emit("nile-input"),this.emit("nile-change")})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(i.key)){const s=this.getAllOptions(),e=s.indexOf(this.currentOption);let o=Math.max(0,e);if(i.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===i.key?(o=e+1,o>s.length-1&&(o=0)):"ArrowUp"===i.key?(o=e-1,o<0&&(o=s.length-1)):"Home"===i.key?o=0:"End"===i.key&&(o=s.length-1),this.setCurrentOption(s[o])}if(1===i.key.length||"Backspace"===i.key){const s=this.getAllOptions();if(i.metaKey||i.ctrlKey||i.altKey)return;if(!this.open){if("Backspace"===i.key)return;this.show()}i.stopPropagation(),i.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>this.typeToSelectString=""),1e3),"Backspace"===i.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=i.key.toLowerCase();for(const i of s){if(i.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(i);break}}}}}handleDocumentMouseDown(i){const s=i.composedPath();this&&!s.includes(this)&&this.hide()}handleLabelClick(){this.displayInput.focus()}handleComboboxMouseDown(i){const s=i.composedPath().some((i=>i instanceof Element&&"nile-icon-button"===i.tagName.toLowerCase()));this.disabled||s||(i.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(i){i.stopPropagation(),this.handleDocumentKeyDown(i)}handleClearClick(i){i.stopPropagation(),""!==this.value&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then((()=>{this.emit("nile-clear"),this.emit("nile-input"),this.emit("nile-change")})))}handleClearMouseDown(i){i.stopPropagation(),i.preventDefault()}handleOptionClick(i){const s=i.target.closest("nile-option"),e=this.value;s&&!s.disabled&&(this.multiple?this.toggleOptionSelection(s):this.setSelectedOptions(s),this.updateComplete.then((()=>this.displayInput.focus({preventScroll:!0}))),this.value!==e&&this.updateComplete.then((()=>{this.emit("nile-input"),this.emit("nile-change")})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))}handleDefaultSlotChange(){const i=this.getAllOptions(),s=Array.isArray(this.value)?this.value:[this.value],e=[];customElements.get("nile-option")?(i.forEach((i=>e.push(i.value))),this.setSelectedOptions(i.filter((i=>s.includes(i.value))))):customElements.whenDefined("nile-option").then((()=>this.handleDefaultSlotChange()))}handleTagRemove(i,s){i.stopPropagation(),this.disabled||(this.toggleOptionSelection(s,!1),this.updateComplete.then((()=>{this.emit("nile-input"),this.emit("nile-change")})))}getAllOptions(){return[...this.querySelectorAll("nile-option")]}getFirstOption(){return this.querySelector("nile-option")}setCurrentOption(i){this.getAllOptions().forEach((i=>{i.current=!1,i.tabIndex=-1})),i&&(this.currentOption=i,i.current=!0,i.tabIndex=0,i.focus())}setSelectedOptions(i){const s=this.getAllOptions(),e=Array.isArray(i)?i:[i];s.forEach((i=>i.selected=!1)),e.length&&e.forEach((i=>i.selected=!0)),this.selectionChanged()}toggleOptionSelection(i,s){i.selected=!0===s||!1===s?s:!i.selected,this.selectionChanged()}selectionChanged(){this.selectedOptions=this.getAllOptions().filter((i=>i.selected)),this.multiple?(this.value=this.selectedOptions.map((i=>i.value)),this.placeholder&&0===this.value.length?this.displayLabel="":this.displayLabel=this.selectedOptions.length+" selected"):(this.value=this.selectedOptions[0]?.value??"",this.displayLabel=this.selectedOptions[0]?.getTextLabel()??""),this.updateComplete.then((()=>{this.formControlController.updateValidity()}))}handleSearchFocus(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleSearchBlur(){document.addEventListener("keydown",this.handleDocumentKeyDown)}handleSearchChange(i){this.searchValue=i.detail.value,this.filterOptions(this.searchValue)}filterOptions(i){const s=this.getAllOptions(),e=i.toLowerCase();s.forEach((i=>{const s=i.getTextLabel().toLowerCase(),o=(i.value||"").toLowerCase();i.hidden=!(s.includes(e)||o.includes(e))}))}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){const i=this.getAllOptions(),s=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(i.filter((i=>s.includes(i.value))))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("nile-show"),this.addOpenListeners(),await l(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame((()=>{this.setCurrentOption(this.currentOption)}));const{keyframes:i,options:s}=h(this,"select.show",{dir:"ltr"});await c(this.popup.popup,i,s),this.currentOption&&d(this.currentOption,this.listbox,"vertical","auto"),this.emit("nile-after-show")}else{this.emit("nile-hide"),this.removeOpenListeners(),await l(this);const{keyframes:i,options:s}=h(this,"select.hide",{dir:"ltr"});await c(this.popup.popup,i,s),this.listbox.hidden=!0,this.popup.active=!1,this.emit("nile-after-hide")}}async show(){if(!this.open&&!this.disabled)return this.open=!0,g(this,"nile-after-show");this.open=!1}async hide(){if(this.open&&!this.disabled)return this.open=!1,g(this,"nile-after-hide");this.open=!1}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(i){this.valueInput.setCustomValidity(i),this.formControlController.updateValidity()}focus(i){this.displayInput.focus(i)}blur(){this.displayInput.blur()}render(){const i=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),o=!!this.label||!!i,t=!!this.helpText||!!e,n=this.clearable&&!this.disabled&&this.value.length>0,l=this.placeholder&&0===this.value.length,c=this.searchValue||"";return s`
+      <div
+        part="form-control"
+        class=${r({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":o,"form-control--has-help-text":t})}
+      >
+        <label
+          id="label"
+          part="form-control-label"
+          class="form-control__label"
+          aria-hidden=${o?"false":"true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <nile-popup
+            class=${r({select:!0,"select--standard":!0,"select--filled":this.filled,"select--pill":this.pill,"select--open":this.open,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--focused":this.hasFocus,"select--placeholder-visible":l,"select--top":"top"===this.placement,"select--bottom":"bottom"===this.placement,"select--small":"small"===this.size,"select--medium":"medium"===this.size,"select--large":"large"===this.size})}
+            placement=${this.placement}
+            strategy=${this.hoist?"fixed":"absolute"}
+            flip
+            shift
+            sync="width"
+            auto-size="vertical"
+            auto-size-padding="10"
+          >
+            <div
+              part="combobox"
+              class="select__combobox"
+              slot="anchor"
+              @keydown=${this.handleComboboxKeyDown}
+              @mousedown=${this.handleComboboxMouseDown}
+            >
+              <slot part="prefix" name="prefix" class="select__prefix"></slot>
+
+              <input
+                part="display-input"
+                class="select__display-input"
+                type="text"
+                placeholder=${this.placeholder}
+                .disabled=${this.disabled}
+                .value=${this.displayLabel}
+                autocomplete="off"
+                spellcheck="false"
+                autocapitalize="off"
+                readonly
+                aria-controls="listbox"
+                aria-expanded=${this.open?"true":"false"}
+                aria-haspopup="listbox"
+                aria-labelledby="label"
+                aria-disabled=${this.disabled?"true":"false"}
+                aria-describedby="help-text"
+                role="combobox"
+                tabindex="0"
+                @focus=${this.handleFocus}
+                @blur=${this.handleBlur}
+              />
+
+              ${this.multiple?s`
+                    <div part="tags" class="select__tags">
+                      ${this.selectedOptions.map(((i,e)=>e<this.maxOptionsVisible||this.maxOptionsVisible<=0?s`
+                            <nile-tag
+                              part="tag"
+                              exportparts="
+                                base:tag__base,
+                                content:tag__content,
+                                remove-button:tag__remove-button,
+                                remove-button__base:tag__remove-button__base
+                              "
+                              ?pill=${this.pill}
+                              size=${this.size}
+                              removable
+                              @nile-remove=${s=>this.handleTagRemove(s,i)}
+                            >
+                              ${i.getTextLabel()}
+                            </nile-tag>
+                          `:e===this.maxOptionsVisible?s`
+                            <nile-tag
+                              class="select__tags-count ${n?"select__tags-count-clearable":""} "
+                              size=${this.size}
+                            >
+                              +${this.selectedOptions.length-e}
+                            </nile-tag>
+                          `:null))}
+                    </div>
+                  `:""}
+
+              <input
+                class="select__value-input"
+                type="text"
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                .value=${Array.isArray(this.value)?this.value.join(", "):this.value}
+                tabindex="-1"
+                aria-hidden="true"
+                @focus=${()=>this.focus()}
+                @invalid=${this.handleInvalid}
+              />
+
+              ${n?s`
+                    <button
+                      part="clear-button"
+                      class="select__clear"
+                      type="button"
+                      aria-label="clearEntry"
+                      @mousedown=${this.handleClearMouseDown}
+                      @click=${this.handleClearClick}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <nile-icon name="close" library="system"></nile-icon>
+                      </slot>
+                    </button>
+                  `:""}
+
+              <slot
+                name="expand-icon"
+                part="expand-icon"
+                class="select__expand-icon"
+              >
+                <nile-icon library="system" name="arrowdown"></nile-icon>
+              </slot>
+            </div>
+
+            <div
+              id="listbox"
+              role="listbox"
+              aria-expanded=${this.open?"true":"false"}
+              aria-multiselectable=${this.multiple?"true":"false"}
+              aria-labelledby="label"
+              part="listbox"
+              class="select__listbox ${this.searchEnabled?"select__search-enabled ":""}"
+              tabindex="-1"
+              @mouseup=${this.handleOptionClick}
+              @slotchange=${this.handleDefaultSlotChange}
+            >
+              <slot></slot>
+
+              ${this.searchEnabled?s` <div class="select__search">
+                    <nile-input
+                      size="small"
+                      clearable
+                      .value=${c}
+                      placeholder="Search..."
+                      @nile-input=${this.handleSearchChange}
+                      @nile-focus=${this.handleSearchFocus}
+                      @nile-blur=${this.handleSearchBlur}
+                    >
+                      <nile-icon name="search" slot="suffix"> </nile-icon>
+                    </nile-input>
+                  </div>`:""}
+              ${this.multiple?s` <div
+                    class="select__footer"
+                    @click="${this.handleFooterClick}"
+                  >
+                    <span
+                      @click="${this.toggleShowSelected}"
+                      style="cursor: pointer;"
+                    >
+                      <nile-checkbox
+                        ?disabled="${0===this.selectedOptions.length}"
+                        ?checked="${this.showSelected}"
+                      >
+                        Show Selected</nile-checkbox
+                      >
+                    </span>
+                    <span class="select__clear" @click="${this.unSlectAll}"
+                      >clear all</span
+                    >
+                  </div>`:""}
+            </div>
+          </nile-popup>
+        </div>
+
+        <slot
+          name="help-text"
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${t?"false":"true"}
+        >
+          ${this.helpText}
+        </slot>
+      </div>
+    `}};f.styles=n,i([e(".select")],f.prototype,"popup",void 0),i([e(".select__combobox")],f.prototype,"combobox",void 0),i([e(".select__display-input")],f.prototype,"displayInput",void 0),i([e(".select__value-input")],f.prototype,"valueInput",void 0),i([e(".select__listbox")],f.prototype,"listbox",void 0),i([o()],f.prototype,"hasFocus",void 0),i([o()],f.prototype,"displayLabel",void 0),i([o()],f.prototype,"currentOption",void 0),i([o()],f.prototype,"selectedOptions",void 0),i([b()],f.prototype,"name",void 0),i([b({converter:{fromAttribute:i=>i.split(" "),toAttribute:i=>i.join(" ")}})],f.prototype,"value",void 0),i([m()],f.prototype,"defaultValue",void 0),i([b()],f.prototype,"size",void 0),i([b()],f.prototype,"placeholder",void 0),i([o()],f.prototype,"searchValue",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"searchEnabled",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"multiple",void 0),i([b({attribute:"max-options-visible",type:Number})],f.prototype,"maxOptionsVisible",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),i([b({type:Boolean})],f.prototype,"clearable",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"open",void 0),i([b({type:Boolean})],f.prototype,"hoist",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"filled",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"pill",void 0),i([b()],f.prototype,"label",void 0),i([b({reflect:!0})],f.prototype,"placement",void 0),i([b({attribute:"help-text"})],f.prototype,"helpText",void 0),i([b({reflect:!0})],f.prototype,"form",void 0),i([b({type:Boolean,reflect:!0})],f.prototype,"required",void 0),i([b({type:Boolean})],f.prototype,"showSelected",void 0),i([u("disabled",{waitUntilFirstUpdate:!0})],f.prototype,"handleDisabledChange",null),i([u("value",{waitUntilFirstUpdate:!0})],f.prototype,"handleValueChange",null),i([u("open",{waitUntilFirstUpdate:!0})],f.prototype,"handleOpenChange",null),f=i([t("nile-select")],f),p("select.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}}),p("select.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});