@aquera/nile-elements 0.0.1-beta.1 → 0.0.1-beta.2
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.
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-icon/index.js +14 -14
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-icon/index.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/nile-icon/index.cjs.js +1 -1
- package/dist/nile-icon/index.cjs.js.map +1 -1
- package/dist/nile-icon/index.esm.js +13 -14
- package/dist/src/nile-icon/index.js +14 -14
- package/dist/src/nile-icon/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-icon/index.ts +18 -18
|
@@ -54,9 +54,10 @@ let NileIcon = class NileIcon extends LitElement {
|
|
|
54
54
|
this.style.setProperty('--nile-svg-width', `${this.size}px`);
|
|
55
55
|
}
|
|
56
56
|
if (changedProperties.has('color')) {
|
|
57
|
-
this.style.setProperty('--nile-svg-
|
|
57
|
+
this.style.setProperty('--nile-svg-fill', `${this.color}`);
|
|
58
58
|
}
|
|
59
|
-
if (changedProperties.has('name') ||
|
|
59
|
+
if (changedProperties.has('name') ||
|
|
60
|
+
changedProperties.has('customSvgPath')) {
|
|
60
61
|
let iconName = this.name ? this.removeHyphens(this.name) : undefined;
|
|
61
62
|
if (iconName && iconPaths[iconName]) {
|
|
62
63
|
this._svg = atob(iconPaths[iconName]);
|
|
@@ -122,11 +123,6 @@ NileIcon.styles = css `
|
|
|
122
123
|
align-items: center;
|
|
123
124
|
justify-content: center;
|
|
124
125
|
contain: content;
|
|
125
|
-
|
|
126
|
-
--nile-svg-stroke: #7F7F7F;
|
|
127
|
-
--nile-svg-stroke-width: 1px;
|
|
128
|
-
--nile-svg-height: 16px;
|
|
129
|
-
--nile-svg-width: 16px;
|
|
130
126
|
}
|
|
131
127
|
|
|
132
128
|
.nds-icon {
|
|
@@ -135,15 +131,19 @@ NileIcon.styles = css `
|
|
|
135
131
|
justify-content: center;
|
|
136
132
|
}
|
|
137
133
|
|
|
138
|
-
.nds-icon
|
|
139
|
-
margin-right: 12px;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
svg {
|
|
143
|
-
stroke: var(--nile-svg-stroke);
|
|
144
|
-
stroke-width: var(--nile-svg-stroke-width);
|
|
134
|
+
.nds-icon svg {
|
|
145
135
|
height: var(--nile-svg-height);
|
|
146
136
|
width: var(--nile-svg-width);
|
|
137
|
+
stroke: var(--nile-svg-stroke);
|
|
138
|
+
stroke-width: var(--nile-svg-stroke-width);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.nds-icon svg path {
|
|
142
|
+
fill: var(--nile-svg-fill);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.nds-icon--push {
|
|
146
|
+
margin-right: 12px;
|
|
147
147
|
}
|
|
148
148
|
`;
|
|
149
149
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,aAAa,CAAC;AAMrC,MAAM,SAAS,GAAc,KAAkB,CAAC;AAEhD,MAAM,eAAe,GAAG,EAAE,CAAC;AAC3B,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B;;;;;GAKG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QACE;;;;WAIG;QAEI,QAAG,GAAY,OAAO,CAAC;QAU9B;;;WAGG;QAEI,gBAAW,GAAG,EAAE,CAAC;QASxB;;;WAGG;QAEI,SAAI,GAAG,eAAe,CAAC;QAGtB,SAAI,GAAG,EAAE,CAAC;QAEmB,UAAK,GAAG,QAAQ,CAAC;QAEtD;;WAEG;QAC0B,UAAK,GAAQ,SAAS,CAAC;QAG7C,SAAI,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAE0B,UAAK,GAAQ,EAAE,CAAC;IAkH/C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\n\ninterface IconPaths {\n [key: string]: string;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/**\n * Nile icon component.\n *\n * @tag nile-icon\n *\n */\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n /**\n * The name of the icon set\n * @attr icon set\n * @type {IconName | undefined}\n */\n @property({ type: String, reflect: true })\n public set?: string = 'local';\n\n /**\n * The name of the icon\n * @attr name\n * @type {IconName | undefined}\n */\n @property({ type: String, reflect: true })\n public name?: string;\n\n /**\n * A description of what the icon represents\n * @attr description\n */\n @property({ type: String, reflect: true })\n public description = '';\n\n /**\n * A path to a custom SVG file to display as the icon\n * @attr customSvgPath\n */\n @property({ type: String })\n public customSvgPath?: string;\n\n /**\n * A size of what the icon represents\n * @attr size\n */\n @property({ type: String, reflect: true })\n public size = SMALL_ICON_SIZE;\n\n @state()\n private _svg = '';\n\n @property({ type: String }) override title = 'agents';\n\n /**\n * Color\n */\n @property({ reflect: true }) color: any = '#7F7F7F';\n\n @property({ type: Boolean })\n public push = false;\n\n /**\n * Retain Viewbox\n */\n\n @property({ reflect: true }) frame: any = 16;\n\n static override styles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n contain: content;\n }\n\n .nds-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .nds-icon svg {\n height: var(--nile-svg-height);\n width: var(--nile-svg-width);\n stroke: var(--nile-svg-stroke);\n stroke-width: var(--nile-svg-stroke-width);\n }\n\n .nds-icon svg path {\n fill: var(--nile-svg-fill);\n }\n\n .nds-icon--push {\n margin-right: 12px;\n }\n `;\n\n private _getIconSize(): number {\n return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n }\n\n protected override async updated(\n changedProperties: PropertyValues\n ): Promise<void> {\n if (changedProperties.has('size')) {\n this.style.setProperty('--nile-svg-height', `${this.size}px`);\n this.style.setProperty('--nile-svg-width', `${this.size}px`);\n }\n if (changedProperties.has('color')) {\n this.style.setProperty('--nile-svg-fill', `${this.color}`);\n }\n if (\n changedProperties.has('name') ||\n changedProperties.has('customSvgPath')\n ) {\n let iconName = this.name ? this.removeHyphens(this.name) : undefined;\n if (iconName && iconPaths[iconName]) {\n this._svg = atob(iconPaths[iconName]);\n } else if (this.customSvgPath) {\n this._svg = await this.fetchSvg(this.customSvgPath);\n } else {\n throw new Error(`No icon named \"${this.name}\"`);\n }\n }\n }\n\n private async fetchSvg(path: string): Promise<string> {\n const response = await fetch(path);\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n return await response.text();\n }\n\n private removeHyphens(iconName: string) {\n return iconName.replace(/-/g, '');\n }\n\n get buttonClassMap() {\n return {\n 'nds-icon--push': this.push,\n };\n }\n\n protected override render(): TemplateResult {\n const size = this.size;\n const color = this.color;\n\n /**\n * When icons are outside frame\n */\n const viewboxLogic = this.frame\n ? `0 0 ${this.frame} ${this.frame}`\n : '0 0 16 16';\n\n return html`\n <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n ${this.customSvgPath\n ? html`${unsafeHTML(this._svg)}`\n : html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n version=\"1.1\"\n viewBox=\"${viewboxLogic}\"\n class=\"icon ${classMap(this.buttonClassMap)}\"\n role=\"img\"\n aria-hidden=${this.description === ''}\n aria-label=${this.description || ''}\n height=\"${size}\"\n width=\"${size}\"\n focusable=\"true\"\n fill=\"${color}\"\n >\n ${unsafeSVG(this._svg)}\n </svg>`}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-icon': NileIcon;\n }\n}\n"]}
|