@kumori/aurora-wui-components 0.0.255-dev4009.6 → 0.0.255-dev4009.7
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.
|
@@ -6,7 +6,8 @@ export declare class AxebowIcon extends LitElement {
|
|
|
6
6
|
filled: boolean;
|
|
7
7
|
size: string;
|
|
8
8
|
marginBottom: number;
|
|
9
|
-
|
|
9
|
+
clickable: boolean;
|
|
10
|
+
static styles: import('lit').CSSResult[];
|
|
10
11
|
private _getFontSize;
|
|
11
12
|
render(): import('lit-html').TemplateResult<1>;
|
|
12
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-icon.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-icon/axebow-icon.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,UAAU,
|
|
1
|
+
{"version":3,"file":"axebow-icon.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-icon/axebow-icon.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,UAAU,EAAO,MAAM,KAAK,CAAC;AAGvD,qBACa,UAAW,SAAQ,UAAU;IACZ,QAAQ,SAAU;IAClB,SAAS,SAA2B;IACpC,MAAM,SAAK;IACV,MAAM,UAAS;IAChB,IAAI,EAAE,MAAM,CAAY;IACxB,YAAY,SAAK;IACD,SAAS,UAAS;IAE9D,MAAM,CAAC,MAAM,4BAoBX;IAEF,OAAO,CAAC,YAAY;IAkCpB,MAAM;CAmBP"}
|
package/dist/index.js
CHANGED
|
@@ -144,9 +144,27 @@ var AxebowIcon = class AxebowIcon extends LitElement {
|
|
|
144
144
|
this.filled = false;
|
|
145
145
|
this.size = "medium";
|
|
146
146
|
this.marginBottom = 0;
|
|
147
|
+
this.clickable = false;
|
|
147
148
|
}
|
|
148
149
|
static {
|
|
149
|
-
this.styles = unsafeCSS(tailwind_default)
|
|
150
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
151
|
+
:host {
|
|
152
|
+
display: inline-flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
justify-content: center;
|
|
155
|
+
vertical-align: middle;
|
|
156
|
+
}
|
|
157
|
+
:host([clickable]),
|
|
158
|
+
span.is-clickable {
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
transition: opacity 0.15s ease, filter 0.15s ease;
|
|
161
|
+
}
|
|
162
|
+
:host([clickable]):hover,
|
|
163
|
+
span.is-clickable:hover {
|
|
164
|
+
opacity: 0.6;
|
|
165
|
+
filter: grayscale(0.4);
|
|
166
|
+
}
|
|
167
|
+
`];
|
|
150
168
|
}
|
|
151
169
|
_getFontSize() {
|
|
152
170
|
switch (this.size.replace(/^text-/, "")) {
|
|
@@ -175,7 +193,7 @@ var AxebowIcon = class AxebowIcon extends LitElement {
|
|
|
175
193
|
const fontSize = this._getFontSize();
|
|
176
194
|
return html`
|
|
177
195
|
<span
|
|
178
|
-
class="font-[Material_Symbols_Outlined]
|
|
196
|
+
class="font-[Material_Symbols_Outlined] inline-block align-middle whitespace-nowrap ${this.clickable ? "is-clickable" : ""} ${this.filled ? filled : outlined}"
|
|
179
197
|
style="color: ${this.iconColor}; transform: rotate(${this.rotate}deg); font-size: ${fontSize}; margin-bottom: ${this.size === "large" || this.size === "3xl" ? "0.375rem" : this.size === "x-large" || this.size === "5xl" ? "0.5rem" : `${this.marginBottom}px`};"
|
|
180
198
|
>
|
|
181
199
|
${this.iconName}
|
|
@@ -189,6 +207,10 @@ __decorate([property({ type: Number })], AxebowIcon.prototype, "rotate", void 0)
|
|
|
189
207
|
__decorate([property({ type: Boolean })], AxebowIcon.prototype, "filled", void 0);
|
|
190
208
|
__decorate([property({ type: String })], AxebowIcon.prototype, "size", void 0);
|
|
191
209
|
__decorate([property({ type: Number })], AxebowIcon.prototype, "marginBottom", void 0);
|
|
210
|
+
__decorate([property({
|
|
211
|
+
type: Boolean,
|
|
212
|
+
reflect: true
|
|
213
|
+
})], AxebowIcon.prototype, "clickable", void 0);
|
|
192
214
|
AxebowIcon = __decorate([customElement("axebow-icon")], AxebowIcon);
|
|
193
215
|
//#endregion
|
|
194
216
|
//#region src/components/axebow-filter-bar/axebow-filter-bar.ts
|