@digital-realty/ix-file-uploader 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,20 +24,19 @@ export class IxFileChip extends LitElement {
24
24
  render() {
25
25
  var _a;
26
26
  return html `<li class="file-chip">
27
- <ix-button
28
- @click=${this.onClick}
29
- appearance="text"
30
- name="file-button"
31
- type="button"
32
- >
27
+ <span @click=${this.onClick}>
33
28
  ${(_a = this.file) === null || _a === void 0 ? void 0 : _a.name}
34
- </ix-button>
29
+ </span>
30
+
35
31
  <ix-icon-button
36
32
  @click=${this.onDelete}
37
- icon="delete"
38
33
  name="delete-button"
39
- type="button"
40
- ></ix-icon-button>
34
+ appearance="text"
35
+ >
36
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 20" fill="none">
37
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 4.5H19V6.5H5V4.5H8.5L9.5 3.5H14.5L15.5 4.5ZM8 21.5C6.9 21.5 6 20.6 6 19.5V7.5H18V19.5C18 20.6 17.1 21.5 16 21.5H8Z" fill="#DB0028"/>
38
+ </svg>
39
+ </ix-icon-button>
41
40
  </li>`;
42
41
  }
43
42
  }
@@ -1 +1 @@
1
- {"version":3,"file":"IxFileChip.js","sourceRoot":"","sources":["../src/IxFileChip.ts"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IAKhC,OAAO;QACb,MAAM,KAAK,GAAG,IAAI,WAAW,CAAW,eAAe,EAAE;YACvD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,QAAQ;QACd,MAAM,KAAK,GAAG,IAAI,WAAW,CAAW,gBAAgB,EAAE;YACxD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,OAAO;;;;;UAKnB,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI;;;iBAGR,IAAI,CAAC,QAAQ;;;;;UAKpB,CAAC;IACT,CAAC;;AAzCe,iBAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAa","sourcesContent":["import '@digital-realty/theme';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { html, LitElement, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport FileInfo from './internal/file-info.js';\nimport IxFileChipStyles from './styles/ix-file-chip-styles.js';\n\nexport class IxFileChip extends LitElement {\n static readonly styles = [IxFileChipStyles];\n\n @property({ type: Object }) file?: File;\n\n private onClick(): void {\n const event = new CustomEvent<FileInfo>('on-file-click', {\n detail: {\n file: this.file,\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onDelete(): void {\n const event = new CustomEvent<FileInfo>('on-file-delete', {\n detail: {\n file: this.file,\n },\n });\n\n this.dispatchEvent(event);\n }\n\n protected render(): TemplateResult<1> {\n return html`<li class=\"file-chip\">\n <ix-button\n @click=${this.onClick}\n appearance=\"text\"\n name=\"file-button\"\n type=\"button\"\n >\n ${this.file?.name}\n </ix-button>\n <ix-icon-button\n @click=${this.onDelete}\n icon=\"delete\"\n name=\"delete-button\"\n type=\"button\"\n ></ix-icon-button>\n </li>`;\n }\n}\n"]}
1
+ {"version":3,"file":"IxFileChip.js","sourceRoot":"","sources":["../src/IxFileChip.ts"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IAKhC,OAAO;QACb,MAAM,KAAK,GAAG,IAAI,WAAW,CAAW,eAAe,EAAE;YACvD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,QAAQ;QACd,MAAM,KAAK,GAAG,IAAI,WAAW,CAAW,gBAAgB,EAAE;YACxD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;qBACM,IAAI,CAAC,OAAO;UACvB,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI;;;;iBAIR,IAAI,CAAC,QAAQ;;;;;;;;UAQpB,CAAC;IACT,CAAC;;AAxCe,iBAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAa","sourcesContent":["import '@digital-realty/theme';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { html, LitElement, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport FileInfo from './internal/file-info.js';\nimport IxFileChipStyles from './styles/ix-file-chip-styles.js';\n\nexport class IxFileChip extends LitElement {\n static readonly styles = [IxFileChipStyles];\n\n @property({ type: Object }) file?: File;\n\n private onClick(): void {\n const event = new CustomEvent<FileInfo>('on-file-click', {\n detail: {\n file: this.file,\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onDelete(): void {\n const event = new CustomEvent<FileInfo>('on-file-delete', {\n detail: {\n file: this.file,\n },\n });\n\n this.dispatchEvent(event);\n }\n\n protected render(): TemplateResult<1> {\n return html`<li class=\"file-chip\">\n <span @click=${this.onClick}>\n ${this.file?.name}\n </span>\n \n <ix-icon-button\n @click=${this.onDelete}\n name=\"delete-button\"\n appearance=\"text\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 20\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5 4.5H19V6.5H5V4.5H8.5L9.5 3.5H14.5L15.5 4.5ZM8 21.5C6.9 21.5 6 20.6 6 19.5V7.5H18V19.5C18 20.6 17.1 21.5 16 21.5H8Z\" fill=\"#DB0028\"/>\n </svg>\n </ix-icon-button>\n </li>`;\n }\n}"]}
@@ -6,7 +6,11 @@ const IxFileChipStyles = css `
6
6
  cursor: pointer;
7
7
  display: flex;
8
8
  flex: auto;
9
- padding: 8px;
9
+ padding: 4px 8px;
10
+ }
11
+
12
+ .file-chip span {
13
+ margin-right: 10px;
10
14
  }
11
15
  `;
12
16
  export default IxFileChipStyles;
@@ -1 +1 @@
1
- {"version":3,"file":"ix-file-chip-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-chip-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;CAS3B,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileChipStyles = css`\n .file-chip {\n align-items: center;\n background: #f5f7ff;\n cursor: pointer;\n display: flex;\n flex: auto;\n padding: 8px;\n }\n`;\n\nexport default IxFileChipStyles;\n"]}
1
+ {"version":3,"file":"ix-file-chip-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-chip-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileChipStyles = css`\n .file-chip {\n align-items: center;\n background: #f5f7ff;\n cursor: pointer;\n display: flex;\n flex: auto;\n padding: 4px 8px;\n }\n\n .file-chip span {\n margin-right: 10px;\n }\n`;\n\nexport default IxFileChipStyles;\n"]}
@@ -40,7 +40,7 @@ const IxFileUploaderStyles = css `
40
40
  .uploaded-file-list {
41
41
  display: flex;
42
42
  flex-wrap: wrap;
43
- gap: 8px;
43
+ gap: 16px;
44
44
  list-style: none;
45
45
  margin: 0;
46
46
  margin-top: 32px;
@@ -62,7 +62,6 @@ const IxFileUploaderStyles = css `
62
62
  margin: -1px;
63
63
  overflow: hidden;
64
64
  padding: 0;
65
- position: absolute;
66
65
  white-space: nowrap;
67
66
  width: 1px;
68
67
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ix-file-uploader-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-uploader-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmE/B,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileUploaderStyles = css`\n .ix-file-uploader {\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 320px;\n }\n .dropzone {\n background: var(--Background, #f5f7ff);\n border: 1px dashed var(--Secondary-Main, #378aca);\n border-radius: 3px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 16px;\n }\n .ix-file-uploader__label {\n color: var(--Text-Dark, #092241);\n font-family: Red Hat Display;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 1.25px;\n text-align: center;\n text-transform: uppercase;\n }\n .ix-file-uploader_help-text {\n color: var(--Text-Dark, #092241);\n font-family: Open Sans;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: center;\n }\n .uploaded-file-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n margin: 0;\n margin-top: 32px;\n padding: 0;\n }\n .file-input {\n /*\n Per MDN -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n \"Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.\"\n */\n opacity: 0;\n\n /*\n Adapted styles from https://tailwindcss.com/docs/screen-readers\n */\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n`;\n\nexport default IxFileUploaderStyles;\n"]}
1
+ {"version":3,"file":"ix-file-uploader-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-uploader-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE/B,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileUploaderStyles = css`\n .ix-file-uploader {\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 320px;\n }\n .dropzone {\n background: var(--Background, #f5f7ff);\n border: 1px dashed var(--Secondary-Main, #378aca);\n border-radius: 3px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 16px;\n }\n .ix-file-uploader__label {\n color: var(--Text-Dark, #092241);\n font-family: Red Hat Display;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 1.25px;\n text-align: center;\n text-transform: uppercase;\n }\n .ix-file-uploader_help-text {\n color: var(--Text-Dark, #092241);\n font-family: Open Sans;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: center;\n }\n .uploaded-file-list {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n list-style: none;\n margin: 0;\n margin-top: 32px;\n padding: 0;\n }\n .file-input {\n /*\n Per MDN -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n \"Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.\"\n */\n opacity: 0;\n\n /*\n Adapted styles from https://tailwindcss.com/docs/screen-readers\n */\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n white-space: nowrap;\n width: 1px;\n }\n`;\n\nexport default IxFileUploaderStyles;\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-file-uploader following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.0.7",
6
+ "version": "1.0.8",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -106,5 +106,5 @@
106
106
  "README.md",
107
107
  "LICENSE"
108
108
  ],
109
- "gitHead": "d81b5cbb198d58e6009cf47ff0b716a095444067"
109
+ "gitHead": "a9a9bc4c0ace265c15a6b655dadcdc37564ae20e"
110
110
  }