@fluid-topics/ft-accordion 0.1.16 → 0.2.0

package/build/ft-accordion-item.d.ts

@@ -12,11 +12,11 @@ export declare const FtAccordionItemCssVariables: {
 };
 export declare class FtAccordionItem extends FtLitElement implements FtAccordionItemProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult;
+    static styles: import("lit").CSSResult;
     icon: string;
     label: string;
     active: boolean;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     protected update(props: PropertyValues): void;
     private onToggleKeyDown;
 }

package/build/ft-accordion-item.js

@@ -6,68 +6,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
-import { Icon } from "@material/mwc-icon";
+import { FtIcon } from "@fluid-topics/ft-icon";
 export const FtAccordionItemCssVariables = {
     horizontalSpacing: FtCssVariable.create("--ft-accordion-toggle-horizontal-spacing", "SIZE", "16px"),
     verticalSpacing: FtCssVariable.create("--ft-accordion-toggle-vertical-spacing", "SIZE", "16px"),
     colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
 };
-let FtAccordionItem = class FtAccordionItem extends FtLitElement {
+export class FtAccordionItem extends FtLitElement {
     constructor() {
         super(...arguments);
         this.icon = "";
         this.label = "";
         this.active = false;
     }
-    // language=CSS
-    getStyles() {
-        return css `
-            .ft-accordion-item {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .ft-accordion-item--toggle {
-                flex-shrink: 0;
-                flex-grow: 0;
-                position: relative;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                padding: ${FtAccordionItemCssVariables.verticalSpacing} ${FtAccordionItemCssVariables.horizontalSpacing};
-                gap: calc(${FtAccordionItemCssVariables.horizontalSpacing} / 2);
-                outline: none;
-            }
-
-            .ft-accordion-item--label {
-                flex-grow: 1;
-                flex-shrink: 1;
-                display: block;
-            }
-
-            .ft-accordion-item--content {
-                box-sizing: border-box;
-                flex-shrink: 1;
-                flex-grow: 1;
-                overflow: hidden;
-                height: 0;
-            }
-
-            .ft-accordion-item--active .ft-accordion-item--content {
-                height: initial;
-                overflow: visible;
-                padding: ${FtAccordionItemCssVariables.verticalSpacing} ${FtAccordionItemCssVariables.horizontalSpacing};
-            }
-
-            .ft-accordion-item--separator {
-                border-bottom: 1px solid ${FtAccordionItemCssVariables.colorOutline};
-            }
-        `;
-    }
-    getTemplate() {
+    render() {
         return html `
             <div class="ft-accordion-item ${this.active ? "ft-accordion-item--active" : ""}">
                 <div class="ft-accordion-item--toggle"
@@ -77,7 +32,7 @@ let FtAccordionItem = class FtAccordionItem extends FtLitElement {
                      tabindex="0">
                     <ft-ripple part="toggle-ripple"></ft-ripple>
                     ${this.icon ? html `
-                        <mwc-icon>${this.icon}</mwc-icon>
+                        <ft-icon variant="material">${this.icon}</ft-icon>
                     ` : null}
                     ${this.label ? html `
                         <ft-typography class="ft-accordion-item--label" variant="body1" part="label">${this.label}
@@ -85,7 +40,7 @@ let FtAccordionItem = class FtAccordionItem extends FtLitElement {
                     ` : html `
                         <slot class="ft-accordion-item--label" name="toggle" part="label"></slot>
                     `}
-                    <mwc-icon>${this.active ? "expand_less" : "expand_more"}</mwc-icon>
+                    <ft-icon variant="material">${this.active ? "expand_less" : "expand_more"}</ft-icon>
                 </div>
                 <div class="ft-accordion-item--content" part="content" @focusin=${() => this.active = true}>
                     <slot></slot>
@@ -106,12 +61,55 @@ let FtAccordionItem = class FtAccordionItem extends FtLitElement {
             this.active = !this.active;
         }
     }
-};
+}
 FtAccordionItem.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
-    "mwc-icon": Icon,
+    "ft-icon": FtIcon,
 };
+// language=CSS
+FtAccordionItem.styles = css `
+        .ft-accordion-item {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .ft-accordion-item--toggle {
+            flex-shrink: 0;
+            flex-grow: 0;
+            position: relative;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            padding: ${FtAccordionItemCssVariables.verticalSpacing} ${FtAccordionItemCssVariables.horizontalSpacing};
+            gap: calc(${FtAccordionItemCssVariables.horizontalSpacing} / 2);
+            outline: none;
+        }
+
+        .ft-accordion-item--label {
+            flex-grow: 1;
+            flex-shrink: 1;
+            display: block;
+        }
+
+        .ft-accordion-item--content {
+            box-sizing: border-box;
+            flex-shrink: 1;
+            flex-grow: 1;
+            overflow: hidden;
+            height: 0;
+        }
+
+        .ft-accordion-item--active .ft-accordion-item--content {
+            height: initial;
+            overflow: visible;
+            padding: ${FtAccordionItemCssVariables.verticalSpacing} ${FtAccordionItemCssVariables.horizontalSpacing};
+        }
+
+        .ft-accordion-item--separator {
+            border-bottom: 1px solid ${FtAccordionItemCssVariables.colorOutline};
+        }
+    `;
 __decorate([
     property({ type: String })
 ], FtAccordionItem.prototype, "icon", void 0);
@@ -121,8 +119,4 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FtAccordionItem.prototype, "active", void 0);
-FtAccordionItem = __decorate([
-    customElement("ft-accordion-item")
-], FtAccordionItem);
-export { FtAccordionItem };
 //# sourceMappingURL=ft-accordion-item.js.map

package/build/ft-accordion.d.ts

@@ -1,15 +1,14 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export * from "./ft-accordion-item";
 export interface FtAccordionProperties {
     multi?: boolean;
 }
 export declare const FtAccordionCssVariables: {};
 export declare class FtAccordion extends FtLitElement implements FtAccordionProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult;
+    static styles: import("lit").CSSResult;
     multi: boolean;
     private content;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     private onChange;
 }
 //# sourceMappingURL=ft-accordion.d.ts.map