@eagami/ui 0.10.0 → 0.10.1
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/README.md +9 -5
- package/fesm2022/eagami-ui.mjs +26 -13
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +10 -8
package/README.md
CHANGED
|
@@ -370,13 +370,17 @@ Arrow keys, Enter/Space to select, Escape to close. Sizes: `sm` | `md` | `lg`.
|
|
|
370
370
|
<details>
|
|
371
371
|
<summary><strong>Eagami wordmark</strong> — branded logo wordmark linking to eagami.com</summary>
|
|
372
372
|
|
|
373
|
-
|
|
373
|
+
| Variant | Text |
|
|
374
|
+
| --- | --- |
|
|
375
|
+
| `1` | eagami |
|
|
376
|
+
| `2` | handcrafted by eagami |
|
|
377
|
+
| `3` | eagami design system |
|
|
378
|
+
| `4` | eagami design system — elegant web design |
|
|
379
|
+
|
|
380
|
+
Layout: `stacked` (default, multi-line) | `inline` (single line, uniform font size — adds em dash before tagline). Size is a number (pixels) for continuous scaling; the logo, brand text, and secondary text all scale proportionally.
|
|
374
381
|
|
|
375
382
|
```html
|
|
376
|
-
<ea-eagami-wordmark
|
|
377
|
-
variant="brand"
|
|
378
|
-
size="md"
|
|
379
|
-
text="eagami design system" />
|
|
383
|
+
<ea-eagami-wordmark [variant]="4" [size]="96" />
|
|
380
384
|
```
|
|
381
385
|
|
|
382
386
|
<img src="docs/images/eagami-wordmark.png" alt="Eagami wordmark component" width="560" />
|
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -3137,25 +3137,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3137
3137
|
}] });
|
|
3138
3138
|
|
|
3139
3139
|
class EagamiWordmarkComponent {
|
|
3140
|
-
variant = input(
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3140
|
+
variant = input(1, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3141
|
+
layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
3142
|
+
size = input(32, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3143
|
+
showOverline = computed(() => this.variant() === 2, ...(ngDevMode ? [{ debugName: "showOverline" }] : /* istanbul ignore next */ []));
|
|
3144
|
+
showTagline = computed(() => this.variant() === 4, ...(ngDevMode ? [{ debugName: "showTagline" }] : /* istanbul ignore next */ []));
|
|
3145
|
+
brandText = computed(() => {
|
|
3144
3146
|
const variant = this.variant();
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3147
|
+
if (variant <= 2)
|
|
3148
|
+
return 'eagami';
|
|
3149
|
+
return 'eagami design system';
|
|
3150
|
+
}, ...(ngDevMode ? [{ debugName: "brandText" }] : /* istanbul ignore next */ []));
|
|
3151
|
+
ariaLabel = computed(() => {
|
|
3152
|
+
switch (this.variant()) {
|
|
3153
|
+
case 1:
|
|
3154
|
+
return 'eagami';
|
|
3155
|
+
case 2:
|
|
3156
|
+
return 'handcrafted by eagami';
|
|
3157
|
+
case 3:
|
|
3158
|
+
return 'eagami design system';
|
|
3159
|
+
case 4:
|
|
3160
|
+
return 'eagami design system \u2014 elegant web design';
|
|
3161
|
+
}
|
|
3151
3162
|
}, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3152
3163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EagamiWordmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3153
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EagamiWordmarkComponent, isStandalone: true, selector: "ea-eagami-wordmark", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null },
|
|
3164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EagamiWordmarkComponent, isStandalone: true, selector: "ea-eagami-wordmark", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_size": "size()" } }, ngImport: i0, template: "<a\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n href=\"https://eagami.com\"\n target=\"_blank\"\n rel=\"noopener\"\n [attr.aria-label]=\"ariaLabel()\">\n <ea-icon-eagami\n class=\"ea-eagami-wordmark__logo\"\n aria-hidden=\"true\" />\n\n <span class=\"ea-eagami-wordmark__text\">\n @if (showOverline()) {\n <span class=\"ea-eagami-wordmark__overline\">handcrafted by</span>\n }\n <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n @if (showTagline()) {\n @if (layout() === 'inline') {\n <span\n class=\"ea-eagami-wordmark__separator\"\n aria-hidden=\"true\">\n \u2014\n </span>\n }\n <span class=\"ea-eagami-wordmark__tagline\">elegant web design</span>\n }\n </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"], dependencies: [{ kind: "component", type: EagamiIconComponent, selector: "ea-icon-eagami" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3154
3165
|
}
|
|
3155
3166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EagamiWordmarkComponent, decorators: [{
|
|
3156
3167
|
type: Component,
|
|
3157
|
-
args: [{ selector: 'ea-eagami-wordmark', imports: [EagamiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3158
|
-
|
|
3168
|
+
args: [{ selector: 'ea-eagami-wordmark', imports: [EagamiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3169
|
+
'[style.--_size]': 'size()',
|
|
3170
|
+
}, template: "<a\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n href=\"https://eagami.com\"\n target=\"_blank\"\n rel=\"noopener\"\n [attr.aria-label]=\"ariaLabel()\">\n <ea-icon-eagami\n class=\"ea-eagami-wordmark__logo\"\n aria-hidden=\"true\" />\n\n <span class=\"ea-eagami-wordmark__text\">\n @if (showOverline()) {\n <span class=\"ea-eagami-wordmark__overline\">handcrafted by</span>\n }\n <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n @if (showTagline()) {\n @if (layout() === 'inline') {\n <span\n class=\"ea-eagami-wordmark__separator\"\n aria-hidden=\"true\">\n \u2014\n </span>\n }\n <span class=\"ea-eagami-wordmark__tagline\">elegant web design</span>\n }\n </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"] }]
|
|
3171
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
3159
3172
|
|
|
3160
3173
|
class AlertTriangleIconComponent {
|
|
3161
3174
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AlertTriangleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|