@melodicdev/components 1.5.3 → 1.5.5

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.
Files changed (9) hide show
  1. package/assets/melodic-components.js +7 -3
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +7 -3
  4. package/lib/components/general/icon/icon.template.d.ts.map +1 -1
  5. package/lib/components/general/icon/icon.template.js +1 -2
  6. package/lib/components/pages/auth/auth-layout.styles.d.ts +1 -1
  7. package/lib/components/pages/auth/auth-layout.styles.d.ts.map +1 -1
  8. package/lib/components/pages/auth/auth-layout.styles.js +6 -2
  9. package/package.json +1 -1
package/assets/melodic-components.min.js CHANGED
@@ -14510,7 +14510,7 @@ Wt = g([_({
14510
14510
  "hide-add-button"
14511
14511
  ]
14512
14512
  })], Wt);
14513
- const oi = (e) => i`<i class="${e.format === "regular" ? "ph" : `ph-${e.format}`}">${e.format === "regular" ? e.icon : `${e.icon}-${e.format}`}</i>`, ii = () => w`
14513
+ const oi = (e) => i`<i class="${e.format === "regular" ? "ph" : `ph-${e.format}`}">${e.icon}</i>`, ii = () => w`
14514
14514
  :host {
14515
14515
  display: inline-flex;
14516
14516
  align-items: center;
@@ -20736,6 +20736,8 @@ const Kr = `
20736
20736
 
20737
20737
  /* Split variant */
20738
20738
  --ml-auth-split-padding: var(--ml-space-10);
20739
+ --ml-auth-split-form-padding: var(--ml-auth-split-padding);
20740
+ --ml-auth-split-brand-padding: var(--ml-auth-split-padding);
20739
20741
  --ml-auth-split-form-bg: var(--ml-color-surface);
20740
20742
  --ml-auth-split-brand-bg: var(--ml-color-primary);
20741
20743
  --ml-auth-split-brand-color: var(--ml-color-text-inverse);
@@ -20807,7 +20809,7 @@ const Kr = `
20807
20809
  align-items: center;
20808
20810
  justify-content: center;
20809
20811
  flex: 1;
20810
- padding: var(--ml-auth-split-padding);
20812
+ padding: var(--ml-auth-split-form-padding);
20811
20813
  background-color: var(--ml-auth-split-form-bg);
20812
20814
  }
20813
20815
 
@@ -20821,7 +20823,7 @@ const Kr = `
20821
20823
  align-items: center;
20822
20824
  justify-content: center;
20823
20825
  flex: 1;
20824
- padding: var(--ml-auth-split-padding);
20826
+ padding: var(--ml-auth-split-brand-padding);
20825
20827
  background-color: var(--ml-auth-split-brand-bg);
20826
20828
  color: var(--ml-auth-split-brand-color);
20827
20829
  position: relative;
@@ -20832,6 +20834,8 @@ const Kr = `
20832
20834
  position: relative;
20833
20835
  z-index: 1;
20834
20836
  text-align: center;
20837
+ width: 100%;
20838
+ height: 100%;
20835
20839
  max-width: var(--ml-auth-split-brand-max-width);
20836
20840
  }
20837
20841
 
package/lib/components/general/icon/icon.template.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.template.d.ts","sourceRoot":"","sources":["../../../../src/components/general/icon/icon.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,eAAO,MAAM,YAAY,GAAI,GAAG,aAAa,8CAK5C,CAAC"}
1
+ {"version":3,"file":"icon.template.d.ts","sourceRoot":"","sources":["../../../../src/components/general/icon/icon.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,eAAO,MAAM,YAAY,GAAI,GAAG,aAAa,8CAI5C,CAAC"}
package/lib/components/general/icon/icon.template.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { html } from '@melodicdev/core';
2
2
  export const iconTemplate = (c) => {
3
3
  const className = c.format === 'regular' ? 'ph' : `ph-${c.format}`;
4
- const iconLigature = c.format === 'regular' ? c.icon : `${c.icon}-${c.format}`;
5
- return html `<i class="${className}">${iconLigature}</i>`;
4
+ return html `<i class="${className}">${c.icon}</i>`;
6
5
  };
package/lib/components/pages/auth/auth-layout.styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const authLayoutCss = "\n\t/* ============================================\n\t AUTH LAYOUT - SHARED STYLES\n\t ============================================ */\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t/* Background */\n\t\t--ml-auth-bg: var(--ml-color-surface-secondary);\n\n\t\t/* Font */\n\t\t--ml-auth-font-family: var(--ml-font-sans);\n\n\t\t/* Card */\n\t\t--ml-auth-card-max-width: 440px;\n\t\t--ml-auth-card-bg: var(--ml-color-surface);\n\t\t--ml-auth-card-border-width: var(--ml-border);\n\t\t--ml-auth-card-border-color: var(--ml-color-border);\n\t\t--ml-auth-card-radius: var(--ml-radius-xl);\n\t\t--ml-auth-card-shadow: var(--ml-shadow-lg);\n\t\t--ml-auth-card-padding: var(--ml-space-10);\n\n\t\t/* Centered variant */\n\t\t--ml-auth-centered-padding: var(--ml-space-6);\n\n\t\t/* Split variant */\n\t\t--ml-auth-split-padding: var(--ml-space-10);\n\t\t--ml-auth-split-form-bg: var(--ml-color-surface);\n\t\t--ml-auth-split-brand-bg: var(--ml-color-primary);\n\t\t--ml-auth-split-brand-color: var(--ml-color-text-inverse);\n\t\t--ml-auth-split-brand-max-width: 480px;\n\n\t\t/* Logo */\n\t\t--ml-auth-logo-margin: var(--ml-space-6);\n\n\t\t/* Header */\n\t\t--ml-auth-header-margin: var(--ml-space-8);\n\t\t--ml-auth-title-size: var(--ml-text-2xl);\n\t\t--ml-auth-title-weight: var(--ml-font-bold);\n\t\t--ml-auth-title-color: var(--ml-color-text);\n\t\t--ml-auth-title-line-height: var(--ml-leading-tight);\n\t\t--ml-auth-title-margin: var(--ml-space-2);\n\t\t--ml-auth-description-size: var(--ml-text-sm);\n\t\t--ml-auth-description-color: var(--ml-color-text-muted);\n\t\t--ml-auth-description-line-height: var(--ml-leading-normal);\n\n\t\t/* Form / Social / Footer spacing */\n\t\t--ml-auth-form-margin: var(--ml-space-6);\n\t\t--ml-auth-social-margin: var(--ml-space-6);\n\t\t--ml-auth-footer-size: var(--ml-text-sm);\n\t\t--ml-auth-footer-color: var(--ml-color-text-muted);\n\n\t\t/* Mobile */\n\t\t--ml-auth-mobile-padding: var(--ml-space-6);\n\t}\n\n\t/* ============================================\n\t BASE WRAPPER\n\t ============================================ */\n\t.ml-auth {\n\t\tdisplay: flex;\n\t\tmin-height: 100%;\n\t\theight: 100%;\n\t\tfont-family: var(--ml-auth-font-family);\n\t\tbackground-color: var(--ml-auth-bg);\n\t}\n\n\t/* ============================================\n\t CENTERED VARIANT\n\t ============================================ */\n\t.ml-auth--centered {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: var(--ml-auth-centered-padding);\n\t}\n\n\t.ml-auth--centered .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t\tbackground-color: var(--ml-auth-card-bg);\n\t\tborder: var(--ml-auth-card-border-width) solid var(--ml-auth-card-border-color);\n\t\tborder-radius: var(--ml-auth-card-radius);\n\t\tbox-shadow: var(--ml-auth-card-shadow);\n\t\tpadding: var(--ml-auth-card-padding);\n\t}\n\n\t/* ============================================\n\t SPLIT VARIANT\n\t ============================================ */\n\t.ml-auth--split {\n\t\tflex-direction: row;\n\t}\n\n\t.ml-auth--split .ml-auth__form-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-padding);\n\t\tbackground-color: var(--ml-auth-split-form-bg);\n\t}\n\n\t.ml-auth--split .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t}\n\n\t.ml-auth--split .ml-auth__brand-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-padding);\n\t\tbackground-color: var(--ml-auth-split-brand-bg);\n\t\tcolor: var(--ml-auth-split-brand-color);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t.ml-auth__brand-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\ttext-align: center;\n\t\tmax-width: var(--ml-auth-split-brand-max-width);\n\t}\n\n\t.ml-auth__brand-content ::slotted(*) {\n\t\tcolor: inherit;\n\t}\n\n\t/* ============================================\n\t LOGO AREA\n\t ============================================ */\n\t.ml-auth__logo {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tmargin-bottom: var(--ml-auth-logo-margin);\n\t}\n\n\t.ml-auth__logo:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t HEADER\n\t ============================================ */\n\t.ml-auth__header {\n\t\ttext-align: center;\n\t\tmargin-bottom: var(--ml-auth-header-margin);\n\t}\n\n\t.ml-auth__title {\n\t\tmargin: 0 0 var(--ml-auth-title-margin) 0;\n\t\tfont-size: var(--ml-auth-title-size);\n\t\tfont-weight: var(--ml-auth-title-weight);\n\t\tcolor: var(--ml-auth-title-color);\n\t\tline-height: var(--ml-auth-title-line-height);\n\t}\n\n\t.ml-auth__description {\n\t\tmargin: 0;\n\t\tfont-size: var(--ml-auth-description-size);\n\t\tcolor: var(--ml-auth-description-color);\n\t\tline-height: var(--ml-auth-description-line-height);\n\t}\n\n\t/* ============================================\n\t FORM AREA\n\t ============================================ */\n\t.ml-auth__form {\n\t\tmargin-bottom: var(--ml-auth-form-margin);\n\t}\n\n\t.ml-auth__form:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t SOCIAL LOGIN\n\t ============================================ */\n\t.ml-auth__social {\n\t\tmargin-bottom: var(--ml-auth-social-margin);\n\t}\n\n\t.ml-auth__social:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t FOOTER\n\t ============================================ */\n\t.ml-auth__footer {\n\t\ttext-align: center;\n\t\tfont-size: var(--ml-auth-footer-size);\n\t\tcolor: var(--ml-auth-footer-color);\n\t}\n\n\t.ml-auth__footer:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t RESPONSIVE - SPLIT COLLAPSE\n\t ============================================ */\n\t@media (max-width: 768px) {\n\t\t.ml-auth--split {\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__brand-side {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__form-side {\n\t\t\tmin-height: 100%;\n\t\t\tpadding: var(--ml-auth-mobile-padding);\n\t\t}\n\t}\n";
1
+ export declare const authLayoutCss = "\n\t/* ============================================\n\t AUTH LAYOUT - SHARED STYLES\n\t ============================================ */\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t/* Background */\n\t\t--ml-auth-bg: var(--ml-color-surface-secondary);\n\n\t\t/* Font */\n\t\t--ml-auth-font-family: var(--ml-font-sans);\n\n\t\t/* Card */\n\t\t--ml-auth-card-max-width: 440px;\n\t\t--ml-auth-card-bg: var(--ml-color-surface);\n\t\t--ml-auth-card-border-width: var(--ml-border);\n\t\t--ml-auth-card-border-color: var(--ml-color-border);\n\t\t--ml-auth-card-radius: var(--ml-radius-xl);\n\t\t--ml-auth-card-shadow: var(--ml-shadow-lg);\n\t\t--ml-auth-card-padding: var(--ml-space-10);\n\n\t\t/* Centered variant */\n\t\t--ml-auth-centered-padding: var(--ml-space-6);\n\n\t\t/* Split variant */\n\t\t--ml-auth-split-padding: var(--ml-space-10);\n\t\t--ml-auth-split-form-padding: var(--ml-auth-split-padding);\n\t\t--ml-auth-split-brand-padding: var(--ml-auth-split-padding);\n\t\t--ml-auth-split-form-bg: var(--ml-color-surface);\n\t\t--ml-auth-split-brand-bg: var(--ml-color-primary);\n\t\t--ml-auth-split-brand-color: var(--ml-color-text-inverse);\n\t\t--ml-auth-split-brand-max-width: 480px;\n\n\t\t/* Logo */\n\t\t--ml-auth-logo-margin: var(--ml-space-6);\n\n\t\t/* Header */\n\t\t--ml-auth-header-margin: var(--ml-space-8);\n\t\t--ml-auth-title-size: var(--ml-text-2xl);\n\t\t--ml-auth-title-weight: var(--ml-font-bold);\n\t\t--ml-auth-title-color: var(--ml-color-text);\n\t\t--ml-auth-title-line-height: var(--ml-leading-tight);\n\t\t--ml-auth-title-margin: var(--ml-space-2);\n\t\t--ml-auth-description-size: var(--ml-text-sm);\n\t\t--ml-auth-description-color: var(--ml-color-text-muted);\n\t\t--ml-auth-description-line-height: var(--ml-leading-normal);\n\n\t\t/* Form / Social / Footer spacing */\n\t\t--ml-auth-form-margin: var(--ml-space-6);\n\t\t--ml-auth-social-margin: var(--ml-space-6);\n\t\t--ml-auth-footer-size: var(--ml-text-sm);\n\t\t--ml-auth-footer-color: var(--ml-color-text-muted);\n\n\t\t/* Mobile */\n\t\t--ml-auth-mobile-padding: var(--ml-space-6);\n\t}\n\n\t/* ============================================\n\t BASE WRAPPER\n\t ============================================ */\n\t.ml-auth {\n\t\tdisplay: flex;\n\t\tmin-height: 100%;\n\t\theight: 100%;\n\t\tfont-family: var(--ml-auth-font-family);\n\t\tbackground-color: var(--ml-auth-bg);\n\t}\n\n\t/* ============================================\n\t CENTERED VARIANT\n\t ============================================ */\n\t.ml-auth--centered {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: var(--ml-auth-centered-padding);\n\t}\n\n\t.ml-auth--centered .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t\tbackground-color: var(--ml-auth-card-bg);\n\t\tborder: var(--ml-auth-card-border-width) solid var(--ml-auth-card-border-color);\n\t\tborder-radius: var(--ml-auth-card-radius);\n\t\tbox-shadow: var(--ml-auth-card-shadow);\n\t\tpadding: var(--ml-auth-card-padding);\n\t}\n\n\t/* ============================================\n\t SPLIT VARIANT\n\t ============================================ */\n\t.ml-auth--split {\n\t\tflex-direction: row;\n\t}\n\n\t.ml-auth--split .ml-auth__form-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-form-padding);\n\t\tbackground-color: var(--ml-auth-split-form-bg);\n\t}\n\n\t.ml-auth--split .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t}\n\n\t.ml-auth--split .ml-auth__brand-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-brand-padding);\n\t\tbackground-color: var(--ml-auth-split-brand-bg);\n\t\tcolor: var(--ml-auth-split-brand-color);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t.ml-auth__brand-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\ttext-align: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmax-width: var(--ml-auth-split-brand-max-width);\n\t}\n\n\t.ml-auth__brand-content ::slotted(*) {\n\t\tcolor: inherit;\n\t}\n\n\t/* ============================================\n\t LOGO AREA\n\t ============================================ */\n\t.ml-auth__logo {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tmargin-bottom: var(--ml-auth-logo-margin);\n\t}\n\n\t.ml-auth__logo:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t HEADER\n\t ============================================ */\n\t.ml-auth__header {\n\t\ttext-align: center;\n\t\tmargin-bottom: var(--ml-auth-header-margin);\n\t}\n\n\t.ml-auth__title {\n\t\tmargin: 0 0 var(--ml-auth-title-margin) 0;\n\t\tfont-size: var(--ml-auth-title-size);\n\t\tfont-weight: var(--ml-auth-title-weight);\n\t\tcolor: var(--ml-auth-title-color);\n\t\tline-height: var(--ml-auth-title-line-height);\n\t}\n\n\t.ml-auth__description {\n\t\tmargin: 0;\n\t\tfont-size: var(--ml-auth-description-size);\n\t\tcolor: var(--ml-auth-description-color);\n\t\tline-height: var(--ml-auth-description-line-height);\n\t}\n\n\t/* ============================================\n\t FORM AREA\n\t ============================================ */\n\t.ml-auth__form {\n\t\tmargin-bottom: var(--ml-auth-form-margin);\n\t}\n\n\t.ml-auth__form:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t SOCIAL LOGIN\n\t ============================================ */\n\t.ml-auth__social {\n\t\tmargin-bottom: var(--ml-auth-social-margin);\n\t}\n\n\t.ml-auth__social:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t FOOTER\n\t ============================================ */\n\t.ml-auth__footer {\n\t\ttext-align: center;\n\t\tfont-size: var(--ml-auth-footer-size);\n\t\tcolor: var(--ml-auth-footer-color);\n\t}\n\n\t.ml-auth__footer:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t RESPONSIVE - SPLIT COLLAPSE\n\t ============================================ */\n\t@media (max-width: 768px) {\n\t\t.ml-auth--split {\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__brand-side {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__form-side {\n\t\t\tmin-height: 100%;\n\t\t\tpadding: var(--ml-auth-mobile-padding);\n\t\t}\n\t}\n";
2
2
  //# sourceMappingURL=auth-layout.styles.d.ts.map
package/lib/components/pages/auth/auth-layout.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"auth-layout.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/auth-layout.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,mmMA4NzB,CAAC"}
1
+ {"version":3,"file":"auth-layout.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/auth-layout.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,sxMAgOzB,CAAC"}
package/lib/components/pages/auth/auth-layout.styles.js CHANGED
@@ -27,6 +27,8 @@ export const authLayoutCss = `
27
27
 
28
28
  /* Split variant */
29
29
  --ml-auth-split-padding: var(--ml-space-10);
30
+ --ml-auth-split-form-padding: var(--ml-auth-split-padding);
31
+ --ml-auth-split-brand-padding: var(--ml-auth-split-padding);
30
32
  --ml-auth-split-form-bg: var(--ml-color-surface);
31
33
  --ml-auth-split-brand-bg: var(--ml-color-primary);
32
34
  --ml-auth-split-brand-color: var(--ml-color-text-inverse);
@@ -98,7 +100,7 @@ export const authLayoutCss = `
98
100
  align-items: center;
99
101
  justify-content: center;
100
102
  flex: 1;
101
- padding: var(--ml-auth-split-padding);
103
+ padding: var(--ml-auth-split-form-padding);
102
104
  background-color: var(--ml-auth-split-form-bg);
103
105
  }
104
106
 
@@ -112,7 +114,7 @@ export const authLayoutCss = `
112
114
  align-items: center;
113
115
  justify-content: center;
114
116
  flex: 1;
115
- padding: var(--ml-auth-split-padding);
117
+ padding: var(--ml-auth-split-brand-padding);
116
118
  background-color: var(--ml-auth-split-brand-bg);
117
119
  color: var(--ml-auth-split-brand-color);
118
120
  position: relative;
@@ -123,6 +125,8 @@ export const authLayoutCss = `
123
125
  position: relative;
124
126
  z-index: 1;
125
127
  text-align: center;
128
+ width: 100%;
129
+ height: 100%;
126
130
  max-width: var(--ml-auth-split-brand-max-width);
127
131
  }
128
132
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melodicdev/components",
3
- "version": "1.5.3",
3
+ "version": "1.5.5",
4
4
  "description": "Themeable UI component library built on the Melodic Framework",
5
5
  "license": "MIT",
6
6
  "author": "Melodic Development",