@esri/calcite-components/dist/esm-es5/calcite-pick-list-item.entry.js

Web Components for Esri's Calcite Design System.

var __awaiter=this&&this.__awaiter||function(e,t,i,a){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,n){function s(e){try{c(a.next(e))}catch(t){n(t)}}function o(e){try{c(a["throw"](e))}catch(t){n(t)}}function c(e){e.done?i(e.value):r(e.value).then(s,o)}c((a=a.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},a,r,n,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(e){return function(t){return c([e,t])}}function c(s){if(a)throw new TypeError("Generator is already executing.");while(i)try{if(a=1,r&&(n=s[0]&2?r["return"]:s[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,s[1])).done)return n;if(r=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;r=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){i.label=s[1];break}if(s[0]===6&&i.label<n[1]){i.label=n[1];n=s;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(s);break}if(n[2])i.ops.pop();i.trys.pop();continue}s=t.call(e,i)}catch(o){s=[6,o];r=0}finally{a=n=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8fd57462.js";import{c as getSlotted}from"./dom-d9ba1da4.js";import{I as ICON_TYPES}from"./resources-e06851d2.js";import{T as TEXT,I as ICONS,C as CSS,S as SLOTS}from"./resources-c89a74dc.js";var calcitePickListItemCss='@charset "UTF-8";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;margin:0 0 1px 0;color:var(--calcite-ui-text-1);-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;-webkit-animation:calcite-fade-in 150ms ease-in-out;animation:calcite-fade-in 150ms ease-in-out;-webkit-box-shadow:0 1px 0 var(--calcite-ui-border-3);box-shadow:0 1px 0 var(--calcite-ui-border-3);--calcite-icon-dot-size:16px}:host(:hover){background-color:var(--calcite-ui-foreground-2)}.icon{-ms-flex-align:center;align-items:center;color:var(--calcite-ui-brand);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;line-height:0;margin:0 var(--calcite-spacing-half);opacity:0}.icon-dot{width:calc(var(--calcite-icon-dot-size) / 2);margin:calc(var(--calcite-icon-dot-size) / 2)}.icon-dot:before{content:"•"}:host([selected]) .icon{-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1}.label{background-color:transparent;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-spacing-three-quarters);-ms-flex-align:center;align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-spacing-quarter)}.title{font-size:0.75rem;line-height:1.5;word-wrap:break-word;word-break:break-word;color:var(--calcite-ui-text-1)}.description{color:var(--calcite-ui-text-3);font-family:var(--calcite-code-family);margin-top:var(--calcite-spacing-quarter);font-size:0.75rem;line-height:1.5;word-wrap:break-word;word-break:break-word}.actions{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;justify-self:flex-end;margin:0}.actions--start~.label{padding-left:var(--calcite-spacing-quarter)}.calcite--rtl .actions--start~.label{padding-left:unset;padding-right:var(--calcite-spacing-quarter)}';var CalcitePickListItem=function(){function e(e){var t=this;registerInstance(this,e);this.calciteListItemChange=createEvent(this,"calciteListItemChange",7);this.calciteListItemRemove=createEvent(this,"calciteListItemRemove",7);this.calciteListItemPropsChange=createEvent(this,"calciteListItemPropsChange",7);this.calciteListItemValueChange=createEvent(this,"calciteListItemValueChange",7);this.disabled=false;this.disableDeselect=false;this.icon=null;this.removable=false;this.selected=false;this.intlRemove=TEXT.remove;this.pickListClickHandler=function(e){if(t.disabled||t.disableDeselect&&t.selected){return}t.shiftPressed=e.shiftKey;t.selected=!t.selected};this.pickListKeyDownHandler=function(e){if(e.key===" "){e.preventDefault();if(t.disableDeselect&&t.selected){return}t.selected=!t.selected}};this.removeClickHandler=function(){t.calciteListItemRemove.emit()}}e.prototype.descriptionWatchHandler=function(){this.calciteListItemPropsChange.emit()};e.prototype.labelWatchHandler=function(){this.calciteListItemPropsChange.emit()};e.prototype.metadataWatchHandler=function(){this.calciteListItemPropsChange.emit()};e.prototype.selectedWatchHandler=function(){this.calciteListItemChange.emit({item:this.el,value:this.value,selected:this.selected,shiftPressed:this.shiftPressed});this.shiftPressed=false};e.prototype.valueWatchHandler=function(e,t){this.calciteListItemValueChange.emit({oldValue:t,newValue:e})};e.prototype.toggleSelected=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.disabled){return[2]}this.selected=typeof e==="boolean"?e:!this.selected;return[2]}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){(e=this.focusEl)===null||e===void 0?void 0:e.focus();return[2]}))}))};e.prototype.renderIcon=function(){var e;var t=this.icon;if(!t){return null}return h("span",{class:(e={},e[CSS.icon]=true,e[CSS.iconDot]=t===ICON_TYPES.circle,e)},t===ICON_TYPES.square?h("calcite-icon",{icon:ICONS.checked,scale:"s"}):null)};e.prototype.renderRemoveAction=function(){return this.removable?h("calcite-action",{class:CSS.remove,icon:ICONS.remove,onClick:this.removeClickHandler,slot:SLOTS.actionsEnd,text:this.intlRemove}):null};e.prototype.renderActionsStart=function(){var e;var t=this.el;var i=getSlotted(t,SLOTS.actionsStart);return i?h("div",{class:(e={},e[CSS.actions]=true,e[CSS.actionsStart]=true,e)},h("slot",{name:SLOTS.actionsStart})):null};e.prototype.renderActionsEnd=function(){var e;var t=this,i=t.el,a=t.removable;var r=getSlotted(i,SLOTS.actionsEnd);return r||a?h("div",{class:(e={},e[CSS.actions]=true,e[CSS.actionsEnd]=true,e)},h("slot",{name:SLOTS.actionsEnd}),this.renderRemoveAction()):null};e.prototype.render=function(){var e=this;var t=this,i=t.description,a=t.label;return h(Host,{"aria-checked":this.selected.toString(),role:"menuitemcheckbox"},this.renderIcon(),this.renderActionsStart(),h("label",{"aria-label":a,class:CSS.label,onClick:this.pickListClickHandler,onKeyDown:this.pickListKeyDownHandler,ref:function(t){return e.focusEl=t},tabIndex:0},h("div",{class:CSS.textContainer},h("span",{class:CSS.title},a),i?h("span",{class:CSS.description},i):null)),this.renderActionsEnd())};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{description:["descriptionWatchHandler"],label:["labelWatchHandler"],metadata:["metadataWatchHandler"],selected:["selectedWatchHandler"],value:["valueWatchHandler"]}},enumerable:false,configurable:true});return e}();CalcitePickListItem.style=calcitePickListItemCss;export{CalcitePickListItem as calcite_pick_list_item};