@xui/aspect-ratio 2.0.0-alpha.20 → 2.0.0-alpha.22
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.
|
@@ -14,6 +14,7 @@ import { xui } from '@xui/core';
|
|
|
14
14
|
* ```
|
|
15
15
|
*/
|
|
16
16
|
class XuiAspectRatio {
|
|
17
|
+
/** Extra classes, merged into the component's own rather than replacing them. */
|
|
17
18
|
class = input('', /* @ts-ignore */
|
|
18
19
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
19
20
|
/** Width divided by height, e.g. `16 / 9` or `1`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-aspect-ratio.mjs","sources":["../../../../../../libs/ui/aspect-ratio/xui/src/lib/aspect-ratio.ts","../../../../../../libs/ui/aspect-ratio/xui/src/index.ts","../../../../../../libs/ui/aspect-ratio/xui/src/xui-aspect-ratio.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n/**\n * Locks its content to a fixed width : height `ratio`, so media and embeds keep\n * their shape as the column resizes. Give it a width (the default is 100%);\n * the height follows from the ratio.\n *\n * ```html\n * <xui-aspect-ratio [ratio]=\"16 / 9\">\n * <img src=\"cover.jpg\" alt=\"\" />\n * </xui-aspect-ratio>\n * ```\n */\n@Component({\n selector: 'xui-aspect-ratio',\n template: `<ng-content />`,\n host: {\n '[class]': 'computedClass()',\n '[style.aspect-ratio]': 'ratio()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiAspectRatio {\n readonly class = input<ClassValue>('');\n /** Width divided by height, e.g. `16 / 9` or `1`. */\n readonly ratio = input(1, { transform: numberAttribute });\n\n protected readonly computedClass = computed(() =>\n xui(\n 'block w-full overflow-hidden [&>*]:h-full [&>*]:w-full [&>img]:object-cover [&>video]:object-cover',\n this.class()\n )\n );\n}\n","import { XuiAspectRatio } from './lib/aspect-ratio';\n\nexport * from './lib/aspect-ratio';\n\nexport const XuiAspectRatioImports = [XuiAspectRatio] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;AAUG;MAWU,cAAc,CAAA
|
|
1
|
+
{"version":3,"file":"xui-aspect-ratio.mjs","sources":["../../../../../../libs/ui/aspect-ratio/xui/src/lib/aspect-ratio.ts","../../../../../../libs/ui/aspect-ratio/xui/src/index.ts","../../../../../../libs/ui/aspect-ratio/xui/src/xui-aspect-ratio.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n/**\n * Locks its content to a fixed width : height `ratio`, so media and embeds keep\n * their shape as the column resizes. Give it a width (the default is 100%);\n * the height follows from the ratio.\n *\n * ```html\n * <xui-aspect-ratio [ratio]=\"16 / 9\">\n * <img src=\"cover.jpg\" alt=\"\" />\n * </xui-aspect-ratio>\n * ```\n */\n@Component({\n selector: 'xui-aspect-ratio',\n template: `<ng-content />`,\n host: {\n '[class]': 'computedClass()',\n '[style.aspect-ratio]': 'ratio()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiAspectRatio {\n /** Extra classes, merged into the component's own rather than replacing them. */\n readonly class = input<ClassValue>('');\n /** Width divided by height, e.g. `16 / 9` or `1`. */\n readonly ratio = input(1, { transform: numberAttribute });\n\n protected readonly computedClass = computed(() =>\n xui(\n 'block w-full overflow-hidden [&>*]:h-full [&>*]:w-full [&>img]:object-cover [&>video]:object-cover',\n this.class()\n )\n );\n}\n","import { XuiAspectRatio } from './lib/aspect-ratio';\n\nexport * from './lib/aspect-ratio';\n\nexport const XuiAspectRatioImports = [XuiAspectRatio] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;AAUG;MAWU,cAAc,CAAA;;IAEhB,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;;IAE7B,KAAK,GAAG,KAAK,CAAC,CAAC,6EAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AAEtC,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG,CACD,oGAAoG,EACpG,IAAI,CAAC,KAAK,EAAE,CACb;sFACF;0HAXU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,+ZARf,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQf,cAAc,EAAA,UAAA,EAAA,CAAA;kBAV1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,iBAAiB;AAC5B,wBAAA,sBAAsB,EAAE;AACzB,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC;AAClC,iBAAA;;;ACpBM,MAAM,qBAAqB,GAAG,CAAC,cAAc;;ACJpD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/aspect-ratio",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.22",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/core": "22",
|
|
40
|
-
"@xui/core": "2.0.0-alpha.
|
|
40
|
+
"@xui/core": "2.0.0-alpha.22",
|
|
41
41
|
"clsx": "^2.1.1"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
@@ -13,6 +13,7 @@ import { ClassValue } from 'clsx';
|
|
|
13
13
|
* ```
|
|
14
14
|
*/
|
|
15
15
|
declare class XuiAspectRatio {
|
|
16
|
+
/** Extra classes, merged into the component's own rather than replacing them. */
|
|
16
17
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
17
18
|
/** Width divided by height, e.g. `16 / 9` or `1`. */
|
|
18
19
|
readonly ratio: _angular_core.InputSignalWithTransform<number, unknown>;
|