@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/components/text-field/text-field.js

@@ -1,327 +1,4 @@
-import { css as u, nothing as a, html as o } from "lit";
-import { property as i, state as f, query as g, queryAssignedElements as m, customElement as x } from "lit/decorators.js";
-import { M as c } from "../../chunks/form-associated-fKbeX_2P.js";
-import "../../internal/ripple/ripple.js";
-import "../icon/icon.js";
-const v = u`
-  :host {
-    display: inline-flex;
-    flex-direction: column;
-    min-width: 240px;
-    vertical-align: top;
-    font-family: var(--md-sys-typescale-font-family, inherit);
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: 0.38;
-  }
-
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 56px;
-    padding: 0 16px;
-    box-sizing: border-box;
-    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
-                border-color 150ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  /* --- Filled Variant (Default) --- */
-  :host(:not([variant])) .container,
-  :host([variant="filled"]) .container {
-    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
-    border-radius: var(--md-sys-shape-corner-extra-small, 4px) var(--md-sys-shape-corner-extra-small, 4px) 0 0;
-    border-bottom: 1px solid var(--md-sys-color-on-surface-variant, #49454F);
-  }
-
-  :host(:not([variant])[focused]) .container,
-  :host([variant="filled"][focused]) .container {
-    border-bottom: 2px solid var(--md-sys-color-primary, #6750A4);
-  }
-
-  :host(:not([variant])[error]) .container,
-  :host([variant="filled"][error]) .container {
-    border-bottom-color: var(--md-sys-color-error, #B3261E);
-  }
-
-  /* --- Outlined Variant --- */
-  :host([variant="outlined"]) .container {
-    background-color: transparent;
-    border: 1px solid var(--md-sys-color-outline, #79747E);
-    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
-  }
-
-  :host([variant="outlined"][focused]) .container {
-    border: 2px solid var(--md-sys-color-primary, #6750A4);
-    padding: 0 15px; /* Offset for 2px border */
-  }
-
-  :host([variant="outlined"][error]) .container {
-    border-color: var(--md-sys-color-error, #B3261E);
-  }
-
-  /* Floating Label */
-  .label {
-    position: absolute;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 16px;
-    color: var(--md-sys-color-on-surface-variant, #49454F);
-    pointer-events: none;
-    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
-                font-size 150ms cubic-bezier(0.2, 0, 0, 1),
-                color 150ms cubic-bezier(0.2, 0, 0, 1);
-    transform-origin: top left;
-  }
-
-  :host([has-leading-icon]) .label {
-    left: 48px;
-  }
-
-  :host([focused]) .label,
-  :host([has-value]) .label,
-  :host([has-placeholder]) .label {
-    transform: translateY(-110%) scale(0.75);
-  }
-
-  :host([variant="filled"][focused]) .label,
-  :host([variant="filled"][has-value]) .label,
-  :host([variant="filled"][has-placeholder]) .label {
-    top: 35%;
-  }
-
-  :host([variant="outlined"][focused]) .label,
-  :host([variant="outlined"][has-value]) .label,
-  :host([variant="outlined"][has-placeholder]) .label {
-    top: 0;
-    left: 12px;
-    background-color: var(--md-sys-color-surface, #FEF7FF);
-    padding: 0 4px;
-  }
-
-  :host([focused]) .label {
-    color: var(--md-sys-color-primary, #6750A4);
-  }
-
-  :host([error]) .label {
-    color: var(--md-sys-color-error, #B3261E);
-  }
-
-  .input-wrapper {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    height: 100%;
-    min-width: 0;
-  }
-
-  :host(:not([variant])) .input-wrapper,
-  :host([variant="filled"]) .input-wrapper {
-    padding-top: 18px;
-  }
-
-  input {
-    flex: 1;
-    width: 100%;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-family: inherit;
-    font-size: 16px;
-    line-height: 24px;
-    color: var(--md-sys-color-on-surface, #1D1B20);
-    padding: 0;
-  }
-
-  input::placeholder {
-    color: var(--md-sys-color-on-surface-variant, #49454F);
-    opacity: 0.6;
-  }
-
-  .affix {
-    font-size: 16px;
-    color: var(--md-sys-color-on-surface-variant, #49454F);
-    user-select: none;
-  }
-
-  .prefix { margin-right: 4px; }
-  .suffix { margin-left: 4px; }
-
-  .icon-slot {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--md-sys-color-on-surface-variant, #49454F);
-  }
-
-  .leading-icon { margin-right: 12px; }
-  .trailing-icon { margin-left: 12px; }
-
-  :host([error]) .trailing-icon {
-    color: var(--md-sys-color-error, #B3261E);
-  }
-
-  /* Supporting / Error text */
-  .supporting-text {
-    display: flex;
-    justify-content: space-between;
-    padding: 4px 16px 0;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--md-sys-color-on-surface-variant, #49454F);
-  }
-
-  :host([error]) .supporting-text {
-    color: var(--md-sys-color-error, #B3261E);
-  }
-`;
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (r, n, p, l) => {
-  for (var s = l > 1 ? void 0 : l ? b(n, p) : n, h = r.length - 1, d; h >= 0; h--)
-    (d = r[h]) && (s = (l ? d(n, p, s) : d(s)) || s);
-  return l && s && y(n, p, s), s;
-};
-let t = class extends c {
-  constructor() {
-    super(...arguments), this.variant = "filled", this.label = "", this.value = "", this.placeholder = "", this.type = "text", this.readonly = !1, this.error = !1, this.errorText = "", this.supportingText = "", this.prefixText = "", this.suffixText = "", this.maxLength = -1, this.pattern = "", this.leadingIcon = "", this.trailingIcon = "", this.focused = !1, this.handleFocus = () => {
-      this.focused = !0, this.toggleAttribute("focused", !0);
-    }, this.handleBlur = () => {
-      this.focused = !1, this.toggleAttribute("focused", !1), this.validateInput();
-    }, this.handleInput = (r) => {
-      const n = r.target;
-      this.value = n.value, this.setFormValue(this.value), this.emitEvent("input", { value: this.value });
-    }, this.handleChange = () => {
-      this.emitEvent("change", { value: this.value });
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setFormValue(this.value);
-  }
-  willUpdate(r) {
-    super.willUpdate(r), r.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.validateInput());
-  }
-  updated(r) {
-    super.updated(r), r.has("placeholder") && this.toggleAttribute("has-placeholder", !!this.placeholder);
-  }
-  formResetCallback() {
-    this.value = "", this.error = !1, this.setFormValue(null);
-  }
-  validateInput() {
-    this.inputElement && (this.required && !this.value ? (this.setValidity({ valueMissing: !0 }, this.errorText || "This field is required"), this.error = !0) : this.pattern && !new RegExp(this.pattern).test(this.value) ? (this.setValidity({ patternMismatch: !0 }, this.errorText || "Invalid format"), this.error = !0) : (this.setValidity({}), this.errorText || (this.error = !1)));
-  }
-  handleSlotChange() {
-    const r = !!(this.leadingIcon || this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0);
-    this.toggleAttribute("has-leading-icon", r);
-  }
-  render() {
-    const r = this.error ? this.errorText || this.supportingText : this.supportingText;
-    return o`
-      <div class="container" @click=${() => this.inputElement?.focus()}>
-        ${this.variant === "filled" ? o`<md-ripple ?disabled=${this.disabled}></md-ripple>` : a}
-
-        <span class="icon-slot leading-icon">
-          <slot name="leading-icon" @slotchange=${this.handleSlotChange}>
-            ${this.leadingIcon ? o`<md-icon name=${this.leadingIcon}></md-icon>` : a}
-          </slot>
-        </span>
-
-        <div class="input-wrapper">
-          ${this.label ? o`<label class="label">${this.label}</label>` : a}
-          ${this.prefixText ? o`<span class="affix prefix">${this.prefixText}</span>` : a}
-          <input
-            type=${this.type}
-            .value=${this.value}
-            placeholder=${this.focused || !this.label ? this.placeholder : ""}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            maxlength=${this.maxLength > 0 ? this.maxLength : a}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-            @input=${this.handleInput}
-            @change=${this.handleChange}
-          />
-          ${this.suffixText ? o`<span class="affix suffix">${this.suffixText}</span>` : a}
-        </div>
-
-        <span class="icon-slot trailing-icon">
-          <slot name="trailing-icon">
-            ${this.error ? o`<md-icon name="error" filled></md-icon>` : this.trailingIcon ? o`<md-icon name=${this.trailingIcon}></md-icon>` : a}
-          </slot>
-        </span>
-      </div>
-
-      ${r || this.maxLength > 0 ? o`
-            <div class="supporting-text">
-              <span>${r}</span>
-              ${this.maxLength > 0 ? o`<span>${this.value.length} / ${this.maxLength}</span>` : a}
-            </div>
-          ` : a}
-    `;
-  }
-};
-t.styles = [c.styles, v];
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
-e([
-  i({ type: String })
-], t.prototype, "label", 2);
-e([
-  i({ type: String })
-], t.prototype, "value", 2);
-e([
-  i({ type: String })
-], t.prototype, "placeholder", 2);
-e([
-  i({ type: String })
-], t.prototype, "type", 2);
-e([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "readonly", 2);
-e([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "error", 2);
-e([
-  i({ type: String, attribute: "error-text" })
-], t.prototype, "errorText", 2);
-e([
-  i({ type: String, attribute: "supporting-text" })
-], t.prototype, "supportingText", 2);
-e([
-  i({ type: String, attribute: "prefix-text" })
-], t.prototype, "prefixText", 2);
-e([
-  i({ type: String, attribute: "suffix-text" })
-], t.prototype, "suffixText", 2);
-e([
-  i({ type: Number, attribute: "maxlength" })
-], t.prototype, "maxLength", 2);
-e([
-  i({ type: String })
-], t.prototype, "pattern", 2);
-e([
-  i({ type: String, attribute: "leading-icon" })
-], t.prototype, "leadingIcon", 2);
-e([
-  i({ type: String, attribute: "trailing-icon" })
-], t.prototype, "trailingIcon", 2);
-e([
-  f()
-], t.prototype, "focused", 2);
-e([
-  g("input")
-], t.prototype, "inputElement", 2);
-e([
-  m({ slot: "leading-icon" })
-], t.prototype, "assignedLeadingIcons", 2);
-t = e([
-  x("md-text-field")
-], t);
+import { t as e } from "../../chunks/text-field-hN6-2HQy.js";
 export {
-  t as MdTextField
+  e as MdTextField
 };
-//# sourceMappingURL=text-field.js.map

package/dist/components/top-app-bar/top-app-bar.css.d.ts

@@ -0,0 +1,2 @@
+export declare const topAppBarStyles: import('lit').CSSResult;
+//# sourceMappingURL=top-app-bar.css.d.ts.map

package/dist/components/top-app-bar/top-app-bar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-app-bar.css.d.ts","sourceRoot":"","sources":["../../../src/components/top-app-bar/top-app-bar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAuI3B,CAAC"}

package/dist/components/top-app-bar/top-app-bar.d.ts

@@ -0,0 +1,29 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export type TopAppBarVariant = 'center-aligned' | 'small' | 'medium' | 'large';
+/**
+ * Material Design 3 Top App Bar component.
+ *
+ * @slot navigation - Leading navigation icon button (e.g. menu, back arrow). Also aliased as `leading-icon` or `leading`.
+ * @slot headline - Primary title text. Also aliased as `title`.
+ * @slot subtitle - Secondary subtitle text. Also aliased as `supporting-text`.
+ * @slot actions - Trailing action icon buttons or menus. Also aliased as `trailing-icon` or `trailing`.
+ * @slot - Default slot for additional bar contents.
+ */
+export declare class MdTopAppBar extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    variant: TopAppBarVariant;
+    headline: string;
+    subtitle: string;
+    elevated: boolean;
+    fixed: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare class MdTopBar extends MdTopAppBar {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-top-app-bar': MdTopAppBar;
+        'md-top-bar': MdTopAppBar;
+    }
+}
+//# sourceMappingURL=top-app-bar.d.ts.map

package/dist/components/top-app-bar/top-app-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-app-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-app-bar/top-app-bar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAGjE,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/E;;;;;;;;GAQG;AACH,qBACa,WAAY,SAAQ,aAAa;IAC5C,OAAgB,MAAM,iCAA2C;IAGjE,OAAO,EAAE,gBAAgB,CAAoB;IAG7C,QAAQ,SAAM;IAGd,QAAQ,SAAM;IAGd,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAEL,MAAM;CAuEhB;AAGD,qBACa,QAAS,SAAQ,WAAW;CAAG;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,WAAW,CAAC;QAC9B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF"}

package/dist/components/top-app-bar/top-app-bar.js

@@ -0,0 +1,5 @@
+import { n as o, t as r } from "../../chunks/top-app-bar-Dgbp6CFv.js";
+export {
+  r as MdTopAppBar,
+  o as MdTopBar
+};

package/dist/index.d.ts

@@ -20,4 +20,12 @@ export * from './components/chip/chip.js';
 export * from './components/tabs/tabs.js';
 export * from './components/list/list.js';
 export * from './components/snackbar/snackbar.js';
+export * from './components/top-app-bar/top-app-bar.js';
+export * from './components/navigation-drawer/navigation-drawer.js';
+export * from './components/table/table.js';
+export * from './components/search-bar/search-bar.js';
+export * from './components/code/code.js';
+export * from './components/player/player.js';
+export * from './components/app-drawer/app-drawer.js';
+export * from './components/account-menu/account-menu.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAGlC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AAGpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,yBAAyB,CAAC;AACxC,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAGlC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AAGpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,yBAAyB,CAAC;AACxC,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2CAA2C,CAAC"}