@cds/core 6.9.2 → 6.11.0

package/accordion/accordion-header.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`:host{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 * 1rem / var(--cds-global-base, 20)));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--padding:calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))));--box-shadow:0;--icon-visibility:visible;--icon-margin:0;cursor:pointer;width:100%;contain:inherit}.private-host{background:var(--background);padding:var(--padding);cursor:inherit;border:0;font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color);box-shadow:var(--box-shadow)}.expand-button{visibility:var(--icon-visibility);margin:var(--icon-margin)}:host(:hover){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff))}:host(:active){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-75, #e0f6ff))}`;export{a as default};
+import{css as o}from"lit";var a=o`:host{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--font-size:var(--cds-global-typography-secondary-font-size, calc(13 * 1rem / var(--cds-global-base, 20)));--font-weight:var(--cds-global-typography-secondary-font-weight, 400);--padding:calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))));--box-shadow:0;--icon-visibility:visible;--icon-margin:0;cursor:pointer;width:100%;contain:inherit}.private-host{background:var(--background);padding:var(--padding);cursor:inherit;border:0;font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color);box-shadow:var(--box-shadow)}.expand-button{visibility:var(--icon-visibility);margin:var(--icon-margin)}:host(:hover){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-construction-50, #f1f6f8))}:host(:active){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-construction-100, #e3eaed))}`;export{a as default};
 //# sourceMappingURL=accordion-header.element.scss.js.map

package/accordion/accordion-panel.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));contain:inherit}.accordion-header-button{background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0));border:0;padding:0;width:100%}.accordion-content{overflow-y:hidden}:host([cds-motion=off]) .accordion-content{height:0}:host([cds-motion=off][expanded]) .accordion-content{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:auto!important;transform:none}:host([expanded]) .accordion-content{box-shadow:0 calc(-1*var(--border-width)) 0 0 var(--border-color);margin-top:var(--border-width)}:host([expanded]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff))}:host([disabled]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc));cursor:not-allowed}`;export{a as default};
+import{css as o}from"lit";var a=o`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));contain:inherit}.accordion-header-button{background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0));border:0;padding:0;width:100%}.accordion-content{overflow-y:hidden}:host([cds-motion=off]) .accordion-content{height:0}:host([cds-motion=off][expanded]) .accordion-content{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])) .accordion-content{height:auto!important;transform:none}:host([expanded]) .accordion-content{box-shadow:0 calc(-1*var(--border-width)) 0 0 var(--border-color);margin-top:var(--border-width)}:host([expanded]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-75, #e0f6ff))}:host([disabled]) ::slotted(cds-accordion-header){--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc));cursor:not-allowed}`;export{a as default};
 //# sourceMappingURL=accordion-panel.element.scss.js.map

package/button-action/button-action.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var t=o`:host{--icon-width:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--icon-height:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--width:var(--icon-width);--height:var(--icon-width);--cursor:pointer;--color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048));--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--background:transparent;--padding:0;--outline:var(--cds-alias-object-interaction-outline, Highlight solid 2px);--outline-offset:calc(var(--cds-alias-object-interaction-outline-offset, 1px) * -1);pointer-events:none;display:inline-block;outline:0!important}:host([role=button]){pointer-events:initial;cursor:var(--cursor)!important}:host([status=active]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}::slotted([shape=close]),::slotted([shape=info-circle]),::slotted([shape=times]),:host([shape=close]),:host([shape=info-circle]){--icon-width:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)));--icon-height:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)))}:host(:hover){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32))}:host(:active){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}:host(:active) .private-host{transform:translateY(calc(var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20)))/ 2))}:host([disabled]){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))}.private-host{--icon-color:var(--color);background:var(--background);padding:var(--padding);color:var(--color);font-size:var(--font-size);display:flex;justify-content:center;align-items:center;min-width:var(--width);min-height:var(--height)}::slotted(cds-icon),cds-icon{width:var(--icon-width);height:var(--icon-height);pointer-events:none}::slotted(cds-icon:not([status])),cds-icon{--color:var(--icon-color)}:host([disabled]:active){pointer-events:none!important}.private-host::after{content:"";position:absolute;left:calc(-1*var(--width) - 1);top:calc(-1*var(--height) - 1);width:var(--cds-alias-object-interaction-touch-target,calc(36 * 1rem / var(--cds-global-base,20)));height:var(--cds-alias-object-interaction-touch-target,calc(36 * 1rem / var(--cds-global-base,20)))}:host([disabled]) .private-host::after{outline:0!important}:host(:focus) .private-host::after{outline:var(--outline);outline-offset:var(--outline-offset)}@media (-webkit-min-device-pixel-ratio:0){:host(:focus) .private-host::after{outline-color:-webkit-focus-ring-color}}`;export{t as default};
+import{css as o}from"lit";var t=o`:host{--icon-width:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--icon-height:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--width:var(--icon-width);--height:var(--icon-width);--cursor:pointer;--color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048));--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--background:transparent;--padding:0;--outline:var(--cds-alias-object-interaction-outline, Highlight solid 2px);--outline-offset:calc(var(--cds-alias-object-interaction-outline-offset, 1px) * -1);pointer-events:none;display:inline-block;outline:0!important}:host([role=button]){pointer-events:initial;cursor:var(--cursor)!important}:host([status=active]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}::slotted([shape=close]),::slotted([shape=info-circle]),::slotted([shape=times]),:host([shape=close]),:host([shape=info-circle]){--icon-width:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)));--icon-height:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)))}:host(:hover){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32))}:host(:active){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}:host(:active) .private-host{transform:translateY(calc(var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20)))/ 2))}:host([disabled]){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))}.private-host{--icon-color:var(--color);background:var(--background);padding:var(--padding);color:var(--color);font-size:var(--font-size);display:flex;justify-content:center;align-items:center;min-width:var(--width);min-height:var(--height)}::slotted(cds-icon),cds-icon{width:var(--icon-width);height:var(--icon-height);pointer-events:none}::slotted(cds-icon:not([status])),cds-icon{--color:var(--icon-color)}:host([disabled]:active){pointer-events:none!important}.private-host::after{content:"";position:absolute;left:calc(-1*var(--width) - 1);top:calc(-1*var(--height) - 1);width:var(--cds-alias-object-interaction-touch-target,calc(36 * 1rem / var(--cds-global-base,20)));height:var(--cds-alias-object-interaction-touch-target,calc(36 * 1rem / var(--cds-global-base,20)))}:host([disabled]) .private-host::after{outline:0!important}:host(:focus) .private-host::after{outline:var(--outline);outline-offset:var(--outline-offset)}@media (-webkit-min-device-pixel-ratio:0){:host(:focus) .private-host::after{outline-color:-webkit-focus-ring-color;outline-style:auto}}`;export{t as default};
 //# sourceMappingURL=button-action.element.scss.js.map

package/custom-elements.json

@@ -7350,6 +7350,15 @@
             {
               "kind": "field",
               "name": "buttonLabel",
+              "description": "Set the label of the browse button.",
+              "attribute": "buttonLabel"
+            },
+            {
+              "kind": "field",
+              "name": "buttonLabelForSelection",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private"
             },
             {
@@ -7901,13 +7910,12 @@
               }
             }
           ],
-          "superclass": {
-            "name": "CdsControl",
-            "package": "@cds/core/forms"
-          },
-          "tagName": "cds-file",
-          "customElement": true,
           "attributes": [
+            {
+              "name": "buttonLabel",
+              "description": "Set the label of the browse button.",
+              "fieldName": "buttonLabel"
+            },
             {
               "name": "status",
               "type": {
@@ -7975,7 +7983,13 @@
                 "module": "forms/control/control.element.js"
               }
             }
-          ]
+          ],
+          "superclass": {
+            "name": "CdsControl",
+            "package": "@cds/core/forms"
+          },
+          "tagName": "cds-file",
+          "customElement": true
         }
       ],
       "exports": [

package/file/file.element.d.ts

@@ -19,11 +19,18 @@ import { CdsControl } from '@cds/core/forms';
  */
 export declare class CdsFile extends CdsControl {
     i18n: {
+        /**
+         * Set the label of the browse button.
+         */
         browse: string;
         files: string;
         removeFile: string;
     };
-    private buttonLabel;
+    /**
+     * Set the label of the browse button.
+     */
+    buttonLabel: string;
+    private buttonLabelForSelection;
     protected fixedControlWidth: boolean;
     protected supportsPrefixSuffixActions: boolean;
     static get styles(): import("lit").CSSResultGroup[];

package/file/file.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as e}from"lit";import{I18nService as i,i18n as s,state as o}from"@cds/core/internal";import{CdsControl as n}from"@cds/core/forms";import l from"./file.element.scss.js";class r extends n{constructor(){super(...arguments);this.i18n=i.keys.file,this.buttonLabel=this.i18n.browse,this.fixedControlWidth=!0,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,l]}get inputTemplate(){return e`<div cds-layout="horizontal gap:sm align:vertical-center"><cds-button size="sm" action="outline" @click="${()=>this.label.click()}" ?disabled="${this.disabled}"><cds-icon shape="folder" aria-hidden="true"></cds-icon><span>${this.buttonLabel}</span></cds-button>${this.clearFilesControlTemplate}</div>`}get clearFilesControlTemplate(){return this.inputControl.files?.length&&!this.disabled?e`<cds-button-action shape="times" @click="${()=>this.clearFiles()}" aria-label="${this.i18n.removeFile}"></cds-button-action>`:e``}firstUpdated(t){super.firstUpdated(t),this.inputControl.addEventListener("change",(t=>{t.isTrusted&&this.updateLabelAndFocus(t.target.files)}))}clearFiles(t=!0){this.buttonLabel=this.i18n.browse,this.inputControl.value="",t&&this.inputControl.dispatchEvent&&this.inputControl.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}));const e=this.shadowRoot?.querySelector("cds-button");e&&e.focus()}updateLabelAndFocus(t){t&&t.length?this.buttonLabel=t.length>1?`${t.length} ${this.i18n.files}`:t[0].name:this.clearFiles(!1)}}t([s()],r.prototype,"i18n",void 0),t([o()],r.prototype,"buttonLabel",void 0),t([o()],r.prototype,"fixedControlWidth",void 0),t([o()],r.prototype,"supportsPrefixSuffixActions",void 0);export{r as CdsFile};
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{I18nService as i,i18n as o,property as s,state as n}from"@cds/core/internal";import{CdsControl as l}from"@cds/core/forms";import r from"./file.element.scss.js";class a extends l{constructor(){super(...arguments);this.i18n=i.keys.file,this.buttonLabel=this.i18n.browse,this.fixedControlWidth=!0,this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,r]}get inputTemplate(){return e`<div cds-layout="horizontal gap:sm align:vertical-center"><cds-button size="sm" action="outline" @click="${()=>this.label.click()}" ?disabled="${this.disabled}"><cds-icon shape="folder" aria-hidden="true"></cds-icon><span>${this.buttonLabelForSelection||this.buttonLabel}</span></cds-button>${this.clearFilesControlTemplate}</div>`}get clearFilesControlTemplate(){return this.inputControl.files?.length&&!this.disabled?e`<cds-button-action shape="times" @click="${()=>this.clearFiles()}" aria-label="${this.i18n.removeFile}"></cds-button-action>`:e``}firstUpdated(t){super.firstUpdated(t),this.inputControl.addEventListener("change",(t=>{t.isTrusted&&this.updateLabelAndFocus(t.target.files)}))}clearFiles(t=!0){this.buttonLabelForSelection="",this.inputControl.value="",t&&this.inputControl.dispatchEvent&&this.inputControl.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}));const e=this.shadowRoot?.querySelector("cds-button");e&&e.focus()}updateLabelAndFocus(t){t&&t.length?this.buttonLabelForSelection=t.length>1?`${t.length} ${this.i18n.files}`:t[0].name:this.clearFiles(!1)}}t([o()],a.prototype,"i18n",void 0),t([s()],a.prototype,"buttonLabel",void 0),t([n()],a.prototype,"buttonLabelForSelection",void 0),t([n()],a.prototype,"fixedControlWidth",void 0),t([n()],a.prototype,"supportsPrefixSuffixActions",void 0);export{a as CdsFile};
 //# sourceMappingURL=file.element.js.map

package/file/file.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.element.js","sources":["../../../src/file/file.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { state, i18n, I18nService } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport styles from './file.element.scss';\n/**\n * Time Input\n *\n * ```typescript\n * import '@cds/core/file/register.js';\n * ```\n *\n * ```html\n * <cds-file>\n *   <label>file</label>\n *   <input type=\"file\" />\n * </cds-file>\n * ```\n *\n * @element cds-file\n * @slot - For projecting file input and label\n */\nexport class CdsFile extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.file;\n        this.buttonLabel = this.i18n.browse;\n        this.fixedControlWidth = true;\n        this.supportsPrefixSuffixActions = false;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get inputTemplate() {\n        return html `\n      <div cds-layout=\"horizontal gap:sm align:vertical-center\">\n        <cds-button size=\"sm\" action=\"outline\" @click=\"${() => this.label.click()}\" ?disabled=${this.disabled}>\n          <cds-icon shape=\"folder\" aria-hidden=\"true\"></cds-icon>\n          <span>${this.buttonLabel}</span>\n        </cds-button>\n        ${this.clearFilesControlTemplate}\n      </div>\n    `;\n    }\n    get clearFilesControlTemplate() {\n        return this.inputControl.files?.length && !this.disabled\n            ? html `<cds-button-action\n          shape=\"times\"\n          @click=${() => this.clearFiles()}\n          aria-label=\"${this.i18n.removeFile}\"\n        ></cds-button-action>`\n            : html ``;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.inputControl.addEventListener('change', e => {\n            // NOTE: have to distinguish here being user-caused events and programmatic\n            // events (e.isTrusted true/false) so that we don't fire a change event loop\n            if (e.isTrusted) {\n                this.updateLabelAndFocus(e.target.files);\n            }\n        });\n    }\n    /** @private */\n    clearFiles(fireEvent = true) {\n        this.buttonLabel = this.i18n.browse;\n        this.inputControl.value = '';\n        // when input is reset like this it isn't registering an onchange event\n        // NOTE: tsc + karma is complaining about dispatchEvent being a method on inputControl\n        if (fireEvent && this.inputControl.dispatchEvent) {\n            this.inputControl.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));\n        }\n        const browseButton = this.shadowRoot?.querySelector('cds-button');\n        if (browseButton) {\n            browseButton.focus();\n        }\n    }\n    /** @private */\n    updateLabelAndFocus(files) {\n        if (files && files.length) {\n            this.buttonLabel = files.length > 1 ? `${files.length} ${this.i18n.files}` : files[0].name;\n        }\n        else {\n            this.clearFiles(false);\n        }\n    }\n}\n__decorate([\n    i18n()\n], CdsFile.prototype, \"i18n\", void 0);\n__decorate([\n    state()\n], CdsFile.prototype, \"buttonLabel\", void 0);\n__decorate([\n    state()\n], CdsFile.prototype, \"fixedControlWidth\", void 0);\n__decorate([\n    state()\n], CdsFile.prototype, \"supportsPrefixSuffixActions\", void 0);\n"],"names":["CdsFile","CdsControl","constructor","super","this","i18n","I18nService","keys","file","buttonLabel","browse","fixedControlWidth","supportsPrefixSuffixActions","styles","inputTemplate","html","label","click","disabled","clearFilesControlTemplate","inputControl","files","length","clearFiles","removeFile","firstUpdated","props","addEventListener","e","isTrusted","updateLabelAndFocus","target","fireEvent","value","dispatchEvent","Event","bubbles","cancelable","browseButton","shadowRoot","querySelector","focus","name","__decorate","prototype","state"],"mappings":"uNA2BO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,KAC7BJ,KAAKK,YAAcL,KAAKC,KAAKK,OAC7BN,KAAKO,mBAAoB,EACzBP,KAAKQ,6BAA8B,EAE5BC,oBACP,MAAO,IAAIV,MAAMU,OAAQA,GAEzBC,oBACA,OAAOC,CAAK,4GAEqC,IAAMX,KAAKY,MAAMC,uBAAsBb,KAAKc,0EAEnFd,KAAKK,kCAEbL,KAAKe,kCAIPA,gCACA,OAAOf,KAAKgB,aAAaC,OAAOC,SAAWlB,KAAKc,SAC1CH,CAAK,4CAEA,IAAMX,KAAKmB,6BACNnB,KAAKC,KAAKmB,mCAEpBT,CAAK,GAEfU,aAAaC,GACTvB,MAAMsB,aAAaC,GACnBtB,KAAKgB,aAAaO,iBAAiB,UAAUC,IAGrCA,EAAEC,WACFzB,KAAK0B,oBAAoBF,EAAEG,OAAOV,UAK9CE,WAAWS,GAAY,GACnB5B,KAAKK,YAAcL,KAAKC,KAAKK,OAC7BN,KAAKgB,aAAaa,MAAQ,GAGtBD,GAAa5B,KAAKgB,aAAac,eAC/B9B,KAAKgB,aAAac,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,EAAMC,YAAY,KAErF,MAAMC,EAAelC,KAAKmC,YAAYC,cAAc,cAChDF,GACAA,EAAaG,QAIrBX,oBAAoBT,GACZA,GAASA,EAAMC,OACflB,KAAKK,YAAcY,EAAMC,OAAS,EAAI,GAAGD,EAAMC,UAAUlB,KAAKC,KAAKgB,QAAUA,EAAM,GAAGqB,KAGtFtC,KAAKmB,YAAW,IAI5BoB,EAAW,CACPtC,KACDL,EAAQ4C,UAAW,YAAQ,GAC9BD,EAAW,CACPE,KACD7C,EAAQ4C,UAAW,mBAAe,GACrCD,EAAW,CACPE,KACD7C,EAAQ4C,UAAW,yBAAqB,GAC3CD,EAAW,CACPE,KACD7C,EAAQ4C,UAAW,mCAA+B"}
+{"version":3,"file":"file.element.js","sources":["../../../src/file/file.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { state, i18n, I18nService, property } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport styles from './file.element.scss';\n/**\n * Time Input\n *\n * ```typescript\n * import '@cds/core/file/register.js';\n * ```\n *\n * ```html\n * <cds-file>\n *   <label>file</label>\n *   <input type=\"file\" />\n * </cds-file>\n * ```\n *\n * @element cds-file\n * @slot - For projecting file input and label\n */\nexport class CdsFile extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.file;\n        /**\n         * Set the label of the browse button.\n         */\n        this.buttonLabel = this.i18n.browse;\n        this.fixedControlWidth = true;\n        this.supportsPrefixSuffixActions = false;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get inputTemplate() {\n        return html `\n      <div cds-layout=\"horizontal gap:sm align:vertical-center\">\n        <cds-button size=\"sm\" action=\"outline\" @click=\"${() => this.label.click()}\" ?disabled=${this.disabled}>\n          <cds-icon shape=\"folder\" aria-hidden=\"true\"></cds-icon>\n          <span>${this.buttonLabelForSelection || this.buttonLabel}</span>\n        </cds-button>\n        ${this.clearFilesControlTemplate}\n      </div>\n    `;\n    }\n    get clearFilesControlTemplate() {\n        return this.inputControl.files?.length && !this.disabled\n            ? html `<cds-button-action\n          shape=\"times\"\n          @click=${() => this.clearFiles()}\n          aria-label=\"${this.i18n.removeFile}\"\n        ></cds-button-action>`\n            : html ``;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.inputControl.addEventListener('change', e => {\n            // NOTE: have to distinguish here being user-caused events and programmatic\n            // events (e.isTrusted true/false) so that we don't fire a change event loop\n            if (e.isTrusted) {\n                this.updateLabelAndFocus(e.target.files);\n            }\n        });\n    }\n    /** @private */\n    clearFiles(fireEvent = true) {\n        this.buttonLabelForSelection = '';\n        this.inputControl.value = '';\n        // when input is reset like this it isn't registering an onchange event\n        // NOTE: tsc + karma is complaining about dispatchEvent being a method on inputControl\n        if (fireEvent && this.inputControl.dispatchEvent) {\n            this.inputControl.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));\n        }\n        const browseButton = this.shadowRoot?.querySelector('cds-button');\n        if (browseButton) {\n            browseButton.focus();\n        }\n    }\n    /** @private */\n    updateLabelAndFocus(files) {\n        if (files && files.length) {\n            this.buttonLabelForSelection = files.length > 1 ? `${files.length} ${this.i18n.files}` : files[0].name;\n        }\n        else {\n            this.clearFiles(false);\n        }\n    }\n}\n__decorate([\n    i18n()\n], CdsFile.prototype, \"i18n\", void 0);\n__decorate([\n    property()\n], CdsFile.prototype, \"buttonLabel\", void 0);\n__decorate([\n    state()\n], CdsFile.prototype, \"buttonLabelForSelection\", void 0);\n__decorate([\n    state()\n], CdsFile.prototype, \"fixedControlWidth\", void 0);\n__decorate([\n    state()\n], CdsFile.prototype, \"supportsPrefixSuffixActions\", void 0);\n"],"names":["CdsFile","CdsControl","constructor","super","this","i18n","I18nService","keys","file","buttonLabel","browse","fixedControlWidth","supportsPrefixSuffixActions","styles","inputTemplate","html","label","click","disabled","buttonLabelForSelection","clearFilesControlTemplate","inputControl","files","length","clearFiles","removeFile","firstUpdated","props","addEventListener","e","isTrusted","updateLabelAndFocus","target","fireEvent","value","dispatchEvent","Event","bubbles","cancelable","browseButton","shadowRoot","querySelector","focus","name","__decorate","prototype","property","state"],"mappings":"qOA2BO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,KAI7BJ,KAAKK,YAAcL,KAAKC,KAAKK,OAC7BN,KAAKO,mBAAoB,EACzBP,KAAKQ,6BAA8B,EAE5BC,oBACP,MAAO,IAAIV,MAAMU,OAAQA,GAEzBC,oBACA,OAAOC,CAAK,4GAEqC,IAAMX,KAAKY,MAAMC,uBAAsBb,KAAKc,0EAEnFd,KAAKe,yBAA2Bf,KAAKK,kCAE7CL,KAAKgB,kCAIPA,gCACA,OAAOhB,KAAKiB,aAAaC,OAAOC,SAAWnB,KAAKc,SAC1CH,CAAK,4CAEA,IAAMX,KAAKoB,6BACNpB,KAAKC,KAAKoB,mCAEpBV,CAAK,GAEfW,aAAaC,GACTxB,MAAMuB,aAAaC,GACnBvB,KAAKiB,aAAaO,iBAAiB,UAAUC,IAGrCA,EAAEC,WACF1B,KAAK2B,oBAAoBF,EAAEG,OAAOV,UAK9CE,WAAWS,GAAY,GACnB7B,KAAKe,wBAA0B,GAC/Bf,KAAKiB,aAAaa,MAAQ,GAGtBD,GAAa7B,KAAKiB,aAAac,eAC/B/B,KAAKiB,aAAac,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,EAAMC,YAAY,KAErF,MAAMC,EAAenC,KAAKoC,YAAYC,cAAc,cAChDF,GACAA,EAAaG,QAIrBX,oBAAoBT,GACZA,GAASA,EAAMC,OACfnB,KAAKe,wBAA0BG,EAAMC,OAAS,EAAI,GAAGD,EAAMC,UAAUnB,KAAKC,KAAKiB,QAAUA,EAAM,GAAGqB,KAGlGvC,KAAKoB,YAAW,IAI5BoB,EAAW,CACPvC,KACDL,EAAQ6C,UAAW,YAAQ,GAC9BD,EAAW,CACPE,KACD9C,EAAQ6C,UAAW,mBAAe,GACrCD,EAAW,CACPG,KACD/C,EAAQ6C,UAAW,+BAA2B,GACjDD,EAAW,CACPG,KACD/C,EAAQ6C,UAAW,yBAAqB,GAC3CD,EAAW,CACPG,KACD/C,EAAQ6C,UAAW,mCAA+B"}

package/global.css

@@ -85,8 +85,8 @@
   --cds-global-color-red-600: hsl(9, 100%, 59%);
   --cds-global-color-red-700: hsl(9, 100%, 44%);
   --cds-global-color-red-800: hsl(9, 100%, 38%);
-  --cds-global-color-red-900: hsl(9, 100%, 22%);
-  --cds-global-color-red-1000: hsl(7, 10%, 17%);
+  --cds-global-color-red-900: hsl(9, 100%, 28%);
+  --cds-global-color-red-1000: hsl(9, 100%, 22%);
   --cds-global-color-ochre-50: hsl(41, 100%, 96%);
   --cds-global-color-ochre-100: hsl(41, 100%, 92%);
   --cds-global-color-ochre-200: hsl(41, 100%, 86%);
@@ -140,8 +140,8 @@
   --cds-global-color-jade-600: hsl(160, 69%, 36%);
   --cds-global-color-jade-700: hsl(160, 64%, 30%);
   --cds-global-color-jade-800: hsl(160, 100%, 21%);
-  --cds-global-color-jade-900: hsl(160, 70%, 21%);
-  --cds-global-color-jade-1000: hsl(160, 69%, 19%);
+  --cds-global-color-jade-900: hsl(160, 70%, 18%);
+  --cds-global-color-jade-1000: hsl(160, 69%, 14%);
   --cds-global-color-yellow-50: hsl(50, 100%, 95%);
   --cds-global-color-yellow-100: hsl(50, 100%, 84%);
   --cds-global-color-yellow-200: hsl(50, 100%, 73%);
@@ -152,7 +152,7 @@
   --cds-global-color-yellow-700: hsl(40, 100%, 37%);
   --cds-global-color-yellow-800: hsl(40, 100%, 26%);
   --cds-global-color-yellow-900: hsl(40, 100%, 18%);
-  --cds-global-color-yellow-1000: hsl(40, 32%, 14%);
+  --cds-global-color-yellow-1000: hsl(40, 100%, 13%);
   --cds-global-color-lime-50: hsl(66, 100%, 94%);
   --cds-global-color-lime-100: hsl(66, 95%, 83%);
   --cds-global-color-lime-200: hsl(66, 85%, 70%);
@@ -264,6 +264,7 @@
   --cds-global-color-construction-800: hsl(198, 23%, 23%);
   --cds-global-color-construction-900: hsl(198, 28%, 18%);
   --cds-global-color-construction-1000: hsl(198, 30%, 15%);
+  --cds-global-color-construction-1100: hsl(200, 31%, 13%);
   --cds-global-color-gray-0: hsl(0, 0%, 100%);
   --cds-global-color-gray-50: hsl(0, 0%, 98%);
   --cds-global-color-gray-100: hsl(0, 0%, 95%);
@@ -395,9 +396,11 @@
   --cds-alias-object-interaction-touch-target: calc(36 * (1rem / var(--cds-global-base)));
   --cds-alias-object-interaction-border-color: var(--cds-global-color-construction-500);
   --cds-alias-object-interaction-background: var(--cds-global-color-white);
-  --cds-alias-object-interaction-background-hover: var(--cds-global-color-blue-50);
-  --cds-alias-object-interaction-background-active: var(--cds-global-color-blue-75);
-  --cds-alias-object-interaction-background-selected: var(--cds-global-color-blue-50);
+  --cds-alias-object-interaction-background-hover: var(--cds-global-color-construction-50);
+  --cds-alias-object-interaction-background-active: var(--cds-global-color-construction-100);
+  --cds-alias-object-interaction-background-selected: var(--cds-global-color-blue-75);
+  --cds-alias-object-interaction-background-selected-hover: var(--cds-global-color-construction-100);
+  --cds-alias-object-interaction-background-selected-active: var(--cds-global-color-construction-200);
   --cds-alias-object-interaction-background-disabled: var(--cds-global-color-white);
   --cds-alias-object-interaction-background-highlight: var(--cds-global-color-blue-700);
   --cds-alias-object-interaction-color: var(--cds-global-color-construction-700);
@@ -432,6 +435,7 @@
   --cds-alias-object-container-background-inverse: var(--cds-global-color-construction-200);
   --cds-alias-object-container-background-inverse-tint: var(--cds-global-color-construction-100);
   --cds-alias-object-container-background-inverse-shade: var(--cds-global-color-construction-300);
+  --cds-alias-object-container-backdrop-background: hsla(0, 0%, 100%, 0.6);
   --cds-alias-object-container-border-color: var(--cds-global-color-construction-200);
   --cds-alias-status-info: var(--cds-global-color-blue-700);
   --cds-alias-status-info-tint: var(--cds-global-color-blue-50);