@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
201 lines (172 loc) • 8.67 kB
JavaScript
import{g as e,f as a,v as c,b as r,h as o,P as t,z as i}from"./paper-inky-focus-behavior-fa16796b.js";
/**
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/let n=!1,l=[],h=[];function p(){n=!0,requestAnimationFrame((function(){n=!1,s(l),setTimeout((function(){d(h)}))}))}function s(e){for(;e.length;)k(e.shift())}function d(e){for(let a=0,c=e.length;a<c;a++)k(e.shift())}function k(e){const a=e[0],c=e[1],r=e[2];try{c.apply(a,r)}catch(e){setTimeout(()=>{throw e})}}function b(e,a,c){n||p(),h.push([e,a,c])}
/**
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
part of the polymer project is also subject to an additional IP rights grant
found at http://polymer.github.io/PATENTS.txt
*/const u={properties:{checked:{type:Boolean,value:!1,reflectToAttribute:!0,notify:!0,observer:"_checkedChanged"},toggles:{type:Boolean,value:!0,reflectToAttribute:!0},value:{type:String,value:"on",observer:"_valueChanged"}},observers:["_requiredChanged(required)"],created:function(){this._hasIronCheckedElementBehavior=!0},_getValidity:function(e){return this.disabled||!this.required||this.checked},_requiredChanged:function(){this.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required")},_checkedChanged:function(){this.active=this.checked,this.fire("iron-change")},_valueChanged:function(){void 0!==this.value&&null!==this.value||(this.value="on")}},x=[c,[e,a,u],{_checkedChanged:function(){u._checkedChanged.call(this),this.hasRipple()&&(this.checked?this._ripple.setAttribute("checked",""):this._ripple.removeAttribute("checked"))},_buttonStateChanged:function(){r._buttonStateChanged.call(this),this.disabled||this.isAttached&&(this.checked=this.active)}}],v=o`<style>
:host {
display: inline-block;
white-space: nowrap;
cursor: pointer;
--calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
/* -1px is a sentinel for the default and is replaced in \`attached\`. */
--calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
@apply --paper-font-common-base;
line-height: 0;
-webkit-tap-highlight-color: transparent;
}
:host([hidden]) {
display: none ;
}
:host(:focus) {
outline: none;
}
.hidden {
display: none;
}
#checkboxContainer {
display: inline-block;
position: relative;
width: var(--calculated-paper-checkbox-size);
height: var(--calculated-paper-checkbox-size);
min-width: var(--calculated-paper-checkbox-size);
margin: var(--paper-checkbox-margin, initial);
vertical-align: var(--paper-checkbox-vertical-align, middle);
background-color: var(--paper-checkbox-unchecked-background-color, transparent);
}
#ink {
position: absolute;
/* Center the ripple in the checkbox by negative offsetting it by
* (inkWidth - rippleWidth) / 2 */
top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
width: var(--calculated-paper-checkbox-ink-size);
height: var(--calculated-paper-checkbox-ink-size);
color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color));
opacity: 0.6;
pointer-events: none;
}
#ink:dir(rtl) {
right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
left: auto;
}
#ink[checked] {
color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
}
#checkbox {
position: relative;
box-sizing: border-box;
height: 100%;
border: solid 2px;
border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
border-radius: 2px;
pointer-events: none;
-webkit-transition: background-color 140ms, border-color 140ms;
transition: background-color 140ms, border-color 140ms;
-webkit-transition-duration: var(--paper-checkbox-animation-duration, 140ms);
transition-duration: var(--paper-checkbox-animation-duration, 140ms);
}
/* checkbox checked animations */
#checkbox.checked #checkmark {
-webkit-animation: checkmark-expand 140ms ease-out forwards;
animation: checkmark-expand 140ms ease-out forwards;
-webkit-animation-duration: var(--paper-checkbox-animation-duration, 140ms);
animation-duration: var(--paper-checkbox-animation-duration, 140ms);
}
@-webkit-keyframes checkmark-expand {
0% {
-webkit-transform: scale(0, 0) rotate(45deg);
}
100% {
-webkit-transform: scale(1, 1) rotate(45deg);
}
}
@keyframes checkmark-expand {
0% {
transform: scale(0, 0) rotate(45deg);
}
100% {
transform: scale(1, 1) rotate(45deg);
}
}
#checkbox.checked {
background-color: var(--paper-checkbox-checked-color, var(--primary-color));
border-color: var(--paper-checkbox-checked-color, var(--primary-color));
}
#checkmark {
position: absolute;
width: 36%;
height: 70%;
border-style: solid;
border-top: none;
border-left: none;
border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
border-color: var(--paper-checkbox-checkmark-color, white);
-webkit-transform-origin: 97% 86%;
transform-origin: 97% 86%;
box-sizing: content-box; /* protect against page-level box-sizing */
}
#checkmark:dir(rtl) {
-webkit-transform-origin: 50% 14%;
transform-origin: 50% 14%;
}
/* label */
#checkboxLabel {
position: relative;
display: inline-block;
vertical-align: middle;
padding-left: var(--paper-checkbox-label-spacing, 8px);
white-space: normal;
line-height: normal;
color: var(--paper-checkbox-label-color, var(--primary-text-color));
@apply --paper-checkbox-label;
}
:host([checked]) #checkboxLabel {
color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
@apply --paper-checkbox-label-checked;
}
#checkboxLabel:dir(rtl) {
padding-right: var(--paper-checkbox-label-spacing, 8px);
padding-left: 0;
}
#checkboxLabel[hidden] {
display: none;
}
/* disabled state */
:host([disabled]) #checkbox {
opacity: 0.5;
border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
}
:host([disabled][checked]) #checkbox {
background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
opacity: 0.5;
}
:host([disabled]) #checkboxLabel {
opacity: 0.65;
}
/* invalid state */
#checkbox.invalid:not(.checked) {
border-color: var(--paper-checkbox-error-color, var(--error-color));
}
</style>
<div id="checkboxContainer">
<div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
<div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
</div>
</div>
<div id="checkboxLabel"><slot></slot></div>`;v.setAttribute("strip-whitespace",""),t({_template:v,is:"paper-checkbox",behaviors:[x],hostAttributes:{role:"checkbox","aria-checked":!1,tabindex:0},properties:{ariaActiveAttribute:{type:String,value:"aria-checked"}},attached:function(){b(this,(function(){if("-1px"===this.getComputedStyleValue("--calculated-paper-checkbox-ink-size").trim()){var e=this.getComputedStyleValue("--calculated-paper-checkbox-size").trim(),a="px",c=e.match(/[A-Za-z]+$/);null!==c&&(a=c[0]);var r=parseFloat(e),o=8/3*r;"px"===a&&(o=Math.floor(o))%2!=r%2&&o++,this.updateStyles({"--paper-checkbox-ink-size":o+a})}}))},_computeCheckboxClass:function(e,a){var c="";return e&&(c+="checked "),a&&(c+="invalid"),c},_computeCheckmarkClass:function(e){return e?"":"hidden"},_createRipple:function(){return this._rippleContainer=this.$.checkboxContainer,i._createRipple.call(this)}});export{b as a};