UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines 5.15 kB
var __awaiter=this&&this.__awaiter||function(e,t,a,r){function n(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,i){function o(e){try{l(r.next(e))}catch(t){i(t)}}function s(e){try{l(r["throw"](e))}catch(t){i(t)}}function l(e){e.done?a(e.value):n(e.value).then(o,s)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,n,i,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return l([e,t])}}function l(o){if(r)throw new TypeError("Generator is already executing.");while(a)try{if(r=1,n&&(i=o[0]&2?n["return"]:o[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,o[1])).done)return i;if(n=0,i)o=[o[0]&2,i.value];switch(o[0]){case 0:case 1:i=o;break;case 4:a.label++;return{value:o[1],done:false};case 5:a.label++;n=o[1];o=[0];continue;case 7:o=a.ops.pop();a.trys.pop();continue;default:if(!(i=a.trys,i=i.length>0&&i[i.length-1])&&(o[0]===6||o[0]===2)){a=0;continue}if(o[0]===3&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(o[0]===6&&a.label<i[1]){a.label=i[1];i=o;break}if(i&&a.label<i[2]){a.label=i[2];a.ops.push(o);break}if(i[2])a.ops.pop();a.trys.pop();continue}o=t.call(e,a)}catch(s){o=[6,s];n=0}finally{r=i=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-8fd57462.js";var CSS={handle:"handle",handleActivated:"handle--activated"};var ICONS={drag:"drag"};var calciteHandleCss="@-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)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-spacing-three-quarters) var(--calcite-spacing-quarter);background-color:var(--calcite-ui-foreground-3);background-color:transparent;border:none;color:var(--calcite-ui-border-3);line-height:0;cursor:move;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}.handle:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}";var CalciteHandle=function(){function e(e){var t=this;registerInstance(this,e);this.calciteHandleNudge=createEvent(this,"calciteHandleNudge",7);this.activated=false;this.textTitle="handle";this.handleKeyDown=function(e){switch(e.key){case" ":t.activated=!t.activated;break;case"ArrowUp":case"ArrowDown":if(!t.activated){return}var a=e.key.toLowerCase().replace("arrow","");t.calciteHandleNudge.emit({handle:t.el,direction:a});break}};this.handleBlur=function(){t.activated=false}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.handleButton.focus();return[2]}))}))};e.prototype.render=function(){var e;var t=this;return h("span",{"aria-pressed":this.activated.toString(),class:(e={},e[CSS.handle]=true,e[CSS.handleActivated]=this.activated,e),onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:function(e){t.handleButton=e},role:"button",tabindex:"0",title:this.textTitle},h("calcite-icon",{icon:ICONS.drag,scale:"s"}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();CalciteHandle.style=calciteHandleCss;export{CalciteHandle as calcite_handle};