@ibyar/core 3.0.0 → 3.1.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.
@@ -268,6 +268,7 @@ export interface ComponentOptions<T = Type<any>> {
268
268
  /**
269
269
  * - use `manual` for no zone.js patch effect applied,
270
270
  * and used for manual change detection for heavily process components.
271
+ * `better to use with signals`.
271
272
  *
272
273
  * - use `proxy` zone for automatic detect changes without use of `zone.js`
273
274
  *
@@ -1 +1 @@
1
- {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/core/annotation/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGnE,MAAM,WAAW,gBAAgB;IAEhC;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;OAcG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CAEtB;AAED,MAAM,WAAW,iBAAiB;IACjC,SAAS,CAAC,EAAE,IAAI,CAAC,wBAAwB,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;CACzE;AAED,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;IAE9C;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAEnC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAE9C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,qBAAqB,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;IAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,qBAAqB,CAAC;IAE7E;;;OAGG;IACH,aAAa,CAAC,EAAE,cAAc,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAEzC;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE,CAAC;IAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkFG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;IAEnD;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;CAC7C;AAED,MAAM,WAAW,YAAY;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC5B,QAAQ,EAAE,MAAM,GAAG,OAAO,WAAW,GAAG,wBAAwB,CAAC;IACjE,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,eAAe,CAAC;AAGhE,MAAM,WAAW,aAAa;IAC7B;;GAEE;IACF,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;CAE7C"}
1
+ {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/core/annotation/options.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/core/annotation/options.ts"],"names":[],"mappings":"","sourcesContent":["import type { Type } from '../utils/typeof.js';\nimport type { DomNode } from '@ibyar/elements';\nimport type { TemplateUrl } from '../utils/path.js';\nimport type { ZoneType } from '../zone/bootstrap.js';\nimport type { ValueControl } from '../component/custom-element.js';\n\n\nexport interface DirectiveOptions {\n\n\t/**\n\t * the name of the directive which is used in the template\n\t * \n\t * a structural directive name should start with `*`,\n\t * and an attributes directive should not.\n\t */\n\tselector: string;\n\n\t/**\n\t * export this directive to the HTML template scope,\n\t * \n\t * it can be accessed by the template reference name \n\t * ex:\n\t * ```ts\n\t * \n\t * \n\t * \n\t * Directive({\n\t * \tselector: '*tooltip',\n\t * \texportAs: 'tooltip'\n\t * })\n\t * ```\n\t * \n\t * in your component\n\t * \n\t * ```html\n\t * <a tooltip=\"I'm a tooltip!!\" #tooltip=\"tooltip\">I'm a link</a>\n\t * <button (click)=\"tooltip.toggleTooltip()\">Toggle tooltip</button>\n\t * ```\n\t * \n\t */\n\n\texportAs?: string;\n\n\t/**\n\t * - use `manual` for no zone.js patch effect applied,\n\t * and used for manual change detection for heavily process components.\n\t * \n\t * - use `proxy` zone for automatic detect changes without use of `zone.js`\n\t * \n\t * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,\n\t * `setInterval` and `fetch` and `XMLHttpRequest`, etc...\n\t * make sure that `zone.js` is imported in the polyfills module. \n\t * \n\t * if no value specified, the value will be initialized by the custom element `web component` zone,\n\t * - if the web component zone is `manual`, the directive zone also will be `manual`, expect weird behavior.\n\t * - if the web component zone is `proxy`, the directive zone also will be `proxy`.\n\t * - if the web component zone is `aurora`, the directive zone also will be `aurora` and will get the benefit of `zone.js`.\n\t */\n\tzone?: ZoneType;\n\n\t/**\n\t * name of possible structure directives successor\n\t */\n\tsuccessors?: string[];\n\n}\n\nexport interface InjectableOptions {\n\tprovideIn?: Type<CustomElementConstructor> | 'root' | 'platform' | 'any';\n}\n\nexport interface PipeOptions {\n\tname: string;\n\tasynchronous?: boolean;\n}\n\nexport interface ComponentOptions<T = Type<any>> {\n\n\t/**\n\t * a tag name for the component,\n\t * if the tag name is valid custom element name, the view class will be a custom element,\n\t * otherwise an HTMLUnknownElement will be created\n\t */\n\tselector: string;\n\n\t/**\n\t * add html file url path to fetch,\n\t * templateUrl had propriety than template, and will override it.\n\t *\n\t * Can provide file name as \"person-view.html\" will resolved \n\t * as 'http://site-address.org/persin-view.html',\n\t * \n\t * OR as an object { moduleMeta: import.meta, filename: 'person-edit.html' }\n\t * let (import.meta = '/person/person.js') will resolved \n\t * as 'http://site-address.org/person/person-edit.html',\n\t * \n\t * OR as an object { moduleMeta: import.meta }\n\t * let (import.meta = '/person/person.js') will resolved as 'http://site-address.org/person/person.html'.\n\t * \n\t * if url not found, component will not be defined,\n\t * \n\t * if you didn't use webpack or rollup.js or any bundler, \n\t * you should copy the html files to its folder by yourself. \n\t */\n\ttemplateUrl?: TemplateUrl | string;\n\n\t/**\n\t * template: html string\n\t * \tif template === null || undefined ==> it had nothing to render, \n\t * and may be inherit from an html element\n\t * \n\t * write a template, as inline string, represent a a valid html.\n\t * \t\t\t\t\n\t */\n\ttemplate?: string | DomNode;\n\n\t/**\n\t * style for this element\n\t */\n\tstyles?: string | { [key: string]: string }[];\n\n\t/**\n\t * what basic element should the new component inherit from,\n\t * the tag name to inherit from as 'a', 'div', 'table', 'td', 'th', 'tr', etc ...\n\t * also, support extends a custom element tag name.\n\t */\n\textend?: keyof HTMLElementTagNameMap | `${string}-${string}`;\n\n\t/**\n\t * An encapsulation policy for the template and CSS styles. One of:\n\t * 'custom': Use global CSS without any encapsulation.\n\t * 'shadow-dom': Use Shadow DOM v1 to encapsulate styles.\n\t * \n\t * 'template': like 'custom', with load the template from the document ('index.html' file)\n\t * \t \t\t\tthat had the same id as the component \"selector\".\n\t * 'shadow-dom-template': like 'shadowDom', and load template by selector id.\n\t * \n\t * Both 'template' & 'shadow-dom-template' encapsulation type:\n\t * should had attributes name like lowercase,\n\t * \tthe browser itself, will convert all attributes to lowercase\n\t * \n\t * ```typescript\n\t * \t\tpersonAge = input<number>(20, {alias: 'personage'});\n\t * \t\tpropName = input<string>(undefined, {alias: 'propname'});\n\t *\t\tsaveButtonClick = output<Persons>({alias: 'savebuttonclick'});\n\t *\t\treadonly view = view(HTMLFormElement);\n\t * ```\n\t * \n\t * any app root element as \n\t * \n\t * ```html\n\t * <app-root></app-root>\n\t * ```\n\t * \n\t * the supported bind options is 'One way binding *(as passing data only)'\n\t * and 'template parsing' and 'event binding' syntax, HTML (angular) like.\n\t * it load its attributes from 'window object'\n\t * \n\t * so to pass date to A root element, \n\t * \n\t * ```html\n\t * <script>\n\t * \tconst appVersion = '0.1.504';\n\t * \tfunction onRootAppClick() {\n\t *\t\tconsole.log('root app clicked');\n\t * \t}\n\t * \tfunction onSave(data){\n\t *\t\tconsole.log('root app save', data);\n\t * \t}\n\t * </script>\n\t * <app-root [version]=\"appVersion\" \n\t * \t\tonclick=\"onRootAppClick()\"\n\t * \t\t(save)=\"onSave()\" >\n\t * </app-root>\n\t * ```\n\t * \n\t * default is 'custom'\n\t * @type {'custom' | 'shadowDom' | 'template' | 'shadowDom-template'}\n\t */\n\tencapsulation?: 'custom' | 'shadow-dom' | 'template' | 'shadow-dom-template';\n\n\t/**\n\t * default: 'open' when encapsulation used,\n\t * otherwise it is undefined and will not attach shadow root element.\n\t */\n\tshadowDomMode?: ShadowRootMode;\n\n\t/**\n\t * default: false\n\t */\n\tshadowDomDelegatesFocus?: boolean;\n\n\t/**\n\t * shadow root initialization options,\n\t * default mode: `open`, delegatesFocus: `false` and slotAssignment: `manual`\n\t */\n\tshadowRootInit?: Partial<ShadowRootInit>;\n\n\t/**\n\t * \n\t */\n\tdisabledFeatures?: ('internals' | 'shadow')[];\n\n\t/**\n\t * Create a custom form-associated element with HTMLElement.attachInternals\n\t * default: false\n\t * \n\t * if the value is `true` it is expected from the model class to implement `ValueControl<T>` interface\n\t * \n\t * otherwise you can register another class that implement `ValueControl<T>`,\n\t * in case if you want split the model and the value controller.\n\t * \n\t * #### Usage Notes:\n\t * \n\t * ```ts\n\t * \n\t * @Component({\n\t * \tselector: 'custom-message',\n\t * \ttemplate: `\n\t * \t\t<label for=\"message\">Message</label>\n\t * \t\t<textarea id=\"message\" [(value)]=\"message\" [disabled]=\"disabled\" (change)=\"onMessageChange($event.target.value)\"></textarea>\n\t * \t`,\n\t * \tformAssociated: true,\n\t * \t// formAssociated: CustomMessage,\n\t * })\n\t * export class CustomMessage implements ValueControl<string> {\n\t * \n\t * \tprivate message: string | null = '';\n\t * \tprivate disabled: boolean = false;\n\t * \tprivate _onChange: (_: any) => void = () => {};\n\t * \n\t * \twriteValue({ value, mode }: WriteValueOptions<string>) {\n\t * \t\tthis.message = mode !== 'reset' ? value : '';\n\t * \t}\n\t * \n\t * \tregisterOnChange(fn: (_: any) => void): void {\n\t * \t\tthis._onChange = fn;\n\t * \t}\n\t * \n\t * \tsetDisabledState(isDisabled: boolean) {\n\t * \t\tthis.disabled = isDisabled;\n\t * \t}\n\t * \n\t * \tonMessageChange(message: string) {\n\t * \t\tthis._onChange(message);\n\t * \t}\n\t * \t\n\t * }\n\t * \n\t * \n\t * export class CustomInputValueControl implements ValueControl<number> {\n\t * \n\t * \tprivate _value: number | null = null;\n\t * \tprivate _disabled: boolean = false;\n\t * \tprivate _onChange: (_: any) => void = () => {};\n\t * \n\t * \twriteValue({ value, mode }: WriteValueOptions<number>) {\n\t * \t\tthis._value = mode !== 'reset' ? value : null;\n\t * \t}\n\t * \n\t * \tregisterOnChange(fn: (_: any) => void): void {\n\t * \t\tthis._onChange = fn;\n\t * \t}\n\t * \n\t * \tsetDisabledState(isDisabled: boolean) {\n\t * \t\tthis._disabled = isDisabled;\n\t * \t}\n\t * \t\n\t * }\n\t * \n\t * @Component({\n\t * \tselector: 'custom-input',\n\t * \textend: 'input',\n\t * \tformAssociated: CustomInputValueControl,\n\t * })\n\t * export class CustomInputElement {\n\t * \t\n\t * \tview = view<HTMLInputElement>();\n\t * \n\t * \tonInit() {\n\t * \t\tthis.view.type = 'number';\n\t * \t}\n\t * }\n\t * \n\t * ```\n\t */\n\tformAssociated?: boolean | Type<ValueControl<any>>;\n\n\t/**\n\t * - use `manual` for no zone.js patch effect applied,\n\t * and used for manual change detection for heavily process components.\n\t * \n\t * - use `proxy` zone for automatic detect changes without use of `zone.js`\n\t * \n\t * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,\n\t * `setInterval` and `fetch` and `XMLHttpRequest`, etc...\n\t * make sure that `zone.js` is imported in the polyfills module. \n\t * \n\t * the default value is the platform zone type which can be changed by:\n\t * \n\t * ```js\n\t * bootstrapZone('manual')\n\t * bootstrapZone('proxy')\n\t * bootstrapZone('aurora')\n\t * ```\n\t * \n\t * if `bootstrapZone` never been called, then the default zone is a `manual`.\n\t */\n\tzone?: ZoneType;\n\n\t/**\n\t * The imports property specifies the component's template dependencies — those directives, components, and pipes that can be used within its template.\n\t */\n\timports?: (Type<any> | ReadonlyArray<any>)[];\n}\n\nexport interface ChildOptions {\n\t[key: string]: any;\n}\n\nexport interface ViewChildOpt {\n\tselector: string | typeof HTMLElement | CustomElementConstructor;\n\tchildOptions?: ChildOptions;\n}\n\nexport type OutputEventInit = Omit<EventInit, 'cancelable'>;\nexport type OutputOptions = { name?: string } & OutputEventInit;\n\n\nexport interface ModuleOptions {\n\t/**\n * The imports property specifies the component's template dependencies — those directives, components, and pipes that can be used within its template.\n */\n\timports?: (Type<any> | ReadonlyArray<any>)[];\n\n}\n"]}
1
+ {"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/core/annotation/options.ts"],"names":[],"mappings":"","sourcesContent":["import type { Type } from '../utils/typeof.js';\nimport type { DomNode } from '@ibyar/elements';\nimport type { TemplateUrl } from '../utils/path.js';\nimport type { ZoneType } from '../zone/bootstrap.js';\nimport type { ValueControl } from '../component/custom-element.js';\n\n\nexport interface DirectiveOptions {\n\n\t/**\n\t * the name of the directive which is used in the template\n\t * \n\t * a structural directive name should start with `*`,\n\t * and an attributes directive should not.\n\t */\n\tselector: string;\n\n\t/**\n\t * export this directive to the HTML template scope,\n\t * \n\t * it can be accessed by the template reference name \n\t * ex:\n\t * ```ts\n\t * \n\t * \n\t * \n\t * Directive({\n\t * \tselector: '*tooltip',\n\t * \texportAs: 'tooltip'\n\t * })\n\t * ```\n\t * \n\t * in your component\n\t * \n\t * ```html\n\t * <a tooltip=\"I'm a tooltip!!\" #tooltip=\"tooltip\">I'm a link</a>\n\t * <button (click)=\"tooltip.toggleTooltip()\">Toggle tooltip</button>\n\t * ```\n\t * \n\t */\n\n\texportAs?: string;\n\n\t/**\n\t * - use `manual` for no zone.js patch effect applied,\n\t * and used for manual change detection for heavily process components.\n\t * \n\t * - use `proxy` zone for automatic detect changes without use of `zone.js`\n\t * \n\t * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,\n\t * `setInterval` and `fetch` and `XMLHttpRequest`, etc...\n\t * make sure that `zone.js` is imported in the polyfills module. \n\t * \n\t * if no value specified, the value will be initialized by the custom element `web component` zone,\n\t * - if the web component zone is `manual`, the directive zone also will be `manual`, expect weird behavior.\n\t * - if the web component zone is `proxy`, the directive zone also will be `proxy`.\n\t * - if the web component zone is `aurora`, the directive zone also will be `aurora` and will get the benefit of `zone.js`.\n\t */\n\tzone?: ZoneType;\n\n\t/**\n\t * name of possible structure directives successor\n\t */\n\tsuccessors?: string[];\n\n}\n\nexport interface InjectableOptions {\n\tprovideIn?: Type<CustomElementConstructor> | 'root' | 'platform' | 'any';\n}\n\nexport interface PipeOptions {\n\tname: string;\n\tasynchronous?: boolean;\n}\n\nexport interface ComponentOptions<T = Type<any>> {\n\n\t/**\n\t * a tag name for the component,\n\t * if the tag name is valid custom element name, the view class will be a custom element,\n\t * otherwise an HTMLUnknownElement will be created\n\t */\n\tselector: string;\n\n\t/**\n\t * add html file url path to fetch,\n\t * templateUrl had propriety than template, and will override it.\n\t *\n\t * Can provide file name as \"person-view.html\" will resolved \n\t * as 'http://site-address.org/persin-view.html',\n\t * \n\t * OR as an object { moduleMeta: import.meta, filename: 'person-edit.html' }\n\t * let (import.meta = '/person/person.js') will resolved \n\t * as 'http://site-address.org/person/person-edit.html',\n\t * \n\t * OR as an object { moduleMeta: import.meta }\n\t * let (import.meta = '/person/person.js') will resolved as 'http://site-address.org/person/person.html'.\n\t * \n\t * if url not found, component will not be defined,\n\t * \n\t * if you didn't use webpack or rollup.js or any bundler, \n\t * you should copy the html files to its folder by yourself. \n\t */\n\ttemplateUrl?: TemplateUrl | string;\n\n\t/**\n\t * template: html string\n\t * \tif template === null || undefined ==> it had nothing to render, \n\t * and may be inherit from an html element\n\t * \n\t * write a template, as inline string, represent a a valid html.\n\t * \t\t\t\t\n\t */\n\ttemplate?: string | DomNode;\n\n\t/**\n\t * style for this element\n\t */\n\tstyles?: string | { [key: string]: string }[];\n\n\t/**\n\t * what basic element should the new component inherit from,\n\t * the tag name to inherit from as 'a', 'div', 'table', 'td', 'th', 'tr', etc ...\n\t * also, support extends a custom element tag name.\n\t */\n\textend?: keyof HTMLElementTagNameMap | `${string}-${string}`;\n\n\t/**\n\t * An encapsulation policy for the template and CSS styles. One of:\n\t * 'custom': Use global CSS without any encapsulation.\n\t * 'shadow-dom': Use Shadow DOM v1 to encapsulate styles.\n\t * \n\t * 'template': like 'custom', with load the template from the document ('index.html' file)\n\t * \t \t\t\tthat had the same id as the component \"selector\".\n\t * 'shadow-dom-template': like 'shadowDom', and load template by selector id.\n\t * \n\t * Both 'template' & 'shadow-dom-template' encapsulation type:\n\t * should had attributes name like lowercase,\n\t * \tthe browser itself, will convert all attributes to lowercase\n\t * \n\t * ```typescript\n\t * \t\tpersonAge = input<number>(20, {alias: 'personage'});\n\t * \t\tpropName = input<string>(undefined, {alias: 'propname'});\n\t *\t\tsaveButtonClick = output<Persons>({alias: 'savebuttonclick'});\n\t *\t\treadonly view = view(HTMLFormElement);\n\t * ```\n\t * \n\t * any app root element as \n\t * \n\t * ```html\n\t * <app-root></app-root>\n\t * ```\n\t * \n\t * the supported bind options is 'One way binding *(as passing data only)'\n\t * and 'template parsing' and 'event binding' syntax, HTML (angular) like.\n\t * it load its attributes from 'window object'\n\t * \n\t * so to pass date to A root element, \n\t * \n\t * ```html\n\t * <script>\n\t * \tconst appVersion = '0.1.504';\n\t * \tfunction onRootAppClick() {\n\t *\t\tconsole.log('root app clicked');\n\t * \t}\n\t * \tfunction onSave(data){\n\t *\t\tconsole.log('root app save', data);\n\t * \t}\n\t * </script>\n\t * <app-root [version]=\"appVersion\" \n\t * \t\tonclick=\"onRootAppClick()\"\n\t * \t\t(save)=\"onSave()\" >\n\t * </app-root>\n\t * ```\n\t * \n\t * default is 'custom'\n\t * @type {'custom' | 'shadowDom' | 'template' | 'shadowDom-template'}\n\t */\n\tencapsulation?: 'custom' | 'shadow-dom' | 'template' | 'shadow-dom-template';\n\n\t/**\n\t * default: 'open' when encapsulation used,\n\t * otherwise it is undefined and will not attach shadow root element.\n\t */\n\tshadowDomMode?: ShadowRootMode;\n\n\t/**\n\t * default: false\n\t */\n\tshadowDomDelegatesFocus?: boolean;\n\n\t/**\n\t * shadow root initialization options,\n\t * default mode: `open`, delegatesFocus: `false` and slotAssignment: `manual`\n\t */\n\tshadowRootInit?: Partial<ShadowRootInit>;\n\n\t/**\n\t * \n\t */\n\tdisabledFeatures?: ('internals' | 'shadow')[];\n\n\t/**\n\t * Create a custom form-associated element with HTMLElement.attachInternals\n\t * default: false\n\t * \n\t * if the value is `true` it is expected from the model class to implement `ValueControl<T>` interface\n\t * \n\t * otherwise you can register another class that implement `ValueControl<T>`,\n\t * in case if you want split the model and the value controller.\n\t * \n\t * #### Usage Notes:\n\t * \n\t * ```ts\n\t * \n\t * @Component({\n\t * \tselector: 'custom-message',\n\t * \ttemplate: `\n\t * \t\t<label for=\"message\">Message</label>\n\t * \t\t<textarea id=\"message\" [(value)]=\"message\" [disabled]=\"disabled\" (change)=\"onMessageChange($event.target.value)\"></textarea>\n\t * \t`,\n\t * \tformAssociated: true,\n\t * \t// formAssociated: CustomMessage,\n\t * })\n\t * export class CustomMessage implements ValueControl<string> {\n\t * \n\t * \tprivate message: string | null = '';\n\t * \tprivate disabled: boolean = false;\n\t * \tprivate _onChange: (_: any) => void = () => {};\n\t * \n\t * \twriteValue({ value, mode }: WriteValueOptions<string>) {\n\t * \t\tthis.message = mode !== 'reset' ? value : '';\n\t * \t}\n\t * \n\t * \tregisterOnChange(fn: (_: any) => void): void {\n\t * \t\tthis._onChange = fn;\n\t * \t}\n\t * \n\t * \tsetDisabledState(isDisabled: boolean) {\n\t * \t\tthis.disabled = isDisabled;\n\t * \t}\n\t * \n\t * \tonMessageChange(message: string) {\n\t * \t\tthis._onChange(message);\n\t * \t}\n\t * \t\n\t * }\n\t * \n\t * \n\t * export class CustomInputValueControl implements ValueControl<number> {\n\t * \n\t * \tprivate _value: number | null = null;\n\t * \tprivate _disabled: boolean = false;\n\t * \tprivate _onChange: (_: any) => void = () => {};\n\t * \n\t * \twriteValue({ value, mode }: WriteValueOptions<number>) {\n\t * \t\tthis._value = mode !== 'reset' ? value : null;\n\t * \t}\n\t * \n\t * \tregisterOnChange(fn: (_: any) => void): void {\n\t * \t\tthis._onChange = fn;\n\t * \t}\n\t * \n\t * \tsetDisabledState(isDisabled: boolean) {\n\t * \t\tthis._disabled = isDisabled;\n\t * \t}\n\t * \t\n\t * }\n\t * \n\t * @Component({\n\t * \tselector: 'custom-input',\n\t * \textend: 'input',\n\t * \tformAssociated: CustomInputValueControl,\n\t * })\n\t * export class CustomInputElement {\n\t * \t\n\t * \tview = view<HTMLInputElement>();\n\t * \n\t * \tonInit() {\n\t * \t\tthis.view.type = 'number';\n\t * \t}\n\t * }\n\t * \n\t * ```\n\t */\n\tformAssociated?: boolean | Type<ValueControl<any>>;\n\n\t/**\n\t * - use `manual` for no zone.js patch effect applied,\n\t * and used for manual change detection for heavily process components.\n\t * `better to use with signals`.\n\t * \n\t * - use `proxy` zone for automatic detect changes without use of `zone.js`\n\t * \n\t * - use `aurora` for detection events like `rxjs` observables, `setTimeout`,\n\t * `setInterval` and `fetch` and `XMLHttpRequest`, etc...\n\t * make sure that `zone.js` is imported in the polyfills module. \n\t * \n\t * the default value is the platform zone type which can be changed by:\n\t * \n\t * ```js\n\t * bootstrapZone('manual')\n\t * bootstrapZone('proxy')\n\t * bootstrapZone('aurora')\n\t * ```\n\t * \n\t * if `bootstrapZone` never been called, then the default zone is a `manual`.\n\t */\n\tzone?: ZoneType;\n\n\t/**\n\t * The imports property specifies the component's template dependencies — those directives, components, and pipes that can be used within its template.\n\t */\n\timports?: (Type<any> | ReadonlyArray<any>)[];\n}\n\nexport interface ChildOptions {\n\t[key: string]: any;\n}\n\nexport interface ViewChildOpt {\n\tselector: string | typeof HTMLElement | CustomElementConstructor;\n\tchildOptions?: ChildOptions;\n}\n\nexport type OutputEventInit = Omit<EventInit, 'cancelable'>;\nexport type OutputOptions = { name?: string } & OutputEventInit;\n\n\nexport interface ModuleOptions {\n\t/**\n * The imports property specifies the component's template dependencies — those directives, components, and pipes that can be used within its template.\n */\n\timports?: (Type<any> | ReadonlyArray<any>)[];\n\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibyar/core",
3
- "version": "3.0.0",
3
+ "version": "3.1.1",
4
4
  "description": "Ibyar core, Implements Aurora's core functionality, low-level services, and utilities",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/ibyar/aurora/tree/dev/packages/core",
@@ -35,9 +35,9 @@
35
35
  "access": "public"
36
36
  },
37
37
  "dependencies": {
38
- "@ibyar/decorators": "^3.0.0",
39
- "@ibyar/elements": "^3.0.0",
40
- "@ibyar/expressions": "^3.0.0",
38
+ "@ibyar/decorators": "^3.1.1",
39
+ "@ibyar/elements": "^3.1.1",
40
+ "@ibyar/expressions": "^3.1.1",
41
41
  "tslib": "^2.8.1"
42
42
  },
43
43
  "peerDependencies": {
@@ -78,5 +78,5 @@
78
78
  "typescript",
79
79
  "front-end"
80
80
  ],
81
- "gitHead": "16de8aacc7ceb07790c07edd001955813eb15721"
81
+ "gitHead": "9532d01b23f038ee839911245e7ccf1f24add1d6"
82
82
  }