@atelier-ui/angular 0.0.31 → 0.0.32

package/fesm2022/atelier-ui-angular.mjs

@@ -182,6 +182,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-full);font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-semibold);line-height:var(--ui-line-height-tight);white-space:nowrap;letter-spacing:.01em}:host(.size-sm){padding:.1875rem var(--ui-spacing-2);font-size:var(--ui-font-size-xs)}:host(.size-md){padding:.3125rem var(--ui-spacing-3);font-size:var(--ui-font-size-sm)}:host(.variant-default){background-color:var(--ui-color-surface-sunken);color:var(--ui-color-text-muted);border:1px solid var(--ui-color-border)}:host(.variant-success){background-color:var(--ui-color-success-bg);color:var(--ui-color-success-text);border:1px solid color-mix(in srgb,var(--ui-color-success-text) 25%,transparent)}:host(.variant-warning){background-color:var(--ui-color-warning-bg);color:var(--ui-color-warning-text);border:1px solid color-mix(in srgb,var(--ui-color-warning-text) 25%,transparent)}:host(.variant-danger){background-color:var(--ui-color-danger-bg);color:var(--ui-color-danger-text);border:1px solid color-mix(in srgb,var(--ui-color-danger-text) 25%,transparent)}:host(.variant-info){background-color:var(--ui-color-info-bg);color:var(--ui-color-info-text);border:1px solid color-mix(in srgb,var(--ui-color-info-text) 25%,transparent)}.variant-icon{font-weight:700;margin-right:.3em;line-height:1}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+const ICON_GLYPHS = {
+    success: '✓',
+    warning: '⚠',
+    danger: '✕',
+    info: 'ℹ',
+    error: '!',
+    'chevron-up': '▲',
+    'chevron-down': '▼',
+    'chevron-left': '‹',
+    'chevron-right': '›',
+    'sort-asc': '↑',
+    'sort-desc': '↓',
+    'arrow-right': '→',
+    'arrow-left': '←',
+    copy: '⎘',
+    paste: '⎗',
+    add: '⊕',
+    edit: '✏',
+    delete: '🗑',
+    close: '×',
+    more: '…',
+    'default-toast': '💬',
+};
+/**
+ * Pictogram glyph icon. 21 named variants matching the Figma `LlmIcon`
+ * component set. Decorative by default; pass `label` to announce a meaning
+ * to assistive tech.
+ *
+ * Usage:
+ * ```html
+ * <llm-icon name="success" />
+ * <llm-icon name="warning" size="lg" label="Warning" />
+ * ```
+ */
+class LlmIcon {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    glyph = computed(() => ICON_GLYPHS[this.name()], ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => `size-${this.size()}`, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: LlmIcon, isStandalone: true, selector: "llm-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "label() ? \"img\" : null", "attr.aria-label": "label() || null", "attr.aria-hidden": "label() ? null : \"true\"" } }, ngImport: i0, template: `{{ glyph() }}`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);line-height:1;color:currentColor;-webkit-user-select:none;user-select:none;flex-shrink:0}:host(.size-sm){width:1rem;height:1rem;font-size:var(--ui-font-size-sm)}:host(.size-md){width:1.25rem;height:1.25rem;font-size:var(--ui-font-size-md)}:host(.size-lg){width:1.5rem;height:1.5rem;font-size:var(--ui-font-size-lg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'llm-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `{{ glyph() }}`, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'label() ? "img" : null',
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-hidden]': 'label() ? null : "true"',
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);line-height:1;color:currentColor;-webkit-user-select:none;user-select:none;flex-shrink:0}:host(.size-sm){width:1rem;height:1rem;font-size:var(--ui-font-size-sm)}:host(.size-md){width:1.25rem;height:1.25rem;font-size:var(--ui-font-size-md)}:host(.size-lg){width:1.5rem;height:1.5rem;font-size:var(--ui-font-size-lg)}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
 let nextId$d = 0;
 /**
  * Accessible text input component for use with Angular Signal Forms.
@@ -4837,5 +4890,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LLM_ACCORDION_GROUP, LLM_BREADCRUMBS, LLM_CHAT, LLM_DIALOG, LLM_DRAWER, LLM_RADIO_GROUP, LLM_SELECT, LLM_STEPPER, LLM_TABLE, LLM_TAB_GROUP, LlmAccordionGroup, LlmAccordionHeader, LlmAccordionItem, LlmAlert, LlmAvatar, LlmAvatarGroup, LlmBadge, LlmBreadcrumbItem, LlmBreadcrumbs, LlmButton, LlmCard, LlmCardContent, LlmCardFooter, LlmCardHeader, LlmChat, LlmChatHeader, LlmChatInput, LlmChatMessage, LlmChatMessages, LlmChatSuggestion, LlmChatTyping, LlmCheckbox, LlmCodeBlock, LlmCombobox, LlmDialog, LlmDialogContent, LlmDialogFooter, LlmDialogHeader, LlmDrawer, LlmDrawerContent, LlmDrawerFooter, LlmDrawerHeader, LlmInput, LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger, LlmOption, LlmPagination, LlmProgress, LlmRadio, LlmRadioGroup, LlmSelect, LlmSkeleton, LlmStep, LlmStepper, LlmTab, LlmTabGroup, LlmTable, LlmTbody, LlmTd, LlmTextarea, LlmTh, LlmThead, LlmToast, LlmToastContainer, LlmToastService, LlmToggle, LlmTooltip, LlmTr };
+export { LLM_ACCORDION_GROUP, LLM_BREADCRUMBS, LLM_CHAT, LLM_DIALOG, LLM_DRAWER, LLM_RADIO_GROUP, LLM_SELECT, LLM_STEPPER, LLM_TABLE, LLM_TAB_GROUP, LlmAccordionGroup, LlmAccordionHeader, LlmAccordionItem, LlmAlert, LlmAvatar, LlmAvatarGroup, LlmBadge, LlmBreadcrumbItem, LlmBreadcrumbs, LlmButton, LlmCard, LlmCardContent, LlmCardFooter, LlmCardHeader, LlmChat, LlmChatHeader, LlmChatInput, LlmChatMessage, LlmChatMessages, LlmChatSuggestion, LlmChatTyping, LlmCheckbox, LlmCodeBlock, LlmCombobox, LlmDialog, LlmDialogContent, LlmDialogFooter, LlmDialogHeader, LlmDrawer, LlmDrawerContent, LlmDrawerFooter, LlmDrawerHeader, LlmIcon, LlmInput, LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger, LlmOption, LlmPagination, LlmProgress, LlmRadio, LlmRadioGroup, LlmSelect, LlmSkeleton, LlmStep, LlmStepper, LlmTab, LlmTabGroup, LlmTable, LlmTbody, LlmTd, LlmTextarea, LlmTh, LlmThead, LlmToast, LlmToastContainer, LlmToastService, LlmToggle, LlmTooltip, LlmTr };
 //# sourceMappingURL=atelier-ui-angular.mjs.map