@carbon/web-components 2.34.1 → 2.35.0

package/dist/components/toggle/defs.min.js

@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/utils
- * https://www.npmjs.com/package/@floating-ui/core
- */
-
-var L;!function(L){L.REGULAR="",L.SMALL="sm"}(L||(L={}));export{L as TOGGLE_SIZE};

package/dist/components/toggle/index.min.js

@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/utils
- * https://www.npmjs.com/package/@floating-ui/core
- */
-
-import"./toggle.min.js";

package/dist/components/toggle/toggle.min.js

@@ -1,61 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/utils
- * https://www.npmjs.com/package/@floating-ui/core
- */
-
-import{__decorate as e}from"../../node_modules/tslib/tslib.es6.min.js";import{classMap as t}from"../../node_modules/lit-html/directives/class-map.min.js";import"../../node_modules/@lit/reactive-element/reactive-element.min.js";import{html as o}from"../../node_modules/lit-html/lit-html.min.js";import"../../node_modules/lit-element/lit-element.min.js";import{property as i}from"../../node_modules/@lit/reactive-element/decorators/property.min.js";import{query as l}from"../../node_modules/@lit/reactive-element/decorators/query.min.js";import{ifDefined as s}from"../../node_modules/lit-html/directives/if-defined.min.js";import{prefix as a}from"../../globals/settings.min.js";import r from"../checkbox/checkbox.min.js";import{TOGGLE_SIZE as n}from"./defs.min.js";import d from"./toggle.scss.min.js";import m from"../../globals/decorators/host-listener.min.js";import c from"../../globals/mixins/host-listener.min.js";import{carbonElement as h}from"../../globals/decorators/carbon-element.min.js";let p=class extends(c(r)){constructor(){super(...arguments),this._handleKeydown=async e=>{const{key:t}=e;" "===t&&this._handleChange()},this.labelA="",this.hideLabel=!1,this.readOnly=!1,this.size=n.REGULAR,this.labelB=""}_handleChange(){const{checked:e,indeterminate:t}=this._checkboxNode;if(this.disabled||this.readOnly)return;this.checked=!e,this.indeterminate=t;const{eventChange:o}=this.constructor;this.dispatchEvent(new CustomEvent(o,{bubbles:!0,composed:!0,detail:{indeterminate:t}}))}_renderCheckmark(){if(this.size===n.SMALL)return o`
-      <svg
-        class="${a}--toggle__check"
-        width="6px"
-        height="5px"
-        viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
-      </svg>
-    `}render(){const{checked:e,disabled:i,labelText:l,hideLabel:r,id:n,name:d,size:m,labelA:c,labelB:h,value:p,_handleChange:b}=this,g=t({[`${a}--toggle__appearance`]:!0,[`${a}--toggle__appearance--${m}`]:m}),_=t({[`${a}--toggle__switch`]:!0,[`${a}--toggle__switch--checked`]:e}),u=t({[`${a}--toggle__label-text`]:l}),$=e?c:h;return o`
-      <button
-        class="${a}--toggle__button"
-        role="switch"
-        type="button"
-        aria-checked=${e}
-        aria-lable=${l}
-        .checked="${e}"
-        name="${s(d)}"
-        value="${s(p)}"
-        ?disabled=${i}
-        id="${n}"></button>
-      <label for="${n}" class="${a}--toggle__label">
-        ${l?o`<span class="${u}">${l}</span>`:null}
-        <div class="${g}">
-          <div class="${_}" @click=${b}>
-            ${this._renderCheckmark()}
-          </div>
-          <span
-            ?hidden="${r}"
-            class="${a}--toggle__text"
-            aria-hidden="true"
-            >${$}</span
-          >
-        </div>
-      </label>
-    `}static get eventChange(){return`${a}-toggle-changed`}};p.styles=d,e([l("button")],p.prototype,"_checkboxNode",void 0),e([m("keydown")],p.prototype,"_handleKeydown",void 0),e([i({attribute:"label-a"})],p.prototype,"labelA",void 0),e([i({reflect:!0,type:Boolean})],p.prototype,"hideLabel",void 0),e([i({reflect:!0,attribute:"read-only",type:Boolean})],p.prototype,"readOnly",void 0),e([i({reflect:!0})],p.prototype,"size",void 0),e([i({attribute:"label-b"})],p.prototype,"labelB",void 0),p=e([h(`${a}-toggle`)],p);export{n as TOGGLE_SIZE};

package/dist/components/toggle/toggle.scss.min.js

@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/utils
- * https://www.npmjs.com/package/@floating-ui/core
- */
-
-import"../../node_modules/@lit/reactive-element/reactive-element.min.js";import"../../node_modules/lit-html/lit-html.min.js";import"../../node_modules/lit-element/lit-element.min.js";import{css as e}from"../../node_modules/@lit/reactive-element/css-tag.min.js";var t=e(['.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--toggle{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--toggle__label-text{color:var(--cds-text-secondary,#525252);display:block;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:1rem}.cds--toggle__button{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--toggle__button:focus{outline:none}.cds--toggle__appearance{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;cursor:pointer;display:inline-grid;grid-template-columns:max-content max-content}.cds--toggle__switch{background-color:var(--cds-toggle-off,#8d8d8d);block-size:1.5rem;border-radius:.75rem;inline-size:3rem;position:relative;transition:background-color 70ms cubic-bezier(.2,0,1,.9)}.cds--toggle__switch:before{background-color:var(--cds-icon-on-color,#fff);block-size:1.125rem;border-radius:50%;content:"";inline-size:1.125rem;inset-block-start:.1875rem;inset-inline-start:.1875rem;position:absolute;transition:transform 70ms cubic-bezier(.2,0,1,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--toggle__switch:before{transition:none}}.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch:after,.cds--toggle__button:focus+.cds--toggle__label .cds--toggle__switch:after{block-size:100%;border-radius:1rem;content:"";display:block;outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--toggle__switch--checked{background-color:var(--cds-support-success,#24a148)}.cds--toggle__switch--checked:before{transform:translateX(1.5rem)}.cds--toggle__text{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds--toggle__appearance--sm .cds--toggle__switch{block-size:1rem;inline-size:2rem}.cds--toggle__appearance--sm .cds--toggle__switch:before{block-size:.625rem;inline-size:.625rem}.cds--toggle__appearance--sm .cds--toggle__switch--checked:before{transform:translateX(1rem)}.cds--toggle__check{block-size:.3125rem;position:absolute;fill:var(--cds-support-success,#24a148);inline-size:.375rem;inset-block-start:.375rem;inset-inline-end:.3125rem;visibility:hidden}.cds--toggle__switch--checked .cds--toggle__check{visibility:visible}.cds--toggle--disabled .cds--toggle__appearance,:host(cds-toggle[disabled]) .cds--toggle__appearance{cursor:not-allowed}.cds--toggle--disabled .cds--toggle__label-text,.cds--toggle--disabled .cds--toggle__text,:host(cds-toggle[disabled]) .cds--toggle__label-text,:host(cds-toggle[disabled]) .cds--toggle__text{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--toggle--disabled .cds--toggle__switch,:host(cds-toggle[disabled]) .cds--toggle__switch{background-color:var(--cds-button-disabled,#c6c6c6)}.cds--toggle--disabled .cds--toggle__switch:before,:host(cds-toggle[disabled]) .cds--toggle__switch:before{background-color:var(--cds-icon-on-color-disabled,#8d8d8d)}.cds--toggle--disabled .cds--toggle__check,:host(cds-toggle[disabled]) .cds--toggle__check{fill:var(--cds-button-disabled,#c6c6c6)}.cds--toggle--readonly .cds--toggle__appearance,:host(cds-toggle[read-only]) .cds--toggle__appearance{cursor:default}.cds--toggle--readonly .cds--toggle__switch,:host(cds-toggle[read-only]) .cds--toggle__switch{background-color:transparent;border:1px solid var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--toggle--readonly .cds--toggle__switch:before,:host(cds-toggle[read-only]) .cds--toggle__switch:before{background-color:var(--cds-text-primary,#161616);inset-block-start:.125rem;inset-inline-start:.125rem}.cds--toggle--readonly .cds--toggle__check,:host(cds-toggle[read-only]) .cds--toggle__check{fill:var(--cds-background,#fff);inset-block-start:.3125rem;inset-inline-end:.25rem}.cds--toggle--readonly .cds--toggle__text,:host(cds-toggle[read-only]) .cds--toggle__text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle__switch,.cds--toggle__switch:before{outline:1px solid transparent}.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch,.cds--toggle__button:focus+.cds--toggle__label .cds--toggle__switch{color:Highlight;outline:1px solid Highlight}}.cds--toggle--skeleton{align-items:center;display:flex}.cds--toggle--skeleton .cds--toggle__skeleton-circle{background:var(--cds-skeleton-background,#e8e8e8);block-size:1.125rem;border-radius:50%;inline-size:1.125rem;overflow:hidden;position:relative}.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:"";inline-size:200%;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{animation:none}}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle{background:var(--cds-skeleton-background,#e8e8e8);block-size:.5rem;border:none;box-shadow:none;inline-size:1.5rem;margin-inline-start:.5rem;padding:0;pointer-events:none;position:relative}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active,.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus,.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover{border:none;cursor:default;outline:none}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:"";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{animation:none}}[dir=rtl] .cds--toggle__switch--checked:before{transform:translateX(-1.5rem)}[dir=rtl] .cds--toggle__appearance--sm .cds--toggle__switch--checked:before{transform:translateX(-1rem)}:host(cds-toggle){outline:none}:host(cds-toggle[disabled]) .cds--toggle__appearance{cursor:not-allowed}']);export{t as default};

package/dist/components/toggle-tip/index.min.js

@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/utils
- * https://www.npmjs.com/package/@floating-ui/core
- */
-
-import"./toggletip.min.js";

package/dist/components/toggle-tip/toggletip.min.js

@@ -1,70 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/utils
- * https://www.npmjs.com/package/@floating-ui/core
- */
-
-import{__decorate as t}from"../../node_modules/tslib/tslib.es6.min.js";import{classMap as e}from"../../node_modules/lit-html/directives/class-map.min.js";import"../../node_modules/@lit/reactive-element/reactive-element.min.js";import{html as o}from"../../node_modules/lit-html/lit-html.min.js";import{LitElement as s}from"../../node_modules/lit-element/lit-element.min.js";import{property as n}from"../../node_modules/@lit/reactive-element/decorators/property.min.js";import{carbonElement as i}from"../../globals/decorators/carbon-element.min.js";import l from"../../packages/icons/lib/information/16.min.js";import{prefix as r}from"../../globals/settings.min.js";import a from"../../globals/decorators/host-listener.min.js";import p from"../../globals/mixins/host-listener.min.js";import c from"../../globals/mixins/focus.min.js";import{POPOVER_ALIGNMENT as m}from"../popover/defs.min.js";import d from"../../globals/controllers/floating-controller.min.js";import g from"./toggletip.scss.min.js";var h;let u=h=class extends(p(c(s))){constructor(){super(...arguments),this.popoverController=new d(this),this.alignment=m.TOP,this.alignmentAxisOffset=0,this.autoalign=!1,this.buttonLabel="Show information",this.open=!1,this.defaultOpen=!1,this._handleClick=()=>{this.open=!this.open},this._handleKeydown=async t=>{"Escape"===t.key&&(this.open=!1)},this._renderToggleTipLabel=()=>o`
-      <span class="${r}--toggletip-label">
-        <slot></slot>
-      </span>
-    `,this._renderTooltipButton=()=>o`
-      <button
-        aria-controls="${this.id}"
-        aria-label="${this.buttonLabel}"
-        class="${r}--toggletip-button"
-        @click=${this._handleClick}>
-        <slot name="trigger">${l({id:"trigger"})}</slot>
-      </button>
-    `,this._renderTooltipContent=()=>this.autoalign?o`
-          <span class="${r}--popover-content">
-            <div class="${r}--toggletip-content">
-              <slot name="body-text"></slot>
-              <div class="${r}--toggletip-actions">
-                <slot
-                  name="actions"
-                  @slotchange="${this._handleActionsSlotChange}"></slot>
-              </div>
-            </div>
-            <span class="${r}--popover-caret"></span>
-          </span>
-        `:o`
-          <span class="${r}--popover">
-            <span class="${r}--popover-content">
-              <div class="${r}--toggletip-content">
-                <slot name="body-text"></slot>
-                <div class="${r}--toggletip-actions">
-                  <slot
-                    name="actions"
-                    @slotchange="${this._handleActionsSlotChange}"></slot>
-                </div>
-              </div>
-            </span>
-            <span class="${r}--popover-caret"></span>
-          </span>
-        `,this._renderInnerContent=()=>o`
-      ${this._renderTooltipButton()} ${this._renderTooltipContent()}
-    `}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}_handleActionsSlotChange({target:t}){t.assignedNodes()?this.setAttribute("has-actions",""):this.removeAttribute("has-actions")}_handleFocusOut(t){this.contains(t.relatedTarget)||(this.open=!1)}updated(){var t,e,o,s;if(this.autoalign){const n=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(h.selectorToggletipButton),i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(h.selectorToggletipContent),l=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(h.selectorToggletipCaret);n&&i&&(n.scrollIntoView({block:"center",inline:"center"}),null===(s=this.popoverController)||void 0===s||s.setPlacement({trigger:n,target:i,arrowElement:l,caret:!0,flipArguments:{fallbackAxisSideDirection:"start"},alignment:this.alignment,open:this.open,alignmentAxisOffset:this.alignmentAxisOffset}))}}render(){const{alignment:t,open:s}=this,n=e({[`${r}--popover-container`]:!0,[`${r}--popover--caret`]:!0,[`${r}--popover--high-contrast`]:!0,[`${r}--popover--open`]:s,[`${r}--popover--${t}`]:t,[`${r}--toggletip`]:!0,[`${r}--toggletip--open`]:s});return o`
-      ${this._renderToggleTipLabel()}
-      <span class="${n}"> ${this._renderInnerContent()} </span>
-    `}static get selectorToggletipContent(){return`.${r}--popover-content`}static get selectorToggletipCaret(){return`.${r}--popover-caret`}static get selectorToggletipButton(){return`.${r}--toggletip-button`}};u.shadowRootOptions=Object.assign(Object.assign({},s.shadowRootOptions),{delegatesFocus:!0}),u.styles=g,t([n({reflect:!0})],u.prototype,"alignment",void 0),t([n({type:Number,attribute:"alignment-axis-offset"})],u.prototype,"alignmentAxisOffset",void 0),t([n({type:Boolean,reflect:!0})],u.prototype,"autoalign",void 0),t([n({attribute:"button-label"})],u.prototype,"buttonLabel",void 0),t([n({type:Boolean,reflect:!0})],u.prototype,"open",void 0),t([n({type:Boolean,attribute:"default-open"})],u.prototype,"defaultOpen",void 0),t([a("keydown")],u.prototype,"_handleKeydown",void 0),t([a("focusout")],u.prototype,"_handleFocusOut",null),u=h=t([i(`${r}-toggletip`)],u);var v=u;export{v as default};