npm - @platforma-sdk/ui-vue - Versions diffs - 1.42.8 → 1.42.14 - Mend

@platforma-sdk/ui-vue 1.42.8 → 1.42.14

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

package/dist/lib/ui/uikit/dist/components/DataTable/TableComponent.vue.js CHANGED Viewed

@@ -50,7 +50,7 @@ import "../../colors/gradient.js";
 .pl-checkbox-group{--color-label: var(--color-text);--cursor-label: pointer;display:flex;flex-direction:column;font-family:var(--font-family-base)}.pl-checkbox-group.disabled{--color-label: var(--color-dis-01);--cursor-label: default;pointer-events:none}.pl-checkbox-group>label{color:var(--color-label);cursor:var(--cursor-label);display:flex;align-items:center;gap:4px;margin-bottom:6px;font-size:14px;font-weight:600;line-height:20px}.pl-checkbox-group>div{height:32px;display:flex;flex-direction:row;align-items:center;gap:8px}.pl-checkbox-group>div>label{font-size:14px;font-weight:500}
 .pl-chip-tooltip{display:inline-flex}.pl-chip{--chip-color: var(--txt-01);position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 8px;height:32px;background:var(--chip-bg);border:var(--chip-border);border-radius:6px;max-width:256px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);letter-spacing:-.2px;color:var(--chip-color)}.pl-chip.small{height:24px;padding:0 6px;border-radius:4px}.pl-chip.large{height:40px;padding:0 12px;border-radius:6px}[data-theme=dark] .pl-chip{color:#fff}.pl-chip__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pl-chip__close{cursor:pointer;--mask-color: var(--chip-close-ic-color)}.pl-chip__close:hover{--mask-color: var(--chip-close-ic-hover-color)}.pl-chip__close:focus-visible{--mask-color: var(--chip-close-ic-hover-color);box-shadow:0 0 0 2px var(--border-color-focus);border-radius:1px;outline:none}.pl-chip__close--icon{background:var(--mask-color);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}
 .pl-dialog-modal{--padding-top: 24px;--border-radius: 16px;--title-padding: 24px 24px 0 24px;min-height:400px;max-height:calc(100vh - 48px);max-width:calc(100% - 48px);min-width:448px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);background-color:#fff;padding-top:var(--padding-top);display:flex;flex-direction:column;box-shadow:0 2px 8px #24223d1f;border-radius:var(--border-radius)}.pl-dialog-modal.has-title{--padding-top: 0}.pl-dialog-modal.has-content{--title-padding: 24px}.pl-dialog-modal__title{display:flex;align-items:center;font-family:var(--font-family-base);font-size:28px;font-style:normal;font-weight:500;line-height:32px;letter-spacing:-.56px;padding:var(--title-padding)}.pl-dialog-modal__content{flex:1;display:flex;flex-direction:column;gap:24px;padding:16px 24px 40px;min-height:0;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dialog-modal__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dialog-modal__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dialog-modal__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dialog-modal__content.no-content-gutters{padding:0}.pl-dialog-modal__content.no-top-content-gutter{padding-top:0}.pl-dialog-modal__actions{display:flex;align-items:center;gap:6px;min-height:88px;padding:0 24px}.pl-dialog-modal__actions button{min-width:160px}.pl-dialog-modal__actions.has-top-border{border-top:1px solid var(--border-color-div-grey)}.pl-dialog-modal .alert-error{background-color:var(--txt-error);color:#fff;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal .alert-warning{background-color:#fee0a3;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal__shadow{position:absolute;z-index:var(--z-dialog);top:var(--title-bar-height);left:0;right:0;bottom:0;background-color:#000000a3}.pl-dialog-modal .close-modal-btn{position:absolute;top:4px;right:4px}
-.pl-dropdown__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown__options .option.selected .checkmark{display:block}.pl-dropdown__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-dropdown__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color: var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}
+.pl-dropdown__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown__options .option.selected .checkmark{display:block}.pl-dropdown__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-dropdown__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{cursor:pointer}.pl-dropdown__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color: var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown.disabled{--contour-color: var(--color-dis-01);--icon-color: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}
 .pl-dropdown-legacy{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-legacy{--options-bg: #1b1b1f}.pl-dropdown-legacy__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-legacy label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-legacy label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown-legacy__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-legacy__options{position:relative;background-color:var(--options-bg);border-radius:0 0 6px 6px;max-height:244px;border-top:1px solid var(--color-div-black);--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-legacy__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-legacy__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-legacy__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown-legacy__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown-legacy__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-legacy__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-legacy__options .option.selected .checkmark{display:block}.pl-dropdown-legacy__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-legacy__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-legacy__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding:0 11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center}.pl-dropdown-legacy__field .input-value{outline:1px solid red;position:absolute;top:0;left:0;bottom:0;right:0;padding:0 60px 0 11px;pointer-events:none;line-height:var(--control-height);color:var(--contour-color);overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__field input{min-height:calc(var(--control-height) - 2px);line-height:calc(var(--control-height) - 2px);font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-legacy__field input:focus{outline:none}.pl-dropdown-legacy__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-legacy__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-legacy__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-legacy__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-legacy__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-legacy__controls .mask-16,.pl-dropdown-legacy__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-legacy__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown-legacy__controls .mask-loading{--icon-color: var(#07AD3E);animation:spin 2.5s linear infinite}.pl-dropdown-legacy .arrow-icon{cursor:pointer}.pl-dropdown-legacy .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-legacy.open,.pl-dropdown-legacy:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown-legacy.open .pl-dropdown-legacy__container{z-index:1000}.pl-dropdown-legacy.open .pl-dropdown-legacy__field{border-radius:6px 6px 0 0}.pl-dropdown-legacy.open .arrow-icon{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-legacy:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-legacy:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-legacy:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-legacy.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-legacy.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}
 .pl-line-dropdown{display:flex;align-items:center;width:fit-content;padding:8px 0;box-sizing:border-box;position:relative;outline:none;max-width:256px}.pl-line-dropdown:focus-within:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__prefix,.pl-line-dropdown__input{text-transform:uppercase}.pl-line-dropdown:hover:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown:after{content:"";position:absolute;bottom:0;border-bottom:2px solid var(--color-div-grey);width:100%}.pl-line-dropdown *{color:var(--txt-01);font-family:var(--font-family-base);font-size:13px;font-style:normal;font-weight:600;line-height:14px;letter-spacing:.52px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{display:flex;align-items:center;min-width:16px;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-line-dropdown__icon-clear{mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px;background-color:var(--color-ic-02)}.pl-line-dropdown.open .pl-line-dropdown__icon{mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-line-dropdown.open:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__icon-wrapper{padding:4px 2px 4px 0}.pl-line-dropdown.disabled *{color:var(--txt-mask);cursor:not-allowed}.pl-line-dropdown.disabled .pl-line-dropdown__icon{background-color:var(--color-div-grey)!important}.pl-line-dropdown.disabled:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown.disabled:hover:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown__no-item{padding:8px 12px}.pl-line-dropdown__no-item-title{color:var(--txt-03)!important;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.pl-line-dropdown__items{position:absolute;top:0;z-index:var(--z-dropdown-options);border-radius:6px;padding:12px 0;border:1px solid var(--color-div-grey);width:256px;box-sizing:border-box;max-height:320px;background-color:var(--bg-elevated-01);box-shadow:var(--shadow-m);--thumb-color: var(--ic-02);overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-line-dropdown__items::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-line-dropdown__items-tabs{display:flex;position:absolute;top:0;z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);overflow-x:scroll;max-width:400px;padding:6px 12px 12px;border:1px solid var(--color-div-grey);border-radius:6px;box-shadow:var(--shadow-m);--thumb-color: var(--ic-02);overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}
 .resizable-input{position:relative;box-sizing:border-box;padding:0 8px;display:inline-block;max-width:100%;text-overflow:ellipsis;overflow:hidden}.resizable-input__size-span{font-family:inherit;white-space:pre;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;left:0;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.resizable-input input{border:none;outline:none;height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;right:0;font-size:inherit;line-height:inherit;position:absolute;box-sizing:border-box}

package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue2.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { defineComponent as n, createBlock as a, openBlock as r, Transition as s, withCtx as l, renderSlot as p } from "vue";
+const f = /* @__PURE__ */ n({
+  __name: "ExpandTransition",
+  setup(i) {
+    const t = (e) => {
+      e.classList.add("expand-collapse-fix"), e.style.setProperty("--component-height", e.scrollHeight + "px");
+    }, o = (e) => {
+      e.style.removeProperty("--component-height"), e.classList.remove("expand-collapse-fix");
+    };
+    return (e, c) => (r(), a(s, {
+      name: "expand-collapse",
+      onEnter: t,
+      onLeave: t,
+      onAfterEnter: o,
+      onAfterLeave: o
+    }, {
+      default: l(() => [
+        p(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  f as default
+};
+//# sourceMappingURL=ExpandTransition.vue2.js.map

package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ExpandTransition.vue2.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n el.classList.add('expand-collapse-fix');\n (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n (el as HTMLElement).style.removeProperty('--component-height');\n el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n <slot/>\n </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n transition:\n height 0.2s ease-in-out,\n opacity 0.2s ease-in-out;\n height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n opacity: 0.5;\n height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACMA,UAAAA,IAAU,CAACC,MAAgB;AAC5BA,QAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IAAA,GAG9EC,IAAU,CAACD,MAAgB;AAC9BA,QAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js CHANGED Viewed

@@ -9,9 +9,9 @@ import ze from "../LongText.vue.js";
 import { normalizeListOptions as H } from "../../helpers/utils.js";
 import Le from "../PlIcon16/PlIcon16.vue.js";
 import Se from "../PlIcon24/PlIcon24.vue.js";
-import $e from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import Ie from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
 import { useWatchFetch as U } from "../../composition/useWatchFetch.js";
-import Ie from "../../generated/components/svg/images/SvgRequired.vue2.js";
+import $e from "../../generated/components/svg/images/SvgRequired.vue2.js";
 import { getErrorMessage as Ee } from "../../helpers/error.js";
 import { debouncedRef as Ce } from "../../node_modules/.pnpm/@vueuse_shared@13.3.0_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/shared/index.js";
 (function() {
@@ -28,10 +28,10 @@ import { debouncedRef as Ce } from "../../node_modules/.pnpm/@vueuse_shared@13.3
 const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { class: "pl-autocomplete__field" }, Me = ["disabled", "placeholder"], De = {
   key: 0,
   class: "input-value"
-}, Ne = { class: "pl-autocomplete__controls" }, Fe = {
+}, Ne = { class: "pl-autocomplete__controls" }, qe = {
   key: 2,
   class: "arrow-icon arrow-icon-default"
-}, Te = { key: 0 }, qe = {
+}, Fe = { key: 0 }, Te = {
   key: 0,
   class: "nothing-found"
 }, Oe = {
@@ -74,22 +74,22 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
     }), P = () => we(
       b.value.findIndex((e) => y(e.value, a.value)),
       (e) => e < 0 ? 0 : e
-    ), W = () => t.activeIndex = P(), $ = m([]), w = m(), b = u(() => H($.value).map((e, o) => ({
+    ), W = () => t.activeIndex = P(), I = m([]), w = m(), b = u(() => H(I.value).map((e, o) => ({
       ...e,
       index: o,
       isSelected: o === Y.value,
       isActive: o === t.activeIndex
-    }))), z = m(!0), I = m(!1), E = u(() => c.disabled), Y = u(() => $.value.findIndex((e) => y(e.value, a.value))), C = u(() => {
+    }))), z = m(!0), $ = m(!1), E = u(() => c.disabled), Y = u(() => I.value.findIndex((e) => y(e.value, a.value))), C = u(() => {
       if (!z.value) {
         if (c.error)
           return Ee(c.error);
-        if (I.value)
+        if ($.value)
           return "Data loading error";
       }
-    }), F = u(() => {
+    }), q = u(() => {
       const e = h(w), o = h(b), l = e ?? o.find((i) => y(i.value, a.value)) ?? o.find((i) => y(i.value, a.value));
       return (l == null ? void 0 : l.label) || (a.value ? c.formatValue(a.value) : "");
-    }), Z = u(() => !t.open && a.value ? "" : a.value ? String(F.value) : c.placeholder), K = u(() => a.value !== void 0 && a.value !== null), G = u(() => E.value ? void 0 : "0"), T = (e) => {
+    }), Z = u(() => !t.open && a.value ? "" : a.value ? String(q.value) : c.placeholder), K = u(() => a.value !== void 0 && a.value !== null), G = u(() => E.value ? void 0 : "0"), F = (e) => {
       var o;
       a.value = e == null ? void 0 : e.value, w.value = e, p.value = null, t.open = !1, (o = v == null ? void 0 : v.value) == null || o.focus();
     }, J = () => {
@@ -124,7 +124,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
       const f = h(b), { length: V } = f;
       if (!V)
         return;
-      e.code === "Enter" && T(f.find((A) => A.index === i));
+      e.code === "Enter" && F(f.find((A) => A.index === i));
       const re = f.findIndex((A) => A.index === i) ?? -1, ae = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ie = Math.abs(re + ae + V) % V;
       t.activeIndex = b.value[ie].index ?? -1;
     };
@@ -138,17 +138,17 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
       var e;
       p.value, t.activeIndex >= 0 && t.open && ((e = N.value) == null || e.scrollIntoActive());
     });
-    const le = Ce(p, 300, { maxWait: 1e3 }), B = U(() => le.value, async (e) => e !== null ? c.optionsSearch(e) : []), q = U(() => a.value, async (e) => {
+    const le = Ce(p, 300, { maxWait: 1e3 }), B = U(() => le.value, async (e) => e !== null ? c.optionsSearch(e) : []), T = U(() => a.value, async (e) => {
       var o, l;
       return e && !y((o = w.value) == null ? void 0 : o.value, e) ? c.modelSearch ? c.modelSearch(e) : (l = await c.optionsSearch(String(e))) == null ? void 0 : l[0] : w.value;
     });
     return x(() => B.value, (e) => {
-      e && ($.value = e, p.value !== null && (I.value = !1));
-    }), x(() => q.value, (e) => {
+      e && (I.value = e, p.value !== null && ($.value = !1));
+    }), x(() => T.value, (e) => {
       e && (w.value = H([e])[0]);
     }), x(() => B.error, (e) => {
-      e && (I.value = !!e);
-    }), x(() => B.loading || q.loading, (e) => {
+      e && ($.value = !!e);
+    }), x(() => B.loading || T.loading, (e) => {
       z.value = e;
     }), (e, o) => (r(), n("div", {
       class: "pl-autocomplete__envelope",
@@ -181,7 +181,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
             t.open ? s("", !0) : (r(), n("div", De, [
               O(ze, null, {
                 default: D(() => [
-                  he(k(F.value), 1)
+                  he(k(q.value), 1)
                 ]),
                 _: 1
               })
@@ -208,12 +208,12 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
                 }, null, 2)) : e.arrowIcon ? (r(), n("div", {
                   key: 1,
                   class: M(["arrow-icon", [`icon-16 ${e.arrowIcon}`]])
-                }, null, 2)) : (r(), n("div", Fe))
+                }, null, 2)) : (r(), n("div", qe))
               ])
             ])
           ]),
-          e.label ? (r(), n("label", Te, [
-            e.required ? (r(), _(Ie, { key: 0 })) : s("", !0),
+          e.label ? (r(), n("label", Fe, [
+            e.required ? (r(), _($e, { key: 0 })) : s("", !0),
             g("span", null, k(e.label), 1),
             j.tooltip ? (r(), _(h(be), {
               key: 1,
@@ -226,7 +226,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
               _: 3
             })) : s("", !0)
           ])) : s("", !0),
-          t.open ? (r(), _(h($e), {
+          t.open ? (r(), _(h(Ie), {
             key: 1,
             ref: "overlay",
             root: v.value,
@@ -241,9 +241,9 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
                 "is-selected": l.isSelected,
                 "is-hovered": l.isActive,
                 size: e.optionSize,
-                onClick: L((f) => T(l), ["stop"])
+                onClick: L((f) => F(l), ["stop"])
               }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
-              b.value.length ? s("", !0) : (r(), n("div", qe, "Nothing found"))
+              b.value.length ? s("", !0) : (r(), n("div", Te, "Nothing found"))
             ]),
             _: 1
           }, 8, ["root"])) : s("", !0),

package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a big list of options using string search request\n /\nexport default {\n name: 'PlAutocomplete',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-autocomplete.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport { refDebounced } from '@vueuse/core';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\n/\n The current selected value.\n /\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: (s: string) => Promise<ListOption<M>[]>;\n /\n Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.\n /\n modelSearch?: (v: M) => Promise<ListOption<M>>;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Custom icon (16px) class for the dropdown arrow (optional)\n /\n arrowIcon?: string;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: string;\n /\n Option list item size\n /\n optionSize?: 'small' \| 'medium';\n /\n Formatter for the selected value if its label is absent\n */\n formatValue?: (value: M) => string;\n }>(),\n {\n modelSearch: undefined,\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n formatValue: (v: M) => String(v),\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst search = ref<string \| null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> \| undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n }));\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (isLoadingError.value) {\n return 'Data loading error';\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized \| undefined = modelOption ?? options.find((o) => deepEqual(o.value, model.value)) ?? options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label \|\| (model.value ? props.formatValue(model.value) : '');\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return '';\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: ListOptionNormalized<M> \| undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(() => data.open, (v) => {\n search.value = v ? '' : null;\n});\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n search.value = null;\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n search.value = '';\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {\n if (v !== null) { // search is null when dropdown is closed;\n return props.optionsSearch(v);\n }\n return [];\n});\n\nconst modelOptionRequest = useWatchFetch(() => model.value, async (v) => {\n if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component\n if (props.modelSearch) {\n return props.modelSearch(v);\n }\n return (await props.optionsSearch(String(v)))?.[0];\n }\n return modelOptionRef.value;\n});\n\nwatch(() => optionsRequest.value, (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n});\n\nwatch(() => modelOptionRequest.value, (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n});\n\nwatch(() => optionsRequest.error, (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n});\n\nwatch(() => optionsRequest.loading \|\| modelOptionRequest.loading, (loading) => {\n isLoadingOptions.value = loading;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\">\n <input\n ref=\"input\"\n v-model=\"search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-autocomplete__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <SvgRequired v-if=\"required\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-autocomplete__options\" tabindex=\"-1\" :gap=\"3\">\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item)\"\n />\n <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["He","model","I","n","ue","u","U","ce","d","f","x","$","de","i","pe","findActiveIndex","tap","renderedOptionsRef","v","ge","g","b","ref","modelOptionRef","opt","index","S","V","A","p","j","E","getErrorMessage","props","isLoadingError","Ae","computed","item","computedPlaceholder","m","y","r","G","data","_a","rootRef","Q","L","setFocusOnInput","Y","input","Z","search","h","relatedTarget","o","te","z","l","length","localIndex","newIndex","R","ae","ne","re","useLabelNotch","be","open","refDebounced","useWatchFetch","searchDebounced","Ce","H","optionsRequest","result","D","normalizeListOptions","watch","err","T","modelOptionRequest","isLoadingOptions","loading"],"mappings":"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"}
1	+ {"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a big list of options using string search request\n /\nexport default {\n name: 'PlAutocomplete',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-autocomplete.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport { refDebounced } from '@vueuse/core';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\n/\n The current selected value.\n /\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: (s: string) => Promise<ListOption<M>[]>;\n /\n Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.\n /\n modelSearch?: (v: M) => Promise<ListOption<M>>;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Custom icon (16px) class for the dropdown arrow (optional)\n /\n arrowIcon?: string;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: string;\n /\n Option list item size\n /\n optionSize?: 'small' \| 'medium';\n /\n Formatter for the selected value if its label is absent\n */\n formatValue?: (value: M) => string;\n }>(),\n {\n modelSearch: undefined,\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n formatValue: (v: M) => String(v),\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst search = ref<string \| null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> \| undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n }));\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (isLoadingError.value) {\n return 'Data loading error';\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized \| undefined = modelOption ?? options.find((o) => deepEqual(o.value, model.value)) ?? options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label \|\| (model.value ? props.formatValue(model.value) : '');\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return '';\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: ListOptionNormalized<M> \| undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(() => data.open, (v) => {\n search.value = v ? '' : null;\n});\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n search.value = null;\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n search.value = '';\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {\n if (v !== null) { // search is null when dropdown is closed;\n return props.optionsSearch(v);\n }\n return [];\n});\n\nconst modelOptionRequest = useWatchFetch(() => model.value, async (v) => {\n if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component\n if (props.modelSearch) {\n return props.modelSearch(v);\n }\n return (await props.optionsSearch(String(v)))?.[0];\n }\n return modelOptionRef.value;\n});\n\nwatch(() => optionsRequest.value, (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n});\n\nwatch(() => modelOptionRequest.value, (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n});\n\nwatch(() => optionsRequest.error, (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n});\n\nwatch(() => optionsRequest.loading \|\| modelOptionRequest.loading, (loading) => {\n isLoadingOptions.value = loading;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\">\n <input\n ref=\"input\"\n v-model=\"search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-autocomplete__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <SvgRequired v-if=\"required\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-autocomplete__options\" tabindex=\"-1\" :gap=\"3\">\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item)\"\n />\n <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["He","model","I","n","ue","u","U","ce","d","f","x","$","de","i","pe","findActiveIndex","tap","renderedOptionsRef","v","ge","g","b","ref","modelOptionRef","opt","index","S","V","A","p","j","E","getErrorMessage","props","isLoadingError","Ae","computed","item","computedPlaceholder","m","y","r","G","data","_a","rootRef","Q","L","setFocusOnInput","Y","input","Z","search","h","relatedTarget","o","te","z","l","length","localIndex","newIndex","R","ae","ne","re","useLabelNotch","be","open","refDebounced","useWatchFetch","searchDebounced","Ce","q","H","optionsRequest","result","D","normalizeListOptions","watch","err","T","modelOptionRequest","isLoadingOptions","loading"],"mappings":"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"}

package/dist/lib/ui/uikit/dist/components/PlDropdown/OptionList.vue.js CHANGED Viewed

@@ -5,7 +5,7 @@ import C from "../../utils/TextLabel.vue.js";
 const E = {
   key: 1,
   class: "nothing-found"
-}, $ = /* @__PURE__ */ B({
+}, q = /* @__PURE__ */ B({
   __name: "OptionList",
   props: {
     rootRef: {},
@@ -83,6 +83,6 @@ const E = {
   }
 });
 export {
-  $ as default
+  q as default
 };
 //# sourceMappingURL=OptionList.vue.js.map