calcite-radio-button.entry.js 13 KB

123456
  1. var __awaiter=this&&this.__awaiter||function(t,e,i,a){function n(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,o){function r(t){try{s(a.next(t))}catch(t){o(t)}}function c(t){try{s(a["throw"](t))}catch(t){o(t)}}function s(t){t.done?i(t.value):n(t.value).then(r,c)}s((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,n,o,r;return r={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function c(t){return function(e){return s([t,e])}}function s(r){if(a)throw new TypeError("Generator is already executing.");while(i)try{if(a=1,n&&(o=r[0]&2?n["return"]:r[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,r[1])).done)return o;if(n=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;n=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){i.label=r[1];break}if(r[0]===6&&i.label<o[1]){i.label=o[1];o=r;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(r);break}if(o[2])i.ops.pop();i.trys.pop();continue}r=e.call(t,i)}catch(t){r=[6,t];n=0}finally{a=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
  2. /*!
  3. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  4. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  5. * v1.0.0-beta.82
  6. */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8ece2564.js";import{g as guid}from"./guid-b4461004.js";import{a as getElementDir,f as focusElement,t as toAriaBoolean}from"./dom-da697a3f.js";import{c as connectLabel,d as disconnectLabel,g as getLabelText}from"./label-50132b90.js";import{c as connectForm,d as disconnectForm,H as HiddenFormInputSlot}from"./form-bca481e1.js";import{g as getRoundRobinIndex}from"./array-1655bbf7.js";import{u as updateHostInteraction}from"./interactive-cb5bf285.js";var CSS={container:"container"};var radioButtonCss='@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hovered][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{height:var(--calcite-radio-size);max-width:var(--calcite-radio-size);min-width:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}@media (forced-colors: active){:host([checked]) .radio::after,:host([checked][disabled]) .radio::after{content:"";width:var(--calcite-radio-size);height:var(--calcite-radio-size);background-color:windowText;display:block}}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}';var RadioButton=function(){function t(t){var e=this;registerInstance(this,t);this.calciteInternalRadioButtonBlur=createEvent(this,"calciteInternalRadioButtonBlur",7);this.calciteRadioButtonChange=createEvent(this,"calciteRadioButtonChange",7);this.calciteInternalRadioButtonCheckedChange=createEvent(this,"calciteInternalRadioButtonCheckedChange",7);this.calciteInternalRadioButtonFocus=createEvent(this,"calciteInternalRadioButtonFocus",7);this.checked=false;this.disabled=false;this.focused=false;this.hidden=false;this.hovered=false;this.required=false;this.scale="m";this.selectItem=function(t,e){t[e].click()};this.queryButtons=function(){return Array.from(e.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((function(t){return t.name===e.name}))};this.isDefaultSelectable=function(){var t=e.queryButtons();return!t.some((function(t){return t.checked}))&&t[0]===e.el};this.check=function(){if(e.disabled){return}e.uncheckAllRadioButtonsInGroup();e.checked=true;e.calciteRadioButtonChange.emit();e.setFocus()};this.clickHandler=function(){e.check()};this.setContainerEl=function(t){e.containerEl=t};this.handleKeyDown=function(t){var i=["ArrowLeft","ArrowUp","ArrowRight","ArrowDown"," "];var a=t.key;var n=e.el;if(i.indexOf(a)===-1){return}if(a===" "){e.check();return}var o=a;if(getElementDir(n)==="rtl"){if(a==="ArrowRight"){o="ArrowLeft"}if(a==="ArrowLeft"){o="ArrowRight"}}var r=Array.from(e.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((function(t){return t.name===e.name}));var c=0;var s=r.length;r.some((function(t,e){if(t.checked){c=e;return true}}));switch(o){case"ArrowLeft":case"ArrowUp":t.preventDefault();e.selectItem(r,getRoundRobinIndex(Math.max(c-1,-1),s));return;case"ArrowRight":case"ArrowDown":t.preventDefault();e.selectItem(r,getRoundRobinIndex(c+1,s));return;default:return}};this.onContainerBlur=function(){e.focused=false;e.calciteInternalRadioButtonBlur.emit()};this.onContainerFocus=function(){if(!e.disabled){e.focused=true;e.calciteInternalRadioButtonFocus.emit()}}}t.prototype.checkedChanged=function(t){if(t){this.uncheckOtherRadioButtonsInGroup()}this.calciteInternalRadioButtonCheckedChange.emit(t)};t.prototype.nameChanged=function(){this.checkLastRadioButton()};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.disabled){focusElement(this.containerEl)}return[2]}))}))};t.prototype.onLabelClick=function(t){if(!this.disabled&&!this.hidden){this.uncheckOtherRadioButtonsInGroup();var e=t.currentTarget;var i=e.for?this.rootNode.querySelector('calcite-radio-button[id="'.concat(e.for,'"]')):e.querySelector('calcite-radio-button[name="'.concat(this.name,'"]'));if(i){i.checked=true;i.focused=true}this.calciteRadioButtonChange.emit();this.setFocus()}};t.prototype.checkLastRadioButton=function(){var t=this.queryButtons();var e=t.filter((function(t){return t.checked}));if((e===null||e===void 0?void 0:e.length)>1){var i=e[e.length-1];e.filter((function(t){return t!==i})).forEach((function(t){t.checked=false;t.emitCheckedChange()}))}};t.prototype.emitCheckedChange=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.calciteInternalRadioButtonCheckedChange.emit();return[2]}))}))};t.prototype.uncheckAllRadioButtonsInGroup=function(){var t=this.queryButtons();t.forEach((function(t){if(t.checked){t.checked=false;t.focused=false}}))};t.prototype.uncheckOtherRadioButtonsInGroup=function(){var t=this;var e=this.queryButtons();var i=e.filter((function(e){return e.guid!==t.guid}));i.forEach((function(t){if(t.checked){t.checked=false;t.focused=false}}))};t.prototype.getTabIndex=function(){if(this.disabled){return undefined}return this.checked||this.isDefaultSelectable()?0:-1};t.prototype.mouseenter=function(){this.hovered=true};t.prototype.mouseleave=function(){this.hovered=false};t.prototype.connectedCallback=function(){this.rootNode=this.el.getRootNode();this.guid=this.el.id||"calcite-radio-button-".concat(guid());if(this.name){this.checkLastRadioButton()}connectLabel(this);connectForm(this)};t.prototype.componentDidLoad=function(){if(this.focused&&!this.disabled){this.setFocus()}};t.prototype.disconnectedCallback=function(){disconnectLabel(this);disconnectForm(this)};t.prototype.componentDidRender=function(){updateHostInteraction(this)};t.prototype.render=function(){var t=this.getTabIndex();return h(Host,{onClick:this.clickHandler,onKeyDown:this.handleKeyDown},h("div",{"aria-checked":toAriaBoolean(this.checked),"aria-label":getLabelText(this),class:CSS.container,onBlur:this.onContainerBlur,onFocus:this.onContainerFocus,ref:this.setContainerEl,role:"radio",tabIndex:t},h("div",{class:"radio"})),h(HiddenFormInputSlot,{component:this}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{checked:["checkedChanged"],name:["nameChanged"]}},enumerable:false,configurable:true});return t}();RadioButton.style=radioButtonCss;export{RadioButton as calcite_radio_button};