A component to display an avatar image. If a valid image source URL is provided,\nit will render an image element. Otherwise, it will display projected content.
\n
The component uses Angular's optimized image directives for enhanced performance.
\n
Usage:
\nExample :
<!-- If an image source is provided, it will display the image -->\n<zen-avatar [src]="'/path/to/image.jpg'" />\n\n<!-- If no image source is provided, it will display the projected content -->\n<zen-avatar> A </zen-avatar>
Example :
<zen-avatar src="https://picsum.photos/32" />
",
"rawdescription": "\n\nA component to display an avatar image. If a valid image source URL is provided,\nit will render an image element. Otherwise, it will display projected content.\n\nThe component uses Angular's optimized image directives for enhanced performance.\n\nUsage:\n\n```html\n\n\n\n\n A \n```\n\n```html\n\n```\n\n",
"type": "component",
- "sourceCode": "import { NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n input,\n ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * A component to display an avatar image. If a valid image source URL is provided,\n * it will render an image element. Otherwise, it will display projected content.\n *\n * The component uses Angular's optimized image directives for enhanced performance.\n *\n * Usage:\n *\n * ```html\n * \n * \n *\n * \n * A \n * ```\n *\n * @example\n * \n *\n * @component\n * @selector `zen-avatar`\n *\n * @license BSD-2-Clause\n * @author Konrad Stępień \n * @link https://github.com/Kordrad/ng-zen\n */\n@Component({\n selector: 'zen-avatar',\n standalone: true,\n imports: [NgOptimizedImage],\n template: `\n @if (src()) {\n \n } @else {\n \n }\n `,\n styleUrl: './avatar.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZenAvatarComponent {\n /**\n * Path to the image source. If the `src` is provided, an image element will be rendered.\n * Otherwise, the content projected into this component will be displayed.\n *\n * @default ''\n * @input\n * @type string\n */\n readonly src = input('');\n}\n",
+ "sourceCode": "import { NgOptimizedImage } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n input,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * A component to display an avatar image. If a valid image source URL is provided,\r\n * it will render an image element. Otherwise, it will display projected content.\r\n *\r\n * The component uses Angular's optimized image directives for enhanced performance.\r\n *\r\n * Usage:\r\n *\r\n * ```html\r\n * \r\n * \r\n *\r\n * \r\n * A \r\n * ```\r\n *\r\n * @example\r\n * \r\n *\r\n * @component\r\n * @selector `zen-avatar`\r\n *\r\n * @license BSD-2-Clause\r\n * @author Konrad Stępień \r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-avatar',\r\n standalone: true,\r\n imports: [NgOptimizedImage],\r\n template: `\r\n @if (src()) {\r\n \r\n } @else {\r\n \r\n }\r\n `,\r\n styleUrl: './avatar.component.scss',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenAvatarComponent {\r\n /**\r\n * Path to the image source. If the `src` is provided, an image element will be rendered.\r\n * Otherwise, the content projected into this component will be displayed.\r\n *\r\n * @default ''\r\n * @input\r\n * @type string\r\n */\r\n readonly src = input('');\r\n}\r\n",
"styleUrl": "./avatar.component.scss",
"assetsDirs": [],
"styleUrlsData": "",
@@ -135,7 +135,7 @@
},
{
"name": "ZenBadgeComponent",
- "id": "component-ZenBadgeComponent-71671a8b2d105a1f0687f42fe45ab78400e69e325611e53f7616e070c60e7801822dd72aeccf688b5239479a7126465643fadc51af581f781fc568460e4682d9",
+ "id": "component-ZenBadgeComponent-a18ab634c6366fa273ca9d843ead3428f0cbcd0e6d5fd1a38812e1ce541e8586140a7cf0e6cbadc828bc2c5a6990c3e0c96963ae31ac8e82bdb3e31a069359ed",
"file": "projects/cli/schematics/components/files/badge/badge.component.ts",
"changeDetection": "ChangeDetectionStrategy.OnPush",
"encapsulation": ["ViewEncapsulation.None"],
@@ -163,7 +163,7 @@
"description": "
ZenBadgeComponent is a versatile Angular component used to display badges or indicators\nin various positions within its parent container. It allows for flexible placement\nof badge content such as icons, text, or other elements in the top-left, top,\ntop-right, left, right, bottom-left, bottom, and bottom-right positions.
\n
This component offers standalone usage and is highly customizable through its\ntemplate and styling. It leverages Angular's change detection strategy 'OnPush'\nfor optimal performance.
\n
Additionally, it provides support for CSS variables to customize badge positioning
\nExample :
--zen-badge-offset: unset; // Controls the overall offset of the badge\n--zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n--zen-badge-offset-y: unset; // Controls the vertical offset of the badge.
Example :
",
"rawdescription": "\n\nZenBadgeComponent is a versatile Angular component used to display badges or indicators\nin various positions within its parent container. It allows for flexible placement\nof badge content such as icons, text, or other elements in the top-left, top,\ntop-right, left, right, bottom-left, bottom, and bottom-right positions.\n\nThis component offers standalone usage and is highly customizable through its\ntemplate and styling. It leverages Angular's change detection strategy 'OnPush'\nfor optimal performance.\n\nAdditionally, it provides support for CSS variables to customize badge positioning\n\n```css\n--zen-badge-offset: unset; // Controls the overall offset of the badge\n--zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n--zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\n```\n\n```html\n```\n\n",
"type": "component",
- "sourceCode": "import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * ZenBadgeComponent is a versatile Angular component used to display badges or indicators\n * in various positions within its parent container. It allows for flexible placement\n * of badge content such as icons, text, or other elements in the top-left, top,\n * top-right, left, right, bottom-left, bottom, and bottom-right positions.\n *\n * This component offers standalone usage and is highly customizable through its\n * template and styling. It leverages Angular's change detection strategy 'OnPush'\n * for optimal performance.\n *\n * Additionally, it provides support for CSS variables to customize badge positioning\n *\n * ```css\n * --zen-badge-offset: unset; // Controls the overall offset of the badge\n * --zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n * --zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\n * ```\n *\n * @example Text 🦆\n *\n * @component\n * @selector `zen-badge`,`[zenBadge]`\n *\n * @license BSD-2-Clause\n * @author Konrad Stępień \n * @link https://github.com/Kordrad/ng-zen\n */\n@Component({\n selector: 'zen-badge,[zenBadge]',\n standalone: true,\n template: `\n \n \n \n \n \n \n \n \n \n `,\n styleUrl: './badge.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZenBadgeComponent {}\n",
+ "sourceCode": "import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * ZenBadgeComponent is a versatile Angular component used to display badges or indicators\r\n * in various positions within its parent container. It allows for flexible placement\r\n * of badge content such as icons, text, or other elements in the top-left, top,\r\n * top-right, left, right, bottom-left, bottom, and bottom-right positions.\r\n *\r\n * This component offers standalone usage and is highly customizable through its\r\n * template and styling. It leverages Angular's change detection strategy 'OnPush'\r\n * for optimal performance.\r\n *\r\n * Additionally, it provides support for CSS variables to customize badge positioning\r\n *\r\n * ```css\r\n * --zen-badge-offset: unset; // Controls the overall offset of the badge\r\n * --zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\r\n * --zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\r\n * ```\r\n *\r\n * @example Text 🦆\r\n *\r\n * @component\r\n * @selector `zen-badge`,`[zenBadge]`\r\n *\r\n * @license BSD-2-Clause\r\n * @author Konrad Stępień \r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-badge,[zenBadge]',\r\n standalone: true,\r\n template: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n `,\r\n styleUrl: './badge.component.scss',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenBadgeComponent {}\r\n",
"styleUrl": "./badge.component.scss",
"assetsDirs": [],
"styleUrlsData": "",
@@ -240,6 +240,170 @@
}
}
},
+ {
+ "name": "ZenSwitchComponent",
+ "id": "component-ZenSwitchComponent-6016a30f0e96e5474d8cc5f7e8c943d1950b807b10ed47c79f96b0beed3de9f8b8a9f7d89dc6a67ebb57392a06abe19e63e75d8c489098f1c5469a021a893baf",
+ "file": "projects/cli/schematics/components/files/switch/zen-switch.component.ts",
+ "changeDetection": "ChangeDetectionStrategy.OnPush",
+ "encapsulation": [],
+ "entryComponents": [],
+ "inputs": [],
+ "outputs": [],
+ "providers": [
+ {
+ "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ZenSwitchComponent), multi: true,\n}",
+ "type": "component"
+ }
+ ],
+ "selector": "zen-switch",
+ "styleUrls": [],
+ "styles": [],
+ "templateUrl": ["./zen-switch.component.html"],
+ "viewProviders": [],
+ "hostDirectives": [],
+ "inputsClass": [
+ {
+ "name": "checked",
+ "defaultValue": "false",
+ "deprecated": false,
+ "deprecationMessage": "",
+ "type": "",
+ "optional": false,
+ "description": "
Model for the checked state of the switch.
\n",
+ "line": 47,
+ "rawdescription": "\nModel for the checked state of the switch.",
+ "required": false
+ },
+ {
+ "name": "disabled",
+ "defaultValue": "false",
+ "deprecated": false,
+ "deprecationMessage": "",
+ "type": "",
+ "optional": false,
+ "description": "
Model for the disabled state of the switch.
\n",
+ "line": 50,
+ "rawdescription": "\nModel for the disabled state of the switch.",
+ "required": false
+ }
+ ],
+ "outputsClass": [],
+ "propertiesClass": [
+ {
+ "name": "checked",
+ "defaultValue": "false",
+ "deprecated": false,
+ "deprecationMessage": "",
+ "type": "",
+ "optional": false,
+ "description": "
Model for the checked state of the switch.
\n",
+ "line": 47,
+ "rawdescription": "\nModel for the checked state of the switch.",
+ "required": false
+ },
+ {
+ "name": "disabled",
+ "defaultValue": "false",
+ "deprecated": false,
+ "deprecationMessage": "",
+ "type": "",
+ "optional": false,
+ "description": "