Welcome, {{@firstName}} {{@lastName}}!
\n * ```\n */\n args;\n get isDestroying() {\n return DESTROYING.get(this) || false;\n }\n get isDestroyed() {\n return DESTROYED.get(this) || false;\n }\n\n /**\n * Called before the component has been removed from the DOM.\n */\n willDestroy() {}\n}\n\nclass BaseComponentManager {\n owner;\n constructor(owner) {\n this.owner = owner;\n }\n createComponent(ComponentClass, args) {\n if (DEBUG) {\n ARGS_SET.set(args.named, true);\n }\n return new ComponentClass(this.owner, args.named);\n }\n getContext(component) {\n return component;\n }\n}\n\nconst CAPABILITIES = capabilities('3.13', {\n destructor: true,\n asyncLifecycleCallbacks: false,\n updateHook: false\n});\nfunction scheduledDestroyComponent(component) {\n if (component.isDestroyed) {\n return;\n }\n destroy(component);\n setDestroyed(component);\n}\n\n/**\n * This component manager runs in Ember.js environments and extends the base component manager to:\n *\n * 1. Properly destroy the component's associated `meta` data structure\n * 2. Schedule destruction using Ember's runloop\n */\nclass EmberGlimmerComponentManager extends BaseComponentManager {\n capabilities = CAPABILITIES;\n destroyComponent(component) {\n if (component.isDestroying) {\n return;\n }\n setDestroying(component);\n schedule('actions', component, component.willDestroy);\n schedule('destroy', this, scheduledDestroyComponent, component);\n }\n}\n\n/**\n A component is a reusable UI element that consists of a `.hbs` template and an\n optional JavaScript class that defines its behavior. For example, someone\n might make a `button` in the template and handle the click behavior in the\n JavaScript file that shares the same name as the template.\n\n Components are broken down into two categories:\n\n - Components _without_ JavaScript, that are based only on a template. These\n are called Template-only or TO components.\n - Components _with_ JavaScript, which consist of a template and a backing\n class.\n\n Ember ships with two types of JavaScript classes for components:\n\n 1. Glimmer components, imported from `@glimmer/component`, which are the\n default components for Ember Octane (3.15) and more recent editions.\n 2. Classic components, imported from `@ember/component`, which were the\n default for older editions of Ember (pre 3.15).\n\n Below is the documentation for Template-only and Glimmer components. If you\n are looking for the API documentation for Classic components, it is\n [available here](/ember/release/classes/Component). The source code for\n Glimmer components can be found in [`@glimmer/component`](https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/component).\n\n ## Defining a Template-only Component\n\n The simplest way to create a component is to create a template file in\n `app/templates/components`. For example, if you name a template\n `app/templates/components/person-profile.hbs`:\n\n ```app/templates/components/person-profile.hbs\n{{@person.name}}
\n{{@person.signature}}
\n ```\n\n You will be able to use `Tomster
\n![](\"https://emberjs.com/tomster.jpg\")
\n Out of office this week
\n ```\n\n ## File System Nesting\n\n Components can be nested inside sub-folders for logical groupping. For\n example, if we placed our template in\n `app/templates/components/person/short-profile.hbs`, we can invoke it as\n `{{@person.name}}
\n {{yield}}\n ```\n\n We could then invoke it like this:\n\n ```handlebars\nAdmin mode
\nAdmin mode
\n {{/person-profile}}\n ```\n\n And the content passed in between the brackets of the component would be\n rendered in the same place as the `{{yield}}` within it, replacing it.\n\n Blocks are executed in their original context, meaning they have access to the\n scope and any in-scope variables where they were defined.\n\n ### Passing parameters to blocks\n\n You can also pass positional parameters to `{{yield}}`, which are then made\n available in the block:\n\n ```app/templates/components/person-profile.hbs\n