@freshworks/crayons
Version:
Crayons Web Components library
1 lines • 10.2 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,t,o,i){function r(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,n){function f(e){try{a(i.next(e))}catch(t){n(t)}}function s(e){try{a(i["throw"](e))}catch(t){n(t)}}function a(e){e.done?o(e.value):r(e.value).then(f,s)}a((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,r,n,f;return f={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(f[Symbol.iterator]=function(){return this}),f;function s(e){return function(t){return a([e,t])}}function a(f){if(i)throw new TypeError("Generator is already executing.");while(o)try{if(i=1,r&&(n=f[0]&2?r["return"]:f[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,f[1])).done)return n;if(r=0,n)f=[f[0]&2,n.value];switch(f[0]){case 0:case 1:n=f;break;case 4:o.label++;return{value:f[1],done:false};case 5:o.label++;r=f[1];f=[0];continue;case 7:f=o.ops.pop();o.trys.pop();continue;default:if(!(n=o.trys,n=n.length>0&&n[n.length-1])&&(f[0]===6||f[0]===2)){o=0;continue}if(f[0]===3&&(!n||f[1]>n[0]&&f[1]<n[3])){o.label=f[1];break}if(f[0]===6&&o.label<n[1]){o.label=n[1];n=f;break}if(n&&o.label<n[2]){o.label=n[2];o.ops.push(f);break}if(n[2])o.ops.pop();o.trys.pop();continue}f=t.call(e,o)}catch(s){f=[6,s];r=0}finally{i=n=0}if(f[0]&5)throw f[1];return{value:f[0]?f[1]:void 0,done:true}}};System.register(["./p-6d102d56.system.js"],(function(e){"use strict";var t,o,i,r,n;return{setters:[function(e){t=e.r;o=e.c;i=e.h;r=e.e;n=e.i}],execute:function(){var f=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block}@media screen and (prefers-reduced-motion: reduce){.fw-toggle-card-button,.fw-toggle-card-button-tick,.fw-toggle-icon-button{-webkit-transition:none;transition:none}}.fw-toggle-card-button{width:var(--fw-toggle-group-button-card-width, 240px);height:var(--fw-toggle-group-button-card-height, 112px);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;cursor:pointer;outline:0;padding:12px;border-radius:8px;background:#fff;border:1px solid #cfd7df;-webkit-box-shadow:inset 0px 1px 2px rgba(24, 50, 71, 0.05);box-shadow:inset 0px 1px 2px rgba(24, 50, 71, 0.05);-webkit-transition:background-color 0.3s;transition:background-color 0.3s;position:relative}.fw-toggle-card-button .fw-toggle-card-button-header{width:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:20px;text-align:left;color:#12344d;font-size:16px;font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}.fw-toggle-card-button .fw-toggle-card-button-description{width:100%;margin:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left;color:#475867;font-size:14px;font-weight:400;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:16px;max-height:var(--fw-toggle-group-button-card-description-max-height, 48px);-webkit-line-clamp:var(--fw-toggle-group-button-card-description-max-lines, 3);-webkit-box-orient:vertical}.fw-toggle-card-button .fw-toggle-card-button-tick{width:20px;height:20px;position:absolute;top:-8px;right:-8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;outline:2px solid #fff;background-color:#2c5cc5;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;opacity:1}.fw-toggle-card-button:hover{background:#ebeff3}.fw-toggle-card-button:focus{border:1px solid #e5f2fd;-webkit-box-shadow:0 0 0 1px #e5f2fd;box-shadow:0 0 0 1px #e5f2fd}.fw-toggle-card-button--disabled{cursor:not-allowed;opacity:0.6}.fw-toggle-card-button--selected{background:#e5f2fd;border:1px solid #bbdcfe;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-card-button--selected .fw-toggle-card-button-tick{opacity:1}.fw-toggle-card-button--selected--checkbox{cursor:pointer}.fw-toggle-card-button--selected--checkbox:hover{background:#e5f2fd;border:1px solid #bbdcfe;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-card-button--selected--checkbox:hover .fw-toggle-card-button-tick{opacity:0.5}.fw-toggle-card-button--selected--checkbox:active{background:#e5f2fd;border:1px solid #bbdcfe;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-card-button--selected--checkbox:active .fw-toggle-card-button-tick{opacity:0.1}.fw-toggle-card-button--selected--checkbox:focus{background:#e5f2fd;border:1px solid #bbdcfe;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-card-button--selected--checkbox:focus .fw-toggle-card-button-tick{opacity:1}.fw-toggle-card-button--selected--radio{cursor:unset;pointer-events:none}.fw-toggle-card-button--selected--radio:hover{background:#e5f2fd;border:1px solid #bbdcfe;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-card-button--selected--radio:focus{background:#e5f2fd;border:1px solid #bbdcfe;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-icon-button{width:var(--fw-toggle-group-button-icon-button-width, 42px);height:var(--fw-toggle-group-button-icon-button-height, 36px);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;outline:0;padding:0;background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #ffffff), color-stop(95.75%, #f5f7f9));background:linear-gradient(180deg, #ffffff 2.56%, #f5f7f9 95.75%);border:1px solid #cfd7df;border-radius:4px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s}.fw-toggle-icon-button:hover{background:#f5f7f9}.fw-toggle-icon-button:focus{background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #ffffff), color-stop(95.75%, #f5f7f9));background:linear-gradient(180deg, #ffffff 2.56%, #f5f7f9 95.75%);border:2px solid #2c5cc5;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-icon-button--disabled{cursor:not-allowed;opacity:0.6}.fw-toggle-icon-button--selected{background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #ffffff), color-stop(95.75%, #f5f7f9));background:linear-gradient(180deg, #ffffff 2.56%, #f5f7f9 95.75%);border:2px solid #2c5cc5;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-icon-button--selected--checkbox{cursor:pointer}.fw-toggle-icon-button--selected--checkbox:hover{background:#f5f7f9}.fw-toggle-icon-button--selected--checkbox:focus{background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #ffffff), color-stop(95.75%, #f5f7f9));background:linear-gradient(180deg, #ffffff 2.56%, #f5f7f9 95.75%);border:2px solid #2c5cc5;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-icon-button--selected--radio{cursor:unset;pointer-events:none}.fw-toggle-icon-button--selected--radio:hover{background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #ffffff), color-stop(95.75%, #f5f7f9));background:linear-gradient(180deg, #ffffff 2.56%, #f5f7f9 95.75%);border:2px solid #2c5cc5;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}.fw-toggle-icon-button--selected--radio:focus{background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #ffffff), color-stop(95.75%, #f5f7f9));background:linear-gradient(180deg, #ffffff 2.56%, #f5f7f9 95.75%);border:2px solid #2c5cc5;-webkit-box-shadow:0px 1px 4px #ebeff3;box-shadow:0px 1px 4px #ebeff3}';var s=e("fw_toggle_group_button",function(){function e(e){t(this,e);this.fwToggled=o(this,"fwToggled",7);this.selected=false;this.disabled=false;this.baseClassName="fw-card-radio";this.type="card";this.selectable=true;this.isCheckbox=false;this.index=-1;this.value="";this.header="";this.description="";this.name=""}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.button.focus();return[2]}))}))};e.prototype.listenClickHandler=function(e){if(this.disabled){e.preventDefault();e.stopPropagation();return}if(e.detail&&e.detail>1){return}var t=true;var o=false;if(this.selectable){if(this.isCheckbox){o=!this.selected}else{o=true;if(this.selected){t=false}}}this.selected=o;if(t){this.fwToggled.emit({index:this.index,value:this.value,selected:o})}};e.prototype.componentWillLoad=function(){switch(this.type){case"card":this.baseClassName="fw-toggle-card-button";break;case"icon":this.baseClassName="fw-toggle-icon-button";break}};e.prototype.getClassName=function(){var e=this.baseClassName;var t=e;if(this.selectable&&this.selected){t+=" "+e+"--selected";if(this.isCheckbox){t+=" "+e+"--selected--checkbox"}else{t+=" "+e+"--selected--radio"}}if(this.disabled){t+=" "+e+"--disabled"}return t};e.prototype.render=function(){var e=this;var t=this.baseClassName;var o=this.getClassName();var n=this.type;return i(r,{tabIndex:"-1"},n==="card"&&i("button",{ref:function(t){return e.button=t},class:o,"aria-disabled":this.disabled},i("label",{class:t+"-header"},this.header),this.description&&this.description!==""&&i("p",{class:t+"-description"},this.description),this.selected?i("span",{class:t+"-tick"},i("fw-icon",{size:10,name:"check",color:"#FFFFFF",library:"system"})):""),n==="icon"&&i("button",{ref:function(t){return e.button=t},class:o,"aria-disabled":this.disabled},i("slot",{name:"toggle-icon"})),n==="custom"&&i("slot",null))};Object.defineProperty(e.prototype,"host",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());s.style=f}}}));